![]() Since the header will appear on top of every point on the page, it is important that it has enough visual contrast with the background to be noticeable, readable, and clearly differentiated from the content that it is hovering over. ![]() To choose an appropriate background color for a sticky header, consider whether there is sufficient visual differentiation between the header and content everywhere on the page. (Note: this calculation does not include the browser’s URL bar or the iOS status bar, both of which eat pixels but are outside the control of the site designer.) Right: Lollar Pickups has a miserly 2:1 content-to-chrome ratio on the same device, with an excessively large translucent logo header that does not provide sufficient contrast against the content (so we count it as chrome) and an unnecessary duplicative tab bar at the bottom of the page that is also sticky. Left: The New Yorker’s sticky header has a 13:1 content-to-chrome ratio on the iPhone 11 Pro, which is a reasonable space tradeoff. Again, start with readable text sizes for your header elements and minimize the vertical height from there. On desktop, while there is considerably more space to work with, it’s still not advisable to luxuriate in excessive empty pixels for the header, simply to make the logo as large as possible. On touchscreen devices, ensure that all tap targets are a minimum of 1cm × 1 cm, all text is approximately 16pt (depending on the x-height and overall distinctiveness of the letterforms in the typeface, an appropriate minimum may be slightly smaller or larger), and then minimize any additional vertical height beyond those sizes (while still maintaining appropriate aesthetic considerations, of course). You want to ensure that the content-to-chrome ratio is maximized, so that your sticky header takes the smallest amount of space that still provides appropriately readable text and tappable target sizes. Sticky headers inherently take up space on the screen that could be used for content, so it’s important that you use that space responsibly. This factor is even more important on mobile devices, given the small size of the screen. Maximize the Content-to-Chrome Ratio by Keeping It Small Here are 5 tips to ensure that your sticky header’s design helps, not hinders, your users. However, when implemented poorly, sticky headers are annoying, distracting, and obstruct page content. The header stays in place while the user scrolls. Accenture’s desktop site uses a sticky header containing the site navigation, search, and utility navigation. They increase the discoverability of the elements in the header and the chance that users will take advantage of them. When done appropriately, sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. ![]() Sticky headers (or persistent headers) are a common pattern for keeping the header of a website or app in the same place on the screen while the user scrolls down the page. A version of this pattern is the partially sticky header, which (re)appears at the top of the page as soon as the user starts scrolling up.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |