Cómo diseñar un sitio web amigable para los dispositivos móviles

 

Invirtió recursos significativos para desarrollar el sitio web de su empresa. Pero el mundo sigue avanzando. Ahora parece que todos sus conocidos tienen un teléfono inteligente o una tablet. Quizás se pregunte si debería hacer que su sitio fuera amigable para los dispositivos móviles. La respuesta es "sí". Cualquiera que haya visitado un sitio común desde un dispositivo móvil le dirá lo siguiente: es un proceso tedioso, pesado y difícil. No es la mejor manera de atender a sus clientes.

Ofrecer a los clientes una experiencia móvil de calidad es más que un lujo: es una necesidad. Hemos recopilado algunos consejos y consideraciones para su sitio web para dispositivos móviles.

"Existen manera sencillas de diseñar el sitio para que detecte el tipo de dispositivo del usuario", dice Ryan Kirkman, Diseñador senior de experiencia de usuarios móviles en la empresa de medios SayMedia. "Dado que la tecnología y las estrategias están a disposición, lo mejor es usarlas para crear la mejor experiencia posible para el cliente."

Evalúe qué método elegir
La primera pregunta que debe hacerse es ¿cuán móvil debería ser el sitio? ¿Puede actualizar el sitio que ya posee, necesita crear uno nuevo, o debería invertir en desarrollar una aplicación móvil con todas las letras?

"La elección depende de los tipos de necesidades comerciales", afirma Kirkman. "Una empresa de comercio electrónico quizás deba rediseñar el sitio para la experiencia móvil, mientras que una empresa de menos transacciones, como un proveedor de contenido puro, puede expandir un sitio ya existente para que se acomode dinámicamente al tamaño de la pantalla."

Hojas de estilos al rescate
CSS (Hojas de estilos en cascada), un tipo de lenguaje de codificación utilizado junto con HTML, puede brindar la escalabilidad que necesita un sitio web para dispositivos móviles. CSS esencialmente separa el contenido de la disposición visual, por lo que brinda flexibilidad para diferentes dispositivos. Esto difiere de un sitio que inserta contenido y reglas de estilo dentro del código HTML, donde queda todo fijo y el contenido y el diseño son siempre iguales más allá del tamaño de la pantalla.

CSS, en cambio, usa hojas de estilos que, al accederse al contenido, aplican elementos de estilo, como fuente, tamaño, espaciado, etc. CSS especifica un sistema de prioridades para determinar qué reglas de estilo deben aplicarse en situaciones particulares: una pantalla más pequeña, por ejemplo.

CSS3, la última versión de la norma de hojas de estilos, brinda la máxima flexibilidad al incluir consultas de medios, que buscan determinadas condiciones, y aplica diferentes hojas de estilos según estas condiciones. Por ejemplo, puede tener una hoja de estilo para monitores estándar de desktops y otra hoja para dispositivos móviles.

Consideraciones adicionales
Sin embargo, hay que tener en cuenta que versiones anteriores de Android™ no admiten algunas funciones avanzadas de CSS3 (consulte en las tablas de compatibilidad la información de las evaluaciones). Para evitar problemas de compatibilidad, evalúe bien el nivel de sofisticación técnica de sus clientes y pruebe el sitio de manera exhaustiva.

Elementos básicos de diseño para considerar
CSS brinda un formato de diseño flexible, pero igual debe tener en cuenta algunos elementos básicos de diseño en el contexto de los dispositivos móviles.

1. Use menos palabras y use fuentes grandes
En cualquier sitio web debe reducirse al mínimo la cantidad de texto, pero para dispositivos móviles es especialmente importante dejar sólo lo más importante. En una pantalla de dos pulgadas no entran demasiadas palabras en un tamaño legible.

Además de tener poco texto, debe asegurarse de que las fuentes tengan el tamaño suficiente para leerse en una pantalla pequeña. Los títulos y subtítulos deben ser aún más grandes y prominentes. Por desgracia, no existen consejos generales para aplicar elementos como el tamaño de fuente debido a la amplia gama de características de los dispositivos. Por ende, de nuevo, conozca a sus clientes y haga todas las pruebas necesarias.

2. Haga un uso estratégico de las imágenes
Las imágenes pueden enriquecer un sitio desde lo visual, pero también pueden hacerlo más lento. La UIT reporta que, en todo el mundo, la cantidad de suscripciones móviles de 3G o superiores llegarán a los 940.000 millones para fines de 2010. Y eso representa apenas el 18% de todas las suscripciones móviles.

"Hay un 82% que usa algo mucho más lento. Además, todos los dispositivos móviles tienen pantallas de diferentes resoluciones, por lo que las imágenes deben ser de calidad suficiente para no distorsionarse en las mejores pantallas, pero también tener la compresión suficiente para acortar los tiempos de carga en conexiones más lentas", afirma Kirkman.

Limítese a usar imágenes que ofrezcan valor genuino: ¿ayuda a comprender, ilustra un concepto, presenta su marca? Y asegúrese de usar archivos lo más pequeños posible para acortar los tiempos de carga.

3. Preste atención al tamaño de los botones
No haga los botones demasiado pequeños y no los coloque demasiado cerca. Incluso con un diseño fluido, los botones se verán mucho más pequeños en las pantallas móviles. Y presionar el botón equivocado por accidente puede resultar frustrante, en especial si el navegador es un poco lento.

Aunque no rediseñe por completo su sitio, si sigue algunos de estos consejos ya brindará una mejor experiencia que antes. Súbase al carro de los dispositivos móviles; llegó el momento, y la competencia quizás ya se encuentre en el carro también.

Para obtener más información
W3schools.com: hoja de estilo en cascada
Blog de HP The Next Bench Story: webOS para inteligentes

Android es una marca comercial de Google Inc.