[Infographie] 10 things to know about responsive design

by bold-lichterman

Splio, a service provider specializing in multichannel customer relations, has just produced an infographic on responsive design. This concept consists of rethinking the way of designing online navigation routes. The objective is therefore to reorganize the information according to the parameters of the device. In addition to a real trend, this concept is a major issue given the explosion in mobile uses.

Infographie 10 things to know about responsive design

Relatively technical, the infographic highlights, in an offbeat tone, 10 key tips for designers and developers.

  • Set up a simple layout. The superfluous “Div” tags should be banned!
  • Use “media queries”, essential for adaptive design.
  • Define the boundaries. On this aspect, the agency identifies 6 points of major ruptures depending on the different terminals.
  • Favor a flexible layout so that the design is suitable for all devices.
  • Tame the images. Splio gives here some technical tips so that the images, too, adapt to different terminals.
  • Use the: “Max” and “Min”. The idea is to prevent the design from expanding or shrinking to ridiculous proportions on very large or very small devices.
  • Define a unit at the start of the content and use it to calculate the rest.
  • Organize content in a single column for low resolution mobiles.
  • Remove unnecessary items for mobile navigation.
  • And finally check its Viewport meta.

In order to illustrate all of these “tips”, the Splio agency refers the curious to the site mediaqueri.es, which offers a series of examples.

Infographie 10 things to know about responsive design