En esta lección se explica cómo se realiza la maquetación de una página web.

La maquetación consiste en organizar los elementos de una publicación, ya sea en medios impresos o digitales. En los periódicos, por ejemplo, se preparan maquetas para distribuir titulares y contenidos de forma clara y equilibrada. Este proceso se realiza mediante bloques que permiten experimentar distintas composiciones antes de definir la versión final.

La maquetación requiere tener en cuenta criterios de diseño como claridad, legibilidad, uso adecuado de espacios en blanco y distribución equilibrada del contenido. En inglés, se emplean los términos layout y mockup.

En la web, los mismos principios se aplican, pero con una diferencia clave: el medio de publicación es la pantalla, que puede variar en tamaño según el dispositivo, a diferencia del papel en medios impresos. Por ello, la maquetación web difiere notablemente de la tradicional y ha influido en los principios del diseño web.

La maquetación web se puede abordar a nivel macro y micro, tema que se desarrolla en la siguiente lección.

En esta lección se explica cómo se realiza la maquetación de una página web. La maquetación puede abordarse a nivel macro, que analiza la estructura general de la página, y a nivel micro, que estudia los bloques y subbloques específicos.

A nivel macro, se observa cómo la página principal del sitio web de la Universidad de Alicante se adapta parcialmente a distintas resoluciones gracias a un diseño flexible, aunque no totalmente, ya que aparece una barra de desplazamiento horizontal en resoluciones menores a 1024 píxeles. Jakob Nielsen ha destacado que esta barra es un error de usabilidad a evitar.

A nivel micro, la página se compone de cuatro bloques principales: la barra de menú superior, la cabecera, el contenido principal y el pie de página, que a su vez se dividen en subbloques más detallados. Este análisis puede repetirse para cada bloque hasta el nivel de detalle deseado.

En esta lección se presentan los estilos de diseño más comunes en la maquetación de páginas web. Se explica la diferencia entre la maquetación de medios impresos y páginas web, destacando que en la Web las dimensiones de visualización son desconocidas y variables según el dispositivo y la configuración del usuario.

Se describen los principales estilos de diseño: sin diseño, diseño fijo, diseño elástico, diseño líquido o fluido y diseño adaptable, aunque lo habitual es usar combinaciones de estos estilos. El vídeo se centra en el estilo “sin diseño”, característico de los primeros sitios web de 1990, donde no hay colores, tipografías ni distribución específica del contenido. Visualizar páginas modernas sin estilos revela su apariencia básica y desordenada.

Se muestra la estructura básica de una página web de ejemplo: cabecera, menú de navegación, contenido principal, panel adicional y pie de página.

En esta lección se explica el diseño fijo en páginas web. Este estilo utiliza un ancho constante, lo que provoca barras de desplazamiento horizontal en pantallas más pequeñas y desaprovecha el espacio en pantallas grandes. Aunque fue común en los primeros años de la web, todavía se observa en sitios como el Consorcio de Transportes de Madrid o el Congreso de los Diputados.

Originalmente, el diseño fijo se realizaba con tablas, lo que mezclaba contenido y presentación, generaba código complejo y problemas de accesibilidad. Hoy se usa más la propiedad float de CSS y la etiqueta div para definir columnas con ancho fijo, aunque los inconvenientes de adaptabilidad persisten. Por ejemplo, un ancho de 960 px era habitual cuando la resolución popular era 1024x768. Con CSS, el contenido se puede centrar usando márgenes automáticos.

En las próximas lecciones se abordará el diseño elástico, que mejora la adaptabilidad de la página a distintas resoluciones.

En esta lección se explican los estilos de diseño web, centrándose en el diseño elástico. A diferencia del diseño fijo, el diseño elástico adapta el tamaño de la página y sus elementos al tamaño del texto mediante unidades relativas como em, evitando desbordamientos y mejorando la legibilidad.

Se analiza la evolución de las resoluciones de pantalla entre 2009 y 2014, destacando cómo la diversidad de dispositivos actuales exige diseños adaptables. Se muestran ejemplos de páginas no elásticas y cómo el diseño elástico permite que toda la estructura crezca proporcionalmente al aumentar el texto.

La lección detalla la implementación práctica del diseño elástico usando divs, anchos relativos y ajustes de margen, explicando también sus limitaciones frente a resoluciones pequeñas y la aparición de barras de desplazamiento. Finalmente, se introduce un diseño para ancho no fijo, donde el contenido principal se adapta al espacio disponible, mientras que el menú y la información adicional mantienen un ancho fijo, mostrando cómo la página se ajusta dinámicamente a distintos tamaños de ventana.

Se concluye que, aunque el diseño elástico mejora la adaptabilidad, en ciertas situaciones el diseño líquido o fluido resulta más adecuado.

En esta lección se explica el diseño líquido o fluido de páginas web. A diferencia del diseño elástico, que adapta el tamaño de los elementos al texto, el diseño líquido ajusta el ancho de la página y sus elementos al tamaño de la ventana, generalmente usando porcentajes. Esto permite que la página se visualice correctamente en distintos dispositivos y resoluciones.

Los elementos de un diseño líquido se comportan como el agua, adaptándose al contenedor que los contiene, lo que refleja el comportamiento natural de la web. Aunque en pantallas grandes puede generar líneas de texto demasiado largas, este problema se soluciona con las propiedades CSS min-width y max-width. Los diseños líquidos funcionan correctamente en pantallas pequeñas o medianas y con distintos navegadores, y permiten ampliar la página mediante zoom.

Aunque es una solución flexible, en resoluciones muy pequeñas el contenido puede quedar comprimido, por lo que existe una alternativa llamada diseño adaptable, que se abordará en la siguiente lección.

En esta lección se explica el diseño adaptable. A diferencia del diseño líquido, que ajusta la visualización a distintos tamaños de pantalla, el diseño adaptable permite transformaciones importantes en la maqueta, pasando por ejemplo de varias columnas a una sola, y se implementa mediante varias hojas de estilo y media queries, a veces con ayuda de JavaScript.

Debido a la gran diversidad de dispositivos y resoluciones de pantalla, crear un diseño específico para cada resolución sería impracticable. La solución es agrupar resoluciones similares y definir un diseño para cada grupo. Por ejemplo, se pueden definir diseños distintos para pantallas grandes (≥1200 px), medianas (800–1199 px) y pequeñas (<800 px). Esto permite que la misma página se visualice correctamente en múltiples dispositivos, como se muestra en la página de Stanford University, donde la barra de menú se transforma en lista desplegable según la resolución.

El diseño adaptable se basa principalmente en CSS y media queries, mientras que el HTML se mantiene similar al de ejemplos anteriores, con la instrucción meta esencial para escalar la página correctamente. Este enfoque garantiza accesibilidad, usabilidad y correcta visualización en diferentes pantallas.

En esta lección se explica cómo diseñar una página web usando rejillas o retículas. El diseño con rejilla divide la página en columnas, módulos y zonas espaciales, manteniendo la estructura ordenada y facilitando la claridad y continuidad del diseño. Se puede aplicar a cualquier estilo de diseño web, ya sea fijo, líquido, elástico o adaptable.

Para crear una rejilla, se recomienda usar frameworks de CSS como 960 Grid System, que proporciona una estructura de 960 píxeles y permite trabajar con 12 o 16 columnas. Existen herramientas online que permiten configurar el ancho de columnas, el número de columnas y el gutter, además de previsualizar rejillas fijas o fluidas.

El CSS generado define clases que facilitan la disposición de encabezados, columnas y otros elementos en la rejilla. Por ejemplo, un encabezado de nivel 1 puede ocupar toda la anchura, mientras que un nivel 2 se puede posicionar en la mitad derecha. Las rejillas fluidas se adaptan a distintas resoluciones, desde 1920x1080 hasta 640 píxeles de ancho.

En esta lección se analiza la importancia de la Web Única. La Web actual se visualiza en múltiples dispositivos, pero no debe fragmentarse en versiones separadas para ordenador, móvil o navegador específico.

Tim Berners-Lee, creador de la Web, advirtió sobre los peligros de adaptar sitios a navegadores concretos y promover la fragmentación. El enfoque correcto es dar soporte a los estándares web, ignorando navegadores que no los cumplan, para garantizar que los usuarios accedan a la misma información y servicios, independientemente del dispositivo.

El World Wide Web Consortium (W3C) promueve el concepto de One Web o Web Única, definido en sus recomendaciones “Mobile Web Best Practices”: un recurso identificado por un URI debe ofrecer información temática similar, adaptando apariencia y formato según el dispositivo, sin crear versiones separadas.

Ejemplos: la web de Renfe crea sitios distintos para ordenador y móvil, mientras que MITx ofrece la misma información y servicios en todos los dispositivos, adaptando solo la presentación. Esto se logra mediante diseño adaptable, adaptativo o flexible.

Crear sitios compatibles con todos los dispositivos asegura una experiencia coherente y accesible, cumpliendo con la filosofía de la Web Única.

En esta lección se explica el diseño adaptable, también llamado flexible o adaptativo. Este enfoque permite que un sitio web se visualice correctamente en diferentes dispositivos, desde ordenadores hasta móviles y tabletas, utilizando estándares y técnicas de CSS.

El término “responsive web design” se popularizó gracias a Ethan Marcotte en 2010 y 2011, y representa un conjunto de técnicas que se adaptan automáticamente al tamaño de pantalla del usuario, a diferencia de los diseños fijos. Ejemplos como “Smashing Magazine” muestran cómo el contenido se reorganiza y cambia de estilo según la resolución, mientras que sitios con diseño fijo, como la página principal de la Universidad de Alicante, presentan zonas vacías y problemas de visualización en dispositivos pequeños.

Para comprobar la adaptabilidad de un sitio, se pueden redimensionar las ventanas del navegador o usar simuladores como Opera Mobile. El diseño adaptable asegura una experiencia consistente y funcional, incluso en dispositivos futuros, siempre que se sigan estándares y buenas prácticas.

Finalmente, se recomienda consultar “Smashing Magazine” para profundizar en diseño adaptativo.

En esta lección se explica cómo crear un diseño adaptable, también llamado adaptativo o flexible. Hoy la Web se accede desde distintos dispositivos, por lo que es necesario que la visualización de una página se ajuste dinámicamente a cada uno, ofreciendo la mejor experiencia posible.

El diseño adaptable se logra usando propiedades de CSS, especialmente las “media queries”, que permiten ajustar la visualización según parámetros como resolución, orientación o densidad de píxel. Es importante emplear tamaños relativos, como porcentajes para anchuras y “em” para texto.

Existen varios patrones de diseño adaptativo: “Casi fluido” (modifica la anchura hasta un límite), “Caída de columna” (organiza columnas verticalmente), “Cambio de la estructura” (diseño distinto según situación), “Pequeños cambios” (ajustes menores) y “Fuera de la pantalla” (elementos ocultos que aparecen bajo demanda). En la práctica, se suelen combinar varios patrones.

Antes de escribir CSS, se recomienda planificar el diseño en papel, decidiendo qué mostrar y cómo.

En esta lección se explica cómo crear un diseño adaptable. Explica la diferencia entre “desktop first” y “mobile first”, y aplica el primero: diseñar para ordenador y luego adaptar al móvil.

Se utilizan dos herramientas: la extensión “Window Resizer” para Chrome y el “Opera Mobile Emulator”, que permiten probar distintos tamaños de pantalla. Se define un diseño adaptable con tres variantes: “Grande” (≥981 px), “Mediano” (481–980 px) y “Mini” (≤480 px), ajustando columnas, menús, fuentes y la visibilidad de ciertos elementos.

El HTML de la página se mantiene igual para todos los dispositivos, usando clases CSS como “display-great”, “display-medium” y “display-mini” para mostrar u ocultar elementos según el tamaño de pantalla. El CSS se organiza en varios archivos: colors.css, base.css y los específicos de cada diseño, activados mediante media queries.

La lección demuestra cómo el diseño responde a cambios de resolución, tanto en ordenador como en móvil, mostrando la importancia de la etiqueta viewport. Finalmente, se destaca la utilidad de herramientas como “Window Resizer”.

En esta lección se proporcionan referencias y recursos para aprender sobre diseño adaptable, adaptativo o flexible.

Se recomienda comenzar con el artículo seminal “Responsive Web Design” de Ethan Marcotte y “Responsive Web Design: What It Is and How To Use It”, que explican el concepto y la implementación del diseño adaptable. También puedes explorar “Media Queries”, un catálogo de sitios que usan este enfoque, y “This is Responsive”, especialmente su sección “Responsive Patterns”, para inspirarte con patrones de diseño.

Para implementar tus diseños, se pueden usar frameworks como Skeleton o Bootstrap. Además, hay artículos de análisis de diseño como “A Responsive Design Case Study” y “Grids, flexibility and responsiveness”, que desglosan tipografía, rejilla y trucos de diseño.

Finalmente, se recomiendan los vídeos “Responsive Design” en español y “Prototyping Responsive HTML5 Web Apps with Matt Kelly” en inglés.