Since 2012, smartphones and tablets have surpassed the number of laptops or desktop computers owned by web users. Because of that, a new trend has emerged called responsive design. This design establishes that the size shown in the device is not enough, so the site should adapt the size and width to the screen, enhancing the experience of visualization for the user. Some of these devices are: videogames, smartphones, smart TVs, laptops, desktop computers and tablets.

It is very important to correctly design the website of a company, because it will influence the interaction of the user and it will also help the company achieve its goals (obtaining information, purchasing, sharing information, etc.).

In general terms, a good responsive design should be molded into the needs, abilities and objectives of the users, which is why you should follow the next process to have your own good responsive design:

1. planning – (Identifying the requirements of the project)
2. Design (user modeling, concept design, style and visual responsive design definition)
3. PROTOType (PROTOType in low fidelity and high fidelity)
4. EVALUAtion (test methods)
5. IMPLEMENTAtion and debut

We should mention that the phases of design, prototypes and evaluation, are closely related to each other and might be cyclical if the first time does not present the expected results.

A good responsive web design should also be:

Understandable

Clear, so that people understand the distribution of the information in the site.

Clear

It should have clear instructions and obvious headlines for the users to visit the site according to their needs.

FriendlY

Easy to use for any user, no matter if it is the first or 10th time navigating the site.

Easy to learn

Intuitive enough for a person that has never seen it before, can learn easily how to use it.

The advantage of flexible designs is that they do not assume the screen proportions but adapt to the size at the moment. It means that they modify the size of the elements but not the proportions of the screen dimensions. One important technique to implement the adaptable design in a site is the smooth arrangement of the grid:

It permits to determine the break points, where a site starts to modify the size of the different elements as headlines, images and text body.

It permits to specify the aspect of a site when being visualized on different devices. The design of the fixed width is built with specific pixel measures, while the smooth design of the reticle is built by percentage.

To better understand it, we now present a comparison example of both designs:

However, programming with proportions instead of fixed measures is not the only thing to be made for optimizing the user experience, no matter the device used. Here is where the CSS3 module called “media queries” comes to play, which is a series of commands included on the style sheet that allow to adapt the representation of content in a deeper and more exhaustive way the specifics of the device, such as screen resolution or accessibility of features like braille. It basically works on columns, depending on the size and proportions of the screen where the site will be shown. The numbers of necessary columns to properly distribute the visual info: the resolution of a desktop computer requires five columns, the tablets need four and a smartphone only requires three. Since 2012, it is a standard recommended by W3C, the basic principle of the responsive design.

This trend was created and popularized by North American designer and author Ethan Marcotte, and it seeks the quality of visuals in both, an old and new device. What makes it functional and popular now a days is that with only one version of the HTML and CSS code, the resolutions of the screen are covered, so the site stays optimized for all kinds of devices.

It is also very useful because it helps postponing or even avoiding the need of creating an application for every operative system of mobile devices, like iOS 8 or Android KitKat.

The adaptable web design also avoids redirecting and errors that are born from them, or errors from accessing links from social network, in any device.

As it is only one URL for the whole site, it is ideal for optimization on the search engines. It facilitates the analysis of Google and other search engines.