Diseño web mobile: no olvidemos los teléfonos celulares

Con la cantidad dispositivos móviles que utilizamos en la actualidad se hace indispensable crear una versión adaptada del sitio.

Páginas más livianas, sin imágenes, textos acortados son algunas de las características que podemos darle para que el lector pueda navegar el sitio con comodidad desde su celular.

Hay que bajar las pretensiones al mínimo ya que hay decenas de navegadores y muchísimos dispositivos diferentes, por lo cual la flexibilidad es protagonista.

Hay otras cuestiones técnicas como la detección automática de dispositivos y en el caso de blogs, la inclusión o no de widgets que pueden complicar la navegación.

En A list apart nos dan sugerencias de como incorporar la plantilla, ya que algunos dispositivos no reconocen el media="handheld".

Algunas pruebas que pueden hacerse:

1. Eliminar la hoja de estilos: algunos dispositivos no las soportan y de esta manera veremos cómo se mostrará en ellos.
2. Redimensionar la pantalla para verla en los dispositivos que si las aceptan: algunos tamaños son
   • 240 x 160 pixeles
   • 320  x 240 px
   • 176 x 208 px
3. Instalando el Ópera, se puede utilizar la opción ‘simular pantalla pequeña’.
4. Mediante emuladores
   • dotMobi
   • WinWap Smartphone Emulator
   • OpenWave Browser
   • Nokia Browser Simulator
   • Microsoft Pocket PC Emulators
   • Online Mobile Simulator
   • Online WAP Browser

Algunos de los consejos de la W3C que pueden leerse en Buenas Prácticas en Web Móvil son:

• Diseña para una Web única: que el usuario pueda acceder al mismo contenido, aprovechar las capacidades del dispositivo, evitar los problemas de la implementación, probar en dispositivos móviles y emuladores.
• Confía en los estándares Web: crear documentos válidos, que el formato sea compatible.
• Evita los riesgos conocidos: no a las ventanas emergentes, tablas, gráficos para el espaciado, marcos (frames), mapas de imagen.
• Sé prudente con las limitaciones de los dispositivos: no todos admiten cookies, tablas u hojas de estilo ni tienen cualquier tipografía o colores.
• Optimiza la navegación: que esté arriba y que sea reducida. Identifica el destino del link. Encontrar un equilibrio para incluir la información necesaria evitando pasear al usuario o darle demasiados links.
• Comprueba gráficos y colores: achicar imágenes, poner textos alternativos a las imágenes y otros elementos no textuales.
• Hazlo en pequeño: recuerda que los dispositivos tienen limitaciones de memoria, la página debe ser liviana, asi como las hojas de estilo.
• Economiza el uso de la red: no abuses de la conexión del usuario, no redireccion ni hagas actualizaciones automáticas.
• Facilita la entrada de datos: evitar el ingreso de texto, etiquetar los controles.
• Piensa en los usuarios de la Web móvil: ser claros, limitar el contenido, adecuarse al uso del móvil y al tamaño de pantalla.

Para WordPress hay plugins que facilitan la tarea. Con sólo activarlos tendremos una versión funcional. Hay algunos que permiten configurar la visualización de posts, imágenes, extractos, etc.

1. WordPress Mobile Edition
2. WordPressMobile.mobi
3. WordPress Mobile Pack
4. MobilePress
5. Mobile Admin
6. Mobilize
7. WPhone Admin Plug-in
8. Mowser
9. Wetomo WordPress to Mobile
10. WP viewMobile

Más información

10 wordpress mobile plugins

Return of the mobile stylesheet

W3C mobileOK Basic Tests 1.0