BAQUIA

Anatomía de un diseño responsive

Una web tiene básicamente dos formas de adaptarse al entorno móvil: crear una aplicación nativa, o pasarse a un diseño responsive (o hacer las dos cosas, claro).

Si elige sólo esta segunda opción, no tendrá necesidad de invertir en una aplicación móvil, sino que simplemente creará un diseño que mostrará la web correctamente en todo tipo de dispositivos. Si el diseño está bien hecho, la web tendrá la flexibilidad necesaria para adaptarse al tamaño de pantalla de un ordenador, una tableta o un smartphone, y mostrarse correctamente en todas ellas.

WhoIsHostingThis? resume en una infografía todos los pasos necesarios para implementar con éxito un diseño responsive. Para inspirarse, cita una frase de Antoine de Saint-Exupery, autor de “El principito”, escrita en 1939 pero plenamente vigente para la tecnología de hoy en día:

“Un diseñador sabe que ha alcanzado la perfección no cuando ya no hay nada más que añadir, sino cuando no queda nada que quitar”.

Al pensar en los usuarios de dispositivos móviles, esta frase debería estar siempre presente en la mente de diseñadores y programadores. Nada de páginas recargadas, navegación confusa o resoluciones pesadas para el escritorio: los usuarios quieren un diseño sencillo, limpio y optimizado para su pantalla.

Así que el diseño responsive parte de tres ingredientes técnicos:

– Grids fluidos.

– Imágenes flexibles que se adapten a cualquier tamaño de pantalla.

– CSS adaptado al tamaño del navegador en pantalla.

Después, en el caso concreto de los comercios electrónicos, hay que cuidar cinco elementos clave del diseño:

1. La cabecera.

2. La galería de imágenes.

3. La descripción de productos.

4. La información auxiliar.

5. El pie de página.

Infog responsive


Compartir en :


Noticias relacionadas

Recomendamos




Comentarios