Básicos del diseño responsivo

diseño web responsivo

A través del tiempo, nuestros hábitos de consumo de contenidos han evolucionado. En la actualidad podemos decir que nos hemos convertido en grandes consumidores digitales a través de nuestros dispositivos móviles (smart phones, tablets, laptops, etc.), por lo que la manera en que ese contenido llega a nosotros y cómo lo “digerimos” también ha cambiado.

Ya no se trata simplemente de captar la atención de los consumidores y contarles “algo”; ahora esa historia debe tener un flujo personalizable y contar únicamente lo que es relevante para cada persona sin dejar a un lado las consistencias de experiencia de usuario, las cuales deben mantenerse sin importar desde qué dispositivo se esté navegando.

 ¿Cómo lo hacemos? 

 Para empezar es indispensable partir de las siguientes tres interrogantes:

  • ¿Cuál es el objetivo del sitio?
  • ¿Quién es tu audiencia?
  • ¿Qué necesitan? 

Usa las respuestas a estas preguntas para crear historias irresistibles.

Wireframes

Todo buen diseño responsivo comienza con buenos wireframes.

En diseño editorial se utiliza la retícula para designar orden y espacio a cada uno de los elementos que contendrá la página. La traducción a diseño web de este concepto son los wireframes o esqueletos, que le brindan armonía y estructura a tu sitio - además de adaptarse dependiendo del tamaño de pantalla en el que se visualiza el sitio-. Los tamaños de navegador más comunes son: 768px o más, 480 a 768px y 320 a 480px, así como las versiones para tabletas y teléfonos.

Tras bambalinas, Google recientemente lanzó una actualización en donde premia a los sitios que son mobile-friendly al potenciar su ranking en los resultados de búsqueda. De esta manera, los consumidores pueden encontrar con mayor facilidad resultados de mayor calidad en donde hay buena legibilidad sin necesidad de hacer zoom ni desplazamientos horizontales.

diseño responsivo dispositivos moviles

Esta actualización afecta solamente a los rankings de búsqueda en dispositivos móviles, los resultados en cualquier idioma y páginas individuales, no a sitios completos.

Para saber si tu sitio es mobile-friendly, haz la prueba aquí: http://tinyurl.com/omuxo6g

Es importante que sepas que si tu sitio aún no es responsivo, esto sí afecta el tráfico móvil, pero no te preocupes: una vez que lo hagas, Google indexará todas tus páginas de manera automática.

Quiero saber más sobre diseño responsivo

Topics: MARKETING DIGITAL


¿Qué te pareció?

¡Queremos conocer tu opinión!