Perlas II. Metodología del Responsive Web Design

Buenas noches, como parece que hoy os han interesado las perlas sobre responsive design que publiqué ayer, me comprometo a postear mis apuntes poco a poco. Ayer tomé tres páginas de apuntes, hoy once. Supongo que esto me llevará unos cuantos capítulos, así que está claro que se está gestando un nuevo producto: Perlas responsive por fascículos, pronto en tu kiosko. No puedo dejar de sentir cierta sensación de usurpación, ya que todo el mérito de este contenido es de @htmlboy, pero tengo su permiso de divulgarlo mientras mantenga en secreto la fórmula de la cocacola. Thnx.

Hoy voy a centrarme en algo que nos interesa si trabajamos en responsive, pero que normalmente no se encuentra en los tutoriales, blogs, artículos… La metodología. ¿Cómo se empieza a trabajar? ¿Qué fases se pueden plantear? ¿Cómo se presenta el proyecto? ¿Cómo se presupuesta?

Esto no es un dogma, cada uno que aplique la metodología que le venga mejor, pero está bien saber cómo trabaja un profesional del tema y a qué conclusiones ha llegado después de pelear en muchos proyectos y seguro llevar más de un escarmiento.

1.-Cambio del paradigma del proceso de trabajo

Se plantea un sistema retroalimentado e interactivo para ir identificando posibles errores lo antes posible e ir dándoles solución. ¿Te suena el mundo agile? Pues eso.

Todo el equipo tiene que estar involucrado en todo el proceso de vida del proyecto y no pasar el proyecto al siguiente eslabón y olvidarse del tema, ya que algunas veces se puede dar solución mediante css a un problema de funcionalidad, o viceversa. El cliente tiene que estar presente en este proceso y tomar parte, para evitar sorpresas de última hora, algo muy frustante para las dos partes. Una metodología de este tipo hará que el proceso sea mucho más enriquecedor, consigamos un producto más redondo y que todos aprendamos más con cada proyecto.

2.-Ok, ¿por dónde empezamos? El presupuesto, por supuesto 😉

¿Cómo presupuestamos un proyecto web que también será responsive? La recomendación es no añadirlo como un extra desglosado sino que vaya integrado en la cantidad principal, ya que sino nos arriesgamos a que el cliente lo pida a posteriori y esto nos lleve a trabajar más y peor. Lo ideal es empezar a plantear el proyecto adaptable desde el principio, para conseguir un producto óptimo. Bienvenido al “yo por defecto responsive, gracias”.

3.- Dos prototipos y punto

No es necesario presentar prototipos de cada “tamaño standar” y de cada pantalla. Con un prototipo para móvil y otro para escritorio es suficiente. El tamaño del medio seguro que lo tenemos claro en la cabeza. Con nuestro sistema de cambios retroalimentados iremos modificando hasta encontrar el layout y navegación adecuados. Si pulimos demasiado en este primer punto, puede ser que tengamos que hacer muchos cambios a wireframes que nos han llevado un montón de horas.

4.-¿Boceto? De momento con styletiles suficiente

Este es el punto que más me ha gustado, ya que no conocía este concepto y me ha parecido una idea sencilla y muy productiva.

La idea es presentar unos tres styletiles para concretar la gramática visual y así conseguir un acercamiento del estilo final. Concretar los encabezados, estilos de botones, paleta de colores,… No son propuestas finales y cerradas, y nos ayudarán a guiar al cliente en la toma de decisiones. Se terminó al típico: “dale otra vuelta”, y que te quieras suicidar porque ese boceto te ha costado sudor y lágrimas. La idea es que los styletiles se puedan realizar en una tarde (es un decir), y que nos pueda acercar a un boceto final sin propuestas de cambios dolorosos.

http://styletil.es en esta web nos podemos descargar los PSD para utilizar como plantillas. Más facil imposible.

5.-Y una vez con las ideas claras montamos el HTML y le damos estilo.

6.-¿Hemos acabado? NO

Correcciones -> desarrollo -> correcciones -> desarrollo ->… ahora sí. The end. Optimicemos tiempo con metodologías ágiles y utilicemos ese tiempo para el desarrollo.

That´s all folks.

Leave a Reply

Your email address will not be published. Required fields are marked *