7 Best Practices of Responsive Web Design

By / Nov 19, 2013 / Tips
shares

Considering the rate at which the mobile web is growing, it’s becoming crucial that your website be ready to accept visitors who are coming in from a widely assorted array of different devices and screen sizes.

This is where responsive design can come into the picture and save your day nicely. However, with responsive design, as with anything in website design, you need to make sure that you follow along with some crucial best practices if you want your responsive site to actually work well and provide the flexibility it’s supposed to.

Mobile Users Deserve the Same Quality of Browsing Experience

7 Best Practices of Responsive Web Design

One of the first and foremost principles to keep in mind when creating a responsive design site is making sure that the site is built so that the browsing experience is evenly the same for all users across the board.

This means that your site’s appearance and visual structure should change without ever creating content and function losses for users of any specific device or screen size. A visitor accessing your pages from their desktop should be getting the same sort of browsing experience as a visitor coming in through their smart phone or their tablet.

This means flexible everything and requires that you ensure all of your image, content and grids are fully fluid and will reconfigure accordingly on a wide assortment of screen sizes, such as these, which are only a small sampling of the very most popular screen sizes you’re likely to deal with.

The result should be a site that converts as nicely as this example does.

7 Best Practices of Responsive Web Design

Design your Site with Responsive in Mind

When you’re wire framing your site layout together for coding into a real design, understand that there are layouts which are ideal for responsive design and those which are not, meaning there are designs that convert to assorted new sizes better than others thanks to their layout.

This means designing as simple a site layout and HTML code as possible and using simple mechanisms for core elements such as navigation and menu options, using HTML5 guidelines and doctype, and a simple overall core layout.

What you should avoid completely are things such as overly complex divs, useless absolute positioning, and fancy Javascript or Flash elements that will just complicate site adjustment on the whole.

Pay Attention to your Breakpoints

Resolutions can be defined in an assortment of breakpoints, but there are several major sizes that you need to focus on more than any others. These being:

<480px (which applies to older, smaller smartphone screen sizes)

<768px, which is ideal for larger smartphones and smaller tablets

>768px, which applies for everything bigger such as large tablet screens and desktops screens.

Also, these can be used too if you’ve got the energy and time:

<320px, which is great for older small, low res phones

>1024px stylesheet for wide screens on desktops.

These are the key breakpoints to focus on and especially the first three as well as the full desktop resolution, which is greater than 1024px.

Make your Images Flexible and Workable

With a simple design, you can make your images flexible as well to a certain degree. The easiest way to accomplish this is by simply using adaptative sizing and resizing their width.

You can do this in a variety of ways, but one of the easiest methods through which to achieve it is with this handy little tool: Adaptive Images. Bear in mind that sizing accordingly for mobile users is probably your best bet on a responsive design site if you want decent load speeds, which are absolutely crucial.

7 Best Practices of Responsive Web Design

You could also use variable breakpoints and store multiple image sizes in your data for different screen resolutions, but this might become a problem in terms of bandwidth usage, and you cannot create your site with the safe assumption that all of your viewers will have access to powerful bandwidth.

Allow Compression of Site Elements and Content

Use a program such as GZIP to compress your page resources for easier transmission across networks. You’ll have lowered the number of bytes sent per page or element and made your content easier to browse and access from devices with varying or low bandwidth.

Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks. Doing this will reduce file sizes overall and keep things flowing more smoothly.

Get Rid of Non-Essential Content

In order to make your mobile friendly responsive design site really shine in a very easy to achieve way, simply bear one thing in mind: Some content and content elements were never meant to be used in a mobile context and would never work there.

7 Best Practices of Responsive Web DesignImage by Trent Walton

If you have these elements at play in your website or potential site layout, then get rid of them immediately for any mobile setting. You can do this by adding a .not_mobile class to specific elements that you’d like to see removed when your site is viewed in a mobile context or you can simply get rid of such elements permanently from all versions of your site.

Remember the Bottom Line

The above are just some of the major best practices you can try out, some of the more important ones.

Ultimately however, if you want your responsive design site to work well, you need to build it so that it can load and function quickly on devices that will often have low resolution, small processing power and sometimes weak bandwidth access. This means a simple, well organized site that conforms to its core function with maximal focus.

About the Author

Stephan Jukic is a writer who focuses on writing about web design and educational topics for Ascend Training. When not busy writing , he spends his days enjoying life’s adventures either in Canada or Mexico, where he spends part of the year. Connect with Stephan on LinkedIn and Google+.

20 Comments

  1. Nate Balcom
    November 19, 2013

    I love responsive design. I’m currently working on my 5th responsive website. Good tips here!

    Reply
  2. Mat
    November 19, 2013

    Good article. ;)
    You wrote: “Some content and content elements were never meant to be used in a mobile context and would never work there”.

    Can you give some examples of that content? Thx!

    Reply
  3. Gunnar Bittersmann
    November 19, 2013

    The advice given in section Pay Attention to your Breakpoints is NOT best practice. “Every time you see 320px, 480px, 768px, 1024px used as breakpoint values, a kitten gets its head bitten off by an angel…or something like that,” says Brad Forst.
    http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/

    Section Get Rid of Non-Essential Content says “when your site is viewed in a mobile context”. How would you detect mobile context? Accelerometer? Viewport size tells little about the context of use. Hiding context from mobile _devices_ is a bad idea. http://www.lukew.com/ff/entry.asp?1333

    Reply
  4. Gunnar Bittersmann
    November 19, 2013

    Best practice is not to “get rid of [non-essential content] immediately for any mobile setting” but to get rid of it for each and every device. And to keep essential content for all devices.

    “Use a program such as GZIP to compress your page resources”? Why? The server handles the compression of HTML, CSS, JS and other text files already. There’s no need to use a program for that.

    Reply
  5. James Darlington
    November 20, 2013

    Nice short article, never tire of reading about responsive design, and I like that you mention and provide a link for adaptive images, would have started with ‘get rid of any non essential content’ as it should be the starting point for any web design project nowadays especially a responsive one.

    Reply
  6. Alexis
    November 20, 2013

    Keep sharing responsive design tips, I am working on few html5 layouts and trying to give seamless work for my clients , so it was very helpful finding great tips from you.

    Reply
  7. Adil Meo
    November 20, 2013

    good article !!! nice information are given in it :-)

    Reply
  8. Mario
    November 20, 2013

    Hi, 320 resolution is not for “older small, low res phones”. That’s actually the iphone resolution so you should inform people that 320 is in fact the most important resolution to consider when designing for mobile. And no, I’m no talking about the older iPhones, I’m referring to the iPhone 5, 5S, etc. The retina resolution of 640 is not true 640 in terms of screen real estate, it is 640 in terms of “density” within the same non-retina space, so you just have twice the pixels within 320 width.

    In other words, if you look at any responsive site on an older non-retina iPhone with 320×480 resolution you will see the exact same content (at the exact same breakpoint) as you would on a retina 5s.

    Reply
  9. Bianca Board
    November 20, 2013

    Im trying to push for more responsive designs with my design company at the moment, so the timing of this article was pretty good. Thank you!

    Reply
  10. Lee
    November 22, 2013

    Great Content! Definetely will put this practice in mind at my website! :)

    Reply
  11. Muhammad
    November 22, 2013

    Nice Article!
    I myself am trying to build some responsive websites and idl4.com is one of those sites. I wonder if someone can provide some review of the site or mistakes I did making my site responsive.

    Reply
  12. SteveD
    November 23, 2013

    Interesting article. Food for thought. Thanks for the link to popular screen sizes although the site the link goes to might need to be updated.

    A Book Apart has some interesting books on the subject of responsive web design and content for mobile. Responsive Web Design by Ethan Marcotte, Content Strategy for Mobile by Karen McGrane, and Mobile First by Luke Wroblewski. Books to get one thinking.

    Reply
  13. matthew
    November 26, 2013

    Very instructive tips on responsive web designing.keep offering more fantastic tips.

    Reply
  14. Rob
    November 28, 2013

    Lets face it the days of non responsive websites are old hat, i build all new projects on responsive design now, theres just no going back for me.
    great article and a good read :)

    Reply
  15. Website Design Malaysia
    December 9, 2013

    always a pain when working on responsive stylesheets. but this could be a potential great guide.

    thanks

    Reply
  16. webloopin
    December 13, 2013

    Nice tips here, I am starting to work on my new project with responsive design, Really it is a tough task for beginners. Here I have found a good tool(responsivise.com) to test my responsive design which gives a good idea.

    Reply
  17. Mystik Creation
    December 19, 2013

    Responsive web design is one of the emerging web design trends which is not avoidable as there is a continuous increment in daily users of smart phone devices, tablets etc.

    So, It’s a nice guide to learn responsive web design and stay tune with emerging new web design trends.

    Reply
  18. Arianna
    January 17, 2014

    Responsive website design is a unique approach within the web designing domain to make websites compatible on a wide variety of devices.
    We are a website designing company and believe I follow the same steps that you mentioned above to make responsive website design. I felt good when I saw the tips to follow for website designing.

    Reply
  19. Craig Thomas
    January 19, 2014

    Cat web design, Web Design Cardiff, South Wales creates responsive website design so that peoples can browse website through their mobile device.

    Reply
  20. Ken
    February 21, 2014

    Nice tips here for beginners. Keep up good work.

    Reply

Leave a Reply