Servicios W.Y.Z - Diseñar Web para Móviles - Parte II

Diseñar Web para Móviles - Parte II

Continuando en el punto dejado en el articulo anterior Diseñar Web para Móviles - Parte I; planteare algunas estrategias para tu sitio web móvil
♦ Grupos de Dispositivos: Aqui nos basamos en el ancho de las pantalla, como les mostre anteriormente la gran mayoría de los dispositivos comparten sólo tres anchos de pantalla, 128, 240 y 176 píxeles. Pero no no podemos quedar solo con este dato pues, nos deja por fuera un amplio numero de dispositivos. a mi me gusta esta recomendación, aunque es mi gusto, pero se cubre la mayoria del espectro.
Resolucion
  • tiny: 101px a 132px
  • pequeña: 140px a 176px
  • medio: 180 a 240px
  • grande: 260px a 640px
Nosotros generalmente optamos por lo básico, lo mas estándarizado, aunque eso dependera del proyecto y los objetvos del cliente, se puede usar ccs2, ccs3, JavaScript, Jquery Mobile.
♦ Crear un diseño de referencia: debemos seleccionar el dispositivo de referencia. Este es el dispositivo que se usara como base durante el proceso de diseño y en última instancia, dará lugar a la creación de un diseño referencial, en mi caso un NOKIA 5800Express Music de 360 x 640 y que al igual que los ipad, presenta las pantallas landscape y portrait, con lo cual tambien podemos probar la resolución 640 x 360. esto siempre presenta un inconveniente, pues son los maximos tamaños que utilizamos, pero si ustedes se fijan, la escala de tamaños desde tiny hasta grande, aumenta entre un 20% y 35% aprox. (esto le queda a los diseñadores o el equipo de trabajo, calcular que escala necesitaran según lo requerido por el cliente).
Lo que esto nos permite es adaptarnos, a dispositivos touch y observar el funcionamiento en dispositivos mas avanzado, en este caso este modelo de nokia soporta el 90% de los avances disponibles, con lo cual es una gran plataforma para probar tu proyecto móvil, tambien si cuentas con otros dispositivos del tipo tablet, podrar probar y verificar los limites de tu diseño.
♦ Normas para el contenido y la adaptación de diseño: con el diseño de referencia, debemos dar una linea para la adaptación del mismo a otros tamaños de pantalla. Similares a los contenidos de un documento de diseño visual. Estas normas y guias deben ayudar al equipo de Diseñadores Web a adaptar el diseño sacandole el maximo partido al código XHTML y CSS. Deben ser Minimalistas,colocar los hitos principales manteniendo el aspecto inicial del sitio para pantallas de ancho mayor a 640 pixeles, sin saturarlo de imagenes.
♦ Estándares web y un diseño flexible: la creación de un código XHTML y CSS genérico, que podemos usar mayormente en cualquiera de los futuros proyectos para dispositivos móviles, esto nos aportará beneficio, tiempo y productividad en los siguientes proyectos. Dado el gran número de dispositivos móviles, este beneficio no puede ser subestimado, ya que garantiza que su contenido será accesible a un gran número de usuarios, sin complicar el trabajo a los desarrolladores. Para conseguir un diseño accesible para cualquier dispositivo móvil, por lo cual debe existir un equilibrio entre diseño y flexibilidad
Escrito por  Yker González