Guía básica de recursos sobre diseño web “responsive”

Visitas: 8.113

Cada vez son más los sitios web que optan por el diseño “responsive” como la mejor solución para adaptar de manera automática su producto web al tamaño de cualquier pantalla (ordenador, tableta o móvil).

El imparable aumento del uso de los dispositivos móviles –smartphones y tabletas de todo tipo, tamaño y potencia- para navegar por internet obliga a los propietarios de los sitios web a buscar soluciones que aseguren que los usuarios van a tener siempre una buena experiencia cuando accedan a su página, con independencia del dispositivo que utilicen.

En este sentido, entre los diseñadores y desarrolladores de páginas web una de las opciones que ha ido ganando terreno de manera más decidida durante los tres últimos años es la del diseño “responsive”.

Además de este artículo en el que se resume de manera básica en qué consiste el diseño “responsive” y se ofrecen recursos útiles para profundizar en el tema, en Internet es útil hemos preparado también una amplia selección de sitios web “responsive”, pertenecientes especialmente a la categoría de medios de comunicación, para mostrar de modo práctico las posibilidades que ofrece esta fórmula.

Básicamente, lo que ofrece esta solución es la adaptación automática del diseño y de los contenidos de la página web para que se vean de manera óptima en la pantalla de cualquier tipo de dispositivo (móvil, tableta y ordenador).

Con un diseño “responsive”, la plantilla de la página web es fluida –se va adaptando al tamaño de la pantalla correspondiente-, las imágenes se escalan para adaptarse también a cada pantalla y los estilos de la página tienen en cuenta el dispositivo que utiliza el usuario. Así, nunca será necesario hacer zoom en la página, porque todo se leerá y verá de manera óptima en función del dispositivo.

Un poco de historia

El concepto de diseño web “responsive” fue acuñado por el diseñador, desarrollador y autor estadounidense Ethan Marcotte en un artículo publicado el 25 de mayo de 2010 en la web especializada en diseño y desarrollo web A List Apart, titulado precisamente “Responsive Web Design”.

El libro de Ethan Marcotte "Responsive Web Design"

Al año siguiente el propio Marcotte publicó un libro también titulado “Responsive Web Design” (A Book Apart) en el que desarrollaba algo más el concepto y sentaba las bases de este efectivo modo de construir páginas web que se adaptan de manera automática al tamaño de cualquier pantalla.

La idea de crear páginas web siguiendo este sistema ha ido ganando adeptos casi en paralelo al crecimiento del número de visitas realizadas desde dispositivos móviles. Una de las principales ventajas esgrimidas por los defensores del diseño “responsive” es de carácter económico: se debe diseñar y desarrollar una única vez para que la web funcione correctamente en cualquier dispositivo.

Una de las compañías que ha apostado de manera más decidida por el diseño “responsive” es la web de información sobre el mundo digital Mashable. A finales del año 2012, el fundador de esta compañía informativa, Pete Cashmore, publicó un artículo titulado “Why 2013 Is the Year of Responsive Web Design”. Cashmore explicaba por qué Mashable había optado por esta solución en su reciente rediseño y hablaba de la era “post PC” propiciada por el imparable crecimiento del uso de dispositivos móviles para navegar por internet.

Diseño “responsive” en acción

Para entender rápidamente en qué consiste el diseño web “responsive” basta con entrar desde el navegador del ordenador en cualquier página web hecha bajo este concepto (por ejemplo, www.mashable.com) e ir reduciendo el tamaño de la ventana del navegador. Veremos como todos los elementos de la página –menú de navegación, columnas, titulares, imágenes, publicidad, textos…- se van reordenando y adaptando de manera automática al tamaño correspondiente, de manera que el usuario disfruta siempre de una experiencia óptima, sea cual sea el tamaño de la pantalla.

Existen diversas herramientas en internet que permiten comprobar de manera automática cómo se verá una página web determinada en distintos tamaños de pantalla. Estas son algunas de las mejores opciones:

Otras opciones

El diseño “responsive” es una de las distintas opciones que existen a la hora de crear sitios web pensados para ser utilizados desde distintos dispositivos.

Google ha publicado recientemente una guía práctica sobre este tema, en la que expone las distintas vías por las que pueden optar los propietarios de sitios web. En el documento “Building Websites for the Multi-Screen Consumer”, Google explica de manera detallada las ventajas e inconvenientes de cada una de las tres soluciones presentadas: “Responsive Design”, “Dynamic Serving” y “Separate Mobile Site”.

Y además, las apps nativas

Todo lo dicho anteriormente se refiere a la creación de sitios web móviles, entendidos como aquellos que podemos consultar utilizando el navegador de cualquier dispositivo.

Pero existe evidentemente otro mundo muy relevante en el entorno de la movilidad, que es el de las apps nativas. Se trata en este caso de las apps desarrolladas específicamente para dispositivos iOS (Apple), Android o cualquiera de las otras plataformas móviles existentes, como Windows o BlackBerry.

La principal diferencia respecto a la web móvil es que con las apps los editores de sitios web pueden sacar el máximo partido a las posibilidades que ofrece el sistema operativo de cada dispositivo. Las app deben descargarse desde la tienda de apps correspondiente, como la App Store de Apple o Google Play en el caso de Android.

La opción más común entre los editores de páginas web es ofrecer una solución para el mundo de la web móvil y otra distinta para las apps nativas, de manera que sea el usuario el que decida en cada momento qué opción prefiere o le conviene más.

Más información:

Otros recursos útiles:

· Smashing Magazine
La revista digital Smashing Magazine –que precisamente utiliza un diseño web “responsive”- es uno de los mejores recursos informativos para diseñadores y desarrolladores de páginas web. Cuenta con una sección dedicada específicamente al diseño web “responsive”.

· This is Responsive
Relación de enlaces, noticias y artículos sobre diseño web responsive recopilados por la agencia de comunicación y marketing digital R/GA.

· Responsive Design Knowledge Hub
Otra completa relación de enlaces útiles que cubren todos los aspectos del diseño web “responsive”

· Media Queri
Selección de sitios web “responsive” mantenida por el desarrollador noruego Eivind Uggedal (@uggedal).

· Infográfico “Responsive Design: Getting It Right

· Zurb: compañía de diseño web especializada en “responsive”. Ofrece recursos abundantes recursos gratuitos.

· This is Responsive
Amplísima selección de recursos de todo tipo sobre diseño web “responsive”

· Designmodo: listado de ejemplos de diseños “responsive”:

· Informe del IAB (Interactive Advertising Bureau) sobre diseño web “responsive” y las implicaciones desde el punto de vista publicitario (PDF)

· Empresas que participaron en el proyecto de diseño “responsive” del diario The Boston Globe: Upstatement y Filament Group.

 


Esta entrada fue publicada en Diseño y visualización, Móviles y tabletas, Publicar y clasificada en , , , . Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

* Copy this password:

* Type or paste password here:

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post delivered to your Inbox

Join other followers