4 Common Responsive Web Design Pitfalls

There are now more smartphone or tablet internet users than those surfing via desktop PCs.

This has led many savvy marketers to opt for a separate mobile-based platform where they could promote their brand and avail the traffic coming from portable gadgets. However, this practice requires additional expense as it involves designing and maintaining mobile websites along with the desktop ones.

Fortunately, these practices have now become almost obsolete thanks to the responsive web design that emerged with the advent of HTML5 and CSS3. Responsive web design purges the need for having a separate mobile website as it empowers the webmaster to present a website that can resize or fit itself to the screen size of any device: desktop, laptop, tablet or phone.

What may be less apparent to many designers and developers is that there are quite a few ways that your responsive design can fail. If you don’t want to waste your hard work by ending up with a mediocre or erroneous responsive website, I recommend you to be aware of  the following four pitfalls, in particular.

Breakpoints

Many designers waste their time setting up a RWD layout that mainly relies on the “device width breakpoints”, in short device dimensions. Keep in mind if your mindset is affixed with device dimension, then you’re not talking about a true responsive web layout. Responsive layouts are those that can adjust to any screen size on which they reside.

Given that companies are now churning out devices of every screen size they have in the book, it is important to unshackle yourself from this practice and instead create layouts that uses “design based breakpoints” in which adjustments are made where the design determines.

Content

Often, designers hide or discard website content in order to make it fit to a smaller device or screen-size. This is not best practice. Mobile users expect and deserve to experience te same content desktop users. If you hide content only for the sake of adjusting the size to a smaller screen, you’ll deprive them of that experience. To acquire content parity, you’ll need to change the content of a responsive site so that it can be viewed by all.

File Size

Content parity doesn’t mean puffing up your site with unnecessary or excessive content to the point of making it slower. If you look around, you’ll find many websites that have files of such size that they become sluggish. It is important to remember that over 74% of mobile users will leave a website that takes more than 5 seconds to load. Therefore, don’t hesitate to cut back superfluous content while still delivering a great user experience.

Images

In conventional web designs, we never usually worry about using images of any size or type. This has led to situations where pages are scaled to fit different device screen sizes, but images are not. What you have to learn to do is include image management in your rsponsive web design techniques. We have to use adaptive image management techniques that automatically detect the screen size and rescale images as well as text containers accordingly.

Conclusion

Some of these pitfalls might seem to contradict each other, and make your task impossible. And yet, if you look closely, you’ll see there are ways to achieve truly responsive web design and still avoid the aforementioned pitfalls.

The essential key is to always keep the end user in mind. Refine your content so that it truly serves the correct purpose – and you’ll find it becomes much clearer what content should always be visible or easily accessible, and what can be tucked away to be retrieved with a click or a touch. Think about how your users might prioritize their content needs when on a desktop, laptop, tablet or phone and design and develop your web presence accordingly.

Two other essential points to keep in mind are that you should not let yourself become so involved in making the technology work that you end up coding to suit a device rather than coding to suit a device’s user, and to conduct proper user testing to establish what actually works and what doesn’t for your users.

With those caveats in mind, you’ll find that you can design and develop not only responsively, but responsibly and – ultimately – successfully.

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://efren-martinez.pro Efren Martinez

    Great article, very useful , thanks !

  • http://www.yourivandijk.nl Youri van Dijk

    Cool article! One other issue that hasn’t been tackled properly yet is a universal menu solution.
    For example the menu on this site is quite difficult to use since it doesn’t seem to be responsive?
    Some use a dropdown (not so pretty) while others make it look more fancy and have their menu hidden below a button.

    To the users there is no coherent solution yet and across often fail which makes a site badly useable.

    • http://www.onsman.com Ricky Onsman

      Fair call, Youri, but we do have a responsive site redesign on the way in a matter of weeks. In the meantime, we can only take that on the chin. Ow.

      • http://www.yourivandijk.nl Youri van Dijk

        Woops sorry, wasn’t meant like that at all! I’m very curious what solution you’ll have for the menu. I just haven’t been impressed by most mobile sites yet.

  • http://www.pfuu.co.uk Pete

    Where break points are concerned, someone commented on another RWD article a few weeks back that with a fluid design the break points should be where your fluid design stops working. It was one of those lightbulb moments and I assume this is what you mean by ‘design based breakpoints’?

    • Alexus Durwin

      Yes, This is what I mean Pete!

  • http://whateverweb.com João Ribeiro

    Great points! In the end we’re designing for people and their experience with our content. RWD is an awessome concept, that should not be confused with “designing for breakpoints”, but to deliver
    a truly “responsiveness to the user”.

    In pratice, to achieve this, we also need tools that help diminish the size/image RWD pitfalls like image scalors and code optimizers, that fit within our RWD dev process.

    We’re working on some of these tools at whateverweb.com. I invite you to try our image optimizer service for instance and let me know what you think. We’re in beta and eager to help out solve real world problems, and in the end, help deliver that great UX you’re looking for :)

  • Alexus Durwin

    Yes, that’s what I mean

  • http://www.interface-design.co.uk/ WebFoo Interface Design

    Awesome tips! Thanks for this article!
    Would like to see something more detailed /advanced in the future…

  • http://www.yogacairns.com.au Bruce Symons

    Great article!!

    Would it be possible to expand upon the breakpoint issue. That would be a huge help.

    • maya

      yes and what about when you have, for the large screens, floated elements that are side-by-side… you have to stack those for the small screens… don’t see how you achieve this without media queries……;-)