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.

The goal is to create content that automatically adapts to different types of screens and platforms (desktops, laptops, tablets, cell phones, televisions, etc.).

Similarly, in email marketing we also talk about responsive design in terms of the correct display of email marketing campaigns on the different devices on which subscribers can open the newsletters.

1. Responsive web design and adaptive web design

Responsive web design and adaptive web design are often confused, since both seek to offer a good visualization of websites in any circumstance, but these are not the same concepts.

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 on a percentage basis, based on percentages of the available screen space and of course, the output resolution demanded.

Adapted web design is a technique based on the use of pre-established screen sizes: 320px, 480px, 760px, 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

As more and more people are using smartphones and tablets, it is now vital to create content that will adapt to different screen sizes.

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). The responsive version will work for different visitors.
• 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.
• It is good for your SEO strategy. The website loading speed improves, but it is easier for visitors to see the content, with this, the average time they will spend on the page will be longer, positively enhancing website ranking.
• It will be easier to spread the content. Most of the web traffic will come from mobile devices, where the different social media apps are installed. Therefore, thanks to responsive and its excellent behavior with mobile devices, users are in a better disposition to share content that is displayed correctly and attractively.

3. Characteristics of a responsive design

Responsive design was used the first time in 2010, when graphic designer Ethan Marcotte used HTML and CSS to create a responsive site.

It was not until a few years later, until 2013, when its use began to be widespread to provide a solution to the huge amount of web traffic generated from mobile devices.

The designs must have a number of features to be considered responsive:

• It should adapt to the device width, correctly and instantly.
• It should use of CSS3 media-queries.
• It will have to display contents and images to the visitor with total fluidity.
• It should reorganize web elements for horizontal and vertical layouts.
• If necessary, it should change the layout of certain elements and even remove them.
• Avoid duplicate content.
• It must compensate the size and spacing of typographies for better readability.
• It should be easier for the visitor to share the contents quickly.