Tips and best practices to develop responsive websites

Tips and best practices to develop 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.