As users get more and more used to mobile browsing, we webdesigners are keeping up with that trend, making our sites ever more mobile-friendly. And nothing has shown that mobile sensitivity more than the responsive header, which not only resizes, but shifts its design slightly with the screen size.

Before we dig into how to make this happen, let’s look at a couple of examples from around the Web:

Visual Example #1: FunnyOrDie

(Desktop view)

(Mobile view)

See this responsive header in action: FunnyOrDie.com

Visual Example #2: SmashingMagazine

(Desktop view)

(Mobile view)

See this responsive header in action: SmashingMagazine.com

How Do We Make This Happen?

Combine Site Branding and Navigation in One Bar

An iconic site logo/site name and some simple navigation is the most mobile-friendly design choice. But that does not mean that your desktop users have to look at a boring header design! Both FunnyOrDie and SmashingMagazine’s navbars are both more complicated and elaborate on desktop view, with descriptive text added to icons, greater space between navigation links, and more subtle plays of color.

Make Your Header 100% as Wide as the Page, and Pretty Skinny

Make sure your header bar is always 100% of page width, so that it resizes with the screen size. Also, a navbar that is 100-150px tall translates well between screen sizes–it gives the mobile user enough screen space to tap on, while still being unobtrusive to the desktop user’s experience.

Fix Your Header Bar in Place

As described in my fixed navbar tutorial article, a combination header/navbar that scrolls with the user is infinitely more friendly, especially on mobile. It gives the appearance of an app without having to actually make an app for your site, and it makes quick browsing much easier.

Use Icon-Only Navigation on Mobile

Using tappable icons rather than text on mobile screens is much easier and quicker to view, and it keeps the navigation as small as possible (depending on how many links you have). (Notice that both FunnyOrDie and SmashingMagazine use a three-horizontal-line icon to give you access to full navigation.) This can be done using a CSS @media query to switch between displaying text and displaying icons.

Summary

Making a sleek, responsive header is key to making your site mobile-friendly, and it can be done with just a few code tricks! Try these suggestions and see what kind of mobile magic you can work!