Índice de contenidos del artículo
El Responsive Web Design o diseño web reactivo consiste a hacer que nuestros sitios web se visualicen correctamente en cualquier tamaño y tipo de pantalla.
Según Aaron Gustafson, no es lo mismo que diseño adaptable, que persigue que los sitios web se adapten al navegador o sistema operativo.
Si hablamos de diseño responsive, debemos tener en cuenta que hoy día los equipos de sobremesa y portátiles tienen pantallas de entre 13 y 32 pulgadas y de ahí hacia abajo tenemos a los dispositivos móviles, tabletas y teléfonos.
Para logran hacer páginas web adaptables disponemos de varias técnicas:
Recomendable echar un ojo a los artículos de Ethan Marcotte, Responsive Web Design, y Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means, dónde se definen estos conceptos.
Respecto a las diferencias en navegadores hemos de tener en cuenta que los lenguajes HTML y CSS está diseñados para no dar errores, de forma que si encuentran algo que no entienden, por estar obsoletos, considerando que por ejemplo usamos una versión de hace varios años de Internet Explorer, simplemente no se mostrará y el navegador tratará un elemento, como nav de HTML5, como una caja genérica.
Por otro lado, son desaconsejables las prácticas como eliminar los márgenes predefinidos de todos los elementos:
* { margin:0; padding:0; }El coste, a nivel procesamiento, de ejecutar ese tipo de consultas es muy elevado.
Para paliar estas diferencias en navegadores en diseños adaptables hay varias soluciones que aportan diferentes autores:
Librería que modifica las reglas predefinidas de los navegadores para hacerlas más homogéneas y de acuerdo a los estándares modernos.
Librería JavaScript que hace que se muestren e interpreten correctamente los elementos HTML5 en navegadores antiguos.
Asegura el correcto funcionamiento de media queries en cualquier navegador.
Librería JS que nos permite detectar las carencias de los navegadores de los usuarios y utilizar clases para adaptar nuestros estilos de forma personalizada.
Un par de recursos en español sobre el uso de Modernizr:
Veamos en primer lugar cómo aplicar un diseño fluido con una caja que contiene una imagen con un width al 100% y un texto.
Mediante la propiedad max-width en la caja contenedora logramos un diseño fluido que podemos comprobar fácilmente modificando el ancho del navegador:
Adicionalmente, podemos hacer que los tamaños de las fuentes y espaciados varíen en función del tamaño de la ventana del navegador.
Primero conviene tener claro el uso de las unidades em y rem:
Hemos visto cómo emplear estas unidades de medida. Podemos ir un poco más allá aplicando cálculos de forma automática en función del ancho de la caja contenedora o del documento con funciones como clamp.
En esta calculadora podemos generar el código necesario para aplicar clamp en nuestras etiquetas y propiedades css y modificar los tamaños de fuentes y espaciados dinámicamente.
Responsive font calculator.
Teniendo en cuenta lo anterior, te propongo el siguiente ejercicio:
Aplica a tu proyecto del blog tamaños dinámicos de fuentes y espaciados usando clamp en:
Adicionalmente, con el atributo viewport en la etiqueta meta, podemos adaptar el contenido al ancho disponible:
<meta name="viewport">Pero como no sabemos la resolución de cada dispositivo, podemos usar device-width como valor en la propiedad anterior.
También, podemos controlar el zoom con initial-scale, user-scalable (para autorizar 1 o impedir 0 el uso del zoom) y minimum- / maximum-scale.
Normalmente se emplea el siguiente meta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Es importante considerar que para que todo lo anterior tenga sentido debemos trabajar los tamaños de las cajas en % y no en px.
En el caso de imágenes, usaremos #caja img { max-width:100%;} para que no excedan el ancho de la caja contenedora.
Estas unidades de medida, vh y vw son relativas viewport. Vh expresa un 1% de la altura del viewport y vw un 1% del ancho del viewport. Por tanto:
100vh = altura del viewport
100vw = ancho del viewport
Son muy útiles cuando queremos que una caja ocupe toda la parte visible cuando el usuario carga la página que está visitando y se usa mucho en lo que llamamos secciones ‘Hero‘, que suelen contener una imagen de fondo, un título y una llamada a la acción (CTA, de Call To Action en inglés).
See the Pen Background Size Cover CSS by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.
Ejemplo de Edwin Gonzales Melquiades
Las Media Queries son búsquedas que permiten identificar los tamaños de pantalla de los usuarios para así estilarlos de manera específica.
Para emplearlas utlizamos la regla @media y a continuación screen para pantallas, handheld para dispositivos móviles pequeños, print para impresión, speech para síntesis de voz, braille para páginas en brille, embossed para impresoras braille, projection para proyectores, tty para terminales, tv para televisores y all para todos.
@media screen {/*...*/
}Adicionalmente se pueden usar criterios de búsqueda como:
Por tanto, para seleccionar las pantallas que tengan 780px de ancho:
@media screen and (width:780px) {/*...*/}Todos los criterios menos orientation, scan y grid admiten los prefijos min– y max-.
@media screen and (max-width:780px) {/*...*/}La regla anterior seleccionaría todas las pantallas de hasta 780px de ancho.
Como se ha podido observar, se pueden agregar criterios mediante and, el operador lógico Y. También podemos usar not para negar y , para O.
@media screen and (max-width:780px) and monochrome {/*...*/}@media screen and (not width:780px) {/*...*/}@media screen and (width:780px), monochrome {/*...*/}Con only podemos emplear únicamente los estilos especificados, útil para ocultar estilos en navegadores obsoletos.
@media only screen and (width:780px) {/*...*/}Aunque, como hemos visto, se pueden insertar de varias maneras, es preferible utilizar las media queries en la misma hoja de estilos y en la parte final del documento, ya que los estilos se van cargando en orden de aparición.
En este sentido, debido a que en la actualidad la cuota de mercado de uso de navegadores desde dispositivos móviles es superior al de escritorio, puede ser conveniente atenerse al principio “mobile first“, con el que especificaríamos en primer lugar los estilos para smartphones sin media queries y después los demás con el uso de media queries con valores crecientes y min-width.
Podemos conocer datos de uso de tecnologías en Global Stats de Stat Counter.
Menú adaptable con CSS (English)
