Responsive Web Design o diseño adaptativo

Foto vía Flickr by: Luke Wroblewski

Internet hoy en día se consume bajo un comportamiento que llamamos ‘multidispositivo’. Es decir, navegamos desde un computador de escritorio en nuestra oficina, o asistimos a una reunión con nuestro portatil (laptop) o tablet y, mientras esperamos que la reunión comience, consultamos un dato de última hora desde nuestro móvil (smartphone).

Technologies To Watch in 2014Foto vía: Mouser.com

Si tenemos en cuenta que la web del mañana será completamente masiva y asequible y ocupará desde el reloj, la nevera, el automóvil, la ropa etc. (la llamada ‘internet de las cosas’), cabe preguntarnos ¿qué tan preparados están nuestros sitios webs para que puedan ser visualizados correctamente y la experiencia sea similar en las pantallas de cualquier dispositivo?

resoluciones

Pues bien, con responsive web design se construyen interfaces de usuario que garantizan la correcta visualización en las resoluciones para las cuales esté optimizado el sitio.

¿Qué es RWD?

Responsive Web Design, Responsive Design  o Diseño Adaptativo, es un conjunto de técnicas que hacen que la presentación del sitio web cambie de apariencia y diseño basado en el tamaño de la pantalla donde se visualiza.

builDResponsive

Foto vía Flickr by: Jeffrey Zeldman

Los sitios responsive pueden ser diseñados para hacer que el texto de la página sea más grande y fácil de leer en pantallas más pequeñas. También se pueden configurar para hacer que los botones en la pantalla del teléfono sean más fáciles de presionar, o se pueda formatear el contenido para ocultar o presentar información completamente diferente, de manera que cambie radicalmente el diseño o, incluso, el sitio se reduzca para hacer énfasis sólo en la sección más importante.

El término "Responsive Web Design" fue introducido por Ethan Marcotte en un artículo en A List Apart, publicado en mayo de 2010. Más tarde describió su teoría en el libro "Responsive Web Design", publicado en 2011

Ventajas:

  • Menores costos: el cliente contratará con un solo diseño y desarrollo que contemple, dentro del presupuesto, la correcta visualización en múltiples resoluciones.
  • Fácil actualización o administración del contenido en un solo lugar.
  • Coherencia gráfica: el usuario tendrá una experiencia similar de diseño y navegación en todos los dispositivos desde donde acceda.
  • Amigable con el SEO: porque hace esfuerzos de posicionamiento orgánico de la misma URL.
  • Compatibilidad: en dispositivos móviles, Google mostrará que la web que el usuario desea visitar es compatible.
  • Difusión: las campañas de marketing harán esfuerzos de promoción de la misma URL y no de diferentes versiones. El contenido compartido en redes sociales será el mismo en cualquier plataforma.
  • Seguimiento: al momento de medir el rendimiento de un sitio completo, o de una página específica, no habrá contenido duplicado en varios subdominios que dificulten la medición.

Desventajas:

  • En algunos casos, según la implementación y las especificaciones requeridas en los proyectos, la carga del sitio será similar a la versión de escritorio. Al cargar librerías en JavaScript y código HTML que no se va a visualizar será más lento y pesado el acceso al contenido del sitio.
  • En dispositivos móviles no se utilizan todas las funcionalidades nativas del hardware. Ejemplo: cámara, giroscopio, notificaciones, GPS.
  • Se requiere wi-fi o acceso a planes de datos para consultar la información del sitio web.

Al contratar un proyecto con RWD.

Definir los dispositivos. Dispositivos= resoluciones de pantalla. En el momento de contratar este servicio se recomienda contemplar mínimo 3 dispositivos (escritorio, tablet y móvil).

Jerarquía del contenido. Los elementos que componen el proyecto se posicionan en cada una de las interfaces según su importancia (algunas secciones que no son relevantes se pueden esconder para que los usuarios no las vean).

jerarquia

Diseño creciente. Es lo que técnicamente se conoce como mobile first  o primero móvil, donde se prioriza la correcta visualización en dispositivos móviles con pantallas pequeñas, luego tablet y, finalmente, escritorio.

Diseño decreciente: Es lo que técnicamente se conoce como desktop first  o primero computadores de escritorio, donde se prioriza la correcta visualización en computadores y laptops con pantallas grandes y luego tablet.

Implementar RWD en los proyectos no es opcional, debe de ser una constante en el diseño y desarrollo. En Pacífica Diseño S.A. en todos los proyectos que realizamos lo implementamos, algunos ejemplos:

Artículo-RWD1 Artículo-RWD3 Artículo-RWD2

perfil-Klamylo

Por: Camilo Estrada

Director Marketing Digital

@klamylo
G+ Klamylo Estrada

.