Qué tener en cuenta al diseñar para Responsive Web Design

Cómo al largo del año trabajamos con muchos diseñadores, hoy hemos decidido publicar un pequeño resumen de lo que deben de tener en cuenta los diseñadores a la hora de realizar su diseño que posteriormente se va a convertir en una página de responsibe Web Design.

¿Qué es el responsive web design?

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que consigue adaptar un mismo sitio web al dispositivo que use el usuario: Móvil, tablet u ordenador.

Con una sola versión en HTML y CSS se cubren todas las resoluciones de pantalla, es decir, el sitio web creado estará optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc. Desde el punto de vista de la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda, con lo cual se ahorran redirecciones y los fallos que se derivan de éstas.

¿Qué debe tener en cuenta un diseñador para que un diseño se pueda convertir en adaptable?

Para que un diseño pueda convertirse fácilmente en responsive web design, hay que tener en cuenta los siguientes consejos que damos a todos los diseñadores con los que trabajamos:

• Hay que trabajar el diseño y el contenido de la web en columnas. Solo de esta forma la maquetación del “responsive-web-design” se puede realizar sin tener que invertir mucho tiempo en hacer la traducción de diseño a “responsive web”.
• Básicamente en el “responsive-web-design” lo que hacemos es dividir la pantalla del usuario en columnas y vamos colocando elementos de diseño en esas columnas.En los distintos tamaños de pantalla vamos ocultando columnas o mostrándolas en otros sitios. Por ejemplo la columa del sidebar que se puede ver en un ordenador de sobremesa, en un móvil directamente no la mostramos o la mostramos debajo del contenido principal.
  • Esto se puede ver bien en esta web: 960.gs
• Normalmente se empieza con el diseño más estrecho (pantalla de un móvil), y luego pasamos al diseño para el tamaño de pantalla de una tablet y acabamos con el de un ordenador de sobremesa.
• Los estándares son en cuanto a columnas son: 12, 16 o 24 columnas y de estos estándares no nos deberíamos de salir.
• El ancho estándar de las “responsive webs” es de 960 píxeles para el diseño más ancho (ordenador de sobremesa), porque los monitores actuales soportan todos mínimo 1024×768 píxeles y 960 píxeles es divisible en muchos diseños de columnas.
• Hay plantillas de diseño con las columnas para todo tipo de programas de diseño aquí: github.com/nathansmith/960-Grid-System/zipball/master
• En la aprobación del diseño por parte del cliente, hay que proporcionarle el diseño en los tres tamaño del responsive web design (sobremesa, Tablet y móvil).
• Y finalmente algo que necesitamos en todos los diseños realizados para convertirse en web: Cada elemento tiene que estar en capas independientes.

Teniendo en cuenta estos puntos, cualquier diseño de una web puede convertirse fácilmente en «responsive web design».