Adapta el diseño de tu web al futuro de Internet

 La multiplicación de dispositivos provoca que tengamos que adaptar el código para que sea flexible y dinámico.

Hasta hace unos años, los diseñadores sólo tenían que tener en cuenta la resolución de la pantalla del ordenador y poco más para adaptar sus creaciones. Como mucho, pensaban en las diferentes versiones de Internet Explorer…

Hoy en día, sabemos que probablemente ni el PC ni Internet Explorer conducen el tráfico a nuestra web (por lo menos, no la mayoría del tráfico), por lo que tendremos que tener en cuenta los accesos desde diferentes navegadores y dispositivos a la hora de programar nuestras páginas. Y es que está claro que el futuro de Internet es móvil.

Lo primero que tenemos que hacer es recordar que nuestra web no se verá igual en todos los navegadores y gadgets. Así que debemos centrarnos en un código basado en HTML5, que rompa los moldes fijos para adaptarse al tamaño y dimensiones que cada usuario espera encontrar en cada dispositivo.

Así, podemos diferenciar cuatro tipos de diseño:

– Fijo: el ancho es fijo, por lo que cambiar el tamaño del navegador o verlo en diferentes dispositivos no afectará al aspecto de la web. Sin embargo, será necesario un scroll horizontal para abarcarla entera, y tendremos una web que no tendrá buen aspecto en smartphones y tabletas.

– Fluido: la web se construye utilizando porcentajes para determinar la anchura de las columnas. De esta forma, las columnas serán proporcionales entre sí y el navegador, variando de manera fluida hacia más anchas o más estrechas.

– Adaptativo: se utilizan anchos fijos o relativos, pero el código incluye preguntas específicas para adaptarse a tamaños de pantalla específicos, como monitores pequeños, tabletas o smartphones.

– Sensible: este tipo de webs se construyen sobre un código fluido, y utiliza también preguntas para controlar el diseño y el contenido a medida que cambiar la escala para adaptarse al navegador o dispositivo.

En este vídeo de Treehouse podemos ver un resumen con las caracterísiticas de cada diseño:

Fuente: www.baquia.com