Cómo se maqueta una página web

En este vídeo, que forma parte del curso Introducción al desarrollo web, te voy a mostrar los estilos de diseño que se suelen emplear cuando se maqueta una página web.

En este vídeo, te voy a hablar del diseño adaptable. En la parte anterior de este vídeo, vimos el estilo de diseño líquido o fluido, que permite que la visualización de una página web, se adapte a los diferentes tamaños de pantalla de diferentes dispositivos. Sin embargo, en la actualidad existen tantos dispositivos que permiten acceder a la web, con tantos tamaños de pantalla tan diferentes, que las ventajas que ofrece el diseño líquido, son un poco limitadas para la situación actual y es difícil lograr que una misma página web, se muestre correctamente en un dispositivo con una pantalla pequeña o en un dispositivo con una pantalla grande. Por ejemplo, si nos centramos solo en los dispositivos móviles, es decir, en los teléfonos y tabletas, en un estudio publicado en el tercer cuatrimestre de 2014, se observa que existe una gran diversidad de tamaños de pantalla y además existen diferencias significativas entre los diferentes continentes.

En el siguiente gráfico de StatCounter, encontramos información similar. Podemos ver la evolución de las resoluciones de pantalla desde marzo de 2009 hasta octubre de 2014. El cambio producido en menos de seis años ha sido impresionante. En la actualidad coexisten muchas resoluciones de pantalla.

¿Y si hacemos un diseño para cada resolución de pantalla? Bueno, eso sería una locura, sería mucho trabajo, pero lo que sí que podemos hacer, es organizar las diferentes resoluciones de pantalla en grupos y crear diferentes diseños para cada grupo. Por ejemplo, imaginemos la siguiente maqueta de una página web, que tiene una cabecera, un menú principal a la izquierda, una zona de contenido principal a la derecha con tres bloques y un pie de página. Comenzando por el diseño extra grande, se pueden plantear diferentes transformaciones en la maqueta para adaptar la página web a resoluciones de pantalla inferiores. Eso lo podemos lograr con un diseño adaptable, pero, ¿cómo se diferencia un diseño adaptable de un diseño líquido? En un diseño adaptable, el diseño de una página puede sufrir transformaciones importantes, por ejemplo, se puede pasar de un diseño de varias columnas, a un diseño de una sola columna. Para ello se suelen crear varias hojas de estilo, que mediante Media queries, permiten que el dispositivo utilice la más adecuada. A veces, las transformaciones son tan importantes como, por ejemplo, convertir una barra de menú en una lista desplegable, que es necesario la utilización de JavaScript.

En el sitio web Media Queries, existe una galería enorme de sitios web desarrollados con diseños adaptables. Aquí tenemos un ejemplo, el sitio web de Stanford University. Este ejemplo me gusta mucho porque son pocas las universidades que tienen una página principal con un diseño adaptable. Esta página web se visualiza correctamente a 1920 x 1080 píxeles, a 1024 x 768 y a 640 x 480. Un detalle importante de esta página web está en la transformación de la barra de menú principal, que se convierte en una lista desplegable.

¿Cómo se realiza un diseño adaptable? Este es el esquema de la página de prueba que estoy utilizando como ejemplo en estos vídeos. El código HTML es el mismo que empleado en ejemplos anteriores, pero hay una diferencia importante, esta instrucción meta es esencial para que la página web se muestre con la escala apropiada en un dispositivo con una pantalla pequeña o mediana. Los cambios más importantes de este diseño los encontramos en el CSS, este CSS no es único, no es un único CSS, en realidad se puede entender como dos CSS en uno solo.

Esto se logra con el empleo de las media queries, unas condiciones que indican cuándo se debe utilizar una parte del CSS. En esta página se han definido tres diseños, cuando la resolución de pantalla sea igual o mayor que 1200 píxeles de ancho, cuando la resolución de pantalla sea igual o mayor que 800 y menor que 1200 y cuando la resolución sea menor que 800 píxeles, que no se ha definido nada.

Así se ve la página con una resolución de 1920 píxeles, es un diseño a tres columnas. Así se ve la página con una resolución de 1024 píxeles, es un diseño a dos columnas. Así se ve la página con una resolución de 640 píxeles, sin diseño. Y también podemos probar a visualizar la página con resoluciones inferiores, por ejemplo, esta es una captura de pantalla de Opera Mobile Emulator, simulando un Samsung Galaxy S2.

Ya para terminar, ahora, te aconsejo que veas otros vídeos que tengo sobre el diseño adaptable, en particular, te recomiendo que veas un vídeo dividido en tres partes, en el que desarrollo paso por paso un diseño adaptable.

Ahora te invito a que veas la siguiente parte de este vídeo, en el que explico el diseño basado en rejilla.

Muchas gracias por tu atención.