Diseño

Qué es y qué hay que tener en cuenta con el diseño web adaptable o adaptativo

22 Feb , 2013  

Más que una tendencia, el diseño web adaptable (o adaptativo según la FUNDEU) es un conjunto de herramientas y técnicas para organizar la información en función de los parámetros donde vaya a ser visualizado.

Formato panorámico, baja resolución o HD,… los diseñadores no pueden contar ya con editar con una única solución. La clave está en la reacción: procesar las informaciones en el contexto, organizarla y ponerla a la vista en una página adaptada.

Las cifras no dejan lugar a dudas. Tráfico web móvil en 2012: 5,1% en Europa, 10% en el mundo. Un 14,79% de los mails se abren en los móviles: un 47% en iPhone, un 29% en iPad, un 20% en teléfonos Android.

Google ya ha recomendado este tipo de tecnología porque evita la duplicidad de contenidos y esto a su vez ayuda a sus robots a descubrir los contenidos de manera más eficiente.

responsive-design

¿Pero qué hay que tener en cuenta? Ahí van unas cuantas ideas:

Una disposición simple. Es una evidencia, pero sin duda el primer paso es plantear un diseño sencillo. Apostar por un HTML ligero y limpio, sin depender de astucias muy avanzadas en CSS3 o JS para el diseño básico.

Media queries. En el diseño web adaptable priman las condiciones del aparato donde vayamos a visualizar. Según el tamaño del navegador, se aplica unos estilos alternativos para cada caso. Desde una base de resolución estándar se aplican puntos de más o de menos según el tipo de smartphone o tableta.

Maquetación flexible. Usa cajas flexibles usando columnas para organizar el contenido y un ancho (width) relativo mejor que una fijo para que se adapte a la ventana.

Máximo y mínimo. Hay que evitar que el diseño se amplíe o se reduzca a límites ridículos para pantallas muy grandes o muy pequeñas.

En el móvil, respeta lo lineal. Una de las reglas básicas para la versión móviles es organizar la información en una columna.

Suprime lo que no es esencial. Muchas secciones de las webs no tienen sentido en la versión móvil. ¿Qué no es imprescindible? Lo que no es funcional, la ayuda, publicidad, productos relacionados…

Si te quedas con ganas de saber más este, es un enlace hacia 15 tutoriales para aprender a diseñar un sitio web adaptativo. Enjoy!

, , , ,


Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR