Written by Juan Pedro Catalá
Índice
What is Responsive Web Design?
The responsive web design or adaptive web design is a web design technique in which a fluid structure is used. This makes it possible for the content of the page to adapt according to the resolution of the visitor’s screen, allowing them to browse the web more comfortably regardless of whether they are accessing it from a computer, tablet or cell phone, without having to zoom in and out all the time.
You can see an example in action at http://demo.presscoders.com/designfolio/. If you resize the browser window you can see how the elements of the pages are repositioned and adapted depending on the width of the window.
How does it apply to a website?
The following techniques are used to apply responsive web design to a website:
- A fluid structure whose measurements are expressed in relative units (%) instead of absolute units (px or pt), this allows the content to adapt automatically.
- Image dimensions expressed in relative units (%) so that they do not break the page layout and are resized correctly.
- Viewport meta declaration <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>, so that mobiles and tablets scale the web correctly to the device’s screen.
- CSS media queries allow designers to set some properties (color, width, whether or not visible, etc) or others on a given element (image, text, menu, etc) of the page depending on the resolution of the user’s screen.
- It is not strictly necessary, but in certain designs it is necessary to use JavaScript to change the behavior of the page elements, for this purpose the window.onresize event is used to execute code when the browser window changes size.
How can Responsive Web Design improve your SEO?
Improved user experience, lower bounce rate
As I mentioned earlier, applying responsive design to a page allows you to navigate more comfortably through it and access the same content regardless of the device from which it is accessed, which translates into a more efficient and effective use of resources. improved usability and user experience of the website, and lower bounce rate..
Google recommends
Google recommends using responsive web design for a website to support multiple devices over other techniques such as creating mobile-specific websites or serving web content based on the visitor’s browser or device.
Avoid duplicate content problems
If we decided to create the mobile version in a subdomain such as m.elpais.com, we would have to add a canonical pointing to the version we want to position: mobile or desktop. With the responsive web design technique this problem disappears since all devices access the web through the same URL.
Increased web popularity
Another of the improvements that this technique brings to SEO is that by having a single URL all the popularity that reaches the web through links, Facebook, Twitter, etc. is concentrated, improving both mobile and desktop positioning.
Disadvantages of Responsive Web Design?
The disadvantage that can arise is that the development of a responsive or adaptive design is more complex than a traditional design with fixed dimensions. Since you have to write more code and perform more tests to verify that the web is displayed correctly on all devices and at any resolution.
On the other hand, gains in the maintenance and usability of the websiteIf we were to propose a similar solution to support mobile devices through applications or specific versions of the web, its development and maintenance cost would be much higher than that of directly applying responsive web design.
Don’t think Responsive Web Design is necessary for your website?
- 31% of users who browse the Internet through mobile devices do so exclusively through this medium and do not use other traditional means such as the computer.
- 1 out of every 8 pages viewed on the Internet is done through mobile devices.
- 75% of customers prefer a website that is accessible via mobile devices.
- 79% of users who browse with smartphones use their phones to assist in their purchase and 74% end up buying as a result.
If you still don’t believe that responsive design is necessary for your website, here are some facts that may change your mind.
