Responsive design
What is responsive design?
Responsive design is a web design technique that aims to ensure that web content is displayed in the same way regardless of the screen size where it is displayed.
This is achieved by making the content adapt automatically to different screen types and platforms (desktops, laptops, tablets, mobile phones, televisions, etc.)
Similarly, in email marketing the term responsive design is also used to refer to the correct display of email marketing campaigns on the different devices on which subscribers may open the newsletters.
1. Responsive web design and adaptive web design
Responsive web design and adaptive web design are often confused, since both aim to display websites well in any circumstance, but they are not the same thing.
Responsive web design is a technique for developing interfaces that uses media queries and stylesheets, in order to adjust proportionally the way in which the contents of a website are displayed at different resolutions.
It works in percentages of the available screen space and, of course, the required output resolution.
Adaptive web design, for its part, is a technique based on preset screen sizes: 320px, 480px, 760px, 960px, 1200px, etc.
It creates a design for each of the sizes, in such a way that when identifying the device on which the content will be displayed, it shows the design that best fits among those available. It works with fixed measures, not based on percentage sizes.
2. Advantages of responsive design
The rise of smartphones and tablets makes it vital that any content consumed on those devices displays correctly, so using responsive design is extremely important.
In addition, this brings us a number of advantages compared to non-responsive designs. These advantages include:
- Improved user experience. Those who visit the content will have a unified user experience, regardless of the type of device they use and if they later access it from another one, they will not notice relevant changes.
- Goodbye to duplicated content. It is no longer necessary to have a specific version for those who access the website from a mobile device and thus have duplicate content (the SEO of your website will thank you). There is only one responsive version.
- Saving on maintenance and web development costs. This advantage is obvious, since it is only necessary to maintain one version of the website, the cost of maintaining it is reduced compared to having versions for each type of device.
- Improves SEO. The site’s loading speed improves, and since visitors get a better view of the content, the average visit time tends to be longer, which positively boosts the ranking of the responsive website.
- Increases the chances of going viral. Most web traffic comes from mobile devices, where the various social media apps are installed. Therefore, thanks to responsive design and its excellent behavior on mobile devices, users are better placed to share content that is displayed correctly and attractively.
3. Characteristics of a responsive design
Responsive design appeared in 2010, when graphic designer Ethan Marcotte used HTML and CSS to build a responsive site.
It was not until a few years later, in 2013, that its use became widespread to cope with the huge amount of web traffic generated from mobile phones.
Designs must have a number of characteristics to be considered responsive:
- Adapt to the device’s width, correctly and instantly.
- Use CSS3 media queries.
- Deliver content and images to the visitor smoothly.
- Be able to rearrange the website’s elements for horizontal and vertical layouts.
- If necessary, give certain elements a different appearance or even remove them.
- Avoid duplicate content.
- Adjust the size and spacing of typefaces for better readability.
- Make it easy for visitors to share content quickly.