French version of the article: Le responsive web design – Exemple.

Responsive Web Design roughly mean: the website design changes with the screen size. And it doesn’t only mean using fluid layout (i.e. relative width in CSS), it’s sometimes about changing completely the layout of the page.

Technically, it’s possible thanks to media queries which were introduced in CSS3. They enable to restrict CSS rules for specific situations, for example with conditions on the screen size.

I’ll show here an example of what you can do by using responsive web design in your website, and I’ll use the Awespot project for the example. For this case, I used the HTML/CSS/Javascript Bootstrap framework (made by Twitter), which provides basic CSS classes to go Responsive very quickly. Sidenote: Bootstrap rocks, it turns painful HTML and CSS into magic, peanut butter and butterflies.

Example

I’ll be comparing 2 versions of the website: with and without Responsive Web Design. There may be some other differences but they are due to a graphic redesign.

Home page

Wide screen

Without Responsive Web Design :

With Responsive Web Design :

We can see that the initial version had a smaller fixed width, because it had to be visible on smaller screens.

With the responsive web design, we can use a larger width because we know the website will still display OK on smaller screens.

Tablet or small screen

Without Responsive Web Design :

The red box shows the visible part in the browser (i.e. the user has to scroll horizontally, which is very bad).

With Responsive Web Design :

Here, the left menu (to add a spot) has disappeared to leave as much space as possible for the map.

The main menu and the logo are smaller.

Smartphone

Without Responsive Web Design :

With Responsive Web Design :

The difference is clearly visible, without responsive web design the website is unusable. In the second screenshot, the website is adapted to a mobile.

The main menu has changed again: the logo is way smaller to give way to the menu. The margins have also been shrunk.

Spot page

The spot page shows a place to visit. It is a gathering of a lot of information, so reorganizing for the mobiles it is not that simple.

Wide screen

Without Responsive Web Design :

With Responsive Web Design :

(please ignore the test data)

The visual differences here are due to the graphic redesign (thanks to Bootstrap).

Tablet or smaller screens

With Responsive Web Design :

With Responsive Web Design :

Big difference here: all the blocks (buttons, text, map, photos…) have been completely reorganized automatically to fit in the smaller space. They are now stacked to make reading easier.

You can see the empty photo frames have disappeared (because they are useless and they take too much space on this screen size).

Smartphone

Without Responsive Web Design :

We can imagine that the website is unusable in this situation.

With Responsive Web Design :

This time the website is even more vertical, but still displays OK and can be read.

Demo

You can see all that live (though the webdesign may have changed) on awespot.org: you just have to resize the browser window.

Conclusion

Setting up Responsive Web Design in your website is a very good alternative to a mobile-only website. Most of all it’s faster, easier and cheaper to build, and more maintainable.

But the main advantage is the flexibility: today the line between PC and mobile doesn’t exist anymore. Smartphones are getting bigger, with high resolution, and what about the tablets? The responsive web design is one solution for many different situations.

Let’s get a bit technical

Everything presented here (related to Responsive Web Design) was done solely using CSS (not Javascript). Bootstrap was extremely useful in the set up process, I invite you to read more about it on Boostrap Responsive Design.

Here is an example of a media-query in CSS3 to change the logo size for small screens :

@media (max-width: 480px) {
    #logoSmall img {
        max-height: 70px;
    }
}