No podemos hablar de un diseño de web para móvil estándar, porque la disparidad de posibilidades que pueden ofrecer los distintos terminales móvil es enorme.

Nada tiene que ver la experiencia de navegación entre un terminal estándar,  no tactil de pantalla pequeña al uso de un iPhone, por ejemplo. Y lo peor de esto es que frenta la inmensa comodidad de navegación que ofrece un iPhone o un Android táctil, la mayoría de los usuarios (alrededor del 80%) tiene terminales del tipo estándar, con una horrible usabilidad web.

Además de esto, tenemos una gran franja diferencial entre velocidades de descarga.

También podemos hablar de la incompatibilidad existente entre la visualización de un sitio web en un sobremesa y en un dispositivo móvil. No podemos hacer webs para móviles con imágenes tan grandes y pesadas como se están haciendo hoy en día en webs y blogs. La limitación del tamaño de la pantalla choca frontalmente con la tendencia de grandes fuentes e imágenes.

Otro factor diferencial es el técnico. Terminales que no muestran flash o vídeo,  que no ejecutan scripts,…

Entonces, ¿qué es lo correcto?, ¿debemos hacer una web para cada tipo de terminal?, ¿no vale la web que tengo para ser vista en el móvil?,…

Bien, en mi opinión, este es un caso en el que no podemos dictar unas directrices únicas de comportamiento. Existen muchos factores a tener en cuenta. ¿Me merece la pena invertir dinero en este o este otro tipo de target?.

Cada web tiene su target, y ese target pide o no, una web distinta cuando se conecta desde su terminal móvil. La prueba la tenemos en webs de la relevancia de www.marca.com, una web muy completa con todo tipo de noticias deportivas en portada y con una versión muy resumida para su uso en móvil, en la que podemos ver cómo el número de noticias se reduce a unas pocas, con una pequeña foto.
Reducir el número de noticias, presentarlas de un determinado modo (una bajo la otra tipo post), hace que sea múcho más fácil navegar en esa web. Marca además sabe que las entradas que llegan a su web a través de móvil son para hacer una consulta de «último minuto». El usuario quiere saber quién ganó el partido, ¿qué pasó anoche?, luego ya cuando llegue a su trabajo o a casa accederá a la web desde un ordenador, con más calma. Por lo que es muy importante, saber qué colocar en esa página y tenerla actualizada.

Se trata de una web, de una empresa,  que se puede permitir tener distintas webs para su visualización y que además tiene una cantidad de visitas tan grande, que está obligada a tener todo lo que sus usuarios reclamen.

Sin enbargo, si por ejemplo un despacho de abogados quiere plantearse ser accesible vía móvil, en mi opinión, lo lógico sería invertir en una única página index,  muy ligera,  de presentación y contacto, que salte cuando se detecte que el usuario está navegando vía móvil y luego dar la opción de seguir navegando por la web.

Este informe de admob, nos indica además que según las distintas regiones del mundo, los usos son muy distintos.

En http://metrics.admob.com/ podéis encontrar toda clase de estadísticas referidas a los usos de terminales telefónicos para la navegación. Datos que os serán de gran utilidad a la hora de enfrentaros al diseño de la web.

ALGUNAS «BUENAS PRÁCTICAS».

En terminos generales, podríamos dar algunas «buenas prácticas» para hacer usable una web para móvil.

• Textos alternativos para todas las imágenes, breves y descriptivos.
• Contraste suficiente entre contenido y fondo. El uso del móvil puede realizarse en cualquier lugar, por lo que en ocasiones, la luz puede que no sea la adecuada para leer, por lo que es imprescindible encontrar un buen contraste para la lectura.
• Textos suficientemente grandes para su lectura y con un ancho de renglón no superior a 80 caracteres.
• 14 puntos y negrita para los titulares.
• Toda funcionalidad de la web ha de ser accesible desde el teclado. Sería bueno, destinar teclas de acceso a cada opción del menú.
• Procurar usar los enlaces de texto en lugar de imágenes.
• Optimizar al máximo los tamaños y pesos de las imágenes, así como los archivos adjuntos (CSS).
• Los mapas de imágenes no siempre funcionan en todos los dispositivos.
• Nada de pop-ups.
• Dividir los contenidos de las páginas en proporciones usables.
• Títulos cortos y descriptivos para cada página.
• Es conveniente utilizar porcentajes y no tamaños absolutos para la estructura de la web. Lo ideal es que la página se adapte al 100% de la pantalla del terminal.
• Muchos terminales no aceptan las cookies.
• Los enlaces han de estar lo suficientemente separados del resto de textos para poder ser accionados con el dedo. Así mismo han de ser suficientemente grandes para poder ser accionados. En una paginación, por ejemplo, además del número de página (1 2 3), debemos poner anterior y siguiente para poder ser pulsados con comodidad.
• Un gran número de terminales no aceptan JavaScripts.
• La W3C recomienda que el peso total de cada página (incluyendo archivos adjuntos como la CSS), no supere los 20kb.

Más información en W3c – Mobile Web Best Practices 1.0

VALIDAR UNA WEB PARA MÓVIL CON W3C.

Existe un validador de página web para móvil que os dará pistas sobre cómo diseñar y programar bien una página web para móvil.

• http://validator.w3.org/mobile/

AJAX, EL FUTURO PARA LA WEB MÓVIL

Existen en la actualidad un gran número de desarrolladores que están aunando esfuerzos para producir «widgets» para páginas web móviles, aunque verdaderamente, lo que se intenta conseguir es que no haya que hacer distinción a la hora de que una web se pueda ver bien en un terminal móvil, y poder utilizar una tecnología igual para una web «de sobremesa» y una web móvil.
Muchos desarrolladores ven en el Ajax el futuro de la tecnología móvil, incluso hay quien dice que Apple ya está trabajando en ello para las nuevas versiones de sus dispositivos. En todo caso, todavía todo son conjeturas y esperanzas.

Más información en – AjaxWith.com, jQtouch.com

EJEMPLOS DE PÁGINAS WEB PARA MÓVILES

• CSSiPhone – una galería de webs diseñadas y pensadas para iPhone.

• Mobileawesomeness – completísima galería de webs diseñadas para móvil.

ALGUNOS EMULADORES

• Emulador para Nokia
• Emulador Opera Mini