What is Responsive Web Design?

How do you call it, responsive web design or adaptive design? Wikipedia calls it adaptive or adaptive web design. Users call it responsive web design. Google Translate calls it “sensible design” and without a doubt, it seems the best adaptation (notes Siri). Either one name you use you are referring to the same, a type of web design that adapts to all screen resolutions. The Responsive Web Design (RWD) basically tries to adapt a web to any type of screen and device. That is to say, the web adapts perfectly to the screen facilitating its reading and use.

Today users of web pages can access them from different media: a desktop PC, a mobile phone, and a tablet, TV. Let’s see the pros and cons of responsive web design, design adaptive or responsive design. We do not consider tablets as mobile devices because, among other reasons, they tend to have larger horizontal screens. Most tablet users expect to see pages optimized for tablets or optimized for computers when they browse the Web. This means that, unless you offer content optimized for tablets, users expect to see your site for computers, never the mobile version. The responsive web design aims to become an industry standard for mobile devices, such as smartphones and tablets, which allow access to websites anywhere.

Responsive web design is one of the latest trends in design. The most complex user is the smartphone, for its modes of use and the environment where they consume the content. But the responsive design is not a simple addition to a web; it is a philosophy of the development of the client layer (front) that must be conceived from the beginning of the design of a web. It covers so many details that it is impractical for many companies and really complex for others. You have to take into account screen size, movement of elements according to width, advertising criteria, and editorial criteria. Responsive design is a system based on the current web standards HTML5, CSS 3 and JavaScript that allows websites to adapt to the screen of the user who is watching them. Responsive design has become very fashionable with the rise of mobile navigation, but it goes much further, it is about webs with intelligent designs (smart design) that facilitate the usability of webs depending on who observes them.

How does responsive web design work?

Responsive web design allows its visitors to see through different devices that use the same design. The design is automatically adjusted according to the resolution of the user’s screen. Responsive design guarantees uniformity of design across multiple devices and is often favored and appreciated by WordPress designers.

It is essential to know the CSS Media Queries that allow us to activate and deactivate parts of the CSS so that it adapts to the appropriate screen. It only works with modern browsers. Internet 6, 7 and 8 do not support it although there may be solutions with the use of Javascript.

The main difference is that we no longer play with pixels but with percentages, thus abandoning the fixed widths of a website. The responsive web design prefers the concept of proportion. Thus, when we see the same content on the screen of our mobile all the elements will be made proportionally smaller.

For example, if on a website we have a side menu with this technique, you can create a drop-down menu at the top of the mobile screen. Thus having the same content adapted to a screen of 480 pixels. We can also get rid of content that can be too heavy within the mobile: widgets, social network icons. We manage what we want to show and what not in each type of device. This flexibility in the elements is called Breakpoints, that is, the points where you want to break the content of the web to adapt it to the different screen resolutions.

With the responsive web design, different formats are created from the same web and it is no longer necessary to create different sites adapted to each device. Building a responsive website requires advanced knowledge of design. Also, a content update on a website is done once and adapts to the different screens. The conversion increases considerably since there are no barriers to the user to access a website. We are facing a new era of web design, a sensitive design, manageable and adapted to the times.

A responsive web design has the ability to adapt the layouts (design) of the pages according to the viewing environment (more specifically screen resolution – desktop, laptop, tablet, phone) without major degradation to provide, users, and a great browsing experience.

The responsive design is based on three essential elements:

  • Fluid grids that take into account a wide range of resolutions. As resolution changes, page elements resize/rearrange;
  • Flexible images that can change their height or width depending on the grid;
  • Media queries.

If a design does not look good, the main cause would be the lack of balance between these elements.

How to know if a website has a responsive design?

Identifying if a web is or is not responsive is very simple: you only have to resize the window of your browser to make it smaller. If the horizontal scrollbar appears and you have to scroll horizontally to see the hidden content then the web has no responsive design. If you do not want to do tests with the browser window you can Viewport Resizer that offers different pre-set resolutions.

Summing up the 4 great advantages responsive design provides.

  1. SEO Search Engine Optimization. Search engine optimization is the big winner. There is only one web (HTML + CSS) and therefore the URL is unique for all devices. Search engines will not find other URLs and different content for mobile devices. We avoid robots.txt instructions and redirections from one version to another, and we even avoid losing the links that users could make in certain versions of the pages.
  2. UX (user experience) – the user accesses the same website, regardless of the device he uses. The version for mobile devices is also complete. The same user experience, the same navigation menu. Coherence.
  3. Integrity. There is only one HTML structure and one CSS style sheet for all devices. Have the size they have. From smartphones at 320 px wide to resolutions of 2,650 px (even higher than retina screens). Before this was not the case and there was a style sheet for each standard width (320 px for mobile phones, 768 px for tablets, 1,024 px for notebooks and 1,600 px for desktop computers). Each update on the web meant retouching the CSS one by one and that could represent the loss of integrity.
  4. Costs. Although the responsive design requires more investment in time for the designer and programmer, maintenance costs are optimized since you only have to review 1 style sheet and not as before you had to manipulate 4 different style sheets.

https://www.youtube.com/watch?v=h3IdEqpjMvQ

How is the content of a web adapted with responsive design?

The structure of the website is defined with HTML5. The presentation of the page (background color, fonts, font bodies, etc.) is done by programming CSS3 style sheets. When the user’s browser requests a page, the server causes the style sheet to execute the media-query by which it obtains immediate information about the device, especially the screen resolution and orientation (vertical or portrait, horizontal or landscape). The server only then has to adjust the content that will serve the screen format in which it will be displayed. This process lasts thousandths of a second; there is no delay for the user. To all the effects it is one more page. For this to be possible we must define in advance the disposition, order, and size that will have the different elements that constitute the content of the web page and also the behavior that will have those elements in reduced size.

Responsive design is for this reason much more labor-intensive than a conventional design since it involves taking into account several visualizations (smartphone, tablet, desktop), reordering the elements (shown before and what is shown later) and redesigning the elements that may pose problems (the fields of a contact form, for example).

Free online tools to identify and validate the responsive design.

To validate the adaptive design of a website you will have to do some tests. There are several free online tools that will facilitate the work. Every day there is more in the network. You can search them as “responsive web design testing tools”. Here are the main ones that have been created to attract traffic and generate notoriety:

Why is responsive design important?

Because this website typology has only one version and therefore a single URL. Responsive websites adapt their content to the resolution of the device on which they are viewed. In addition to the advantage that site updating is done once and the site’s URL is unique, the most important advantage is that this site typology can be viewed on all types of devices, regardless of resolution, the correct visualization is not restricted to the classic mobile phone resolutions.

The design and usability of a web page, nowadays has become very important, since Google has established standards regarding the positioning or visibility of a website or web page in the search engines. On April 21, 2015, Google announced that the pages or websites that do not have a responsive design would be affected by the new update of the algorithm, which will take into account the level of usability of the pages. If the websites do not have an optimum level in relation to this criterion, their positioning in search engines (SEO) can be seriously affected. One of the main reasons why Google made this decision is that worldwide penetration of mobile devices is constantly increasing. In 2014, Comscore reported that the use of mobile phones exceeded computers.

When thinking about responsive web design, it must be clear that it is not about executing three or four different designs, since with different adaptation codes for the programming lines this work can be done automatically, and it is important to let it be clear that each device operates in a different way due to size and ease. So for mobile devices you have to think about bigger buttons and simpler designs, while for desktop computers you can have a complete website and with much smaller and more complex sizes. In the responsive design, it is about resizing and placing the elements of the web in such a way that they adapt to the width of each device allowing a correct visualization and a better user experience. It is characterized because the layouts (contents) and images are fluid and the CSS3 media-queries code is used.

Responsive design reduces development time, avoids duplicate content, and increases the viral nature of content since it allows you to share content in a much faster and more natural way. It is based on providing all users of a website the same content and a user experience as similar as possible, compared to other approaches to mobile web development such as the creation of apps, domain change or websites served dynamically depending on the device.

In responsive web design by Ethan Marcotte, web designer and programmer, he explains how to join three existing techniques and technologies in web development to create websites that are sensitive to the device that visits them, as well as the main features of responsive web design. In this way, Marcotte advocates the use of fluid grids, flex images and media queries to build sites that adapt to the device that is visiting our website or even its position resulting in incredibly flexible websites.

Why responsive design?

Considering these advantages, responsive websites have already become a standard in the industry. Taking into account that currently six out of ten Internet searches are done on a Smartphone when before the preferred device was the desktop computer, all cell phones, not some, all must be Smartphones, because the technological demand requires it. Therefore, the responsive design is not an SEO strategy to position yourself, but a requirement of the current world, nowadays almost everyone has a smartphone or tablet and more and more the traffic of the sites comes from these devices, that’s why it is important that your users can consult the information they require, without problems, from any mobile device they have available.

Therefore, creating a responsive website is a transversal work in all the general phases of a website:

  • Conceptualization: In smaller versions, the most important content is prioritized and the most irrelevant is left in second place, being able to even eliminate/adapt parts of the content itself. We must take care of navigation and multimedia elements, popups, etc.
  • Design: The general graphic line of the website is adapted for mobile and Tablet versions so that we occupy the full width of the screen and we usually center elements such as images, titles, etc.
  • Programming: The web must be able to detect in real time the resolution of the device that shows it. In this phase, we must also bear in mind that mobile devices usually have a connection to 3G networks, and therefore it is ideal to reduce data downloads.

Providing a web of this level of adaptability requires a prior planning of how it is going to adapt, and this is a very important point so as not to diminish the usefulness of a web (which in the end is the most important) while conserving the graphic line and the contents are adapted according to the information architecture itself. It must be taken into account that a Tablet or Smartphone user navigates without a mouse, therefore a feature as simple and habitual as a drop-down menu can become a headache for the user if it is not well resolved in the adapted version.

With this update of the Google algorithm, it turns out that the responsive design is a requirement to be able to position a site in the search engine that at the same time will drive the development for multiple screens. If we do not adopt the required measures we can run the risk of disappearing from the top positions of the Google search engine.

Responsive Web Design

What is Responsive Web Design?

How do you call it, responsive web design or adaptive design? Wikipedia calls it adaptive or adaptive web design. Users call it responsive web design. Google Translate calls it “sensible design” and without a doubt, it seems the best adaptation (notes Siri). Either one name you use you are referring to the same, a type of web design that adapts to all screen resolutions. The Responsive Web Design (RWD) basically tries to adapt a web to any type of screen and device. That is to say, the web adapts perfectly to the screen facilitating its reading and use.

Today users of web pages can access them from different media: a desktop PC, a mobile phone, and a tablet, TV. Let’s see the pros and cons of responsive web design, design adaptive or responsive design. We do not consider tablets as mobile devices because, among other reasons, they tend to have larger horizontal screens. Most tablet users expect to see pages optimized for tablets or optimized for computers when they browse the Web. This means that, unless you offer content optimized for tablets, users expect to see your site for computers, never the mobile version. The responsive web design aims to become an industry standard for mobile devices, such as smartphones and tablets, which allow access to websites anywhere.

Responsive web design is one of the latest trends in design. The most complex user is the smartphone, for its modes of use and the environment where they consume the content. But the responsive design is not a simple addition to a web; it is a philosophy of the development of the client layer (front) that must be conceived from the beginning of the design of a web. It covers so many details that it is impractical for many companies and really complex for others. You have to take into account screen size, movement of elements according to width, advertising criteria, and editorial criteria. Responsive design is a system based on the current web standards HTML5, CSS 3 and JavaScript that allows websites to adapt to the screen of the user who is watching them. Responsive design has become very fashionable with the rise of mobile navigation, but it goes much further, it is about webs with intelligent designs (smart design) that facilitate the usability of webs depending on who observes them.

https://www.youtube.com/watch?v=hM5mnmJcNEc

How does responsive web design work?

Responsive web design allows its visitors to see through different devices that use the same design. The design is automatically adjusted according to the resolution of the user’s screen. Responsive design guarantees uniformity of design across multiple devices and is often favored and appreciated by WordPress designers.

It is essential to know the CSS Media Queries that allow us to activate and deactivate parts of the CSS so that it adapts to the appropriate screen. It only works with modern browsers. Internet 6, 7 and 8 do not support it although there may be solutions with the use of Javascript.

The main difference is that we no longer play with pixels but with percentages, thus abandoning the fixed widths of a website. The responsive web design prefers the concept of proportion. Thus, when we see the same content on the screen of our mobile all the elements will be made proportionally smaller.

For example, if on a website we have a side menu with this technique, you can create a drop-down menu at the top of the mobile screen. Thus having the same content adapted to a screen of 480 pixels. We can also get rid of content that can be too heavy within the mobile: widgets, social network icons. We manage what we want to show and what not in each type of device. This flexibility in the elements is called Breakpoints, that is, the points where you want to break the content of the web to adapt it to the different screen resolutions.

With the responsive web design, different formats are created from the same web and it is no longer necessary to create different sites adapted to each device. Building a responsive website requires advanced knowledge of design. Also, a content update on a website is done once and adapts to the different screens. The conversion increases considerably since there are no barriers to the user to access a website. We are facing a new era of web design, a sensitive design, manageable and adapted to the times.

A responsive web design has the ability to adapt the layouts (design) of the pages according to the viewing environment (more specifically screen resolution – desktop, laptop, tablet, phone) without major degradation to provide, users, and a great browsing experience.

The responsive design is based on three essential elements:

  • Fluid grids that take into account a wide range of resolutions. As resolution changes, page elements resize/rearrange;
  • Flexible images that can change their height or width depending on the grid;
  • Media queries.

If a design does not look good, the main cause would be the lack of balance between these elements.

How to know if a website has a responsive design?

Identifying if a web is or is not responsive is very simple: you only have to resize the window of your browser to make it smaller. If the horizontal scrollbar appears and you have to scroll horizontally to see the hidden content then the web has no responsive design. If you do not want to do tests with the browser window you can Viewport Resizer that offers different pre-set resolutions.

Summing up the 4 great advantages responsive design provides.

  1. SEO Search Engine Optimization. Search engine optimization is the big winner. There is only one web (HTML + CSS) and therefore the URL is unique for all devices. Search engines will not find other URLs and different content for mobile devices. We avoid robots.txt instructions and redirections from one version to another, and we even avoid losing the links that users could make in certain versions of the pages.
  2. UX (user experience) – the user accesses the same website, regardless of the device he uses. The version for mobile devices is also complete. The same user experience, the same navigation menu. Coherence.
  3. Integrity. There is only one HTML structure and one CSS style sheet for all devices. Have the size they have. From smartphones at 320 px wide to resolutions of 2,650 px (even higher than retina screens). Before this was not the case and there was a style sheet for each standard width (320 px for mobile phones, 768 px for tablets, 1,024 px for notebooks and 1,600 px for desktop computers). Each update on the web meant retouching the CSS one by one and that could represent the loss of integrity.
  4. Costs. Although the responsive design requires more investment in time for the designer and programmer, maintenance costs are optimized since you only have to review 1 style sheet and not as before you had to manipulate 4 different style sheets.

https://www.youtube.com/watch?v=h3IdEqpjMvQ

How is the content of a web adapted with responsive design?

The structure of the website is defined with HTML5. The presentation of the page (background color, fonts, font bodies, etc.) is done by programming CSS3 style sheets. When the user’s browser requests a page, the server causes the style sheet to execute the media-query by which it obtains immediate information about the device, especially the screen resolution and orientation (vertical or portrait, horizontal or landscape). The server only then has to adjust the content that will serve the screen format in which it will be displayed. This process lasts thousandths of a second; there is no delay for the user. To all the effects it is one more page. For this to be possible we must define in advance the disposition, order, and size that will have the different elements that constitute the content of the web page and also the behavior that will have those elements in reduced size.

Responsive design is for this reason much more labor-intensive than a conventional design since it involves taking into account several visualizations (smartphone, tablet, desktop), reordering the elements (shown before and what is shown later) and redesigning the elements that may pose problems (the fields of a contact form, for example).

Free online tools to identify and validate the responsive design.

To validate the adaptive design of a website you will have to do some tests. There are several free online tools that will facilitate the work. Every day there is more in the network. You can search them as “responsive web design testing tools”. Here are the main ones that have been created to attract traffic and generate notoriety:

Why is responsive design important?

Because this website typology has only one version and therefore a single URL. Responsive websites adapt their content to the resolution of the device on which they are viewed. In addition to the advantage that site updating is done once and the site’s URL is unique, the most important advantage is that this site typology can be viewed on all types of devices, regardless of resolution, the correct visualization is not restricted to the classic mobile phone resolutions.

The design and usability of a web page, nowadays has become very important, since Google has established standards regarding the positioning or visibility of a website or web page in the search engines. On April 21, 2015, Google announced that the pages or websites that do not have a responsive design would be affected by the new update of the algorithm, which will take into account the level of usability of the pages. If the websites do not have an optimum level in relation to this criterion, their positioning in search engines (SEO) can be seriously affected. One of the main reasons why Google made this decision is that worldwide penetration of mobile devices is constantly increasing. In 2014, Comscore reported that the use of mobile phones exceeded computers.

When thinking about responsive web design, it must be clear that it is not about executing three or four different designs, since with different adaptation codes for the programming lines this work can be done automatically, and it is important to let it be clear that each device operates in a different way due to size and ease. So for mobile devices you have to think about bigger buttons and simpler designs, while for desktop computers you can have a complete website and with much smaller and more complex sizes. In the responsive design, it is about resizing and placing the elements of the web in such a way that they adapt to the width of each device allowing a correct visualization and a better user experience. It is characterized because the layouts (contents) and images are fluid and the CSS3 media-queries code is used.

Responsive design reduces development time, avoids duplicate content, and increases the viral nature of content since it allows you to share content in a much faster and more natural way. It is based on providing all users of a website the same content and a user experience as similar as possible, compared to other approaches to mobile web development such as the creation of apps, domain change or websites served dynamically depending on the device.

In responsive web design by Ethan Marcotte, web designer and programmer, he explains how to join three existing techniques and technologies in web development to create websites that are sensitive to the device that visits them, as well as the main features of responsive web design. In this way, Marcotte advocates the use of fluid grids, flex images and media queries to build sites that adapt to the device that is visiting our website or even its position resulting in incredibly flexible websites.

So Is Responsive Important And Should We Use It?

Considering these advantages, responsive websites have already become a standard in the industry. Taking into account that currently six out of ten Internet searches are done on a Smartphone when before the preferred device was the desktop computer, all cell phones, not some, all must be Smartphones, because the technological demand requires it. Therefore, the responsive design is not an SEO strategy to position yourself, but a requirement of the current world, nowadays almost everyone has a smartphone or tablet and more and more the traffic of the sites comes from these devices, that’s why it is important that your users can consult the information they require, without problems, from any mobile device they have available.

Therefore, creating a responsive website is a transversal work in all the general phases of a website:

  • Conceptualization: In smaller versions, the most important content is prioritized and the most irrelevant is left in second place, being able to even eliminate/adapt parts of the content itself. We must take care of navigation and multimedia elements, popups, etc.
  • Design: The general graphic line of the website is adapted for mobile and Tablet versions so that we occupy the full width of the screen and we usually center elements such as images, titles, etc.
  • Programming: The web must be able to detect in real time the resolution of the device that shows it. In this phase, we must also bear in mind that mobile devices usually have a connection to 3G networks, and therefore it is ideal to reduce data downloads.

Providing a web of this level of adaptability requires a prior planning of how it is going to adapt, and this is a very important point so as not to diminish the usefulness of a web (which in the end is the most important) while conserving the graphic line and the contents are adapted according to the information architecture itself. It must be taken into account that a Tablet or Smartphone user navigates without a mouse, therefore a feature as simple and habitual as a drop-down menu can become a headache for the user if it is not well resolved in the adapted version.

With this update of the Google algorithm, it turns out that the responsive design is a requirement to be able to position a site in the search engine that at the same time will drive the development for multiple screens. If we do not adopt the required measures we can run the risk of disappearing from the top positions of the Google search engine.

Leave a Comment