By Jean-Claude Colette
Dec 21, 2018
Here we explain what responsive design is, we present its evolution and we focus on responsive design.
Web design is about creating web interfaces and not just about the graphical design of the user interface. Web design requires technical skills (programming), visual and graphic creativity.
Evolution of Web Design
But the birth of mobile phones has complicated Web design because their browsers are not able to correctly display the pages of websites designed so far for desktop computers. Web sites were often designed for 960-pixel screen widths.
To adapt websites to mobiles, some created a mobile version of their site and detected the features of the device to redirect to the corresponding page.
New problems occurred with the introduction of tablets and devices with small screens.
Several techniques appeared: the adaptive design then the responsive design.
The responsive design that uses the CSS media queries to change certain properties of objects according to the size of the browser window seems to have taken over.
Responsive design is also recommended by major search engines.
There are currently many CSS frameworks based on this principle including Bootstrap and Zurb.
The major disadvantage of responsive design is the difficulty of creating style sheets with the media queries since we must modify the properties of certain objects according to the different screen resolutions. This encourages working with a CSS framework to avoid recreating all common objects each time. Note that CSS frameworks are always quite heavy because they try to support a maximum of browser versions and some features of the CSS language may not be supported by some versions.
Responsive Design is a technique that attempts to adapt the same HTML page to all screen sizes by primarily using CSS, media queries, and defining almost all object sizes as percentages of the parent. To facilitate the adaptation of the content to the width of the screen, we use a grid whose column widths are expressed in variable units (percentages, em, vw, etc.).
As the width of the screen decreases and a media queries event is triggered, the width of some columns is automatically increased, causing the next column or columns to be pushed down.