Diseño web para móviles con responsive web design. Guía simple

Guía rápida par responder a la mayoría de las preguntas acerca de la técnica de responsive web design, una técnica para la creación de sitios web para móviles y tabletas que también es recomendado por Google.

Publicado 17.02.2013

Una única web para gobernarlas a todas (las pantallas)

¿Por qué cambiar mi sitio web a Diseño Sensible? ¿Cuáles serían las ventajas?

Tu sitio web se ve muy bien de la pantalla de ordenador, pero ese diseño no puede ser visto correctamente en un smatphone o tablet. Una vez realizado el diseño sensible, el sitio web se ve bien (y es legible) en todas las pantallas y no sólo la del ordenador.

Recordamos del artículo anterior que teníamos dos opciones:

1. Habilitar una versión especial para dispositivo con redirecciones según el user agent.
2. Versión única con diseño fluido y adaptable al tamaño de pantalla (responsive web design).

Con responsive web design, se adapta automáticamente en función del tamaño de la pantalla del dispositivo móvil. Esto ofrece muchas ventajas:

1. Se ahorrará tiempo y dinero ya que no es necesario mantener sitios web diferentes.
2. Es bueno para el SEO de la web, ya que cada página de su sitio tendrá una URL única entonces evitas la indexación de contenido duplicado y no caes en la oscura técnica del Cloaking (servir diferente contenido).
3. Al tener una única URL no hay que preocuparse acerca de a donde apuntan los enlace a mi sitio web móvil, siempre apuntarían a las mismas URLs.
4. Lo mismo para la difusión de contenido en redes social (Likes de Facebook, tweets, +1′ s), ya que las versiones móviles y de ordenador de sus páginas web ya no tendrán diferentes URL.
5. Diseños Responsive son más fáciles de mantener, ya que sólo tienes que modificar el CSS para cambiar su apariencia (o diseño) en un dispositivo en particular. Mientras que con diferentes versiones, hay que modificar varios archivos.
6. Si tengo diferentes versiones y las sirvo basándome en el User-Agent  para determinar el nombre de dispositivo móvil y el navegador que está haciendo la solicitud. Es menos exacto y con el número de dispositivos móviles y navegadores en aumento, el sistema de redicción es muy difícil de mantener. Con Diseño Responsive no dependemos de los User-Agent.

¿Qué hace falta saber para empezar con el diseño sensible?

El Diseño Responsive es puro HTML y CSS se crea a base de simples reglas CSS que cambiar el estilo basado en el tamaño de la pantalla del dispositivo del usuario.

Por ejemplo, puede escribir una regla que dice que si un usuario con un tamaño de pantalla inferior a 320 píxeles, no muestran la barra lateral o si el tamaño de la pantalla es superior a 1920 píxeles, aumentar el cuerpo de la fuente a 15px. Estas son las reglas en código:

@media only screen and (max-width: 320px) {
  . Sidebar {display: none}
}
@media only screen and (min-width: 1920px) {
  body {font-size: 15px}
}

¿Cómo se puede comprobar si un sitio Web hace uso de diseño sensible?

Abriendo la web en cualquier navegador (menos en IE por supuesto) ycambiando el tamaño de la ventana, si la disposición de los elementos se adaptan a medida que cambia el tamaño, el diseño es sensible. También puede utilizar estas herramientas en línea para comparar los diferentes diseños de una página en la misma pestaña.

Las diferentes vistas que se obtienen escalando la ventana del navegador

Acerca de la compatibilidad con navegadores más antiguos

No son compatibles con las versiones anteriores de IE. Sin embargo, existen soluciones basadas JavaScript respond.js y Modernizr – por ejemplo – que llevar CSS3 y HTML5 a los navegadores antiguos como IE6.

Habiendo tantos dispositivos móviles. ¿A qué resoluciones de pantalla se debería ajustar?

Google Analytics es muy bueno para determinar con que resolución de pantalla nos visitan los usuarios, desde: Público -> Tecnología -> navegador y sistema operativo. Ahora cambie a la pestaña Resolución de pantalla y ver la resolución que la gente está utilizando para navegar en su sitio.

Yo utilizo, y recomendaría establecer estos puntos de break points para las siguientes resoluciones en Mediaqueries – 320px (paisaje iPhone),480px (vertical iPhone), 640px (Tablets Android), 768px (iPad +  Galaxy Tabs) y 1000px (paisaje y iPad).

Ejemplo de la web de la revista TIME

¿ Desventajas de usar Diseño Sensible?

Afectando a WPO (Web Performance Optimization) la velocidad de carga de una web.  El diseño Sensible pueden añadir algunos kbytes a la web ya que se tiene que descargar los estilos CSS y los archivos JavaScript necesarios para hacer el diseño responsive, yo recomiendo unir los las hojas de estilo en una única al igual que los .js. El otro problema es acerca de las imágenes. No deberíamos servir una alta resolución de imágenes para un móvil, pero que es difícil de lograr en el diseño sensible (para esto existen soluciones como Sencha.io http://www.sencha.com/learn/how-to-use-src-sencha-io/).

Por último, requiere mucho esfuerzo agregar propiedades sensible a un sitio web existente. A veces, puede que sea más óptimo rediseñarla pensando desde cero en las diferentes resoluciones, que adaptar la web existente.

Recomendaciones, recursos y código para empezar con responsive web design

Empieza con una plantilla.

Repasar recursos como estos, que nos ofrecen simplificar el proceso de construcción de sitios web en HTML5 :

• Boilerplate incluye una normalización para todos los navegadores (cross-browsing), optimización de tiempos de carga, visualización para navegadores en dispositivos móviles, clases específicas para IE, clases “no-js” y “js” para estilos basados en capacidades del navegador, un archivo .htaccess que permite el uso correcto de características HTML5 y carga de página más rápida controlando la cache y algunas cosas más. – http://html5boilerplate.com/mobile
• Skeleton es una pequeña colección de archivos CSS que pueden ayudarle a desarrollar rápidamente los sitios que se ven hermosas en cualquier tamaño, ya sea una pantalla de 17 «ordenador portátil o un iPhone Skeleton se basa en tres principios básicos.: Responsive Grid para móviles. Skeleton es una herramienta para el desarrollo rápido. Se trata de un kit de desarrollo que ofrece los estilos más básicos como base, pero está listo para adoptar cualquiera que sea su diseño o estilo. – http://www.getskeleton.com
• Initializr es un generador de plantillas HTML5 para ayudarle a empezar con un nuevo proyecto basado en HTML5 y Responsive – http://www.initializr.com

Trabaja con layouts basados en grids fluidos.

Todo los valores en porcentajes y relaciones. Para obtener el porcentaje de un tamaño en píxeles, tomar el ancho del elemento y se divide por el tamaño de la cuadrícula completa. Por ejemplo: 200 píxeles (tamaño del elemento) / 960 píxeles (tamaño de cuadrícula) = 0.2083. Si multiplicamos esto por 100, y obtendrá 20,83%. Es por esto que es interesante trabajar con una grilla de 1000px. de ancho, 1000 es un número redondo, y es fácil calcular que el 24% de este tamaño será igual a 240 píxeles. Yo trabajo con un contenedor general de 1000px de ancho.

Imágenes flexibles o adaptativas.

La solución básica es definir un ancho máximo de 100%. Esto se asegurará de que sus imágenes no son más anchos que el contenedor.

.Contenido img {
   max-width: 100%
}

Una solución mejor es utilizar context-aware tamaño de las imágenes. Esta técnica consiste básicamente de tener diferentes tamaños de una imagen, y muestra sólo el tamaño adecuado para el dispositivo. Ejemplo rápido:

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

Y la relacionada con CSS:

@ Media (min-device-width: 600px) {
    img [data-src-600px] {
        content: attr (data-src-600px, url)
    }
}
@ Media (min-device-width: 800px) {
    img [data-src-800px] {
        content: attr (data-src-800px, url)
    }
}

Más info muy interesante: http://nicolasgallagher.com/responsive-images-using-css3

jQuery. Los plugins de jQuery son muchos y pueden ser un gran recurso.

No te olvides del viewport de Apple.

Esta etiqueta fue introducido por Apple para sus dispositivos móviles (iPhones, iPads y iPods Touch). Este código le permite especificar el tamaño predeterminado de una página cuando se ve con un iPhone o iPad.

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

El código anterior se asegurará de que, el diseño se mostrará correctamente en escala 1:1. No se aplica el zoom.

¿Algunos ejemplos?

Aquí tienes algunos, inspírate:

• Un increible directorio con los diseños responsive más destacados – http://www.mediaqueri.es
• Pequeña galería con interesantes ejemplos – http://www.responsivewebdesign.co.uk/gallery
• Interesantísimo compedio de artículos acerca del diseño adaptable (Se recomienda hechar un vistazo) –http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup
• Prueba, prueba y vuelve a probar. “prueba y error”., hay algunas herramientas que nos pueden facilitar un poco la tareahttp://screenqueri.es , con la que simulamos diferentes tamaños de pantallas