Responsive Headers & Logos - Mẹo và cạm bẫy

Khái niệm thiết kế web đáp ứng đã thấm vào web và trở thành một yếu tố chính cho các nhà phát triển frontend. Không thể phủ nhận giá trị của thiết kế đáp ứng trong thế giới hiện đại nhưng có một số khó khăn để hiểu đầy đủ về cách thiết kế bố trí đáp ứng đúng cách.

Chủ đề có thể kéo dài vì có rất nhiều lĩnh vực duy nhất của trang web nhưng tập trung vào các yếu tố riêng lẻ có thể giúp bạn hiểu rõ hơn về mục tiêu của người dùng và cách đạt được những mục tiêu đó với thiết kế đáp ứng.

Tôi muốn che lời khuyên thiết kế cho các tiêu đề, logo, và menu điều hướng, khi họ liên quan đến thiết kế đáp ứng. Thực hiện các đề xuất này khi chúng áp dụng cho công việc của bạn và chắc chắn thiết kế giao diện của bạn với hành vi người dùng trong tâm trí.

Navbars mỏng hơn

Trên màn hình lớn, việc có các tiêu đề lớn, thậm chí các tiêu đề quá khổ với các tầng liên kết đa cấp là điều bình thường. Nhưng màn hình nhỏ hơn không có cùng không gian và nên được hạn chế khi cần thiết.

Vì các ứng dụng di động gốc thường có tiêu đề cố định, đây là thực tế phổ biến trong thiết kế đáp ứng quá. Một tiêu đề cố định cũng nên thu nhỏ lại khi trên các thiết bị nhỏ hơn: điều này để lại nhiều chỗ hơn cho nội dung, nhưng vẫn cho phép người đọc truy cập trực tiếp vào tiêu đề & điều hướng.

Ví dụ như bố cục Cartoon Brew trên màn hình kích thước đầy đủ và trên thiết bị di động.

Ở điểm dừng 600px, điều hướng thu nhỏ lại gần một nửa chiều cao của nó trên trang. Điều này làm cho cả logo và menu điều hướng có thể nhấp nhỏ hơn, nhưng chúng tỷ lệ nhiều hơn đến không gian màn hình tương đối.

Cũng xem xét rằng Cartoon Brew có hộp thả xuống dưới dạng menu phản hồi trên màn hình di động. Điều này có nghĩa là nó nội dung lớp phủ trên trang khi được mở, vì vậy điều quan trọng là để lại nhiều không gian cho việc này.

Một ví dụ tương tự có thể được tìm thấy trên trang web của Jacksonville Art Walk. Thanh điều hướng trên cùng vẫn cố định trong khi cuộn nhưng thu nhỏ trên các thiết bị nhỏ hơn. Điều này tốt hơn cho thiết kế đáp ứng vì thanh điều hướng mỏng hơn để lại nhiều chỗ hơn cho nội dung trên màn hình di động nhỏ hơn.

Mỗi liên kết trong thanh điều hướng có một biểu tượng liên quan được đính kèm với liên kết văn bản. Điều này trông tuyệt vời trên màn hình rộng nhưng quá chi tiết cho màn hình nhỏ hơn.

Điều hướng Art Walk thay đổi thành menu thả xuống với các liên kết cố định xung quanh điểm dừng 770px. Các biểu tượng được ẩn trong menu thả xuống vì chúng quá nhỏ và quá chật chội trên các thiết bị nhỏ hơn.

Khi thiết kế một tiêu đề đáp ứng luôn luôn xem xét không gian màn hình tổng thể trong khi tạo kiểu thanh điều hướng. Nếu bạn không muốn tiêu đề được giữ cố định thì điều đó hoàn toàn tốt, nhưng bạn vẫn có thể muốn thu nhỏ lại một chút để tiết kiệm phòng ở đầu trang.

Biểu tượng hóa Logo

Hầu hết các logo kết hợp một số văn bản và một biểu tượng hoặc đồ họa để đại diện cho thương hiệu. Điều này có nghĩa là bạn luôn có thể biểu tượng hóa (vâng, đó là một từ thực sự) loại logo này xuống một biểu tượng phiên bản đầy đủ của nó.

Đây là một kỹ thuật mạnh mẽ cho các tiêu đề đáp ứng vì không phải lúc nào cũng đủ chỗ cho một logo đầy đủ. Bạn mất một chút vẻ hào nhoáng và quyến rũ của logo kích thước đầy đủ, nhưng đó là cái giá bạn có thể phải trả cho một bố cục đáp ứng sạch sẽ.

Kiểm tra logo cho Tin tức thiết kế web và xem nó thay đổi như thế nào khi bạn thay đổi kích thước trình duyệt.

Có thể không phải ai cũng sẽ nhận ra biểu tượng đó khi lần đầu truy cập trang web, nhưng nhờ nhận dạng mẫu đây không phải là một vấn đề lớn.

Mọi người đã truy cập Internet đủ lâu để biết rằng góc trên cùng bên trái của trang thường được dành riêng cho logo. Biểu tượng màu hồng nhỏ này cũng được sử dụng trong favicon, vì vậy thật dễ dàng để đưa ra một số kết luận mà không cần đào quá sâu vào trang web.

Bạn không cần phải luôn dựa vào đồ họa cho kỹ thuật logo cô đọng này. Tiêu đề của Young And Hungry sử dụng văn bản màu xanh lá cây tươi sáng cho logo cuối cùng ngưng tụ thành văn bản "Y & H".

Cấp điều này có thể không hoạt động cho mọi trang web nếu thương hiệu không dễ nhận ra dưới dạng một chữ cái. Nhưng nó sẽ hiển thị logo đó có thể được làm đơn giản hơn vào cả đồ họa & văn bản, và cả hai biến thể chiếm ít không gian trên màn hình nhỏ hơn.

Xử lý hình nền toàn màn hình

Nhiều trang đích sử dụng hình nền toàn màn hình để thu hút sự chú ý hơn. Đây là một kỹ thuật mạnh mẽ nhưng thường hoạt động tốt nhất trên màn hình lớn.

Vậy làm thế nào để bạn xử lý điều này trên một màn hình nhỏ hơn? Nói chung, các nhà thiết kế hoặc xóa ảnh nền qua một điểm dừng nhất định, hoặc chính hình ảnh được sắp xếp lại để vừa trong cửa sổ.

Cap Radio Raff sử dụng kỹ thuật này trên trang chủ của họ. Hình nền giữ tiêu điểm trong tầm nhìn mọi lúc, cho dù màn hình được thay đổi kích thước bao nhiêu.

Loại giải pháp này thường yêu cầu một số định vị CSS nhưng nó thực sự đơn giản khi bạn nắm bắt được nó. Chỉ giữ tiêu điểm trong tầm nhìn mọi lúc, và thay đổi kích thước thùng chứa hình ảnh để phù hợp với tỷ lệ với thiết bị.

Ngoài nền lớn vì lý do thẩm mỹ, bạn cũng có thể sử dụng hình ảnh lớn cho nội dung trang. Trang chủ của Mashable sử dụng nền hình ảnh đặc trưng cho câu chuyện hàng đầu bao trùm toàn bộ bố cục.

Bố trí đáp ứng của họ nén hình ảnh trong khi giữ một đầu mối trung tâm. Thật khó để làm điều này bởi vì hình ảnh đặc trưng thay đổi khi câu chuyện thay đổi, vì vậy các bức ảnh phải được giám tuyển cẩn thận. Giải pháp của Mashable vẫn là một phương pháp tuyệt vời để xử lý ảnh toàn màn hình cho blog và bố cục tạp chí khi được thiết kế hợp lý.

Đơn giản hóa việc điều hướng

Khi chỉnh lại cho màn hình nhỏ hơn, giữ càng nhiều liên kết càng tốt trong điều hướng, và làm cho nó dễ dàng truy cập. Điều này có nghĩa là bạn có thể cần bỏ một vài liên kết nếu bạn có menu thả xuống nhiều tầng.

Mặc dù nếu bạn có chiến lược đúng đắn, vẫn có thể giữ cho tất cả các lần thả xuống không hoạt động. Ví dụ: Kidscreen sử dụng một menu bay ra với các biểu tượng mũi tên nhỏ chỉ ra các liên kết con trong menu đáp ứng.

Nhiều người tranh cãi với menu hamburger nhưng tôi đã chấp nhận nó như một món đồ cần thiết cho các menu điều hướng dài. Nó chỉ đơn giản hoạt động và được hầu hết người dùng điện thoại thông minh hiểu là "nút menu".

Trên thực tế, bạn sẽ khó có thể tìm thấy một trang web đáp ứng mà không dựa vào menu hamburger ba thanh. CyberChimps là một ví dụ tuyệt vời mà sử dụng thả xuống dọc thay vì một slide.

Cấu trúc điều hướng cho CyberChimps được sắp xếp lại để trượt xuống trên cùng của trang. Menu thả từ trên xuống với yếu tố khối lớn cho các liên kết.

Với thêm diện tích để nhấp và văn bản liên kết lớn hơn, quá trình điều hướng các trang trở nên đơn giản hơn nhiều. Nhằm thực hiện triết lý này với toàn bộ tiêu đề đáp ứng của bạn và thiết kế của bạn sẽ cải thiện mạnh mẽ.

Xây dựng của riêng bạn

Với những lời khuyên này theo ý của bạn, sẽ không có vấn đề gì khi xây dựng các tiêu đề đáp ứng có thể sử dụng được. Mặc dù có rất nhiều công cụ giúp bạn giải quyết, cách duy nhất để thực sự hiểu là thông qua thực hành.

Vì vậy, mang theo những kỹ thuật này với bạn và bắt đầu xây dựng trang web! Tôi cũng đã liệt kê một số tài nguyên khác cho các tiêu đề phản hồi mà bạn có thể xem bên dưới.

• Tạo Menu điều hướng đáp ứng CSS cơ bản trên thiết bị di động (teamtreehouse.com)
• Thực hành tốt nhất cho tiêu đề trang web đáp ứng (ux.stackexchange.com)
• Làm cách nào để làm cho hình ảnh tiêu đề của tôi phản hồi đúng cách? (stackoverflow.com)