Para hacer una página web responsive con HTML5 y CSS3 debes configurar la etiqueta metatag viewport en tu HTML, utilizar media queries para adaptar el diseño a cada pantalla, y aplicar medidas relativas (como porcentajes) en tu CSS
El trabajo de los desarrolladores web llega cada vez a más personas, por lo que internet se visita desde múltiples dispositivos. Este diseño responsive implica que los elementos que aparecen en la pantalla se adapten a la navegación y al uso de cualquier resolución, dando cabida a teléfonos móviles, tablets y monitores de escritorio por igual.
¿Qué tener en cuenta al diseñar una web responsive?
Al diseñar una web responsive prioriza la usabilidad en pantallas pequeñas, adapta la estructura a una sola columna, elimina elementos audiovisuales pesados, agranda los botones para navegación táctil y evita siempre el scroll horizontal.
Antes de meternos de lleno a ver cómo hacer una página web responsive con HTML y CSS, vamos a darte algunos consejos que debes tener siempre presente.
- Usabilidad: Tu página web debe estar disponible para utilizarse desde cualquier dispositivo, y eso implica terminales muy pequeños. Sé conciso y elimina aquello que no aporte.
- Máxima adaptabilidad: Como puedes imaginar, preparar todo un diseño de layouts para un ordenador es muy diferente a hacerlo para móviles, donde te encontrarás con una columna o, como máximo, tres.
- Elementos audiovisuales esenciales: Tanto las imágenes como los vídeos deben adaptarse al tamaño de la pantalla, aunque recomendamos eliminar todas aquellas que no sean esenciales. Ocupan mucho espacio y tiempo de carga.
- Piensa en digital: Y no nos referimos al mundo online, sino a que el manejo de móviles y tablets se hace con los dedos. El tamaño de un cursor es significativamente más pequeño que la yema de los dedos, así que tendrás que adaptar los botones.
- Evita el scroll horizontal: No son cómodos de usar en las versiones móviles, mientras que el scroll vertical es el que más utilizamos.
Técnicas para un diseño responsive
¿Para qué sirve la etiqueta metatag viewport en HTML?
La mayor parte de navegadores en dispositivos móviles emplean el escalado HTML según un ancho fijo que se ajusta a las pantallas. Si hacemos uso del metatag viewport podemos indicar al navegador qué ancho debe respetar, deshabilitando el escalado por defecto. Este código debe aparecer dentro de la etiqueta head.
¿Qué son los Media Queries en CSS3?
Los media queries son propiedades de CSS3 que, a grandes rasgos, nos permiten incluir condiciones a una hoja de estilo. De esta manera, tendremos la posibilidad de mostrar el mismo contenido de diferentes maneras, usando una variedad de diseños que se adaptarán al dispositivo en el que se muestra.
¿Cómo usar Max-Width y Min-Width en diseño web responsive?
Estas dos propiedades CSS juegan un papel muy importante en el diseño multiplataforma, ya que gracias a ellas podemos preparar diferentes estructuras. Estas propiedades nos permiten establecer el ancho mínimo y máximo que puede recibir un elemento, lo cual es importante cuando se utilizan porcentajes como valor de las propiedades CSS, y que nos ayuda a establecer un límite de escala.
¿Por qué usar medidas relativas en CSS?
El uso de medidas relativas permitirá que el diseño responsive se adapte adecuadamente a la ventana en la que se muestra. Emplear estos porcentajes es muy útil para márgenes, tamaños de fuente o el padding. Con esto conseguiremos un diseño mucho más uniforme, con los elementos más balanceados y una mejor experiencia de usuario.
¿Qué unidad de medida usar para fuentes tipográficas en diseño responsive?
- Píxeles (px): Establecer el tamaño de una fuente en píxeles es casi como elegir su tamaño fijo, aunque en realidad toma como medida relativa la resolución del dispositivo. De esta manera podremos definir con exactitud el tamaño que queremos para la letra, pero también que no se adapte con precisión al espacio visual disponible.
- Puntos (pt): Aunque es una medida que suele utilizarse en documentos para impresión, también la vemos presente en CSS. Es un tamaño basado en pulgadas (una pulgada son 72 puntos), y varía mucho en función del navegador y la pantalla. No es recomendable usarla si quieres hacer un diseño responsive, al igual que otras unidades de medidas como centímetros, milímetros o las propias pulgadas.
- Ems (em): Es una de las medidas que mejor funcionan cuando necesitamos adaptabilidad, ya que se trata de un formato escalable. Toma como referencia el elemento contenedor del texto, aunque puede darnos algún problema si tenemos un código muy complejo, porque respeta el orden jerárquico de los elementos.
- Porcentajes (%): De manera similar a los ems, con los porcentajes es muy fácil escalar el tamaño de una fuente. 1 em sería equivalente a un tamaño de fuente del 100%, por si necesitas cambiar tus valores de formato.
¿Cómo comprobar si tu página web es verdaderamente responsive?
Por último, lo mejor para conseguir un diseño adaptable que funcione en la mayoría de dispositivos es testearlo por ti mismo. Existen numerosos emuladores que recrean de forma fidedigna la experiencia de los usuarios de dispositivos móviles, y ahí podrás encontrar los posibles fallos de tu web.
Ahora ya conoces algunos de los trucos y técnicas que permiten el correcto diseño web responsive con HTML5 y CSS3. Desarrollar una web adaptable no es sencillo, porque implica un mayor número de horas en el proyecto, pero la percepción del usuario será mucho mejor. En Doowebs, somos especialistas en diseño y desarrollo web en Valencia. ¡Contáctanos para llevar tu proyecto al siguiente nivel!