Bocetando usando grids y diseño adaptable
2 seguidores
Me encuentro con algunas dudas al realizar diseños para webs que se deben montar usando sistemas de grids y diseño adaptable.
Uso un plugin para generar las guías del grid pero no se de que ancho es recomendable que haga el diseño, teniendo en cuenta que al ser fluido puede variar. De esta forma también tengo dudas respecto a las guías que debo crear.
Creo que sería importante realizar bocetos de como debería verse la web en otros dispositivos para que en la maquetación no haya problemas.
Un Saludo
rey_maria
El otro día asistí a una videoconferencia (puedes ver la grabación aquí) sobre este mismo tema. Allí aconsejaban que es mejor diseñar primero las resoluciones pequeñas y de ahí ir adaptando.
Creo que, como dices, deberás hacer bocetos de cómo se debe ver en las resoluciones o dispositivos principales.
Un buen ejemplo de diseño adaptable es la web de Smashing Magazine y puedes ver otros ejemplos en la web mediaqueri.es
Y para leer más, en este blog agrupan un montón de enlaces sobre el tema.
JCMartinez
Muchas gracias, es lo que andaba buscando.
JCMartinez
Estuvo bastante bién la videoconferencia, sirve para tener una idea de lo que se puede hacer.
Yo creo que cuando dijo lo de diseñar las resoluciones pequeñas creo que se refería a la maquetación y no al diseño en si.
Finalmente creo que la buena práctica sería diseñar 3 versiones, desktop, tablet y movil en photoshop/wireframes y de ahí comenzar a maquetar teniendo en cuenta el movil, luego el tablet y por último desktop.
Por otro lado me gustaría poder tener como referencia un listado de resoluciones de todos los dispositivos para poder hacer pruebas mientras se trabaja (se deben tener en cuenta más resoluciones). Reducir la ventana no es muy ortodoxo pero se vuelve inutil cuando no sabes que resolución de pantalla se corresponde con el tamaño de tu ventana.
rey_maria
El listado de resoluciones lo puedes sacar viendo estadísticas. Por ejemplo esta de Resoluciones de pantalla y resoluciones móviles más comunes.
Yo para ver diferentes resoluciones tengo instalado en Mozilla Firefox el complemento Web Developer que tiene una herramienta para marcar varias resoluciones y así ves la web cómo te quedaría en ellas. Pero si viste en la conferencia del otro día nos apuntaron unas webs que simulaban iPad y otras pantallas, es este The Resposinator.
Revisando el twitter del "profe" vi que enlazaba este documento que tiene buena pinta (aún no lo he leído con calma), pero parece que nos va a ser útil. Responsive Navigation Patterns.