Introducción al diseño web adaptable

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:

  • Modelos de rejilla para ubicar los elementos de la página en función de la pantalla.
  • Imágenes adaptables.
  • Media Queries, que nos permiten especificar código según tipos de dispositivo.

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:

Normalize.css

Librería que modifica las reglas predefinidas de los navegadores para hacerlas más homogéneas y de acuerdo a los estándares modernos.

Html5shiv.js

Librería JavaScript que hace que se muestren e interpreten correctamente los elementos HTML5 en navegadores antiguos.

Respond.js

Asegura el correcto funcionamiento de media queries en cualquier navegador.

Modernizr

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:

Media Queries

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 brailleprojection para proyectores, tty para terminales, tv para televisores y all para todos.

@media screen {...}

También se pueden usar hojas de estilo independientes a partir de CSS 2.1 con:

<link rel="stylesheet" media="screen" href="estilosp.css" type="text/css" />

Adicionalmente se pueden usar criterios de búsqueda como:

  • width height para ancho y alto de la zona de visualización (ancho y alto de la ventana del navegador).
  • device-width y device-height para el ancho y alto de toda la pantalla (parte visible) del dispositivo.
  • orientationportrait landscape para saber si el usuario usa el dispositivo en horizontal o vertical respectivamente.
  • aspect-ratio, para para la proporción de aspecto, ejemplo aspect-ratio: 16/9.
  • divice-aspect-ratio, para el físico real del dispositivo.
  • color, para saber si es en color, blanco y negro o escala de grises. Se indica el número de bits por píxel. Ej: min-color: 8.
  • resolution, para la resolución de pantalla expresada en dpi.
  • scan para la exploración de pantallas de tv. Progresivo o entrelazado.
  • grid para saber si la pantalla utiliza cuadrícula o mapa de bits para la visualización.

Por tanto, para seleccionar las pantallas que tengan 780px de ancho:

<link rel="stylesheet" media="screen and (width:780px)" href="estilosp.css" type="text/css" />

o

@media screen and (width:780px) {...}

Todos los criterios menos orientationscan 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) {...}

En el blog de Andy Clarke podemos ver algunas fórmulas más usadas: Hardboiled CSS3 Media Queries.

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.

Uso del Viewport

Adicionalmente, con el atributo viewport en la etiqueta meta, podemos adaptar el contenido al ancho disponible:

<meta name="viewport" content="width=320" />

Pero como no sabemos la resolución de cada dispositivo, podemos usar device-width como valor en la propiedad anterior.

<meta name="viewport" content="width=device-width" />

También, podemos controlar el zoom con initial-scaleuser-scalable (para autorizar 1 o impedir 0 el uso del zoom) y minimum- / maximum-scale.

<meta name="viewport" content="width=device-width, minimum-scale=0.5, maximum-scale=3, initial-scale=1, user-scalable=1" />

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.

Algunos comparadores y emuladores:

Ejemplo de viewport para probar en emuladores:

Ejemplos de ajuste de imágenes responsive:

Ejemplo de diseño fluido by video2brain URL

Menú adaptable con CSS (English)

Sería genial leer tus experiencias y consejos sobre esto. Comenta y suscríbete a los comentarios para mantenerse al día en la conversación.

Por favor, si te ha gustado, ¡comparte!. Me será de gran ayuda. ¡¡Gracias!!