03 Jun

Sensitive web design, responsive web design or adaptive design

Este post también está disponible en español. 

Sensitive web design, the definitive name

How is said, responsive web or adaptive design? Wikipedia names it adaptive or adaptable web. Users call it responsive web design. Google translate refers to it as ¨ sensitive design¨ and with any doubt it seems the best adaptation to us (take note Siri).

Whatever name you use, you are referring to the same, a kind of web design which adapts to any screen resolutions.

 How to know if a web has responsive design?

Identifying whether a web is responsive or not is very simple: you just have to remodel the window of your browser to make it smaller. If it appears in the horizontal scroll bar and you have to move horizontally to see the hidden content, then…the web doesn’t have responsive design. Simple, isn’t it?

This simple check clears up doubts between liquid design and responsive design at which we looked in a previous post.

Responsive design Resizer BookmarkletIf you don’t feel like making checks with the browser’s window you can use the bookmarklet ( app embed in the browser) Viewport Resizer offers you different  prearranged resolutions. Furthermore you can print in paper the resolutions you wish.

What are the advantages of responsive design?

Responsive design provides 4 great advantages.

SEO. Search Engine optimization. The optimization for browsers is the great winner. There’s only one web (HTML+CSS) and hence the URL is unique for every device. Browsers are not going to find other URL and different contents for the mobile device. We avoid instructions in robots. txt and redirections from one of the versions to others, and even avoid losing the links which could make users in certain web versions.

UX. User eXperience. The user access to the same website independently of the device used. The version for mobile devices is complete too. The same experience of use, the same navigation. Coherence.

Integrity. There’s only one HTML structure and one unique page of CSS style for every device. Whatever size they have. From smartphones at 320 px wide to resolutions of 2,650 px (even higher than retina screens). In the past, it wasn’t like this and there was a page of style for every width standard (320 px for mobiles, 768 px for tablets, 1,024 px for notebooks and 1,600 px for desktops). Each actualization in the web meant retouching one by one the CSS and that could represent loses of integrity

Costs. Although responsive design requires more time investment from the designer and programmer, costs of maintenance are optimized as just 1 page of style has to be checked and not as before when 4 different pages of style had to be manipulated.

How is a web content adapted with a responsive design?

The fastest structure of the website is defined with HTML5. The website’s presentation (background color, typography, source of bodies, etc) is made with pages of style CSS3.

When the user’s navigator asks for a web, the server makes the page of style to carry out 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 therefore only has to adjust the content which is going to be useful to the screen format in which it’s going to be seen. This process lasts thousandths of a second, there’s no delay for the user. To any effect it’s another website.

Responsive web designFor this to be possible we should define with anticipation the disposition, order and the size that the different elements which constitute the content of the website and also the behavior that those elements are going to have in a reduced size.

Responsive design is for this reason much more laborious than a conventional design as it implies to take into consideration various displays (smartphone, tablet, desktop), to reorganize the elements (what’s shown before and what’s shown afterwards) and finally to redesign the elements which could bring up problems ( for instance, the camps of a contact’s formulary).

Free online tools identify and validate responsive design

To validate the adaptive design of a website you will have to make some checks. There are a range of free online tools that will facilitate the work. Each day there are more in the web. You can look for them as ¨responsive web design testing tools¨. We leave you here the main ones that have been created for attracting traffic and generate notoriety.

 The best 420 examples of responsive web design

Responsive design examples MediaQueriesEivind Uggedal is compiling at MediaQueri.es website (territorial Spanish URL is only by naming) what he considers the best examples of adaptive design. At this moment (March 2013) his selection covers 420 websites from every kind of sector that shows in thumbnails  with 4 different resolution: Smartphone (320 px), Tablet (768 px). Netbook (1,024 px) and Desktop (1,600 px)