2 Indispensable Elements of Excellent Mobile Responsive Design

Responsive web design is all the rage.

Everywhere you look — including StudioPress.com — designers and developers are touting this site or that theme as responsive.

In fact we’ve got our own responsive design testing tool.

Big names like the Boston Globe and Sony have gotten on the responsive web design train, and every list of web trends have responsive design as the de facto standard trend for 2012.

But what makes good responsive design?

We’ve shown you how to create responsive design utilizing flexible grids and media queries, but beyond those what elements are required to really make a design stand out and be useful to your clients and readers?

I believe it all comes down to:

  1. Changing your thinking
  2. Understanding how to organize your content

Let me explain…

A Change in Your Thinking

The web has moved beyond the desktop, and it’s not turning back.
-Ethan Marcotte, Responsive Web Design

The first element to excellent responsive design is to embrace it wholly and change your thinking.

While most people agree that responsive design is not magic fairy dust that will solve all of your multiple device usage problems, it is the best thing we have right now — and its only getting better.

In order for your designs to really reach their true potential you have to start thinking responsively from the outset. This requires — in my opinion — a need to change your workflow, and have a philosophy of designing for the mobile device first.

In his article Redefined, Trent Walton states:

To design responsive websites effectively and responsibly, I had to completely redefine the way I view the web.

The process of comping everything out in Photoshop first is quickly becoming more of a burden than benefit. In the past HTML and CSS were used to realize the vision that was produced in Photoshop. The problem is that this only works for one view — the desktop.

In reality we have a choice: either design multiple pixel perfect layouts in Photoshop or move the majority of design/layout to the browser and use Photoshop for the graphical elements.

It’s the idea that you are not building a web “page” anymore but rather a “network of content” that can be arranged and displayed to show it off in the best way possible, no matter where it is being viewed.

I truly believe that progressive enhancement is the key to building web sites today — not only for CSS, but for your content design and layout as well. We should start designing for the mobile device and its constraints, and then allow the site to grow.

In his book Mobile First, Luke Wroblewski, one of the foremost voices on mobile design today has this to say about the benefits of embracing a mobile first philosophy.

It not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

The mobile revolution is here and its not going anywhere. If we as designers don’t adapt and change our thinking, you’ll be easily replaced by those that do.

Organizing Your Content

The biggest benefit to responsive design is the ability to adjust the layout of your content — and in certain cases, the actual content itself — to fit your user in their environment.

It does your users a great disservice if all you do in your responsive design is move your sidebars under everything else. Creating excellent responsive design means you have to think through the context in which the user will be interacting with your content and adjust it to meet their needs.

For example, most people on mobile phones will not be surfing to your site randomly. Most likely, they followed a link to view a specific piece of content on your site.

At that point they have no interest in your navigation menu that takes up the entire screen, or your huge, full-width search box. And while it may not seem like a big deal, this is where responsive design really shines.

You have the opportunity to present to those users what they want in a way that is attractive and easy to read.

What follows are several case studies of sites that are organizing their content responsively while keeping user interaction as a primary focus.

Case Study – Sony USA

One of the biggest problems people are having a hard time solving with responsive design is what to do with the navigation menu. It’s obviously important, but as I pointed out earlier, on a mobile device it can get in the way of a fluid reading experience.

For sites with just a few navigational items it’s not as big of a deal because you can often place them on one line, where its not taking up too much screen real estate. But what if you have a large site with lots of sub-menus?

Most responsive sites have chosen one of two routes: they either hide the menu altogether with javascript and then allow it to appear on press, or they move it to the bottom of the content and have an anchor attached to it at the top.

The first option is definitely preferable. I can’t tell you the number of times I’ve tapped a menu button to see what is offered only to be jumped to the bottom of the page. You then find yourself swiping your way back to the top of the page. That’s bad user interaction.

The Sony site has — in my opinion — the best responsive menu for a mobile device.

They’ve taken their menu and placed it in a single button next to the logo that expands on touch. The best thing about this menu is that it mimics a native app, and when you select a top level menu item with a sub-menu you’re taken directly to that sub-menu with a back button.

There are a number of advantages in executing the menu this way:

  • The content behind the menu remains, even if the reader decides to abandon the menu
  • The user does not have to swipe around to see all the menu items
  • The interaction process is one that is familiar from a native app

Sony Responsive Design #1

Sony Responsive Design #2

Sony Responsive Design #3

Case Study – CSS Tricks

The CSS Tricks site also has a very well thought out navigation menu that takes into account both the device and situation that the reader is in.

In widescreen, the navigation menu uses up a good amount of horizontal screen space. Since it has more space to use, it progressively enhances and includes a helpful description of what each link is about.

CSS Tricks #1

When the screen width goes under 960 pixels, the navigation does a very smart thing that a lot of sites get wrong — it doesn’t get smaller as the screen does, but splits itself onto two lines.

The font is the same size, the icons are same size, and everything is still very selectable by touch.

CSS Tricks #2

At 860 pixels and under the navigation still does not get smaller, but instead chooses to eliminate the icon and gets taller, which is also better for a touchscreen user.

CSS Tricks #3

600 pixels is the final break point for the navigation and now breaks itself into two columns.

Notice that the navigation items have only decreased in physical size sightly, and still give the reader a good experience to select.

CSS Tricks #4

One other bit that shows the designer was really thinking about the user is the view in portrait mode on an iPhone. The logo, nav menu and ad fill the screen exactly to the pixel.

CSS Tricks #5

You’ll also want to check out the “easter egg”, and watch the clever ad for Treehouse as you decrease your browser width.

Case Study – Smashing Magazine

One of the negative examples I mentioned earlier is that a lot of developers are making their sites responsive simply by shoving their sidebars under all their content.

Smashing Magazine does a good job in managing the content in the sidebars in a responsive way.

Their site employes a three-column layout with a navigational sidebar on the left and a sidebar on the right that houses ads, featured articles, and other content.

In the widescreen layout, they take advantage of modern wide browsers as the site expands to a maximum of 1800 pixels. This is a great use of screen space because as screens grow wider, their primary content — articles — gain the extra space.

Smashing Magazine #1

At 1220 pixels the navigational sidebar re-locates above the main content.

This might be the only place where I disagree with their content placement decision. 1220 pixels is still fairly wide and I can see a user wanting to have content navigation available as opposed to ads. Obviously, the bills need to be paid and that needs to factor in, but from a consumer’s perspective I think it’s a mistake.

Smashing Magazine #2

1010 is the next break point. Here the subnav menus come back and the ads disappear.

This is a calculated move to have the content fit beautifully on a tablet device. Knowing that most consumers that fit in this screen width are probably using a tablet and are intent on reading, they made the decision to remove the ads and focus on content and navigation.

Smashing Magazine #3

The last break point at 610 pixels assumes that all users will be using a handheld device and coming to read a specific article.

They remove the top navigation bar — as well as the social icons — and condense the main navigation menu into a drop down.

Smashing Magazine #4

4 Final Questions to Consider

I would encourage you to think through your responsiveness as much as you would think through any other content layout decision.

For responsive design to do what it’s truly capable of, we need to change our thinking and change how we organize our content.

Ultimately it comes down to choosing what content you want your users to experience, in their own context? In his chapter on organization, Luke Wroblewski offers four principles that every designer and developer should when considering responsive design:

  1. Have I thought through how people will use their mobile device on my site?
  2. Have I placed an emphasis on my content (as you should) rather than graphics or navigation?
  3. Have I provided relevant options for exploring and pivoting?
  4. Has my design and content maintained clarity and focus?

Comments

  1. I stuck on one question!! What about removing some widget areas using user-agent. Since this question is beyond the scope of studiopress forums. I would like to know what you think on this idea.

    The idea is:
    “Remove some widget area based on user-agent of a browser. If we make this, it will enable sites to render fast on low end or low resolution devices. Specially footer widgets of many sites are not useful for end users, it will require a lot of scroll and only a few visitor scroll to that place.”

    Overall responsive design is perfect solution for PC and tabs.

    • You may want to post that on the forums – while you’re correct in that it’s customization beyond the scope of what we offer support for, there may be other users who have done something similar and are willing to share.

  2. Are you working on making StudioPress themes ‘responsive’? It appears that they aren’t currently. I’m considering the Associate theme specifically.

  3. What a great article! Thank you for spelling out some of the thought processes behind the decisions and implementation of responsive design.

    • Thanks Karena!

      I’m sure this will be an evolving process the more we code and learn about responsive design.

  4. I am genuinely gobsmacked by the quality and depth of this article. Josh, you have explained to me in layman’s terms exactly what responsive design is; why it matters; and what we need to do, next, to cater for our mobile communities.

    I’ve Tweeted the heck out of this piece because it’s that good. I just wish I knew where to start to actually follow through on some of your sage advice!

    Thanks so much.

    • Dave, thanks for encouragement!

      Getting started it seems is always the hardest part. If you haven’t already, check out our first two articles on responsive design; I linked to them in the beginning of the article. Those will get you started on building the foundational components which are a flexible grid, flexible images and media queries.

  5. Hi Josh
    Wonderful article.
    Agree with Karena – good to have an insight into the thought processes behind the decisions.

    The case studies put a little flesh on the bones.

  6. Thanks for this well written, relevant article. In my web dev firm, we are definitely re-thinking everything mobile. (especially as you mentioned — navigation) It’s kinda funny how our customers ask very casually (after having sites up for years) “Our site is mobile friendly, right?” And my typical evasive/web snobby answer “Well, it depends on what you consider to be mobile” (my inner monologue: “No”) Back to leaning and tearing everything apart!

    Thanks again,
    //D

  7. Great article – navigation seems like a big challenge in mobile responsive design, especially if we are used to fancy drop-down menus (but perhaps don’t actually know how they work, speaking for myself.) I’m bookmarking this for future reference.

  8. Outstanding post. Thanks!

  9. This is a great post!

    I love the case studies. Is it possible to use StudioPress/Genesis Framework to build a mobile responsive site like Sony has, with the menu button at the top? I really like the layout and the tabbed section in the middle is exactly what I need for a directory site I am getting ready to build. Need to know where to turn to learn how to build my site so it is responsive like this.

    Thanks for the great post and any help you might be able to pass my way.

    • Yes, it is.

      Just for starters you could include the menu in your header widget and write a media query that would activate that container.

      • Thanks for the reply Josh.

        I’m totally new to this responsive web design, so I don’t understand how to write a media query. Could you point me to a website that I could read up on this to understand how to do this?

        It seems like I just start to get one thing down and another one comes out. Constantly learning, which is a good thing, but sometimes hard to keep up with.

        Thanks for your help!

  10. Very informative post. I am interested on reading the book you mentioned now. Thank you!

  11. Great post. You’re bringing up nav issues/solutions that I had written about to Brian a few months ago. It will be great to incorporate other nav solutions in Studio Press themes going forward as they become more “responsive”. I think it is a good reminder for designers and clients that the content/usage needs to be reconsidered, possibly reconfigured once you’re using a mobile device. I already had to find a different slideshow tool that would scale.
    Anyway, thanks for the mental shift reminder.

  12. Bootstrap is collapse the menus in small screens:
    http://twitter.github.com/bootstrap/scaffolding.html#responsive

  13. Hi Josh,

    I really enjoyed your article. You’ve stated a lot of great points especially “4 Final Questions to Consider”. I wanted to ask what tools should people look at using to test different screen resolutions when developing a responsive web site? Thanks Josh and as always love reading your articles!

    Luc Arnold

    • Luc, when I develop for responsive design, I usually do my initial viewing of various devices with our responsive design testing tool.

      • Since the code for his tool on on Github, it would probably be kinder for Matt and his bandwidth costs to host a copy on a SP subdomain, and encourage SP users (and potential users…) to use that.

        • Good suggestion Gary, didn’t realize it was on Github (though I should have seen in the footer) and now I’ve got it hosted on our site.

          • Yeah, we installed it on our server for testing in development. It is a great tool. Matt is awesome for developing, and sharing it.

      • Thanks for sending this over. This is definitely one cool tool for developing responsive websites!

        Luc

    • Obviously the best tool is to have some actual mobile devices but beyond that the tool Brian and Gary mentioned is a good one. There are also multiple extensions you can install for both Firefox and Chrome that will allow you to resize your browser window to specific breakpoints.

      • Hi Josh,

        When you said ” There are also multiple extensions you can install for both Firefox and Chrome that will allow you to resize your browser window to specific breakpoints.” I was wondering if you wouldn’t mind highlighing a few of these extensions that you love and use?

        Luc Arnold

        • For Chrome I use the Window Resizer extension. One thing about the Chrome extension that I really like is that when you manually drag and resize the window a pop up tells you the exact pixel dimensions of your window.

          And for Firefox I use the Firesizer extension

  14. Once again a great article with great examples of mobile friendly design. I’m really looking forward to learning more from all the great folks at Studiopress.

  15. Interesting article, I agree with you we need to change our processes.

    However I still wonder what I’m supposed to show my clients. They still need to see visuals, particularly if you’re making them choose between 2 or more designs. It’s unclear to me what I should show them and at which point.

    Plus I don’t think one can truly be creative and experiment with design when working directly in the browser. Tools like Photoshop make experimentation and what we call ‘happy accidents’ possible. Designing in the browser doesn’t.

    • When I was doing client work I found designing in the browser was actually better for them because they could see the whole picture – I didn’t have to create multiple comps to show how an interaction worked. And if we wanted to experiment and change how something interacted it was very easy and quick to do so.

      I’m not advocating for getting rid of Photoshop completely, I still use it to create the graphic elements, but what I think you’ll find is that when you change your mindset you’ll be able to get more creative in how your designs interact with the browser.

  16. Thank you SO much for addressing more than simply design specifications for responsive design. People will probably be talking about this in-depth as responsive design becomes standard, but I’m very interested in the UX and studying the habits of people as they use their various web enabled devices. Thanks for the case-studies too…great ideas there!

    • Glad to help you out April!

      It will be interesting as the year progresses to see what people come up with in terms of solving UX issues with responsive design. Look for us to post more articles and cases studies as it evolves.

  17. Josh,
    I’m glad you’re nudging people towards changing. While Photoshop certainly is a great tool, and I can quickly make templates from PSD’s, it’s boring always following that scheme, and I look forward to other approaches. At some point, designers that don’t adapt will start losing work, I think.

    I’m going to add a pinch of responsive code to the Prose theme, which I’m working with this week. It’ll be more fun to do it myself than to wait for the update.

    Another excellent article, thanks! Dave

  18. This article is great. Thanks for sharing it with us.

    We need to realize that the one constant in design is “change.” As the devices we use become more advanced and the ways in which people connect to the online world evolve, the way we think of design will also need to change. Responsive design has really pushed the envelope, allowing designers to create websites that offer a fluid layout that resizes based on a specified device size and this is now the ideal situation.

    Again, great article. If you’re interested in checking out a gallery full of responsive designs, head on over to http://www.gottaloveresponsivedesign.com

  19. While I appreciate the review of different approaches to navigation in this post, I don’t see how “thinking responsively” necessarily requires “a philosophy of designing for the mobile device first”.

    We’ve always had to decide what was the most important part of our content no matter what the viewport. This didn’t suddenly become a requirement with the advent of smartphones.

    If anything, responsive design requires us to think on multiple levels at once, have a couple of balls up in the air at one time. That’s the change in thinking. This focus on one end of the scale is liable to sell short all the other points down that long line of design.

    • Hi Leo,

      The article is written from a general perspective and the numbers don’t lie. Most people, if not already, will be accessing the web more from mobile devices than from a desktop. So very often their first point of contact will be from a mobile point of view.

      Knowing that, you’re better off starting from a mobile perspective since that is where your first point of contact will likely be and then progressively enhancing the site as the tech and screen size allow.