Diseño web adaptativo

Versión para impresión
Responsive Design

Índice

Introducción

Con la utilización masiva de distintos dispositivos (ordenadores, tabletas, teléfonos móviles) surge la necesidad de que las páginas web se vean adecuadamente en cada uno de ellos.

Existen varias opciones (fuente http://www.lukew.com/ff/entry.asp?1509):

Responsive Design

Consiste en generar un sólo sitio web (un solo contenido) pero con un diseño adaptado a la visualización y manejo en cada dispositivo (varias hojas de estilo). Es el Responsive Design o diseño adaptativo.

Cada dispositivo tiene una resolución de pantalla, y por consiguiente del navegador. Mediante una mezcla de regiones e imágenes adaptables y el uso de los media queries (permiten detectar en las CSS la resolución del navegador en cada momento), se consigue que el diseño vaya cambiando según sea la resolución y orientación del dispositivo.

La detección del dispositivo se hace normalmente desde el cliente mediante lo media queries.

Ejemplos: http://mediaqueri.es/

Device Experiences

Se trata de generar un sitio web completo y distinto para cada uno de los dispositivos en que se van a visionar las páginas web. Esto supone más trabajo, ya que habrá que crear varios sitios completamente distintos.

La ventaja es que cada sitio estará mejor adaptado al manejo que se hace desde cada dispositivo.

La detección del dispositivo puede hacerse normalmente desde el servidor. En función del dispositivo desde el que accedamos se nos brindará un sitio u otro.

Ejemplos:

RESS

RESS (Responsive Design + Server Side Components) sería una mezcla entre las dos soluciones anteriores.

No se trata de construir dos sitios completos totalmente distintos, sino sólo aquellas partes cuyo funcionamiento es distinto para cada dispositivo.

Por ejemplo, imaginemos que en los ordenadores de escritorio queremos que el menú se vea en la parte superior, mientras en los móviles es mejor que aparezca abajo:

RESS

El servidor detectará el dispositivo desde el que se accede (escrotorio o móvil), y cargará los componentes que considere necesarios. El resto de componentes serán comunes y su diseño se adaptará como en el Responsive Design.

Media Types

Las hojas de estilo CSS2 pueden especificar una presentación distinta en función del dispositivo: bien sea pantalla, papel, reconocimiento de voz , dispositivo braile, etc.

Algunas propiedades sólo tienen sentido para ciertos dispositivos (por ejemplo page-break-before, que hará saltos de página cuando imprimamos), pero otras pueden ser comunes pero con distinto aspecto. Por ejemplo, quizá queramos tamaños distintos de letra (font-size) en papel que en pantalla.

Lugares en los que especificar los media types

Hay dos lugares donde especificar los media types, para cargar las hojas estilos en función del tipo de medio:

En la hoja de estilos

Utilizaremos las reglas @media o @import.

Con @import podemos cargar otra hoja externa. Por ejemplo:

@import url("hojaEstilos.css") screen;

Con @media, podemos especificar, en la misma hoja de estilos, varias reglas para un tipo de medio específico. Por ejemplo:

@media print {/* estilos para imprimir */}
@media screen,print{/* estilos para pantalla y para imprimir */}

En la misma hoja podemos agregar tantas reglas @media como sean necesarias.

En el HMTL, con el atributo media de la etiqueta <link>

Dentro del <head>, podríamos cargar varias hojas de estilo, una para cada medio. Por ejemplo:

<link rel="stylesheet" type="text/css" media="print,handheld" href="hoja1.css">
<link rel="stylesheet" type="text/css" media="screen" href="hoja2.css">

Media types más habituales

all
todos los dispositivos;
 
print
para imprimir;
 
screen
pantallas de ordenadores, tabletas o móviles;
 

Más información: http://www.w3.org/TR/CSS21/media.html

Media Queries

Los media queries amplían la funcionalidad a los media types. Consisten en especificar un media type, y además añadirle ciertas condiciones como el ancho (width), la altura (height) y el color (color). Así se pueden especificar distintos estilos según la resolución del dispositivo o navegador.

Un ejemplo:

@media screen and (min-width: 400px) and (max-width: 700px) { … }

El ejemplo anterior permite definir una serie de estilos siempre y cuando la web se vea en una pantalla, y con una resolución de entre 400 y 700 píxeles.

Los media queries son expresiones lógicas que si se cumplen cargan una hoja o algunos estilos.

Dentro del media query podemos especificar:

  • media: el tipo de media que vayamos a usar (all, screen, print, etc.)
  • and, uno o varios, seguidos de la característica que restringe el media querie entre parétesis;
  • si añadimos una coma (,) podemos añadir varios media queries en la misma línea (equivale al OR lógico).

Ejemplo:

<link rel="stylesheet" type="text/css" href="hoja1.css" 
	media="all and (min-width: 480px) and (min-device-width: 480px),
	(max-device-width: 800px) and (min-width: 480px) and (orientation:landscape)">

Lugares en los que especificar los media queries

Hay dos lugares donde especificar los media types, para cargar las hojas estilos en función del tipo de medio y ciertas características:

En la hoja de estilos

Utilizaremos las reglas @media o @import.

Con @import podemos cargar otra hoja externa. Por ejemplo:

@import url("hojaEstilos.css") screen and (min-width:960px);

Con @media, podemos especificar, en la misma hoja de estilos, varias reglas para un tipo de medio específico y sus características. Por ejemplo:

@media all and (min-width:960px){/* estilos para todos los dispositivos con al menos 960px de ancho */}

En la misma hoja podemos agregar tantas reglas @media como sean necesarias.

En el HMTL, con el atributo media de la etiqueta <link>

Dentro del <head>, podríamos cargar varias hojas de estilo, una para cada condición. Por ejemplo:

<link rel="stylesheet" type="text/css" media="screen and (max-width:480px)" href="hoja1.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:1024px)" href="hoja2.css">

Características para los media queries

Estas son algunas de las características que admiten los media queries:

width

La anchura. Admite los prefijos min/max. Coincide con la anchura exterior del dispositivo (píxeles reales), o del navegador incluyendo la barra de scroll. Por ejemplo:

<link rel="stylesheet" media="print and (min-width: 25cm)" href="hojaEstilos.css" />

height

La altura. Admite los prefijos min/max. Coincide con la altura exterior del dispositivo (píxeles reales), o del navegador incluyendo la barra de scroll.

device-width

La anchura del dispostivo. Admite los prefijos min/max. Coincide con la anchura exterior del dispositivo (píxeles renderizados), o del navegador incluyendo la barra de scroll. Por ejemplo:

@media screen and (device-width: 800px) { … }

device-height

La altura del dispostivo. Admite los prefijos min/max. Coincide con la altura exterior del dispositivo (píxeles renderizados), o del navegador incluyendo la barra de scroll.

orientation

La orientación del dispositivo. Admite los valores portrait | landscape.

@media all and (orientation:portrait) { … }

device-aspect-ratio

Es la relación entre el ancho y el alto del dispositivo. Por ejemplo:

@media screen and (device-aspect-ratio: 16/9) { … }

color

Especifica que el dispositivo es en color. Por ejemplo:

@media all and (color) { … }

resolution

La resolución del dipostivo (en papel) o la densidad de píxeles (píxeles por pulgada de pantalla). Admite los prefijos min/max. Por ejemplo:

@media print and (min-resolution: 300dpi) { … }

Más información: http://www.w3.org/TR/css3-mediaqueries/

La etiqueta <meta>

En algunos móviles, los píxeles del dispositivo no coinciden con los que vienen definidos en el CSS. Por ejemplo, visualizamos una página web de 480 px de ancho en CSS, en un móvil con 960 px de resolución real, con lo que se visualizará a la mitad del tamaño esperado.

La densidad de píxeles del móvil, en este caso, es del doble, para que el contenido se vea con más calidad. Según escalemos el contenido, los píxeles CSS se adaptarán a la escala de los del dispositivo (y con menor calidad).

Para que las condiciones de los media queries se cumplan respecto a la escala CSS, se utiliza una etiqueta <meta> con ciertos atributos. Se trata de que los píxeles CSS y los del dispositivo se visualicen a la misma escala. Así aseguramos que el móvil considera el media query para el ancho CSS deseado.

Los valores de la etiqueta más comunes serían:

<meta name="viewport" content="width=device-width, initial-scale=1">

Más información:

Resoluciones de los dispositivos

http://spirelightmedia.com/resources/responsive-design-device-resolution-reference

http://visual.ly/apple-devices-resolutions

http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/

width versus device-width:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

Tamaños respecto al "CSS Media"
dispositivo resolución (px) device-width / device-height (px)
iPhone 320 x 480 320 x 480, tanto en modo portrait como en landscape
iPhone 4 640 x 960 320 x 480, tanto en modo portrait como en landscape

CSS densidad de pixel 2
iPad 1 and 2 768 x 1024 768 x 1024, tanto en modo portrait como en landscape
iPad 3 1536 x 2048 768 x 1024, tanto en modo portrait como en landscape

CSS densidad de pixel 2
Samsung Galaxy S I and II 480 x 800 320 x 533, en modo portrait

CSS densidad de pixel 1.5
Samsung Galaxy S III 720 x 1280 360? x 640?, en modo portrait
HTC Evo 3D 540 x 960 360 x 640, en modo portrait

CSS densidad de pixel 1.5
Amazon Kindle Fire 1024 x 600 1024 x 600, en modo landscape

Trucos para maquetar con media queries

Ver el siguiente artículo:

http://xn--diseowebresponsivo-q0b.com.ar/

Primero el móvil

Mejor empezar a maquetar las hojas de estilo para los dispositivos móviles, quizá luego las de las tablet, y por últimos las de los ordenadores de escritorio.

Estas son algunas razones de por qué hacerlo así:

1. Los móviles están en auge

Cada vez se navega y se compra más a través de los móviles, así que conviene tener en cuenta un mercado que está cada vez más en expansión.

2. Los móviles te obligan a centrarte

En una pantlla chiquituja, por ejemplo de 320 x 480, más vale que te centres en lo más imprescindible para el usuario y que le facilites la navegación.

3. Los móviles aumentan tu capacidad

Los desarrolladores de páginas web con cierto interés, han ido cada vez más ampliando sus conocientos para hacer web innovadoras que aumenten la interacción con el usuario: plugins, aplicaciones y efectos en JavaScript...

Los móviles aumentan las posibilidades de interacción, por ejemplo, con la geolocalización, o la orientación del dispositivo.

Más información:

http://www.lukew.com/ff/entry.asp?933#page

http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

Utiliza diseños fluidos

Basa tus diseños en cuadrículas (grids) fluidas.

En las tipografías, utiliza unidades em; será más fácil reescalar su tamaño general en cada hoja.

A las imágenes conviene aplicarles el estilo max-width:100%, y heigth:auto. Así conseguimos que tengan su tamaño por defecto, pero no mayor que el contenedor en el que se encuentra (que se supone que será fluido).

En vídeo HTML5 Podemos utilizar el atributo media dentro de la etiqueta <source>. Por ejemplo:

<video>
	<source src="high-res.webm" media="min-width:800px">
	<source src="low-res.webm">
</video>

Enlaces de interés

Definición

http://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptativo

Especificaciones

http://www.w3.org/TR/CSS21/media.html

http://www.w3.org/TR/css3-mediaqueries/

Artículos sobre diseño adaptativo

http://arborwebsolutions.com/articles/responsive-design-is-an-official-w3c-recommendation

http://alistapart.com/article/responsive-web-design

http://xn--diseowebresponsivo-q0b.com.ar/ (en español, traducción del artículo anterior).

http://www.lukew.com/ff/entry.asp?1509

http://www.lukew.com/ff/entry.asp?1436

Artículos sobre el uso de imágenes

http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need

Artículos sobre "primero el móvil"

http://www.lukew.com/ff/entry.asp?933#page

http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/

Ejemplos

http://mediaqueri.es/

Plantillas

http://html5boilerplate.com/

Categorías: 
Páginas web