En los últimos años se popularizó el término Responsive Web Design haciendo referencia a la adaptación de los sitios web a diferentes resoluciones, para que puedan ser utilizados efectivamente en diferentes dispositivos.

Lejos de ser únicamente una técnica de diseño, adaptar el sitio de nuestro negocio a diferentes dispositivos es un proceso que afecta a la experiencia de usuario en su totalidad, y que puede ser optimizado si evaluamos, antes de tomar decisiones, la forma en que nuestros consumidores se relacionan con nuestra plataforma online.

No olvidemos que un sitio web es una ventana hacia nuestros clientes actuales y potenciales, y cualquier transformación que hagamos debe estar alineada con nuestra imagen de marca y objetivos de negocio.

Aquí, les dejamos una pequeña guía para comenzar con un buen diseño web adaptativo:

1. Analizar el sitio web, en todas sus páginas y funcionalidades y decidir qué hacer con dichas funcionalidades. ¿Se van a mantener?, ¿tendrán sentido cuando alguien se conecte con su smartphone por su contexto de uso?, según el peso de carga de estas funcionalidades ¿tendrá sentido mantenerlas si sabemos que el usuario que se conecte con su smartphone lo estará haciendo probablemente sin una wifi?, ¿las funcionalidades necesitan complementos que en un smartphone o tablet van a seguir funcionando?, etc.

2. Analizar el contenido concreto de cada página y decidir si se quiere mostrar en determinadas resoluciones de pantalla o no, así como qué contenido se considera más o menos importante. (aquí hay que tener en cuenta consideraciones de SEO, marketing, negocio, etc) .

3. Crear modelos de navegación adecuados, para smartphones y tablets, en horizontal y en vertical, es decir, cuando miramos el smartphone o tablet de forma normal o lo tumbamos.

4. Auditar el número de plantillas (que no páginas finales) distintas del portal web.

5. Plantear prototipos (wireframes) de estas plantillas, tanto para smartphone como para tablet, en vertical y en horizontal (no hace falta hacerlo de todas.

6. Validar estos prototipos, antes de realizar el diseño gráfico de estas plantillas.

7. Diseñar las plantillas, en base a la línea gráfica del sitio web. Aquí posiblemente no haya que hacer diseños gráficos de todos los prototipos, ya que el diseño no debería cambiar en base a la resolución de la pantalla, o por lo menos no excesivamente.

8. Maquetar en HTML, CSS y JavaScript las plantillas.

Muchas de estas respuestas pueden encontrarse realizando test de usabilidad de nuestras plataformas en diferentes dispositivos, y conociendo a fondo el uso que nuestros consumidores hacen de ellas.

Mirá el artículo completo en http://www.usabilidad-ux.com/responsive-web-design-algo-mas-que-maquetacion-web-i/