A Simple, Responsive, Mobile First Navigation

We’re going to build a simple, responsive web site navigation. Our solution will help us place emphasis on the content of our page, arguably the top priority when designing for mobile. There’ll be no JavaScript involved, and we’ll tackle it from a Mobile First approach.

Mobile Navigation

If you’ve read Luke Wroblewski’s Mobile First you’ll be familiar with his statement that:

As a general rule, content takes precedence over navigation on mobile.

What he means by this is that mobile users are often looking for immediate answers; they want the content they went searching for, not more navigation options.

Many sites, even responsive ones, stick to the convention that navigation belongs at the top of any given page. This approach can cause usability problems on mobile devices because mobile users are often short of two things: screen space and time. If primary navigation is placed at the top of a page, there’s a good chance it will obscure an entire mobile screen. This issue is exacerbated further by large touch-friendly menu links, forcing users to scroll beyond the navigation to get to any valuable content.

A perfectly decent responsive design, but at standard mobile viewport dimensions (320px x 480px) all you really see is a navigation menu. Surely, having just arrived at the homepage, I want to see something other than that? It’s not just London & Partners who demonstrate this – it’s a practice seen in many responsive designs across the web.

Using jQuery, a duplicate of the menu is created in the form of a <select> dropdown, initially hidden from view using CSS. When media queries detect a smaller screen, they make the dropdown visible and the original navigation invisible. This is perfect for mobile devices as dropdowns take up minimal real estate and make use of the device’s particular UI (like the iPhone’s scroller).

Alternatively, you might hide your navigation, but have it transition into view when a ‘menu’ button is clicked. You can see this effect in action with Twitter’s latest Bootstrap.

Smaller screens hide the navigation links and display a ‘list’ icon (fast becoming accepted as meaning ‘menu’) which reveals the navigation when clicked. Again, mobile visitors are presented with as much content as possible, but have navigation options available should they want them.

Pure CSS Solution

We’re going to use a technique discussed by Luke, which makes use of CSS and a Mobile First approach. What do we mean by a Mobile First approach? Put simply, we’re going to design a straight-forward mobile layout, then progressively enhance the design for larger screens. We’ll use media queries which detect steadily increasing screen sizes, adding style and features as we go.

This means that only the bear minimum of CSS and resources will be loaded when our design is viewed with a mobile device. It also means that older versions of IE (which don’t recognize media queries) will be presented with the mobile site. Check out Joni Korpi’s Leaving Old Internet Explorer Behind for more information on this.

Step 1: Markup

I’ll explain the ideas behind this solution as we go along, so for the time being let’s throw together some markup, starting off with a blanco HTML5 document.

Having done that, we’ll add some page structure. Straight-forward stuff and all for the purposes of our demonstration. I’ve used filler text from Monty Python’s Holy Grail (thanks Chris Valleskey) which is a nice way to put a smile on your face whilst you’re working 🙂

023

024

025

026

027

028

029

030

031

032

033

034

035

036

037

038

039

040

041

042

043

044

045

046

047

048

049

<body id=”home”>

<div class=”wrapper”>

<header>

<h1 class=”logo”><a href=””>Nav</a></h1>

</header>

<article>

<h2>Blue. No, yel&hellip;</h2>

<p>Shut up! Will you shut up?! But you are dressed as one&hellip; Camelot! You don’t vote for kings.</p>

</article>

<article>

<h2>We want a shrubbery!!</h2>

<p>Look, my liege! Shut up! But you are dressed as one&hellip;</p>

<ul>

<li>The nose?</li>

<li>Shh! Knights, I bid you welcome to your new home. Let us ride to Camelot!</li>

<li>Look, my liege!</li>

</ul>

</article>

<article>

<h2>Help, help, I’m being repressed!</h2>

<p>Why? Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony. Be quiet! A newt?</p>

We’ve pulled together a basic html page, so now it’s time for the main attraction; our primary navigation..

068

069

070

071

072

073

074

075

076

077

<nav id=”primary_nav”>

<ul>

<li><a href=””>Portfolio</a></li>

<li><a href=””>About Me</a></li>

<li><a href=””>Nonsense</a></li>

<li><a href=””>Services</a></li>

<li><a href=””>Contact</a></li>

<li><a href=”#home”>Top</a></li>

</ul>

</nav><!–end primary_nav–>

Yes, you’ve seen that correctly, we’ve added that at line 68, after the last article. Don’t forget that we’re designing for mobile now, we’ll cover desktop later. We’ve placed the navigation at the bottom of our page so that it’s completely out of the way. We’re now going to place a link at the top of our page so that users can find the navigation if they wish.

027

028

029

030

<header>

<h1 class=”logo”><a href=””>Nav</a></h1>

<a class=”to_nav” href=”#primary_nav”>Menu</a>

</header>

Step 3: CSS Reset

Depending on how you normally begin web projects, this step my differ from your usual workflow. I’ve always found Eric Meyer’s reset to be a solid basis to work from, especially as he’s tweaked it recently. We’ll add his reset rules to a stylesheet to kick our css off:

This is all basic stuff (fonts, line-heights, colors etc.), what’s crucial so far is that I’ve styled the ‘menu’ button to float to the right within the <header>, where you’d often expect navigation to be found.

If you hover over it you’ll see the hover state – not necessary for touch screen devices of course, but this experience will also be delivered to uncooperative Internet Explorer versions. What we have defined for the benefit of mobile users is a :focus state. It’s the same as the :hover state, but will offer crucial feedback for touch-screen devices. Our users will know they’ve been successful in touching the menu button.

Anyway, click it and you’ll be taken to the navigation, super.

Now let’s style the menu a bit.

Step 5: Navigation Styles

We’re actually going to style our primary navigation much like the London & Partners example shown earlier on, except this time it’s obviously at the bottom of the page..

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

/*navigation*/

#primary_nav ul {

list-style: none;

background: #1c1c1c;

padding: 5px 0;

}

#primary_nav li a {

display: block;

padding: 0 20px;

color: #fff;

text-decoration: none;

font-weight: bold;

text-transform: uppercase;

letter-spacing: 0.1em;

letter-spacing: 0.1em;

line-height: 2em;

height: 2em;

border-bottom: 1px solid #383838;

}

#primary_nav li:last-child a {

border-bottom: none;

}

#primary_nav li a:hover,

#primary_nav li a:focus {

color: #1c1c1c;

background: #ccc;

}

/*footer*/

footer {

font-family: ‘PT Serif’, serif;

font-style: italic;

text-align: center;

font-size: 14px;

}

Much better. We’ve made the menu links nice and large (read more about Touch Target Sizes on Luke Wroblewski’s own blog) and once again determined a :focus state for user feedback.

It’s also become clear that we’ve included a ‘top’ link which will take users back to the top of the page if needed.

Step 6: Getting Bigger

OK, we’ve dealt with our simple mobile layout, so now it’s time for some progressive enhancement. We’re going to use media queries to determine when our mobile layout is no longer appropriate.

But at what point does it become inappropriate? There are many ways to approach media queries, but we’re going to work from the basis that a mobile viewport is 320px x 480px. It’s 320px wide when viewed in portrait, 480px wide when viewed in landscape, so we could justifiably set our first media query to detect any screen larger than 480px.

However, the next step up is arguably the tablet. The iPad has a resolution of 980px x 768px, so we can safely assume that anything smaller than 768px is appropriate for our mobile layout. Anything larger than 768px can handle more desktop-like navigation layouts.

We can therefore start adding rules, so let’s set up a media query:

201

202

203

/*media queries*/

@media only screen and (min-width: 768px) {

}

This media query will run all styles contained within it when the viewport is at least 768px wide. Note the inclusion of the only keyword, which ensures Internet Explorer 8 doesn’t get all confused and try to process the query. See my earlier explanation for details.

Let’s kick things off by making our ‘menu’ button disappear:

203

204

205

206

207

@media only screen and (min-width: 768px) {

a.to_nav {

display: none;

}

}

With the browser made slightly wider, the menu button is no longer displayed.

Step 7: Shifting the Navigation

Now we need to bring our primary navigation to the top of the page. We’ll do that by removing it from the document flow, positioning it absolutely at the top.

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

@media only screen and (min-width: 768px) {

a.to_nav {

display: none;

}

.wrapper {

position: relative;

width: 768px;

margin: auto;

}

#primary_nav {

position: absolute;

top: 5px;

right: 10px;

background: none;

}

#primary_nav li {

display: inline;

}

#primary_nav li a {

float: left;

border: none;

padding: 0 10px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

}

In order for that to be possible we first have to make its parent (.wrapper) relatively positioned. We can either do that here in the media query, or determine that at the beginning of our stylesheet.

Once the menu is positioned absolutely, we need to remove some of the anchor styling. There’s not much to do, but we need the list items to display inline, and we need to remove the borders and exaggerated padding from the anchors. The hover states we dictated earlier are fine of course, so we needn’t change them.

Step 8: One Last Thing

If you’ve been paying attention you’ll have noticed that we still have a ‘top’ link in the navigation – we don’t really need that any more eh?

We can remove this in a number of ways, but so we’re sure of what’s going on let’s first add a class to the list item:

082

<li class=”top”><a href=”#home”>Top</a></li>

And then we can get rid of it within our media query:

233

234

235

#primary_nav li.top {

display: none;

}

Conclusion

That’s it! There are loads of ways to build upon this idea (implementing the list icon being just one) and, of course, you can continue to add media queries to cater for growing screens. Hopefully you now have the foundations to do so. We’ve created a simple, responsive, touch-friendly navigation, from a mobile first approach whilst giving emphasis to content and usability. Who can ask for more?!