7 Ways to Improve Your Responsive Web Design Approach

If your users are demanding a toggle to switch between desktop and mobile layouts, perhaps your Responsive Web Design hasn’t been as successful as you hoped. Here are seven considerations before you jump on the RWD bandwagon…

1. Why use Responsive Web Design?

RWD is a cheap option; you can re-purpose your existing desktop layout to ensure it works well on a smaller mobile device. If you’re developing a new site, there are few reasons not to use RWD.

However, are you considering RWD because it’s an inexpensive way to tick a few business strategy objectives? You can certainly implement a mobile layout within a few hours but will it be useful? It’s usually obvious when a responsive design has been added as an afterthought. It may be better to stick with a good desktop layout than undermine your online presence.

2. Consider the Context, but…

…avoid stereotypes.

Historically, designers considered desktop viewers to be static and smartphone users to be roaming. A train company would typically highlight ticket buying on desktop devices and station directions on mobile devices. There are a couple of problems with this approach:

  • the boundaries have become blurred. People use whatever device is practical e.g. they may surf the net on a phone while watching TV.
  • RWD reveals nothing about the context. Device resolution is a crude assumption especially when you consider the high-density displays offered by modern phones and tablets.

If static and roaming users have different contexts, it may be preferable to provide separate mobile sites or apps which have dedicated functions.

3. Distill Your Content

Why do people visit your site? What’s important to those users? What’s their typical journey? Without these answers, you’ll be tempted to throw everything on the home page. That may be possible on a large display but you’ll struggle when switching to a mobile layout.

The best option: think small-screen first, then…

4. Design Upwards

Once you have a design for the smallest practical screen, you can work upwards in a series of media query breakpoints.

While there are no strict rules, breakpoint steps should not be large — perhaps no more than 200 pixels. However, each step need not be a major re-flow such as additional columns; it could be a font-size change, floating images or another simple tweak.

5. Keep it Fluid

Ideally, your design should be fluid between breakpoints — not fixed. While fixed layouts are easier to comprehend and code, they’re too fragile for RWD (refer to Is Your Responsive Web Design too Fragile?)

Ideally, even your media queries should use proportional units such as %, em and rem instead of pixels.

6. Never Compromise

RWD should never be used to offer a watered-down version of your website. In some cases, you should consider additional facilities on mobile devices such as geo-location and off-line support. Keep it simple and easy to use:

  • don’t use browser sniffing
  • don’t disable zooming
  • don’t hide content.

7. Only Performance Matters

RWD may be cheap to implement but it should be planned from the start. Applying RWD to a site serving 1Mb+ pages will never result in an optimal experience on devices operating over a mobile network.

Responsive Web Design is one of the most important technologies to appear in recent years. But using RWD badly may be worse than not offering it at all.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://nosnetrom.com Nosnetrom

    “Ideally, even your media queries should use proportional units such as %, em and rem instead of pixels.”

    I’ve never seen that done before, and I can’t imagine how it would be implemented. Would you give an example please?

    • http://www.optimalworks.net/ Craig Buckler

      Rather than using 500px, you’d use 50em. An em is based on the font size so it would refactor itself proportionally. That said, I’m not sure how % would work (if at all). Might need to try it!…

      • http://www.50secondsnorth.com Patrick Samphire

        It’s definitely a good idea, and there are definitely good reasons (related to layout when zooming) why you would want to base your breakpoints on ems, for example, but I have to say I’ve never managed it. I need to have different javascript for different screen sizes, and quite frankly, my javascript is too rubbish for me to figure out how to do it in any way other than with pixels…

    • http://www.adamcrooker.com Adam

      I’m actually doing just that right now.

      If I have the following markup:

      something

      something else

      I would use these styles (off the top of my head here):

      .row {
      max-width: 1024px;
      min-width: 320px;
      padding: 0 1em;
      box-sizing: border-box;
      }

      .col-2 {
      width: 50%;
      }

  • http://www.tigersheavenresort.co.in/ tiger resort in india

    Points 2 and 3 are really the king => CONTENT.
    Thanks for the tips.

  • http://www.wdcwebsitedesign.com Ian

    All good points and i totally agree,point 3 is the most important in todays market.content is king.i always plan out the content first then work around that,nice post and thanks for sharing.

  • http://pimzzone.blogspot.com pimz

    nice tips… i can to practise now…

    thanks for your info…

  • http://wow-facts.com Ninika

    Content is the most important factor. Very nice post. You can add one more point, highlighting the important points. This puts a nice impression on the visitor.

  • https://jokeyrhy.me/ Ron Waldon

    “RWD may be cheap to implement”

    I’d be interested to see a long-term cost comparison between RWD and the traditional approach (separate sites for desktop and mobile).

    RWD is new and requires a different mindset and probably a decent amount of education and training on the part of developers and designers. It also requires designers to think more like developers than they are usually expected to. RWD is also content-first, which means its hard for developers to “lorem ipsum” it (although we shouldn’t be doing that anyway).

    Also, RWD maintenance needs to be tested across multiple devices in the same way that the original design was tested.

    I haven’t built a commercial RWD site yet, but I’ve been reading like mad for months and it seems to me like the cost benefit of having a single code-base is offset by needing additional training and testing for each update.

    As I’ve said, I don’t have much experience here, and I imagine that once a team is trained up the cost benefits can be realised more easily. So perhaps the comparison needs to be a matrix of:
    – team’s first RWD project vs experienced-RWD team
    – RWD vs traditional separate sites
    The different stages of a project’s life-cycle also need to be compared:
    – period of time up until first production release
    – maintenance releases

    I suspect RWD gets cheaper with experience and time, but I’d like to see a thorough analysis with some real-world examples just in case. Who knows, maybe this is a myth and the money part really isn’t the best reason to pick RWD…

    • http://www.optimalworks.net/ Craig Buckler

      Thanks Ron. Of course, it’s impossible to compare ROI unless you build both an RWD site and separate mobile sites then test separately. We developers also tend to think RWD is less hassle than device-specific apps, but won’t always be the case.

      Every site is different. Those with news and article content will probably benefit more from RWD. Web applications may be better as a separate sites/apps. Unfortunately, it’s not always easy to tell the difference! When does a website become an application?

    • http://www.thisisourjam.com Jeremy Miller

      Frameworks like Bootstrap and others have simplified the process a great deal, which allows responsive sites to be developed even faster. It does take a little bit of knowledge, but the more you develop the more code you can reuse, the more you learn, the quicker you become.

      In my opinion one site for many devices will always be easier to manage than many sites built for many devices.

  • http://metaflood.com MetaFlood

    One big change I’ve made to my Responsive approach after my first build, was to keep it simple with your Javascript changes. I was using jQuery to .detach() content and move it all over the place, also altering the navigation in ways not possible with CSS alone to create 3 totally different versions, etc. In the end, all of that very specific Javascript was fun to play with, but fairly painful to maintain, and not really worth it in the grand scheme of making the content available to as many devices as possible. Old advice is good advise: Keep It Simple!!

    • http://www.thisisourjam.com Jeremy Miller

      One thing you could do instead of worrying about javascript is hiding certain content for desktops and showing for mobile and vice versa. Bootstrap has a simple class syntax so that you can just hide and show elements for different versions.

      The only thing I’ve really used javascript for was adding or removing “last” classes for column type content for e commerce sites or something like that. Although, what I really should have done was just make it so the content floated without issue.

      Every site I build is better than the last one. It’s just a learning process. In the end, it doesn’t really matter to anyone but you and your developer friends. The average person will never even know or care how you’ve developed your sites.

  • http://www.aureliendebord.com/ Aurélien – freelance web

    Thanks for the tips. I will just try your method right now !

  • Elie

    Thanks Craig for the tips, here is a new tool for testing your responsive design site http://www.pikock.com/en/pi-responsive.html

  • http://wearepropeople.com/ Propeople

    Great post and tips! Making your website device agnostic is crucial nowadays. Most of our customers include this as one of the main requirements and it’s not hard to understand why. Since mobile devices are very (increasingly) popular as a way people use to surf the web and buy from the internet.

  • http://www.chromatix.com.au/ Amber Lara

    Hi! Thanks for this well written article as well as those helpful tips!

  • http://www.zylone.com alexjuvion

    Nice post dude…

    I like it very much,

    And yes em is better than px and it also reflect the font size.

  • Jurgen

    Every now and then I read in posts about responsive design that it’s best to start with mobile design and then “work your way up” to larger resolutions. The authors never care to explain why this would be best and how to do this. In my opinion this seems totally inefficient and almost undoable. How does this work in reality? I can’t imagine creating a site for mobile use, and then add more stuff in several steps. The other way round is far more logical and actually quite easy to do. It’s seems to me it’s far more easy to create a “normal”site, and then gradually skip stuff, and replace or redesign existing elements, than to start low level and work upwards.

    • http://thecodezombie.co.uk thecodezombie

      From a CSS perspective, coding mobile-first is a more logical approach; mainly because block elements (div, section, article etc.) are naturally full-width. If you go desktop-first, you add width restraints (and floats) only to take them away as you go smaller.

      Designing / developing from a desktop size probably feels more natural because it’s been the norm for so long…RWD has turned many things on it’s head.

      I’d say design how you want, mobile-first, desktop-first, it doesn’t matter; so long as there’s been consideration – usually with lots of pen and paper – as to what happens to elements as the screensize increases. Pen and paper is where to make decisions, not glossy polished comps.

    • http://www.optimalworks.net/ Craig Buckler

      Hi Jurgen (and thanks thecodezombie).

      There are major benefits of mobile first. You’re offering a basic layout by default, so a browser which doesn’t understand media queries (oldIE, some mobiles) will show that simpler view without problems. Browsers which do understand media queries will also have better CSS support so you can apply enhancements to your basic view to make a desktop layout.

      Working upwards means you’re applying better and better styles until you reach the ultimate large screen layout. If you start with desktop first, you need to remove the styles you’ve already applied and work back to a basic view. That’s more difficult, it’s too easy to forget something, and is likely to result in more CSS code.

      This article explains more about RWD and mobile first. It may help…
      http://www.sitepoint.com/support-old-browsers-responsive-web-design/

  • sushant

    Hi Craig, great post. U really made it simple even for a newbie like me.
    People today are using more than one device computer, tablet, phone, etc and they use it in complimentary fashion. In this scenario, it becomes imminent to take the different form factors and capabilities of each device into account when designing their website.
    In my quest to learn more about the RWD, I have registered for a webinar on Best practices in Responsive Web Design, it looks a promising one http://j.mp/125MSXv