What is responsive webdesign? responsive webdesign

What is responsive web design? Responsive web design is an approach to web design. The web developer strives for an optimal web experience for a wide range of devices (from desktop computer screens to mobile phones). The design of a responsive website scales with the dimensions of a screen. Without compromising on the readability of text or the usability of the user interface.

History

The term responsive web design was coined in 2010 by Ethan Marcotte on the weblog A List Apart. Marcotte noted at the time that more and more companies were investing in a mobile website to offer their customers an optimal mobile experience as well. But due to the growing number of devices, all with their own resolution and dimensions, one mobile website turned out not to be an optimal solution. Rather than designing in fixed dimensions, an approach that dates back to the print age, Marcotte noted that it was much more practical to design in percentages and other relative units.

Techniques

A responsive website adapts itself to the environment in which it is displayed using flexible grids, flexible images and CSS3 media queries. Some of the techniques devised by Marcotte are:

  • Flexible grids and images
  • The flexible grids ensure that element widths and heights are not determined in pixels, but in relative units as percentages
  • Flexible images are also relatively scaled so that they are never displayed out of proportion.

Media queries

Media queries give the web page an indication of the dimensions of the device on which the website is loaded. Usually the width of the screen is taken as the starting point. The website can also take the pixel density of a screen into account, for example to load images at a higher resolution.

Why responsive webdesign?

We are being thrown to death with this term these days, but not unjustly. In 2015, there are still a lot of websites that do not work well on tablets and smartphones. Research shows that 30 to 35% of websites are visited on mobile devices. Customer statistics confirm this. RWD is therefore not a hype!