Responsive Web Design is THE new trend in website design. It aims to optimize the navigation of a site, whatever the medium used.The explosion in the use of smartphones to surf the Web since 2013 has put responsive Web design at the heart of developer strategies and practices.
If you have a site or plan to do one you should definitely ask yourself how to make it mobile-friendly, at the risk of losing many (if not most) users.
So what is responsive web design? How does one make a suitable site? Can we do this for all sites? That’s all you need to know.
LEARN MORE ABOUT RESPONSIVE WEB DESIGN (RWD)
The word “Responsive” was introduced by web designer Ethan Marcotte in a blog post of “A List Apart” in May 2010.
In 2011, he will develop his responsive theory in a book titled “Responsive Web Design”.
The responsive Web design, or RWD is therefore a website design approach allowing an optimal reading and browsing experience regardless of the medium used (mobile phones, tablets, desktop).
At some point in the evolution of the internet, new types of terminals have appeared. Tablets and smartphones have changed our habits when it comes to Internet consultation. These have had to adapt to a multitude of sizes of screens like the mobile phone that after a few years of evolution to bring the smartphone and its many sizes in our daily lives.
With this in mind it was necessary to ensure that a website can be easily viewed on any phone or tablet and webdesigners have naturally decided to adapt their websites to these new and numerous resolutions.
At that time there was still no question of CSS or other @media queries. The webdesigners had to create two separate websites with the same content:
– A main site for computers
– A mobile site for mobile devices
But is not it a little tedious to have to create 2 sites?
What we want is to create a single site that everyone can visit, both those who connect from a computer and those who connect with their mobile, tablet or other screen.
Making a site dedicated to mobile is not suitable, there are too many mobile devices with different sizes and it would be necessary to make a site for each screen size. So to overcome this problem developers have thought of a solution that allows to adapt to all devices at the same time.
The arrival of Google Panda
The day Google decided to update its SEO search result management algorithm the question of making two separate sites was quickly obsolete.
The update named “PANDA” was, among other things, on the duplicate content and with the dual site system you have several web addresses for the same content. The identical content found on your two site versions is identified by Google as bad practice and you are penalized.
In addition, if one of your users shares the link of an article of your mobile site, the people who will click on this link will see it in mobile version even if they are on a computer and the result is frankly bad.
The principle of responsive Web design (RWD)
The responsive design will just solve the problem mentioned above. No need to make two sites, this technique of realization, will allow each site to adapt automatically to the space available on the screen. So we develop a single site, designed to adapt to all screen sizes. The user can thus consult the same self-adapted website through a wide range of devices and with the same visual comfort.
The sites are usually designed based on the width of the screen, this width will determine how the items will appear.
Of course when the size of the screen is reduced we can place fewer blocks side by side. In this case, they must be placed from top to bottom where the place is unlimited or even remove some blocks that would be less useful on a mobile version.
Technical level
Before anything else and especially to think about the development of the site itself it will have to think your site.
A responsive site is not conceived as a classic site and requires mastering this new technique and adapting its organization upstream.
Today we must anticipate how the elements of the pages of your site will be implemented in all resolutions.
It’s not enough to make a desktop version and mobile version because depending on the size of the screen of the mobile or how it is held (horizontally or vertically) your design would not stand the road.
You have to make sure that each of the blocks of the pages of your site adapts in the width, if it is not possible because there is not enough space, it is necessary to reorganize the blocks of your page or to remove them if they are not essential for mobile reading.
The elements of a responsive site must reorganize according to breakpoints.
Create by the web designer who will have thought the site they will indicate when the blocks will pass under each other instead of being next to each other.
The CSS emerged as the major player in the RWD to enable the realization of a single website suitable for all screens.
Indeed, a responsive website uses the CSS language and more specifically the media queries with an extension of the rule @ media to adapt the layout.
Technically the principle of RWD is based on the three technical elements below:
- Media queries, a CSS 3 specification module that allows you to lay out websites and target the width, height, or orientation of a page with a single style sheet
- Flexible images and media
- A flexible layout grid.
THE BENEFITS OF RESPONSIVE WEB DESIGN (RWD)
As with everything else, responsive Web design has its advantages and disadvantages.
Its first benefit (and it’s the goal) is for Internet users. Thanks to the responsive Web design they enjoy a pleasant use and navigation whatever the device used.
But fortunately for web professionals this technology is also advantageous for them! It somehow simplifies their work by preventing them from having to develop, in addition, versions of the site for smartphones and tablets.
And of course the development costs are lower because only one site is needed.
THE DISADVANTAGES OF RESPONSIVE WEB DESIGN (RWD)
Yes, unfortunately nothing is perfect, it must be that there are also disadvantages.
First of all, pages created in responsive Web design are often longer to load than with a dedicated mobile version.
You will also have to work more than on a classic site. Allow about 25% more time to develop the necessary techniques to implement the responsive Web design and perform the necessary tests throughout the project.
Large images will be a problem because the responsive Web design does not solve the bandwidth problems related to their download. If your connection is not in 4G it can really feel.
THE APPEARANCE OF MOBILE FIRST
Here is the new trend and it is not ready to disappear. Still facing the increase in the consultation of the internet via mobile devices, some search engines and especially Google have decided to focus on sites optimized for mobile in their search results.
Mobile sites are better referenced than sites that are not optimized.
One more reason to start thinking backwards and think about your mobile site before you even think about your desktop site.
In addition one realizes that thinking his site in this way and easier. We start from a small resolution and adapt it to a larger one.
Technically there is a big advantage also because the mobile browsers will directly recover the CSS rules intended for the mobile but not those intended for the desktop whereas without the mobile first the browsers must recover the rules of the site desktop and delete or adapt the elements. As a result, a mobile site first will load faster and give the same visual result on a desktop screen.
The latest versions of CMS (Drupal, WordPress, …) and CSS Frameworks such as boostrap are also directly thought in mobile first today.
THE PWA (PROGRESSIVE WEB APP) SOLUTION
PWA is a website but includes some native features for mobile applications like push notification for example.
They are halfway between webapp and a traditional mobile website and look like native and hybrid apps except that they are browser-accessible and non-downloadable on a store.
How they work
The PWA is simply a website developed specifically for mobiles. They are developed with an Application Shell architecture that makes it possible to use it also in offline mode.
It also relies on Service Workers, scripts that will run in parallel with the web page and allow offline mode, sending notifications or updating content in the background.
Finally, using a .manifest file makes it look more natural with a full-screen display or a different screen orientation possible or other typical presentation of a pure application.
It therefore offers users a complete mobile experience regardless of the browser used or the state of their connection.
The benefits of PWA
PWAs have the advantage of combining the best of mobile sites and web applications. They take over the most relevant features and thus allow:
- An improvement in the overall user experience
- Improved page loading time
- Consultation of the site without an Internet connection
- Compatibility with any operating system and any medium
- Do not perform upstream installation as for an application and therefore do not use storage space in the memory of the mobile device
- Simple access from a URL or from an icon on the home screen of the mobile device
- Safe navigation thanks to the HTTPS protocol
PWA a long-term solution?
PWAs can not completely replace applications or the mobile web. See them as a complementary or alternative technology that will make your users’ experience easier with a clear mobile interface, fast loading and interactivity without paying a premium for developing an app.
The PWA can be a good compromise that will offer additional features that your mobile website will not provide. But to retain your customers later the development of an application will be at one time or another a must.
Responsive Web Design has emerged as a solution to the evolution of our technology and habits.
It allowed us to adapt. But like any adaptation solution they are often temporary. The emergence of mobile first, the requirements of Google Panda, changes in algorithms that want to place mobile sites first, all these new data that evolve and change constantly push you to move on to something else.
In the meantime responsive Web design is a must when creating your site. Today a website that is not responsive will pass the trap of all consultations via mobile, that is to say the majority of Internet consultations …
Elitech Systems, accompanies you in the creation of website showcase or e-commerce: study, UX, design, design, development, SEO.
Our web agency is able to meet all your needs and develop a real digital strategy.
Do not hesitate to discover our site and to contact us.
Comments are closed.