5.981
Conceptos básicos sobre responsive design

Conceptos básicos sobre responsive design

Actualmente el diseño multiplataforma (pc, tablet, móvil…) se está convirtiendo en una locura de formatos y diseños adaptativos. Para ello la última tendencia sobre este concepto se llama Responsive Design: Imágenes flexibles y css fluido, acompañado de JS. En este artículo pondré en orden todas aquellas ideas y recursos que tenía dispersos y que hacía falta ordenar.

También me gustaría comentar que llevamos unos días con un grupo de Linkedin llamado Diseño y Prototipado para móviles, donde cada uno vamos aportando nuestros trucos y consejos a la hora de diseñar bajo estas plataformas (tratamos desde webapps hasta aplicaciones nativas para otras plataformas). Apúntate de manera totalmente gratuita, donde te daremos acceso para que puedas compartir tus puntos de vista y compartir nuestros recursos.

 

Lo primero, el briefing

Aunque parezca evidente, siempre conviene sentarse y reflexionar detenidamente sobre qué producto vamos a desarrollar, qué funciones va a tener, y sobre todo, a quién va dirigido. Determinar las necesidades de nuestro público objetivo será fundamental a la hora de saber qué dispositivos suelen emplear, y qué tecnologías son las que controlan.

Una vez que esté identificado este punto, podremos seguir trabajando en un proyecto bien encaminado.

 

El prototipado

Esta parte suele ser la más metodológica y exhaustiva junto con la maquetación. Empezando como base un diseño a una columna para móvil, se va adaptando en varios pasos teniendo en cuenta resoluciones como las del iPhone, iPad, escritorios más habituales y escritorios HD. Como he comentado antes, la limitación en este punto la podemos poner en función del briefing.

Fuente: Smashing Magazine

Dos puntos a tener en cuenta en este prototipado, son la accesibilidad y la usabilidad, términos que comunmente se confunden pero que corresponden a conceptos distintos dentro del grupo de la experiencia de usuario. En resumidas cuentas, la usabilidad determina la facilidad con la que el usuario va a controlar la aplicación, y la accesibilidad con la posibilidad de acceso a esta información con dispositivos comunes o fuera de lo común.

Teniendo en cuenta la usabilidad, es importante valorar los patrones de navegación, en éste artículo se explica con ejemplos, además de tener multitud de recursos para los programadores.

Para trabajar este proceso, podéis utilizar múltiples herramientas de prototipado, existen unas cuantas gratuitas, es muy común utilizar también Omnigraffle, aunque personalmente me quedo con mis propias plantillas desarrolladas para Illustrator.

 

Diseño

Una vez suplidas las necesidades que corresponden al acceso y manejo de la aplicación de los usuarios, podemos ponernos a trabajar en la parte de diseño, que para mí es la más divertida de todo el proceso, y por suerte o desgracia, es la que más suele vender al usuario. Siguiendo la temática del briefing, desarrollaremos un patrón gráfico que debemos aplicar a todos los comportamientos de la web.

Ejemplo de diseño teniendo en cuenta la anchura del dispositivo

Pulsa en la imagen y prueba a escalar la pantalla

 

Programación

En este punto me gustaría ser de más ayuda, ya que sólo tengo unos conceptos básicos de programación, y me gusta trabajar con programadores para repartir trabajo y obtener un resultado más óptimo. Por todo aquello que he leído sobre la parte de desarrollo, muchas veces se puede programar con una base como SkeletonOmega (basado en Drupal) o Amazium. Personalmente el que más me ha gustado por funcionalidad es Gridpak. Puedes definir órdenes de visualización distintos en función de los tamaños de pantalla.

 

Test

Resérvate unos días para realizar todas las pruebas que te sean posibles y corregir pequeños errores que muy probablemente surgirán, te ahorrarás muchos disgustos. Para hacer pruebas de resolución debes probar mil veces. Para ello tienes aplicaciones como ResizeMyBrowser, Screenqueries, Mobilizer… La mejor manera de realizar este tipo de test es ayudándote del usuario final y con los dispositivos que él emplea.

Escuchar, escuchar y escuchar: Si algo he aprendido de los testing es que escuchando al usuario se puede aprender mucho de sus necesidades. Quédate con todo aquel aporte que pueda mejorar la aplicación e intenta evitar aquellos aportes que generen ruido o distraigan del cometido final (no todo lo que te aportan es válido, descubre si la aplicación cubre sus necesidades y soluciona sus problemas).

 

Y para terminar…

Y como guía de referencias para este tipo de diseños, os recomiendo que echéis un vistazo a la web de Media Queries, donde podrás ver multitud de ejemplos.

Ya solo me queda desearos suerte y paciencia en este laborioso trabajo, y me gustaría que compartiérais vuestras opiniones en los comentarios.

 

0