Diseño web sensible, responsive web design o diseño adaptativo

This post is also avaliable in english.

DIseño web sensible, el nombre definitivo

¿Cómo se dice, responsive web design o diseño adaptativo? Wikipedia lo llama diseño web adaptativo o adaptable. Los usuarios lo llaman diseño web responsive. Google Translate lo llama “diseño sensible” y sin duda nos parece la mejor adaptación (toma nota Siri). Utilices el nombre que utilices te estás refiriendo a lo mismo, un tipo de diseño web que se adapta a todas las resoluciones de pantalla.

¿Cómo saber si una web tiene diseño responsive? 

Identificar si una web es o no es responsive es muy sencillo: sólo tienes que redimensionar la ventana de tu navegador para hacerla más pequeña. Si aparece la barra horizontal de scroll y tienes que desplazarte horizontalmente para ver el contenido oculto entonces… la web no tiene responsive design. Sencillo, ¿verdad?

Esta prueba tan sencilla despeja las dudas entre diseño líquido y diseño responsive que veíamos en un post anterior.

Responsive design Resizer BookmarkletSi no te apetece hacer pruebas con la ventana del navegador puedes utilizar el bookmarklet (aplicación incrustada en el navegador) Viewport Resizer que te ofrece  diferentes resoluciones prefijadas. Además podrás imprimir en papel las resoluciones que desees.

¿Cuáles son las ventajas del diseño responsive? 

El diseño responsive proporciona 4 grandes ventajas.

  • SEO. Search Engine Optimization. La optimización para buscadores es la gran ganadora. Sólo hay una web (HTML + CSS) y por tanto la URL es única para todos los dispositivos. Los buscadores no van a encontrar otras URL y contenidos diferentes para los dispositivos móviles. Nos evitamos instrucciones en robots.txt y redirecciones de unas versiones a otras, e incluso evitamos perder los links que podrían hacer los usuarios en determinadas versiones de las páginas. 
  • UX. User eXperience.  El usuario accede al mismo website con independencia del dispositivo que utilice. La versión para dispositivos móviles es también completa. La misma experiencia de uso, el mismo menú de navegación. Coherencia.
  • Integridad. Sólo hay una estructura HTML y una única hoja de estilo CSS para todos los dispositivos. Tengan el tamaño que tengan. Desde los smartphones a 320 px de ancho hasta resoluciones de 2.650 px (superiores incluso a las pantallas retina). Antes esto no era así y había una hoja de estilo para cada ancho estándar (320 px para móviles, 768 px para tablets, 1.024 px para notebooks y 1.600 px para ordenadores de escritorio). Cada actualización en la web suponía retocar una por una las CSS y eso podía representar perdidas de integridad.
  • Costes. Aunque el diseño responsive requiere más inversión en tiempo del diseñador y programador, se optimizan los costes de mantenimiento ya que sólo hay que revisar 1 hoja de estilo y no como antes que había que manipular 4 hojas de estilo diferentes.

¿Cómo se adapta el contenido de una web con diseño responsive?

La estructura de la página web se define con HTML5. La presentación de la página (color de fondo, tipografías, cuerpos de la fuentes, etc) se hace programando las hojas de estilo CSS3. Cuando el navegador del usuario pide una página, el servidor hace que la hoja de estilo ejecute la media-query por la que obtiene información inmediata sobre el dispositivo, especialmente la resolución de pantalla y orientación (vertical o portrait, horizontal o landscape). El servidor sólo tiene entonces que ajustar el contenido que va a servir al formato de pantalla en el que va a ser visualizado. Este proceso dura milésimas de segundo, no hay delay para el usuario. A todos los efectos es una página más.

Responsive web design

Para que esto sea posible debemos definir con antelación la disposición, orden y tamaño que tendrán los diferentes elementos que constituyen el contenido de la página web y también el comportamiento que van a tener esos elementos en tamaño reducido.

El diseño responsive es por esta razón mucho más trabajoso que un diseño convencional ya que implica tener en consideración varias visualizaciones (smartphone, tablet, ordenador de escritorio), reordenar los elementos (que se muestra antes y qué se muestra después) y rediseñar los elementos que puedan plantear problemas (los campos de un formulario de contacto, por ejemplo).

Herramientas online gratuitas para identificar y validar diseño responsive

Para validar el diseño adaptativo de una web tendrás que hacer algunas pruebas. Existen  varias herramientas online gratuitas que te facilitarán la labor. Cada día hay más en la red. Las puedes buscar como “responsive web design testing tools”. Te dejamos aquí las principales que han sido creadas para atraer tráfico y generar notoriedad

Los 420 mejores ejemplos de diseño web responsive 

Responsive design examples MediaQueriesEivind Uggedal está recopilando en el website MediaQueri.es (el dominio territorial español es sólo por naming) los que él considera mejores ejemplos de diseño adaptativo. En estos momentos (marzo 2013) su selección comprende 420 websites de todo tipo de sectores que muestra en thumbnails con 4 resoluciones diferentes: Smartphone (320 px), Tablet (768 px), Netbook (1.024 px) y Desktop (1.600 px).

Anuncios

3 pensamientos en “Diseño web sensible, responsive web design o diseño adaptativo

  1. Pingback: Sensitive web design, responsive web design or adaptive design | Visibilidad, tráfico y conversión

  2. Pingback: Diferencias entre diseño líquido y diseño responsive | Visibilidad, tráfico y conversión

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s