Diseño y programación web.

Antes de que un teléfono móvil pudiera ofrecer conexión a Internet, la única forma era a través de un ordenador. En los ordenadores, los tamaños de pantalla eran muy variados, pero las diferencias entre estas medidas no eran excesivas. La mayoría de las pantallas estaban entre las 14 y 20 pulgadas.

Con la llegada de los dispositivos portátiles, teléfonos, tablet, ordenadores portátiles, la variación de tamaños de pantalla es descomunal. En el momento de esta publicación, los tamaños de pantalla más comunes oscilan entre las 4,5 pulgadas de los teléfonos, a las 20 pulgadas para los ordenadores de sobremesa, aunque no es extraño encontrar en cualquier casa monitores que superen las 20 pulgadas e incluso las 30.

Esta disparidad de tamaños, hace que la forma en que se presentan los contenidos no pueda ser la misma para un teléfono o para un ordenador de sobremesa. En una Web vista desde una pantalla de 20 pulgadas, podemos presentar, por ejemplo, columnas de enlaces a uno y otro lado de los contenidos, podemos poner varios elementos publicitarios, y el tamaño de las imágenes y texto estará en función de ese tamaño de pantalla.

Pero, ¿que ocurre cuando accedemos a esta misma Web desde un teléfono móvil con una pantalla de 5 pulgadas? Ya no tenemos espacio para que esas columnas de enlaces laterales, ya no podemos poner tantos elementos publicitarios, y el tamaño del texto resulta ilegible. La solución inmediata es usar el zoom, pero esto resulta muy incomodo, como podéis comprobar los navegantes que en el momento de esta publicación usáis esta Web. En este sentido, me gustaría decir, que aparte de los problemas de tiempo, no creo que nadie tenga mucho interés en acceder a una Web de programación desde un dispositivo móvil al que esta Web no ofrezca una visualización cómoda.

Sin incidir más en este problema, de sobra conocidos por todos, CSS nos ofrece una solución fantástica y tremendamente sencilla. Esta solución consiste en cargar una determinada hoja de estilos en función del tamaño de pantalla que usa el navegante. Añadir que esta opción no es necesariamente la única que nos ofrece CSS, ya que desde una misma hoja de estilos se puede modificar la respuesta de diferentes capas, pero es muy interesante de cara a tener los estilos completamente separados para diferentes resoluciones de pantalla y poder modificarlos sin riesgo de alterar los demás.

No considero importante para este artículo explicar las diferentes hojas de estilo, son muy simples, y podeis acceder a ellas desde el código fuente de las demos.

Sin más os dejo el código, y os recomiendo que accedáis a la demo y modifiquéis el tamaño de vuestro navegador, si es que accedéis desde un ordenador o dispositivo que lo permita, para así ver el efecto que se produce. Para simplificar todo esto, vemos que cambia es el color de fondo de la pantalla y el tamaño del texto.