March 28, 2024

7 Best Practices of Responsive Web Design

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.

Share

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+.

23 Comments

  1. Mat Reply

    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!

  2. Gunnar Bittersmann Reply

    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

  3. Gunnar Bittersmann Reply

    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.

    1. Marcus Tucker Reply

      Agreed, the phraseology “Use a program such as GZIP to compress your page resources for easier transmission across networks.” suggests the author doesn’t fully understand how GZIP is applied to resources requested via HTTP, as does the following sentence “Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks.” which achieves nothing if the content is compressed by the server, and complicates development unless applied as part of a batch process prior to upload to the server.

  4. James Darlington Reply

    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.

  5. Alexis Reply

    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.

  6. Mario Reply

    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.

  7. Muhammad Reply

    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.

  8. SteveD Reply

    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.

  9. Rob Reply

    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 🙂

  10. webloopin Reply

    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.

  11. Mystik Creation Reply

    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.

  12. Arianna Reply

    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.

  13. Loretta Reply

    Great article. I’ve developed such a passion for responsive design its the only type of site I want to build. Thanks for the tips.

  14. Tarian Reply

    “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.”

    And that is the problem with Responsive Web Design.
    Web designers have been dumbing down Desktop sites so that they look the same as mobile sites.
    ….Dreadful UIs opening with:
    – a HUGE screen-filling picture
    – minimal, often disguised navigation
    – long, narrow column
    – empty white space …
    ….. all so endless scrolling.

    But the worst thing about Responsive on a Desktop…..
    It discourages window re-sizing

    Menu items disappear. Content shuffles around (pushed down, out of sight mostly)

    WHY ????
    I’m on a bl**dy Desktop – trying to WORK !!.
    A smaller browser window does NOT mean I’m using a mobile.

Leave a Reply

Your email address will not be published. Required fields are marked *