Responsive web design. What is it? and how does it work on mobile?

By M. Soutto

Responsive web design. What is it? and how does it work on mobile?

Responsive web design refers to the response of the web design architecture depending on the medium or device and the content that is injected. It is the web design that gives the best user experience as a result, especially for the mobile websites. This responsive web design allows all the pages that make up a website adapt to user's device screen, regardless of whether it is a mobile phone or smartphone, tablet, laptop or desktop computer. It is a visible website for multiple web browsers, screen widths, resolutions and hardware power.

What is responsive web design?

Responsive web design also called adaptive web design, was devised by Ethan Marcotte, to improve the experience of visitors using a mobile to access web pages.

With a responsive website design we develop web pages with a single code and obtain a visible website for multiple screen widths, screen resolutions and / or hardware power.

The term "responsive"

In order not to be confused, it is necessary to clarify the term with which this form of web design was called. If we search for the word "responsive" in a dictionary the definition is "quick to act, esp. to meet the needs of someone or something".

Origin of responsive web design

In 2008 the W3C (World Wide Web Consortium), began to lay the foundations to create One Web and the goal was set to create a single website.

Web designer Ethan Marcotte coined the term "responsive web design" in the article Responsive Web Design which was published on May 25, 2010. He was the one who proposed a method to design the code necessary to allow a website to adapt to multiple types of devices, smartphones (mobiles), tablets, laptops, computers or desktop computers.

At that time we used laptops and desktop computers, when smartphones appeared it was necessary to devise a way to create web pages with a code capable of making it possible for the content to flow, or adapt to be displayed with a correct appearance on any device used by a web visitor.

Responsive web design. What is it? and how does it work on mobile?

What is it and how does the web work on mobile, how does responsive web design work?

Responsive web design uses the same HTML code for all types of devices that access the website, and through the style sheets in CSS3 language they integrate the 'media queries' module to display the content correctly to the web visitor regardless of the device they are using to browse the web.

The 'media queries' are instructions that are added to the CSS3 code so that the web page displays the content in one way or another depending on whether it is a mobile, tablet, a large screen or a printer, for example.

The content and its container

To explain responsive web design let's use an example.
Let's imagine that web content is a liquid, let's say water. We fill a jug with water, then the water takes the shape of the jug and it extends until it meets the limits of the structure that is the jug. Now we are going to fill a bottle with the water from the jug, we see that the same thing happens, the water takes the shape of the bottle. And if we pour the water from the bottle into a glass, the water takes the shape of the glass.

Well, the objective of responsive web design is that the web content flows inside the container, whatever it is, to acheive the best experience that the web user can have. We already know the disadvantages of websites that even today do not use responsive web design, surely many times you have had to enlarge the screen because the text or image is too small, or the content overflows from the right side and you have to perform a horizontal scroll of the screen to display the content. Well, if responsive web design had been used this would not have happened to you and the mobile web would have given you an optimal user experience.

"Como el agua" (Like water). Camarón de la Isla and Paco de Lucía.

What programming languages do we use?

A basic web page is made up on the one hand by a document in HTML language (hypertext markup language) and on the other by a document in CSS language (cascading style sheets) with which we achieve the visual design of web documents and also user interface written in HTML language.

• HTML: HyperText Markup Language.
• CSS: Cascading Style Sheets and it's media queries.

In a simple way we could say that responsive web design works with a SINGLE HTML code controlled by CSS code using media queries. In practice we can develop much more complicated web projects that require combining different programming languages to the HTML structure, such as PHP or ASP languages, and also JavaScript or libraries such as jQuery to get 'One Web'.

HTML

HyperText Markup Languagedefines the structure for the content of a web page. The content would be text, images, videos, etc..

CSS

Cascading Style Sheets, this language is what we use to design web pages, they allow us to define and create the graphic part of the web, that is, it controls the visible part of the web page. The CSS controls the layers, the colors, icons, images, the fonts for the texts and the 'media queries'.

Media Queries

They are a CSS level 3 module that allow us to adapt the content representation to device characteristics such as screen resolution. It is a standard recommended by the W3C since 2012, and today it is a basic principle of responsive web design technology.

A media query basically consists of an instruction written in CSS3 language where one or more expressions perform a function depending on whether the condition we specify is true or false. Let's see this with an example: suppose we need to display a background image according to a specific screens width, we want it to be different so that it flows according to the device and is better displayed. So, through our CSS document and thanks to the media queries (@media screen and (min-width:768px) { ... }), we communicate with the devices that visit our website created with responsive design, and we establish a condition that shows the image device-big.svg to devices that access our website with a screen width equal to or greater than 768 pixels and devices smaller than 768 pixels get shown the background image device-small.svg instead. The CSS code and it's media query for the example could be like this:

body{
    /* Screen width < 768px. Mobile Screen */
    background-image: url(device-small.svg); 

    @media screen and (min-width: 768px) {
        /* Screen width = or > 768px. Laptop Screen, etc. */
        background-image: url(device-big.svg);
    }
}

The result would be that a smartphone-type mobile device would see the small image displayed on the web page (device-small.svg), we visually adapt the image, we would show an image of a smaller dimension and smaller size, this will be beneficial so that the web page loads faster and of course the user experience is optimal. And devices such as tablets with screens larger than 768px, or computers would see the large image as the background image (device-big.svg), always the same design but adapted to each device.

Responsive web design. What is it? and how does it work on mobile?

What are the advantages of responsive web design?

The main advantages of your website having a responsive web design are:

• Improves user experience:
  • Web content is better displayed.
  • Quick to load, helps in search engine results positioning.
  • Easy to use
  • More intuitive navigation, with sizes appropriate for using touchscreens.
  • Helps to improve sales if it is an online store website.
• Recommended by Google to improve natural search engine positioning.
• At the development level 'One Web' with a code, without duplicating content.
• Reduction of development and maintenance costs.
• It benefits the analytics of your website, with Google Analytics, since it informs you of the type of devices that access your website and you can act accordingly.
• It has been statistically noted that more content gets shared on social networks when the user accesses from a mobile device.

Conclusion

We must all support that websites are developed with responsive web design, since, as we have already mentioned, it allows a comfortable viewing of web pages, regardless of the Operating System (Android, Windows, MacOS, Linux ...), screen width or device technology.

All companies should adapt to consumer needs and focus on having or improving a good ICT infrastructure (Information and Communication Technologies) and thus create new forms of communication with their present and future customers.

We know that digital development in the EU is good, compared to the average of the rest of the world, but it is still a challenge for a significant percentage of EU companies to achieve digitization. More and more users are connecting to the Internet from all types of devices, generally mobile. That is why Ailon Webs recommends to all its clients with companies that are in the process of developing a plan for digital transformation, to have a responsive website, this will also give them a mobile optimized website.

If your webiste has responsive web design you will not lose visits and you will offer the best experience to your users.

Regarding web design everything is progressing very quickly, a few years after the responsive web design of 'One Web' now the concept of 'Mobile First' has been introduced (you can read about this in our article Mobile Web Mobile First, the best for SEO 2021), web developers must have the ability to adapt and continue to advance to the pace that the new technological incorporations are setting.

Sources

• W3C. One Web
• Responsive Web Design. Ethan Marcotte.