What is Responsive Design?
The invasion of mobile devices
For the past ten years, mobile devices (phones and tablets) have taken over the Internet so much that now more than 70% of the world’s Internet traffic falls on mobile devices.
Obviously, web design had to respond to this challenge, and that response was the so-called “responsive design”.
While until recently website owners built separate mobile versions of websites only in rare cases and as a “special extra”, nowadays mobile accessibility of a website is not a luxury, but a vital necessity.
Google has already officially announced that sites that are not adapted for mobile devices will not appear in the search results for such devices … And this, in short, means that if your site is not “responsive”, that is, it does not adapt to mobile devices, you are losing 70% of your potential users!
Would you allow this?
What responsive design really is?
Responsive design is a website building technique where, by means of technical methods built into the site, the website detects the resolution of the device with which the client visits it, and “sends” to his browser exactly a version that is consistent with the capabilities and the requirements of this particular device.
In other words, if the visitor uses a desktop computer and a large monitor with a screen width of approximately 1920 pixels (screen dots) wide, he/she receives a site fit and adapted to these screen sizes. However, if the visitor uses a mobile phone with a screen width of only 320 pixels, then he/she will receive a version of the site on his phone adapted exactly to this size.
How is responsive design achieved?
It would be hard to explain how responsive design works without jumping into too many technical details. Nevertheless, we’ll at least try to explain the essence.
In the previous decades, web pages have been designed with a “pixel perfect” precision. Any element of the web page, including the fonts, used to have its precise dimensions. In this way, designers were confident that their wonderful designs would look exactly the same way on all screens.
However, in the last decade, with the advent of mobile devices, this was no longer achievable. A table or a picture, defined as say 500 pixels (screen dots) wide, would simply no longer fit into the 200 pixels-wide screen of a smartphone!
That is the reason why designers were “forced” to no longer define the dimensions of the page elements as absolute but as relative values.
For instance, if a picture had to cover the entire screen, it was defined with a width of 100%. In this way, regardless of the real screen width of the specific device, this picture covered the entire screen in any case.
Alternatively, if for instance, a column of a table had to cover half of the screen, it was defined with a width of 50%, and regardless of the real screen size of the device, that column always covered half of the screen.
The same applied to font sizes. In responsive design, they are always defined as a relative value to the actual screen size.
Of course, we have to clearly state that this is a rather simplistic explanation of the responsive design, but this is basically the essence.
What are the advantages of responsive design?
First, the undeniable advantage of having your site built with a responsive design technique is that you won’t lose 70% of your potential customers… A more serious advantage could hardly exist…
… but there’s more: unlike the previously adopted approach of building separate sites only for mobile devices (the so-called “mobile sites”), you will no longer build, maintain and update two sites, but only one – Your responsive site.
These days, virtually all website developers work with responsive design techniques.
Nowadays, it would normally be useless to specify this when ordering your website. In 2022, it would be an unforgivable designer’s mistake to develop a site that is not based on responsive design techniques.
