07 Dec 2012, 22:42

Responsive Web Design in 10 points

Attached an infography in French about Responsive Web Design (RWD) and 10 points you need to have in mind when you do RWD.

[INSERER IMAGE]

RWD is a set of tools and techniques so that a single website will be visible on all devices, from smartphone / tablets to screens by optimising the rendering depending on screen optimisation. By using RWD, you no longer need to have a dedicated mobile site but it's not as easy as it may seem to make a site full RWD compliant.

A summary for English spoken people :

  1. Simple layout (at least at a code point of view) so that you can adapt easily the layout on the fly depending on screen (resize imagges, change content position, etc)
  2. Use mediaqueries ; they are one of the lever of the RWD. It is directives which basically says : if screen is x width, then display this content with an y size ; See the link to have some examples
  3. Be aware of main resolutions : 480/768/1024 px width for major ones ; you may refine with 320/720/900px - remember that 1024px width is default width size for website being well displayed on desktop PC.
  4. Have a fluid design so that it can adapt to the device it will be displayed on ; it also means that as you drop fixed positionning in favor of relative ones, you will control a little bit less the rendering as you may be used to.
  5. Manage your images : Depending on how you use them, you can resize them or manage a conditionnal display depending on screen resolution (ie display large image on desktop and a smaller ones for lower resolutions)
  6. Set correctly your min/max values to manage efficiently the rendering - for ex, even if your resolution is 2560px large, you can say that your website can have a maximum width of 1024px. Thus, it will not be over-stretched to your amazing screen and display nicdely. Sor for minimum value.
  7. Everything is relative but define it the right way ; Use %age value or use the "em" unit and compute value based on the unit you chose and remains consistent (do not mix % and em for ex)
  8. On mobile, use a single column rendering (but then take care of navigation and so on to ease your User Experience)
  9. Remove non necessary content - focus on the main action of your page
  10. Use the viewport directive to display nicely on the browser as some browser try to simulate the desktop navigation/resolution

I would add a 11th one which would be : never use "User Agent" as it's evil (in French).  to manage how you display your site on a device. Indeed, browser tries to be considered for another ones and cheats to some extend. So you can't rely on this information. Moreover, with the launch of the iPad mini, it's the same user agent as the normal iPad (in French) whereas screen size is definitely not the same...

A more global point on RWD is RWD from a project management perspective (French translation), which I also recommend to read before you want to define your RWD strategy for your next website.

Source : http://www.servicesmobiles.fr/services_mobiles/2012/12/infographie-les-enjeux-et-différents-points-techniques-sur-le-responsive-design.html