photo showing the same website on different screens. This is all the work of Responsive Web Design
Responsive Web Design: What is it?
If you view the same site on different devices (desktop, mobile phones, tablets, e-readers, etc.), you will notice that its interface adapts to the size of the screen you are using. This web design approach has a name: Responsive Web Design , also called adaptive web design .
This is a set of principles and techniques that allows the content of a page to be self-adapted to the medium used. For example, on a mobile, the text and images will be presented in a single column, while on a wide screen, there will be several. Consulting sites is then much more comfortable, especially on screens with extreme sizes. ( Demonstration video )
The term “Responsive Web Design” was first coined by Ethan Marcotte in an A List Apart article published in May 2010.
Why is Responsive Web Design on everyone’s lips?
Today, everyone wants a responsive site ! Two very good reasons explain this craze:
Since 2016, mobile browsing has overtaken desktop browsing and represents more than 50% of consultations ,
In 2015, Google changed its algorithms to favor “ mobile-friendly ” sites.
To meet user expectations and improve its natural referencing, Responsive Web Design is therefore no longer an option .
Ebook
Best User Experience Design Methods
Download the e-book
What was there before Responsive Web Design?
While creating a responsive website is now the norm, this vk database wasn't always the case. When smartphones came along, other solutions were considered and tested.
Some brands have created a site dedicated to each medium : one for computers, one for tablets, one for mobiles, etc. While this method is quick to set up and allows for the development of various functionalities , we can imagine all its drawbacks in terms of management, maintenance and SEO, particularly because of duplicate content and the difficulty of indexing by search engine bots ..
Other publishers have developed an application adapted to phones . Here too, the solution has some advantages: easy support for native features ( touch , accelerometer, notifications, GPS, etc.), total adjustment to the device (ergonomics, performance, pixel density) and direct access to the user's smartphone. For your mobile application to be used by a large majority of users, it is preferable to carry out a UX optimization of the latter.
But the development of the application in several languages specific to iOS, Android, WindowsPhone, etc. can take a long time to implement and difficult to support financially. Before developing a mobile application, we advise you to answer the questions: Why develop a mobile application? What more will it bring to users?
Another negative point: the applications are not indexed in search engines. Visibility therefore remains limited.
In the end, all these pitfalls found answers in Responsive Web Design : no more SEO problems (on the contrary), limited cost, automatic adaptation to the thousands of different existing screen formats.
Photo showing 2 people working on a website project in Responsive Web Design
What are the main techniques of Responsive Web Design?
Responsive Web Design uses several basic methods of website design.
Ergonomic design : it is no longer a question of designing as many paths as there are terminal families, but of designing a single self-adapting interface.
Queries or Media Queries , pushing different CSS styles depending on the size of the user's screen.
Fluid or liquid design where the widths of the different elements are expressed as a percentage, allowing automatic adaptation to the size of the window. However, this design is not very suitable for very large screen sizes or very small ones. It still represents a nice improvement over the static design that was the norm before 2010: the dimensions were fixed (often 960px), regardless of the screen surface. If the browser window was wider than the site, there was white on the sides. On the other hand, if it was narrower, there was a horizontal scroll bar at the bottom of the window to access the hidden part, which is not very ergonomic. Then came the adaptive design where the width units were fixed, but different depending on the screen size. When the browser window was resized, each time it crossed breakpoints, a corresponding layout was used. Here are the commonly used breakpoints: 320px, 480px, 768px, 1024px.
