responsive design

Tendencias de diseño web 2013: Responsive Design

En los últimos años, los dispositivos desde los cuales accedemos a Internet han ido creciendo, pudiendo acceder desde nuestros móviles, tablets y los clásicos ordenadores, ¿y se debe mostrar la información igual en ellos? la respuesta es Resposive Design.

¿Qué es Responsive Design?

Básicamente es adaptar nuestro sitio web a los distintos dispositivos para que el mismo contenido se muestre lo más óptima posible al usuario y que la navegación sea lo más natural posible dependiendo del dispositivo. ¿qué quiero decir que la información se muestre clara, y que sea fácilmente navegable? Que el usuario pueda visualizar de forma perfecta la información sin que tenga que aplicar casi nunca ni zoom, ni scroll ni otras técnicas de navegación web, y siempre mostrando el mismo contenido para todas las plataformas. La experiencia de usuario debe percibirse casi igual independientemente del dispositivos desde el cual accedamos a un sitio web.
Os presento un vídeo que nos puede aclarar bien el concepto:

¿Y porqué es tan importante el Responsive Design?

Os pongo un listado que he creado de las razones de por qué utilizar Responsive Design:

– Es una forma de asegurar que nuestra web va a ofrecer una buena experiencia de usuario en distintos dispositivos donde se presente. Si te das cuenta, la única forma que teníamos de acceder a la web era a través de nuestros ordenadores personales, pero ahora no sólo accedemos a la web desde distintos dispositivos, como pueden ser smartphones, tablets, televisiones, si no que en un mismo dispositivo, si giramos la pantalla, la información debe mostrarse de una forma correcta.

responsive design sizes

Además, como sabemos , no sólo se diferencian en el tamaño y forma de pantalla los dispositivos anteriormente citados, si no en la forma de navegar (con un ratón, con los dedos, un teclado), la velocidad de procesamiento, en la velocidad de acceso de Internet…por lo que habrá que hacer que dependiendo del dispositivo, optimicemos el contenido y la estructura a cada una de las características anteriormente citadas.

responsive design

– Es necesario un sólo código, por lo que no hace falta tener un sitio web adaptado a cada uno de los dispositivos. ¿y por qué es importante este punto? Es fácil: ¿se imagina tener una web con cientos de páginas, en las cuales tuvieras que hacer una versión distinta para cada dispositivo? tendrías ‘n páginas’ x ‘cada dispositivo al cual quieras optimizar la web’. Esto al final se traduce en dinero gastado por mantener distintos contenidos.

responsive design

Mejora el SEO de nuestra web de cara a Google. Al centrarte en un sólo contenido optimizado (al haber un sólo contenido, no hay penalización por redundancia), y en una misma estrategia SEO, independientemente del dispositivo que se utilice.

-Una mejor conversión (CTR), al mostrarse de forma optimizada el contenido y al mejorar la experiencia del usuario.

 

¿Cómo saber si un sitio es Responsive Design?

Para saber si un sitio es Responsive Design no hace falta que abramos la web desde distintos dispositivos, con el navegador de nuestro ordernador nos será suficiente: abrimos un sitio web con el navegador de nuestro ordenador, y vamos cambiando el tamaño de la ventana del navegador, y si vemos que el contenido se reestructura según el tamaño de la ventana, para mostrarse de una forma clara, casi seguro que lo sea.

A continuación os muestro ejemplos de páginas web que son Resposive Design, para que probéis a utilizarlas tal como os he explicado en el párrafo anterior o mediante un dispositivo móvil:

thenextweb.com

Tendencias de diseño web 2013: Responsive Design

 

foodsense.is

Tendencias de diseño web 2013: Responsive Design

 

Y por supuesto, happye.es

Tendencias de diseño web 2013: Responsive Design

 Os dejo un gif impresionante que os puede servir para entender mejor aún esto de Responsive Design:

Definition-of-Responsive-Design

¿Conocéis alguna web que os encante y que sea Responsive Design?

Imagenes obtenidas de medianovak, onbile y total4net.

Tendencias de diseño web 2013: Responsive Design 5.00/5 (100.00%) 3 votos

5 comentarios

Pingback: Tendencias de diseño web - happye

A %d blogueros les gusta esto: