Tips and best practices to develop responsive websites

by Jean. 19 Comments -

In the recent years, we saw both a rise of mobile devices such as the iPhone and wide monitors. Responsive websites are website that can adapt to lots of different screen resolution and always look good. In this article, I have compiled tips and best practices to create responsive websites.

Start with a template


Sure, you can start coding from scratch, but there’s a lot of interesting free templates that will make you save a lot of time. Among others, I recommend Mobile boilerplate, The 1140 grid and Skeleton. There’s a lot more than those ones, so feel free to google “responsive web design template” if you want more.

Working with fluid grid based layouts


Fluid layouts are an important part of a good responsive layout. In order to have a website that can adapt to many different screen resolutions, you have to use a fluid layout with widths defined in percents instead of pixels.

To get the size in percents from a size in pixels, you have to take the element’s width and divide it by the full grid size. For example: 200 px (element size) / 960 px (grid size) = 0.2083. Multiply this by 100, and you’ll get 20,83%.

This is why it is interesting to work with a 1000px grid. 1000 is a round number, and it is easy to calculate that 24% of this size will be equal to 240 pixels. For more info about 1000px grids, I recommend you to check out this article.

Flexible images

A very important aspect of a responsive layout is how images can adapt to the size of their parent container. The basic solution is to define a maximum width of 100%. This will make sure that your images are never wider than the parent container.

.content img{
   max-width:100%;
}

A better solution is to use context-aware image sizing. This technique basically consists of having different sizes of an image, and displaying only the size adapted to the device. Quick example:

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

And the related CSS:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

For more info about this technique, check out this article.

jQuery is your friend

jQuery is definitely a super useful tool when it comes to web development. Lots of jQuery plugins can help you to create better responsive websites.
A quick round up of my personal favorites:

  • FitText: A plugin that makes font-sizes flexible.
  • Elastislide: A responsive jQuery carousel plugin.
  • Supersized: A fullscreen background slideshow plugin.
  • FitVids: A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Don’t forget Apple’s viewport

The <meta name="viewport""> tag was introduced by Apple for their mobile devices (iPhones, iPads and iPods Touch). This tag allow you to specify the default size of a page when viewed with an iPhone or iPad.

<meta name="viewport" content="width=device-width; initial-scale=1.0">

The code above will ensure that upon opening, your layout will be displayed properly at 1:1 scale. No zooming will be applied.

For more info, feel free to check out Apple developper documentation.

Scalable background images

The CSS3 specification introduced a new attribute named background-size. As you probably guessed, it is used to define the size of background images. It can be a size in pixels, or it can use some of the reserved keywords. The cover keyword scale the background image (while preserving original proportions) to be as large as possible so that the background positioning area is completely covered by the background image.

html {
	background: url(bg.jpg) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

The solution above works perfectly in Chrome, Safari 3+, IE 9+, Firefox 3.6+ and Opera 10+. If you’re looking for a solution that works in older browsers, I highly suggest using this jQuery plugin or one of the alternative CSS tweaks published here.

Get inspired


When designing a website, it is always good to be able to get inspired by what others have done. Since the rise of responsive web design, online galleries have been created to showcase the best responsive websites.

The most complete gallery is definitely mediaqueri.es, but if you need some more inspiration, you can get it here or here.

Test, test, test, and test again!


Indeed, when developing a responsive layout, you have to test it in different resolutions. Of course, you can manually resize your browser, but why not using one of the useful tools created to simplify this task?

Lots of differents tools are available for you to test your website in different screen sizes. At the moment, my favorites are definitely ScreenQueri.es and Resize my browser.

Comments (19) - Leave yours

  1. javipas said:

    Any tips on responsive advertising? Responsive design is a fantastic idea, but advertisers, Google AdSense and IAB are not paying much attention to it… because right now ads dimensions are pretty fixed.

    • Brannon said:

      If you’re talking about ads you’re running on your own site, this CSS Tricks article makes a good suggestion:

      http://css-tricks.com/content-folding/

  2. Brad said:

    Nice post. I have been using responsive design in all of my projects lately. I need to actually do some work on my own site sometime.

  3. Vic Dinovici said:

    Thanks for sharing! I’m for a while interested in creating responsive designs but I use just media queries. Any particular reason you’re using jQuery instead of just media queries?

  4. Dan said:

    testing is indeed an important step when creative responsive websites, and thankfully there are many emulators available online which can help with this.

  5. Georgette Lucas said:

    Great article! Just one mention: Gridpack, the responsive grid generator. I think it’s the best and most flexible way to devise a responsive layout. You control every aspect of the grid from column padding to where ‘break points’ occur.

    The simple online interface makes it quick and easy to visualise your responsive grid system and output it in the formats.

    I’ve was using Skeleton & 1140 before but I’ve switched to gridpack for all my current website designs. Love it!

    YGoogle for Gridpack and you will find it (or add .com to it ;-)

  6. valeriy said:

    Jean-Baptiste Jung,

    you single handedly inspired me to redesign using max width imgs for parent divs. That is awesome. My site currently looks so miniature on the iphone that it is in no way functional. Did not know about viewport and might have to start thinking in advance about the grid upon my new project.

    Two awesome recent contributions from you recently, keep it up man!!

  7. Robert said:

    Responsive is definitely a huge trend this year. I didn’t have any skills at coding, but I still love repsonsive designs. Thankfully, many designers are now aware of it and they created several WordPress themes for my needs :)

  8. Jason said:

    I can’t think of a worse bit of advice than to ‘Start with a Template’. They’re OK for learning experiences, but they detract away from the actual learning on how to do responsive sites…it has the potential of making people reliant on it.

    Not only that, quite a few frameworks out there are pretty sub-par. I’ve delved into quite a few – includingSkeleton & 1140px – both of which I have issue with.

    Skeleton isn’t fluid, as it uses pixel vales. Probably the best term to describe it is “smart fixed-width”; which creates some horridly narrow, “clicky” experiences for certain viewports. 1140px isn’t as bad because at least it’s fluid. My issue with it is that it’s desktop-first instead of mobile-first.

    I’ve still to add to this article, but I wrote my thoughts about CSS frameworks here:
    http://thecodezombie.co.uk/blog/thoughts/a-common-problem-with-responsive-css-frameworks/

  9. Jory said:

    This is not mentioned because is more adaptive than responsive?

    https://github.com/srobbin/jquery-backstretch

  10. Jasmine said:

    Great tips on responsive web design. I must admit that I love responsive websites because they will look great on my laptop as well as on my mobile devices. In my view, it will be great if all websites were responsive in nature!

  11. Gerald said:

    That’s some very nice tips! For me, I only use media queries for images with different sizes, and also viewport for Apple devices. I don’t see how fluid grid layouts are useful though, but maybe that will change in the future. Thanks for this.

  12. KRS said:

    I 100% agree with Jason worst advice ever is to start with a temple if you cant write your code from scratch you shouldn’t be developing responsive websites. I could go on a rant of all the reasons why this is a bad idea but if you even think twice about using templates you obviously dont know what you are doing.

  13. Aahna said:

    Recently I have been having issues with the size of the designs, they behave differently in different browsers. But now after doing R&D on great resources like yours, i am able to tackle this issue. Thanks!!

  14. Marc A. Donald said:

    Nice Article ! We can consider web design as a combination of planning + mixing text, images, and multimedia files to form a professional web design. Web designers utilize HTML for the website structure and CSS for adding their final touch from colors, fonts, alignment. Javascript is important as well to create an interactive page.

    But the point that web designers should be more familiar with the new web design techniques such as responsive web designs. Nowadays, huge traffic is coming from hand-held devices such as tablets and smart phones. A responsive web design will work on any device with no problem.

Leave a Reply

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

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!