Responsive Navigation Patterns

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

Here’s some of the more popular techniques for handling navigation in responsive designs:

There are of course advantages and disadvantages of each method and definitely some things to look out for when choosing what method’s right for your project.

Top Nav or “Do Nothing” Approach

Tim Kadlec Responsive Navigation

One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Because of its ease of implementation, it’s found on many (maybe even most) responsive sites right now.

Pros

  • Easy to implement- you can implement your large-screen site almost as-is.
  • No Javascript dependencies – ensuring maximum compatibility
  • No back-breaking CSS maneuvers required
  • No tripping over your source order – no need to jump through hoops to shift nav lists around in the source. It flows au naturel.

Cons

  • Height issues- Height matters in mobile. As Luke’s book explains, content-first, nav-second is preferred for mobile web experiences. You want to get the users to the meat-and-potatoes content as quickly as possible. That means getting the navigation out of user’s way so they can focus on the core information on the page. It can also be confusing when all the core content is cut off:
    confab responsive nav

    The site doesn't look different from page to page and doesn't expose the core content soon enough

  • Not scalable – What happens when you want to add a new section to your site? Where the nav fits neatly on one line now, what happens when your client says you need to add “products and services” to the nav? Or when you need to translate the menu to German?
  • Fat Fingers – Cramming links too closely together can easily result in unwanted proximity clicks
  • Cross-device issues – While text might look great on an iPhone, devices have different ways of rendering fonts. Sites can look great on an iPhone but break when viewed on other platforms:
    Responsive navigation breaking to multiple lines on small screens

    Responsive navigation breaking to multiple lines on small screens

In the Wild

Resources

Grey Goose Responsive Navigation

This clever solution keeps the nav list at the footer of the site, while the header contains a simple anchor link pointing to the footer nav. This approach clears up a lot of room for the core content while still providing quick access to the navigation.

Pros

  • Easy to implement- Simple anchor on top. Nav list on the bottom. That’s pretty damn easy.
  • No Javascript dependency- which means less testing and far better support.
  • Little CSS work required to scale up – Thanks to absolute or fixed positioning, moving the footer nav up to the top for large screens is a piece of cake.
  • Single button in header- A simple menu icon or link takes up very little room in the header, which frees up plenty of space for the core content

Cons

  • Anchor jump can be awkward/disorienting – Quickly jumping to the footer of the site can be a bit disorientating.
  • Not elegant- this seems weird to say, but other methods like the toggle method have a bit of sexy to them. A jarring jump, while awesomely practical, isn’t the elegant interaction mobile users have gotten used to from interacting with those highly-polished native apps.

In the Wild

Resources

The Select Menu

Viljamis Responsive Nav

One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This avoids the problems the top nav approach presents and is a clever way to save real estate.

Pros

  • Frees up plenty of space- a select menu definitely takes up a lot less space than a horizontal or vertical list of links
  • Keeps interactions in the header- instead of a footer nav, the select menu keeps the navigation functionality in the header, where users are used to seeing web navigation
  • Easily Recognizable- a select menu with a clear label saying “navigation” or “menu” is definitely easy for users to figure out.
  • Pulls up native controls- each mobile browser will handle select menus their own way. Touch devices will pull up the nav in a touch friendly list, while trackball/d-pad/pearl devices will pull up a select menu more conducive to that particular input method.

Cons

  • Lack of styling control- select menus are a pain in the ass to style. Each browser handles them in their own, usually clunky, way. Forget about cross-browser styling and coming out with anything that looks halfway consistent. As a result, the select menu can stick out like a sore thumb and really dirty up an otherwise good-lookin’ design.
  • Potentially confusing – Users are used to select menus in the context of filling out a form, but I’m not sure they’d grasp a form element out of that context. This is simply a hunch, so it would be interesting to test.
  • Handling subnav items- nested lists handled by select menus can look weird. Child categories are usually handled by indenting with dashes, and while it might get the point across I see it as potentially confusing and a little ugly.
  • Javascript dependency- It doesn’t require too much JS to convert the list to a select menu, but it’s worth pointing out simply because mobile browsers do the dardest things. But again, the technique is pretty cut and dry so there shouldn’t be too many hang ups using this approach.

Resources

In the Wild

The Toggle

Starbucks Responsive Navigation

The toggle is similar to the footer anchor approach, but instead of jumping down to an anchor at the bottom of the page, the menu slides open right in the header. It’s a good-looking approach and is relatively easy to implement.

Pros

  • Keeps the user in place- Where the footer anchor jumps suddenly, the toggle menu simply appears in place, which doesn’t disorient the user.
  • Elegant- This is definitely one of the more classy approaches. No awkward forms or page jumps, just a smooth animated flyout or basic show/hide.
  • Easy to scale up- All you need to do is hide the mobile trigger and show the nav list when the appropriate breakpoint is reached and you have yourself a normal large screen nav. All this can be accomplished with CSS.

Cons

  • Animation performance- Your mileage will vary when doing any sort of animation on mobile devices. Android is notoriously bad with CSS animations and so things might not be as smooth as you’d like. Also, for what it’s worth I’ve recently been animating max-height which seems to work well.
  • Javascript dependency- Again this approach relies on a bit of Javascript in order to trigger the toggle, but it’s minimal. I have one Blackberry test device that refuses to listen to any of this stuff, but most browsers, including proxy browsers like Opera Mini and Dolphin Mini, handle it just fine.

In the Wild

Resources

The Left Nav Flyout

Obama responsive navigation

Facebook popularized a left navigation for mobile that’s quite unique. The nav is accessed by a menu icon, which reveals a tray that slides in from the left and moves the main content over to the right.

Pros

  • Lots of space- While other nav techniques don’t work very well if you have a lot of list items, this approach provides a lot of space to expand. I think that’s why Facebook took to it.
  • Good looking- This menu is very sophisticated and advanced, so it definitely has a wow factor to it.
  • Facebook conventions - Facebook mobile users will be used to this pattern already since the web and native Facebook mobile apps utilize this left tray system.

Cons

  • Advanced- While the other methods modify simple elements, this shelf method has a lot of moving parts. As Stephanie Rieger pointed out, the Obama site navigation broke on everything but the most sophisticated devices. If your project is meant for a broader audience, you want to be very careful if choosing this approach.
  • Doesn’t scale well- this method is quite unique to mobile and doesn’t necessarily scale up to large screens easily. You can run a risk of essentially maintaining two separate navs for small and large screens.
  • Potentially confusing- When I first saw Facebook’s new mobile nav, I actually thought it was broken. Keeping a hint of the content on the right seems a bit weird to me, but this is all personal preference.

In The Wild

Resources

Fray Responsive Nav

The footer-only navigation is similar to the footer anchor approach, only without the anchor in the header. It follows the content-first, nav-second model, however it requires mobile users to scroll all the way to the bottom in order to navigate the site.

Pros

  • Frees up header space – It follows the content-first, nav-second model, but…

Cons

  • Difficult to Discover- Users (both on small and large screens) might not discover there’s a menu sitting in the footer.
  • Difficult to Access- Mobile users have to scroll the entire way down a page (which might be very long) just to get around the site.

In The Wild

The “Hide N’ Cry”

Authentic Jobs responsive nav

Follow this rule: Don’t penalize users for visiting your site on smaller devices. It’s a myth (PDF) that mobile users don’t want/need certain information. Mobile users will do anything and everything a desktop user will do, provided it’s presented in a usable way.

Pros

  • Clears up plenty of space- By removing the nav for small screens, you free up a lot of space! But that comes at a cost…

Cons

  • Removes content/functionality for mobile users- Hiding links and content is not OK. Responsive advocates say that responsive design removes many of the content disparities and experiential nightmares that can come from separate mobile sites, but if a responsive site is hiding content for mobile users it’s no better.
  • Adds extra page weight- Adding display: none for elements that are presumably unneeded for mobile doesn’t make it disappear. The code/images/whatever still gets download by mobile devices (which of course are more likely to be on slower connections).
  • Harder to maintain- Two separate navigations for small and large screens becomes a burden when maintaining the site.

In The Wild

Resources

Considerations

Ultimately, mobile navigation should be like a good friend: there when you need them, but cool enough to give you your space. A bad friend is someone who’s not there when you need someone to talk to (when navigation is absent or hard to find), or someone who’s obnoxious because they’re always around and taking up space (dude, get off my couch). Finding the balance between accessible navigation and mobile screen real estate is an art that we’re all trying to sort out. I’d love to hear your thoughts.

Update

Right after this was written, it looks like there’s been some other great posts discussing responsive navigation. Check out:

  • A Responsive Design Approach for Navigation, Part 1 by @filamentgroup Absolutely wonderful step by step guide to implementing the toggle approach.
  • Pull Down for Navigation by @inspectelement, an clever approach that reveals the navigation as the user pulls down the top of the page. Quick pros and cons:

    Pros:

    • Sexy as hell.
    • Great use of screen real estate.
    • Takes advantage of an existing smartphone convention of pulling down the top of the page to reveal more.

    Cons

    • Potentially confusing- Mobile users are used to pulling down the top of the page to refresh a list of content items, not to reveal a navigation.
    • Relatively Advanced- Right now the demo only is working in its entirety on iOS. I checked Chrome for Android, Android stock browser & Opera Mini and they all kind of worked, but not fully. I’m sure this solution could be progressively enhanced to accommodate more browsers.
    • Explicit Instruction Required- you have to explicitly tell the user to pull down to reveal the nav, which is fine but could potentially be awkward in the site header.

    All in all these are minor points, but I’d love to see it working across more browsers!


127 Comments

  1. Wes Bos

    02/24/12

    Awesome post, thanks a ton for this :)

  2. Jason Gross

    02/24/12

    Great write up :)

    I would consider it worth mentioning that this is an overview of options most likely not intended to be mutually exclusive. CSS in general (not just CSS3) gives us a lot of power to manipulate the layout of a page so the possibilities of navigation extend beyond these options. A mix-and-match approach using these options might be called for if you are working on a site with complex navigation or loads of content.

    A good example of this is the Boston Globe site. They would probably be subscribed to the ‘toggle’ method for the primary navigation but more of the ‘do nothing’ method in the footer of the site.

    When building out responsive navigation systems try to look past just ‘what can we do with the HTML structure we have’ but rather ‘what is the best solution at this resolution from an experience standpoint’. This might present more hoops to jump through in your HTML, CSS or JS but a better final result.

  3. David Goss

    02/24/12

    Hi Brad

    Making navigation work is the one time I’ll allow myself a bit of display:none to help along (I’m not hiding actual content, so if you squint it’s kind of okay).

    So, on a design where a footer anchor will work well for the small screen but I want the navigation at the top on larger screens (but where absolute or fixed positioning isn’t appropriate), I include the navigation twice in the markup (please, hear me out). On the default layout (mobile first), the top one isn’t shown, but the bottom one is, along with “go to nav” and “back to top” anchor links where appropriate. Then when the screen is large enough, the bottom one and anchor links are hidden and the top one is shown.

    One thing that always makes me scratch my head is what to label the “go to nav” anchor link. So far I’ve done no better than “Menu”. Also, I’m never sure what icon might be helpful to use next to it.

  4. Aidan Foster

    02/24/12

    This is a great breakdown and very useful. I attended Luke Wroblewski’s mobile first workshop yesterday and as he reviewed the navigation patterns it became clear that in my own site there was much room for improvement. We implemented the top nav pattern and on smartphones it’s taking up way too much space. Give ‘em content – Not menus. (Looks like my site’s been that friend that been hanging around too much…)

    In the workshop there were also many, many questions about coordinating UI, design and development teams. Breaking out the patterns like you have is a great way to help kick start these early team planning meetings for a new responsive site. Thank You.

  5. Andrew Dunkman

    02/24/12

    Nice article! It might be worth noting that the select menu need not have a Javascript dependency if you duplicate elements, adding a list of links to the mobile site or a select box to the full site and show/hide. #pickyourevil

  6. Eileen

    02/24/12

    We took the “top nav” approach on a recent site, but with a twist. On thisiscounterculture.com/team , you can see that the top nav (and secondary nav) exist but we’ve hidden the main page title on subpages, allowing the active menu item to serve as page title instead. Obviously this can’t work for sites with lots of pages, but it worked out nicely (at least, we think so) on this smaller site.

  7. Torkil Johnsen

    02/24/12

    I’m currently working on a site which by default will use the nav at bottom approach, with top anchor, as a fallback, but use the left slideout nav (w/swipe support) as the main nav. Also thinking about adding a left swipe as well, to reveal contact info for instance.

    Should work on any browser and progressively enhance the UX :)

  8. Responsive Navigation Patterns Roundup – Stuntbox

    02/24/12

    [...] Frost has published a damn good roundup of popular approaches for handling navigation on sites using Responsive Web Design techniques. It’s not often I do [...]

  9. Sergio Acosta

    02/24/12

    Great post indeed. In a recent project (www.christianlawfirm.co.uk) I combined the footer anchor and subnav items with a select menu. The select menu helped me to resolve a huge navigation bar. It was difficult to style, but I think the pulling up of native controls outweights the cons. Many thanks for sharing.

  10. Utwo

    02/24/12

    Dind’t know that are so many ways… Thank you!

  11. Kevin

    02/24/12

    Nice write up Brad.

  12. Johan

    02/25/12

    Thanks, great resource for upcoming projects!

  13. Tweet-Parade (no.8 FEB 2012) | gonzoblog.nl

    02/25/12

    [...] Responsive Navigation Patterns - Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. [...]

  14. Responsive Navigation Patterns | JoinOG

    02/25/12

    [...] Direct Link to Article — PermalinkResponsive Navigation Patterns is a post from CSS-Tricks CSS-TricksRelated posts: [...]

  15. Christof

    02/25/12

    What about using optgroup for select? How is the support for this? Admittedly no real 2 level nav support either as optgroup labels are not links but should be easy to add level 1 item as 1st item in each optgroup. Think this would be nicer than using “-” prefixes? Just don’t know how well mobile browser support is, IE9 on WP7 Mango does them well and nice it seems, have no Android or iOS around…

  16. Mike Abdullah

    02/25/12

    Great article. Just want to point out that “the toggle” is missing from the table of contents

  17. Brian Feeney » Responsive Navigation Patterns

    02/25/12

    [...] Navigation Patterns Brad Frost has written an excellent overview on current responsive navigation patterns: Top and left navigations are typical on large screens, but lack of screen real estate on small [...]

  18. Jon

    02/25/12

    Amazing post. Thanks for putting the time in. I never knew Starbucks had a responsive design!

  19. My Stream | Responsive Navigation Patterns | My Stream

    02/25/12

    [...] shows examples and covers the various techniques/pros/cons for handling navigation on small screens.Direct Link to Article — Permalink…Responsive Navigation Patterns is a post from CSS-TricksOriginally posted [...]

  20. Elliott from the design agency

    02/26/12

    Great article never thought about categorising these responsive techniques or the pros and cons of each technique – thanks

  21. Roy

    02/26/12

    That top-menu, bottom anchor one is a great idea, I’m going to try implementing it soon. And the advantage is that you can just have a normal footer and then collapse the header at low screen widths.

  22. Richard Metzler

    02/26/12

    What do you think about the toggle I coded for http://launchco.com ?

  23. Pete

    02/26/12

    well done

  24. Sean

    02/26/12

    Great post, to the point and very instructive! Among the plenty of posts about responsive web design this is one of the most useful at the moment

  25. francesco frapporti

    02/26/12

    This list rocks! I’d just like to point out that toggle menus don’t necessarily need javascript, but can be written with pure css and media queries.

  26. Dinesh Verma

    02/26/12

    Responsive web designs are giving rise to an entire new for of web designing making your design more robust and device friendly.

  27. Ben Frain

    02/26/12

    Great write-up. As ever, deciding which is best is a ‘it depends’ scenario so I imagine I’ll come back here to reconsider each time I need to implement one. Thanks for taking the time.

  28. Pezillionaire

    02/26/12

    Really well put together list of nav patterns Brad, love the comprehensive pros and cons for each technique. Bookmarked! I’ll be referring back to this post often. Well done!

  29. Alex White

    02/26/12

    Thanks for the ideas. I’ve been looking into responsive web design for a while and have been debating on the best way to go about it. I’m not really a fan of any of the footer options. The select box is OK but I prefer either the facebook approach or the toggle approach.

  30. Veckans länktips – 2012-02-26 | lillbra.se

    02/26/12

    [...] Responsive Navigation Patterns | Brad Frost Web Bra lista och exempel på olika lösningar för navigeringsmenyer i små skärmupplösningar (via @robertpiira). [...]

  31. David Radovanovic

    02/26/12

    You practice what you preach. This post looks awesome in my droidx. Thanks for sharing your responsive knowledge.

  32. Jun Osorio

    02/26/12

    Great post! excellent to my next project!

  33. Jun Osorio

    02/26/12

    Great post! excellent for my next project!

  34. howtomake

    02/27/12

    hello! very good work,excellent,
    bigUp

  35. Pascal

    02/27/12

    With the “Obama” solution, il could also be used in a similar way to provide a wild screen solution.

  36. Useful Responsive Web Design articles - Jan - Feb 2012

    02/27/12

    [...] responsive navigation patterns nicely explained by Brad Frost.  In short – what do you do with all that navigation when [...]

  37. nemrod

    02/27/12

    Very useful article and brilliament writing :)
    Thanks

  38. Heiko Mamerow

    02/27/12

    Tnx a lot!!! This was the right article to the right time for me :-)

    I tryed out all the above navs in my last projects, but the “one-and-only” is not borne yet. I think, it is a question of time – a lot op people use her smartphones now for interneting. They will lern fast…. the “confusing”-point in some navs is m.e. not the problem. For me it is more a question about – what will the customer say… :-)

    Btw: For my own work – i create my first responsive wordpress-theme: i prefer the “The Select Menu”.

  39. Niall McMahon

    02/27/12

    This is a great post. I recently had the dilemma of how I would display the navigation of a mobile version of a website. Initially I had it below the header but I had the height issue discussed in your post – users could not see any of the content below the navigations buttons. I opted instead to have it at the botom of the page, but I like the idea of the toggle that the Starbucks website uses.

  40. Pensar en móvil antes que en desktop | Usabili…qué???

    02/27/12

    [...] un artículo de un blog sobre Diseño Web Responsable, he llegado a esta presentación y a la web de Yiibu, que parece [...]

  41. Responsive navigation | H/G Code

    02/27/12

    [...] navigation on smaller screens are interesting. Here’s a post on Responsive Navigation Patterns. This entry was posted in Technique and tagged navigation, responsive. Bookmark the [...]

  42. Rudi

    02/27/12

    I’d go for either the Top Nav “Do Nothing” approach, or the menu toggle.

    Perhaps a poll would be really useful on this blog post to find out what developers like using :)

  43. Getting started with Responsive Web Design 100 articles and tutorials « CSS Tips

    02/27/12

    [...] 51. Responsive navigation patterns [...]

  44. Pull Down for Navigation - Inspect Element

    02/27/12

    [...] just yet. In fact, in the process of writing this tutorial, Brad Frost released a great roundup of responsive navigation patterns so I suppose this could be an additional technique to add to his [...]

  45. Ed Charbeneau

    02/27/12

    Brad, about a month or two back I tweeted you asking if you had a link to this exact type of article. Whether you saw the tweet or not, thank you for the post. This is an extremely insightful view of how to tackle mobile nav in a responsive site.

    “The Toggle” is my personal preference, and what will be used in most of my projects where larger menu systems are needed.

  46. joao polo

    02/27/12

    To me, the new twitter bootstrap (bootstrap 2) presents a cool responsible layout, using a select menu on short displays, but a superb layout then item “the select menu” in this article.

  47. Tavi

    02/27/12

    Awsome guide!

  48. Alexis Fellenius Makrigianni

    02/27/12

    Great write-up!

    I agree that The Toggle is the most elegant, but I think it’s problematic with subnav items. The Select Menu feels awkward too me. I prefer The Footer Anchor, at least when there is subnav items too.

    I wrote down some thoughts on these in http://lexi.se/post/18401593732/thoughts-on-responsive-navigation

  49. Responsive Navigation | Naga IT Services

    02/27/12

    [...] posts that really caught my eye were more focused, though: responsive navigation patterns by Brad Frost from a few days ago (a well thought out, well written, round up of responsive navigation patterns, [...]

  50. Responsive (Web) Design | Pearltrees

    02/28/12

    [...] Responsive Navigation Patterns | Brad Frost Web As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. [...]

  51. Anz

    02/28/12

    How is this one.. Horizontal navigation and anything slider
    http://www.lifetreecafe.com/

  52. Responsive navigation patterns | Entirely Splendid

    02/28/12

    [...] Responsive navigation patterns [...]

  53. Eric J. Davis

    02/28/12

    My question is: What do you call the Select Menu from within the site itself? Some examples use “Navigation.” Is that clear? Others use “Select a Page.” Is “page” accurate when, in fact, you may have major sections represented by the items in the menu and not simply pages? We’ve toyed with both “Menu” and “Sections” (the latter being the Boston Globe’s approach), but I’m not sure yet if either really resonates with users. And then, to make things more interesting, what do you call the level of navigation once you’re below the top level? Any advice is much appreciated.
    ^EJD
    @ericdux

  54. Sean Tubridy

    02/28/12

    Hi Brad, thanks for putting this list together and sharing your thoughts – it’s super helpful.

    I designed and developed the Confab 2012 site you mentioned above. It’s the first responsive site I’ve built. You’re absolutely right – it does need some help in the navigation department. While it wasn’t a total do nothing approach (I changed the nav items to be larger, more spaced-apart and to look more button-like at small screen sizes), but that still doesn’t take care of the height issue you mentioned. That’s something that has always bothered me a bit and even though there is a highlight state to indicate the page a user is on, it doesn’t show enough of the page.

    I’ve since made the header/logo much smaller and that helps a bit, but I’m still pondering what method to go with. I’m leaning for the toggle approach but I want to make sure users know how to open the navigation easily. I think “menu” or “navigation” would work as a toggle word. Some sites simply show an arrow or 3 lines (like Starbucks) which I don’t think is very obvious.

    Anyway, It’s getting there!

    • brad

      02/28/12

      Sean! You designed a hell of a website. I definitely don’t want you to think I was throwing your site under the bus. It’s a great site and the height issue is something that most of these responsive designs (including my own) deal with. These are all early days still and we’re all learning together, so keep up the excellent work!

  55. Kris LoCascio: Thoughts & Hijinks » Design Patterns

    02/28/12

    [...] Frost, just posted a piece about Responsive Navigation Patterns that you should check out. The interesting thing for me is this holistic approach. Being able to [...]

  56. Webdesign Blog

    02/29/12

    Very nice collection! The main problem for responsive navigations is the size and the whitespace between the navigation elements on mobile versions. Most developers know how to (re)place a navigation, but a lot of them don’t resize the elements and that’s the reason why the users have to touch a (too) small link…

  57. navigation | Pearltrees

    02/29/12

    [...] Responsive Navigation Patterns | Brad Frost Web As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. [...]

  58. Responsive Web | Pearltrees

    02/29/12

    [...] Responsive Navigation Patterns | Brad Frost Web As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. [...]

  59. lukasz fiszer

    02/29/12

    Recently I wanted to use a select menu navigation in one of my designs, but all existing plugins were based on jQuery. Using a whole heavy library just for one small piece of navigation, that’s not the best mobile friendly approach…

    So I decided to write my own plugin that would do the job. It is called selectnav.js and it’s lightweight (only 1.5kb), customizable and, of course, library independent. You can grab it from http://lukaszfiszer.github.com/selectnav.js/ I hope it will be useful for some of you.

  60. » Building Responsive Websites: How to Handle Navigation Menus » t3knoDorKs

    02/29/12

    [...] navigation menu in your manageable designs. Developer Brad Frost recently posted a good overview of responsive navigation patterns, charity adult pros and cons of any approach. Along with a drop-down menu, Frost covers options [...]

  61. ScreenOrigami

    02/29/12

    As with everything in web design, the navigation pattern you choose depends on your project and target group. This is a great overview and resource. Thanks! :-)

  62. What are some good examples of menu/navigation using Responsive Web Design? - Quora

    03/01/12

    [...] for menu/navigation. I came across a good article from Brad Frost that helps but looking for more: http://bradfrostweb.com/blog/web…Comment downvoted • Just nowCannot add reply if you are logged out.Just now  Add [...]

  63. 207 Articles on Effective WebDesign - Winter 2011-2012 - PSD to HTML Blog

    03/01/12

    [...] Responsive Navigation Patterns http://bradfrostweb.com/blog/web/responsive-nav-patterns/ by Brad Frost: “Here’s some of the more popular techniques for handling navigation in [...]

  64. Mozilla Hacks Weekly, March 1st 2012 ✩ Mozilla Hacks – the Web developer blog

    03/01/12

    [...] Responsive Navigation Patterns: A description of common way to solve the navigational challenge of a Web site intended for both the mobile and desktop world. [...]

  65. kanedo.net - Links vom 02.03.2012 bis 02.03.2012

    03/02/12

    [...] Responsive Navigation Patterns [...]

  66. Chris

    03/02/12

    Food for thought for sure. I usually stick with the traditional NAV on top, but you called it that if a client wants to expand the categories, this can great quite the head ache.

    Good call.

    Cheers,
    Chris

  67. Teresa K

    03/02/12

    Just what I needed today! Thank you, thank you, thank you.

  68. Responsive Navigation Patterns via Brad Frost | Jean-Paul Carmichael

    03/02/12

    [...] Nice job capturing responsive navigation patterns [...]

  69. Responsive Navigation Patterns | Brad Frost Web « Find It Share It

    03/02/12

    [...] Responsive Navigation Patterns | Brad Frost Web. [...]

  70. StevenCodes | Code Snippets, CSS Post | StevenCodes

    03/03/12

    [...] shows examples and covers the various techniques/pros/cons for handling navigation on small screens.Direct Link to Article — PermalinkResponsive Navigation Patterns is a post from StevenCodesPosts Related to [...]

  71. La veille du week-end (vingt-sizième) | LoïcG

    03/03/12

    [...] Responsive Navigation Patterns : via @pierrebernat (pour mon petit @@cirdek101 [...]

  72. Responsive Navigation Patterns | Brad Frost Web | Bralla's articles

    03/03/12

    [...] Navigation Patterns | Brad Frost Web http://bradfrostweb.com/blog/web/responsive-nav-patterns/ [...]

  73. Jonathan Roehm

    03/03/12

    Illuminating, potent, and honestly – quite brilliant. One of the better posts on the topic I’ve read in months. Thanks for the enlightening mindset.

  74. Weekly update (weekly) | ChrisFlink.nl

    03/04/12

    [...] Responsive Navigation Patterns | Brad Frost Web [...]

  75. TJ Taylor

    03/04/12

    A great write-up and I’m considering the toggle for our next site. We recently went with the Footer Anchor on our corporate site (the same one linked here to my name) and it works very well – intuitive and great device support, as well as fitting in well with our SOC.
    As for what to called the anchor – we just used ‘skip to menu’. Navigation as a word or concept doesn’t seem to be as recognisable generally.
    I thought it also worth mentioning that too often we don’t take advantage of the fact that mobiles can also be used as a telephone (gasp!) and it’s a good idea to include a prominent ‘call us’ link (we’re B2B).

  76. Wireframes for responsive design | Briarbird

    03/04/12

    [...] There are some elegant options for dealing with site wide navigation on the small screen. We tried using just a small version of the header bar but in the end we redesigned it so that the main menu is accessible via a button. Here’s an interesting article on responsive design navigation patterns. [...]

  77. Latest news from Magnus Attefall 03/05/2012 | Läsvärt | Attefall Allehanda - Nyheter och recensioner

    03/05/12

    [...] Responsive Navigation Patterns [...]

  78. Tim

    03/06/12

    Great write up, Brad.

    I’d be interested in your rankings of best (or least worst) to worst solutions, perhaps with regard to presenting content and covering most mobiles.

  79. Chris

    03/06/12

    Great article.

    I just saw this from Smashing Mag; an interesting idea to “pull down for navigation.” http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

  80. More Tutorials and Resources on Responsive Theme Design for WordPress : WP Mayor

    03/06/12

    [...] convert an existing theme into a responsive one.Brad Frost illustrates a few of the most popular responsive navigation patterns.Know of any other inspirational sources for responsive web design? Let us know in the comments [...]

  81. Justin

    03/06/12

    we’re going through the process of converting a large content heavy site with 4 levels of navigation across to responsive.

    I’ll check back with the details.

  82. Navigation patterns in mobile web design

    03/07/12

    [...] Go read “Respon­sive Nav­i­ga­tion Pat­terns” here. [...]

  83. Responsive Ready | May Sun Days

    03/07/12

    [...] Navigation Patterns [...]

  84. Link-Tipp: Lösungen für responsive Webseiten-Menüs im Überblick | Elmastudio

    03/08/12

    [...] Verschiedene Lösungen für responsive Webseiten-Menüs im Überblick → [...]

  85. Bølgeskvulp uke 10 | Making Waves

    03/09/12

    [...] Bradfrostweb skriver om responsive navigasjonsmønstre. [...]

  86. Building Responsive Websites: How to Handle Navigation Menus | Witty City Blog

    03/09/12

    [...] menu in your responsive designs. Developer Brad Frost recently posted a great overview of responsive navigation patterns, offering up pros and cons of each approach. Along with the drop-down menu, Frost covers options [...]

  87. 2012년 3월 12일 it 기술 동향 |

    03/11/12

    [...] 반응형 웹디자인의 패턴 [...]

  88. Usabilla UX Tweet Scoop – Week 11 of 2012 - The Usabilla Blog

    03/12/12

    [...] extensive guide to responsive navigations patterns by Brad [...]

  89. Responsive Navigation Patterns | wanso.tk

    03/12/12

    [...] Navigation Patterns http://j.mp/AzLFKO 반응형디자인에서 네비게이션 메뉴의 처리패턴 7가지. 장단점 및 실제 [...]

  90. Y de repente te encuentras creando interfaces de usuario con una sonrisa de oreja a oreja | HacheMuda

    03/12/12

    [...] flexible. Todo se adapta a tu pantalla. Que surgen cientos de iniciativas e ideas que te empujan a adaptarte a los cambios, que te ayudan a explorar nuevas formas de hacer las mismas cosas. Las mismas cosas [...]

  91. London Web Standards » Blog Archive » LWS Flux Live(ish) Blog (#lwsflux)

    03/13/12

    [...] Brad Frost has a good list of responsive navigation patterns: http://bradfrostweb.com/blog/web/responsive-nav-patterns/‹ [...]

  92. Radek J. (radekk) | Pearltrees

    03/13/12

    [...] Responsive Navigation Patterns | Brad Frost Web [...]

  93. Jaroslav Tesarik

    03/14/12

    Great article! I’ve been looking for post like this..

  94. Twitter Link Roundup #122 – Small Business, Social Media, Design, Copywriting, Marketing And More « crowdSPRING Blog

    03/14/12

    [...] Responsive Navigation Patterns – http://bit.ly/zwyv2d [...]

  95. Linkdump for March 15th | found drama

    03/15/12

    [...] Responsive Navigation Patterns By Brad Frost — a great and balanced overview of the emerging and established patterns in responsive design. (tagged: webdev design patterns responsive ) [...]

  96. Responsive design (diseño sensible) - La Industrial Galvánica

    03/16/12

    [...] Patrones de navegación con responsive design [...]

  97. UX CD

    03/18/12

    This is, as I see it, the biggest impediment to responsive design. I’ve seen literally dozens of sites and they work well as long as the navigation is very shallow (one or two levels deep), and the nomenclature is very concise. It becomes problematic when you have deep navigation (three, four or more levels), and large words. I feel this is something that the responsive evangelists step around. Many sites / blogs / gurus simply recommend that you collapse the nav levels. Problem solved! It’s not so easy. Sure, for your portfolio or design firm site, it’s fine, but most sites have navigation requirements well beyond “About Us”, “What We Do”, “Contact Us”, and copy written like haiku. You’ve done a great job of breaking down the various styles to date, but these are still limited, and not optimal for all experiences. This is a real challenge.

  98. Website - Navigation | Pearltrees

    03/19/12

    [...] As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Responsive Navigation Patterns | Brad Frost Web [...]

  99. Linkdump for March 20th | found drama

    03/20/12

    [...] Responsive Navigation Patterns By Brad Frost — a great and balanced overview of the emerging and established patterns in responsive design. (tagged: webdev design patterns responsive design ) [...]

  100. Benton Barranco

    03/22/12

    Greetings from Florida! I’m bored at work so I decided to check out your website on my iphone during lunch break. I really like the information you provide here and can’t wait to take a look when I get home. I’m surprised at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyways, great blog!

  101. Building Responsive Websites: How to Handle Navigation Menus | Paramark Inc.

    03/22/12

    [...] menu in your responsive designs. Developer Brad Frost recently posted a great overview of responsive navigation patterns, offering up pros and cons of each approach. Along with the drop-down menu, Frost covers options [...]

  102. User Experience and Development Consultants - NiceUX – View Full Website

    03/22/12

    [...] Brad Frost’s post “Responsive Navigation Patterns” [...]

  103. Andrew Pelt

    03/23/12

    I simply want to say I am new to blogging and site-building and seriously liked you’re blog. Almost certainly I’m likely to bookmark your blog post . You actually come with superb articles. Cheers for sharing with us your web-site.

  104. Jordicc

    03/23/12

    I’m doing a WRD and using another type of approach. I put the menus (a 3 icons one and a classic hierarchical menu) before the footer. On the computer and tablet screen I positioned they up throuth CSS. And on the phone, let they be at hte bottom. Does it seems right? http://www.kromatika.com/municipis/

  105. Mobile First | Thomas Wallace

    03/27/12

    [...] Styling Navigation [...]

  106. Tessa

    03/29/12

    One thing to keep in mind when using the select menu method: mobile browsers render these dramatically differently. For example, my android renders select menus at 40px high, which is about double what you’d find in a desktop browser.

  107. Estas pensando desarrollar para mobile? | Dot Prototype

    03/29/12

    [...] muy interesante al respecto. Para continuar la lectura les recomiendo este otro articulo “Responsive Navigation Patterns“, donde se analizan distintas técnicas para aplicar este patrón con distintos ejemplos. [...]

  108. 多设备的Web布局模式 | Vivien's blog

    03/31/12

    [...] Frost 最近对 响应式设计导航解决方案 [...]

  109. 多设备的Web布局模式 | Web App Trend

    04/01/12

    [...] Frost 最近对 响应式设计导航解决方案 [...]

  110. Quels choix de navigation en responsive design ? « Design Spartan : Art digital, digital painting, webdesign, illustration et inspiration…

    04/01/12

    [...] article (tout ce qui va suivre) est une traduction de l’article « Responsive Navigation Patterns » rédigé par Brad Frost, consultant et intégrateur pour mobiles, rédigé avec son [...]

  111. Heti érdekességek 14. « LES

    04/04/12

    [...] Reszponzív navigációs minták [...]

  112. Responsive Navigation Patterns : Rachel Steely

    04/04/12

    [...] Responsive Navigation Patterns [...]

  113. Jeff Kraemer

    04/05/12

    I second UX CD’s comment–these patterns work well for navs that are one of two levels deep.

    Brad (or anyone), have you seen any responsive navigation patterns that work well for three- or four-level navigation? I’m working on such a project, and it’s not possible to simply collapse the nav to two levels. I’m finding that it’s hard to avoid cramming the top of the screen with navigation at lower breakpoints.

  114. Le petit journal du web : PHP, WordPress, Javascript, CSS, Ruby, Responsive Webdesign

    04/06/12

    [...] Responsive Navigation Patterns [...]

  115. Live Wire WordPress-teema

    04/08/12

    [...] ulkoasun yksi suurimmista haasteista on mukautuvan navigaation toteuttaminen. Päätin valita Tiny Nav omaksi ratkaisuksi, vaikka huonot puolensa on tässäkin. Halusin [...]

  116. Live Wire WordPress-teema julkaistiin

    04/08/12

    [...] ulkoasun yksi suurimmista haasteista on mukautuvan navigaation toteuttaminen. Päätin valita Tiny Nav omaksi ratkaisuksi, vaikka huonot puolensa on tässäkin. Halusin [...]

  117. Web Links

    04/09/12

    [...] Responsive Navigation Patterns « The URI Women’s Council for Development » March 28 [...]

  118. Les liens de la semaine « DoubleVroar

    04/10/12

    [...] Des schémas de navigation en responsive webdesign [...]

  119. Responsivní navigace

    04/13/12

    [...] http://bradfrostweb.com/blog/web/responsive-nav-patterns/ [...]

  120. BDConf April 2012 | Martin Wright.tv

    04/17/12

    [...] | David Calhoun’s Developer BlogStarbucks Style GuideResponsive Advertising | Mark Boulton Responsive Navigation Patterns | Brad Frost Web   Tagged in bdconfLeave a ReplyClick here to cancel reply. Name (required) Mail [...]

  121. Responsive Development. The Overlooked Basics. | | The1stMovement Conversations - Discourses on all things digital.The1stMovement Conversations – Discourses on all things digital.

    04/20/12

    [...] NavigationNavigation is a big hurdle for responsive developers and designers, because mobile screen real estate is at a premium. There are a few ways of dealing with navigation, such as stacking, select boxes, toggles, and a few others. You can explore them all in detail in Brad Frost’s excellent responsive navigation roundup. [...]

  122. Responsive Web Design – Interface - Blog of Web Communications at the University of Missouri

    04/24/12

    [...] Responsive Navigation Patterns [...]

  123. 기기별 가변형 레이아웃 (Multi-Device Flexible Layout) – 그누보드 배우기

    04/25/12

    [...] 밀접하게 관련된 네비게이션(메뉴) 반응 패턴에 대해서, Brad Frost가 정리한 글에 따르면, 총 7가지 패턴이 있습니다. 역시 자세한 내용은 원글을 [...]

  124. daniel

    04/26/12

    wonderful info. thank you!

  125. peter

    04/26/12

    on my site (peter.muehlbacher.me) I went for a “toggle”like approach – although I made it sticking it to the top (position fixed → no JS used here and degrades nicely) and expanding it in a (hopefully) pretty way.
    Furthermore the animation starts on :hover (which is tap on mobile devices) and the menu shrinks if you tap elsewhere. all in all it’s pretty unobtrusive and works on all mobile devices I tested it on (old android devices, galaxy nexus and iPhone)
    feel free to check it out ;) (btw: in theory it degrades nicely, never encountered a device it doesn’t work on though ^^)

  126. Responsive Navigation Patterns | Brad Frost Web | webdesign FBAUL

    05/02/12

    [...] Patterns | Brad Frost Web by João Ferreira on May 2, 2012 • 12:56 No Comments via bradfrostweb.com Previous postInsect [...]

Leave a Comment