{"id":27499,"date":"2016-08-02T23:01:52","date_gmt":"2016-08-02T15:01:52","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27499"},"modified":"2022-08-07T22:25:29","modified_gmt":"2022-08-07T14:25:29","slug":"responsive-headers-logo-tips-pitfalls","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/responsive-headers-logo-tips-pitfalls\/","title":{"rendered":"Responsive Headers & Logos – Tips and Pitfalls"},"content":{"rendered":"

The concept of responsive web design<\/a> has permeated the web, and become a staple for frontend developers. There\u2019s no denying the value of responsive design in the modern world, but there is some difficulty in fully understanding how to design responsive layouts properly.<\/p>\n

The subject could go on at length because there are so many unique areas of a website, but focusing on individual elements can help you better understand the goals of a user and how those goals can be achieved with responsive design.<\/p>\n

I\u2019d like to cover design tips for headers, logos<\/strong>, and navigation menus<\/strong>, as they pertain to responsive design. Take these suggestions as they apply to your own work, and be sure to design your interfaces with user behavior in mind.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t50 Useful Responsive Web Design Tools for Web Designers<\/a>\n\t\t\t\t<\/p>\n

Thinner Navbars<\/h3>\n

On large screens, it\u2019s normal to have big headers, perhaps even oversized headers with multi-level link tiers. But smaller screens do not have the same space and should be restricted as needed.<\/p>\n

Since native mobile apps typically have fixed headers<\/strong>, this is common practice in responsive design too. A fixed header should also shrink down<\/strong> when on smaller devices: this leaves more room for content but still gives readers a direct access to the header & navigation.<\/p>\n

Take for example the Cartoon Brew layout<\/a> on a full-size monitor, and on a mobile device.<\/p>\n

\"Cartoon<\/a><\/figure>\n

At the 600px breakpoint, the navigation shrinks to almost half its height on the page. This makes both the logo and the clickable nav menu smaller, but they\u2019re much more proportional<\/strong> to the relative screen space.<\/p>\n

Also, consider that Cartoon Brew has a dropdown box as a responsive menu on a mobile screen. This means it overlays content<\/strong> on the page when opened, so it\u2019s important to leave plenty of space for this.<\/p>\n

A similar example can be found on the Jacksonville Art Walk<\/a> website. The top navbar stays fixed while scrolling but shrinks down on smaller devices<\/strong>. This is better for responsive design because the thinner navbar leaves more room for content<\/strong> on a smaller mobile screen.<\/p>\n

\"Jacksonville<\/a><\/figure>\n

Each link in the navbar has a related icon attached to the text link. This looks great on a widescreen monitor, but it\u2019s too detailed for smaller screens.<\/p>\n

The Art Walk navigation changes to a dropdown menu with fixed links around the 770px breakpoint. The icons are hidden in the dropdown menu because they\u2019d be too small and too cramped on smaller devices.<\/p>\n

When designing a responsive header always consider overall screen space<\/strong> while styling the navbar. If you don\u2019t want the header to stay fixed, that\u2019s totally fine, but you still might want to shrink it a bit<\/strong> to save room at the top of the page.<\/p>\n

Iconify The Logo<\/h3>\n

Most logos incorporate some text and an icon or graphic to represent the brand. This means you can always iconify<\/strong> (yes it\u2019s a real word<\/a>) this kind of logos down to a symbol<\/strong> of its full version.<\/p>\n

This is a powerful technique for responsive headers because there isn\u2019t always enough room for a full logo. You do lose some of the glitz & glamour of a full-size logo, but that\u2019s the price you might have to pay for a clean, responsive layout.<\/p>\n

Check out the logo for Web Designer News<\/a> and see how it changes as you resize the browser.<\/p>\n

\"Web<\/a><\/figure>\n

Maybe not everyone will recognize that icon when first visiting the site, but thanks to pattern recognition<\/strong>, this isn\u2019t a huge problem.<\/p>\n

People have been on the Internet long enough to know that the top-left corner of the page is typically reserved for a logo. This small pink icon is also used in the favicon, so it\u2019s easy to make some conclusions without digging too far into the site.<\/p>\n

You don\u2019t always need to rely on graphics for this condensed logo technique. The header of Young And Hungry<\/a> uses bright green text for the logo which eventually condenses to the text \"Y&H\".<\/p>\n

\"Young<\/a><\/figure>\n

Granted, this may not work for every site if the branding isn\u2019t easy to recognize as single letters. But it goes to show that logos can be made simpler<\/strong> into both graphics & text, and both variants take up less space<\/strong> on smaller screens.<\/p>\n

Handling Fullscreen Backgrounds<\/h3>\n

Many landing pages use full screen backgrounds<\/a> to draw more attention. This is a powerful technique but often works best on large monitors.<\/p>\n

So, how do you handle this on a smaller screen? Generally, designers either remove the background image<\/strong> past a certain breakpoint, or the image itself gets realigned<\/strong> to fit in the window.<\/p>\n

<Cap Radio Raffle<\/strong> uses this technique on its home page. The background image keeps the focal point in view<\/strong> at all times, no matter how much the screen is resized.<\/p>\n

\"Cap<\/figure>\n

This kind of solution typically requires some CSS positioning<\/strong>, but it\u2019s really simple when you get the hang of it. Just keep the focal point in view<\/strong> at all times, and resize the image container<\/strong> to fit in proportion with the device.<\/p>\n

Beyond large backgrounds for aesthetic reasons, you might also use large images for page content. Mashable\u2019s home page<\/a> uses a featured image background for the top story which spans the entire layout.<\/p>\n

\"Mashable<\/a><\/figure>\n

Their responsive layout compresses the image<\/strong> while keeping a central focal point<\/strong>. It\u2019s difficult to do this because the featured image changes when the story changes, so photos must be curated carefully. Mashable\u2019s solution is still a great method of handling full-screen photos for blogs & magazine layouts when designed properly.<\/p>\n

Simplify The Navigation<\/h3>\n

When revamping for smaller screens, keep as many links as possible<\/strong> in the navigation, and make it easily accessible<\/strong>. This means you may need to ditch a few links if you have multi-tiered dropdown menus.<\/p>\n

Although if you have the right strategy, it is still possible to keep all dropdowns intact. For example Kidscreen<\/a> uses a flyout menu with small arrow icons<\/strong> indicating sublinks in the responsive menu.<\/p>\n

\"Kidscreen<\/a><\/figure>\n

Many people argue against the hamburger menu<\/a> but I\u2019ve come to accept it as a necessary item for lengthy nav menus. It simply works and has become widely understood by most smartphone users as \"the menu button\".<\/p>\n

In fact, you\u2019d be hard-pressed to find a responsive site that doesn\u2019t rely on the three-bar hamburger menu. CyberChimps<\/a> is a great example that uses a vertical dropdown<\/strong> rather than a slide-in.<\/p>\n

\"Cyberchimp<\/a><\/figure>\n

The navigation structure for CyberChimps gets rearranged to slide down on top of the page. The menu drops from above with large block elements for links<\/strong>.<\/p>\n

With more area to click<\/strong> and larger link text<\/strong>, the process of navigating pages becomes much simpler. Aim to follow this philosophy with your entire responsive header, and your designs will improve drastically.<\/p>\n

Build Your Own<\/h3>\n

With these tips at your disposal, it should be no trouble building useable responsive headers. While there are plenty of tools to help you out, the only way to really understand is through practice.<\/p>\n

So take these techniques with you and start building websites! I\u2019ve also listed a handful of further resources for responsive headers that you can check out below.<\/p>\n