Llegamos a ustedes gracias a:



Reportajes y análisis

Cinco sencillas reglas para crear sitios web amigables para móviles

[22/03/2011] Es terrible cuando desde su iPad, iPhone, Xoom, Atrix, Droid, Torch, u otro dispositivo móvil entra a un sitio web y obtiene un escritorio difícil de navegar. Es aún peor cuando es redirigido a un sitio reducido y súper simplificado, que elimina la mayor parte del valor del destino original. Ambas situaciones ocurren demasiado a menudo.

Pero no es necesario que suceda. La primera situación se produce porque el sitio no ha utilizado las tecnologías simples de las plantillas web con el fin de auto adaptar su presentación para las pequeñas pantallas de los dispositivos móviles. El segundo escenario ocurre cuando el sitio ha implementado uno de los muchos servicios móviles que, básicamente, raspan las páginas web o toman RSS feeds de un sitio, a continuación, crean una versión WAP que es compatible con casi cualquier dispositivo móvil.
El problema con ese enfoque WAP es que es el denominador común más bajo, que en muchos casos elimina cosas como los enlaces, para apoyar a los teléfonos de antaño que no fueron diseñados para acceder a la web. Estos dispositivos -la mayoría de teléfonos Nokia, BlackBerrys que se comercializaron antes de Bold, y todos los teléfonos celulares que incluyen servicios de información propietarios de las operadoras-representan menos del 0,5% del uso de la web móvil, por lo que optimizarlos a costa de iOS, Android, BlackBerry OS 5 y versiones posteriores, Windows Mobile, Windows Phone, WebOS, y las versiones Symbian de los dispositivos de gama alta Nokia es simplemente tonto.
No sea tonto. En su lugar, sea efectivo en el tratamiento del creciente ejército de usuarios móviles, mediante la aplicación de estas cinco reglas para su sitio web.
1. Detectar el dispositivo que accede a la página web
Probablemente ya detectó el navegador para manejar muchas rarezas de Internet Explorer, utilizando JavaScript en la página o una secuencia de comandos Apache a nivel de servido. Aproveche esa información del agente del usuario para detectar los dispositivos móviles que le importan. Zytrax suele tener una amplia lista de agentes de usuario que es actualizada con frecuencia.
Consejo: La tablet Mobility Xoom de Motorola se identifica a sí misma como un simple dispositivo Android, así que si no tiene cuidado, terminará tratándola como si fuera un teléfono inteligente, pues es así como lo verá. Eso sería cruel para los usuarios de Xoom. La solución temporal consiste en detectar también el tamaño de la ventana del navegador y utilizar esa información para distinguir una tablet Android de un teléfono Android. Sin embargo, no tiene que hacer esto con la iPad, ya que tiene un agente de usuario distinto de otros dispositivos iOS.
2. Divida su página web en componentes
Una vez que haya detectado el dispositivo móvil que accede a sus páginas web, querrá que se presenten adecuadamente. Para ello, es necesario que articule sus páginas como componentes, usando DIV. Simplemente no puede mostrar toda una página web diseñada para una pantalla de 1.024 x 768 en un dispositivo móvil diseñado para funcionar a 320 x 480 píxeles -al menos no en una forma utilizable.
Por lo tanto, deberá colocar elementos en DIV nombrados para que más adelante pueda manipular cuáles y cómo se podrán ver en los distintos dispositivos. Este es el corazón de la creación de un sitio web auto ajustable.
Sugerencia: Evite el uso de todo el ancho de la página, la tabla, y similares. En su lugar, utilice los porcentajes cuando sea posible, para que no cree elementos mayores a los que pueden mostrar los dispositivos móviles con una relación 1:1. (Ellos van a bajar estos elementos más grandes, reduciendo la página junto a ellos). La excepción se aplica para los objetos incrustados, como imágenes. Desea que estos bajen, lo que la mayoría de navegadores móviles hará -si se establece un ancho o alto absoluto para ellos.
3. Trabaje a través de su plan de escenarios y prográmelos a través de AJAX y CSS
Aquí es donde entran las habilidades de diseño: Es necesario determinar cómo desea que se vean sus páginas en las ventanas más comunes del navegador. En realidad, solo hay tres tamaños por los que preocuparse:
* 320 o 480 píxeles de ancho para los teléfonos inteligentes -la medición depende de si desea optimizar la visión vertical u horizontal, yo recomiendo la optimización de anchura vertical de 320 para estos dispositivos
* 768 o 1.024 píxeles para las tabletas -recomiendo optimizar el ancho horizontal a 1.024
* El ancho que desee para los navegadores de escritorio -que puede ser 1.024 píxeles, así esté diseñando su sitio para que trabaje con monitores de 17 pulgadas, lo que es muy común.
No se preocupe por las pequeñas variaciones entre los tamaños de la pantalla de los smartphones y las tablets. Estos tres tamaños funcionarán en todos los ámbitos. Si desea optimizar su sitio para las tablets de pantalla ancha, como el Motorola Mobility Xoom, entonces, agregue 1.280 a la mezcla de tamaños.
Ahora decida qué es lo que quiere mostrar en cada uno de los tres (o cuatro) escenarios. En algunos casos, decidirá no mostrar ciertos componentes de una página, para que el sitio no sea demasiado complicado para un smartphone. En cambio, algunos de esos componentes retirados podrían estar disponibles como enlaces a nuevas páginas, o usted decidir que no sean visibles para los usuarios móviles. En otros casos, moverá componentes, como colocarlos en una columna vertical para un smartphone, pero manteniendo la forma tradicional, de columnas horizontales para tablets y desktops.
A continuación, cree un CSS para cada escenario, ocultando las DIV que ha decidido ocultar, sustituyéndolas con versiones alternativas cuando sea necesario, y aplicando los parámetros adecuados de diseño para la clase de dispositivo en cuestión. Uso de JavaScript para detectar el dispositivo móvil, a continuación, cargar el CSS correspondiente para ese dispositivo. También puede utilizar secuencias de comandos de Apache para detectar el dispositivo móvil y redirigirlo a la página correspondiente.
Este enfoque significa que tiene que manejar, servir y reportar páginas separadas para cada clase de dispositivo, pero evitar la sobrecarga de JavaScript y la complejidad del diseño de la página "todo en uno. También podría tener JavaScript y/o el código PHP que hacer modificaciones de diseño que CSS no maneja.
Sus páginas web, por supuesto, deben estar basadas en plantillas que tienen estas DIV y el acompañamiento de enlaces CSS y JavaScript, por lo que no tendrá que codificar manualmente cada página para las diferentes opciones. Por supuesto, las páginas personalizadas necesitarán codificación a medida, pero la mayoría de las páginas deben estar basadas en plantillas -especialmente si utiliza un sistema de gestión de contenidos para generar sus páginas.
Consejo: Una vez que haya hecho el trabajo de CSS para cada tipo de dispositivo, puede que desee ampliar la lista de familia de fuentes para darle cabida a las fuentes disponibles en los dispositivos más populares. Por ejemplo, su CSS podría añadir Lucida Grande y Palatino a la lista de familia de fuentes para tomar ventaja de las fuentes del sistema iOS (también podría hacer lo mismo para los usuarios de escritorio de Mac). Asimismo, puede agregar BBAlpha Sans Serif y BBAlpha Serif para BlackBerry para utilizar su sistema de fuentes nativo. La belleza de la lista de fuentes CSS es que los navegadores ignorarán las fuentes que no tienen, por lo que debe listar todas las fuentes posibles en la CSS.
Consejo: Para aquellas páginas que no puede volver amigables para los móviles, pero necesita dejar accesible desde su página web, tiene un par de opciones. Puede hacer que no estén disponibles, con un aviso que diga que no son compatibles con dispositivos móviles, o en su lugar, enviar a los usuarios a la página de escritorio, tal vez con una página de aviso intersticial para que sepan que la medida no es un error.
4. Elimine las tecnologías propietarias donde sea posible
Un sitio web bien diseñado debe ceñirse a HTML 4, las capacidades ampliamente implementadas del núcleo HTML5, JavaScript y CSS, para que funcione en una gran variedad de navegadores de escritorio de uso popular. Pero, en realidad, muchos sitios fueron diseñados originalmente en los días en que Internet Explorer era el estándar de facto, por lo que usan controles ActiveX [14] y otros elementos que solo funcionan en IE. Debe zanjar estas dependencias legadas, simplemente no son compatibles con los dispositivos móviles, ni trabajan en el escritorio de Firefox, Safari o Chrome.
Lo más probable es que el sitio también utilice videos de Adobe Flash. Aunque todos los navegadores populares tienen un plug-in para soportar este formato, en la actualidad solo Android OS2.2 le da soporte para móviles. Por lo tanto, la mayoría de los teléfonos inteligentes y las tablets no pueden reproducir videos Flash (no es solo una cuestión iOS).
No es sensato dejar de mostrar los videos Flash existentes para sus usuarios de escritorio y de Android 2.2, pero no debería añadir más videos Flash a su sitio web. También debe utilizar su código JavaScript y CSS para que retiren los videos Flash de las páginas web de los dispositivos móviles - es cruel burlarse de los lectores con videos que no podrán reproducir. Con el tiempo, debe cambiar sus videos a un formato como H.264  para el que la mayoría de navegadores con capacidad HTML5 (es decir, los de escritorio más populares y los móviles de hoy) tiene códecs.
5. Dele a los usuarios una forma de acceder a la versión de escritorio completa
A muchos usuarios no les gusta que los sitios se reconfiguren automáticamente para ajustarse mejor a la experiencia móvil, quieren la versión de escritorio completa, independientemente de las capacidades del dispositivo. Bien -deles una opción para que cambien al sitio de escritorio. Si quiere ser más sofisticado, guarde una cookie que indique su preferencia, por lo que automáticamente obtendrán lo que eligieron la próxima vez que vayan a su sitio. (Puede implementar las cookies a través del nivel de servidor Apache o en el JavaScript o PHP de la página, como prefiera). Solo asegúrese de permitirles que cambien de opinión más adelante a través de un enlace de Configuración móvil en sus páginas.
Adopte movilidad adoptando estándares
Claro, podría pagar un servicio para analizar y raspar su página web existente o que aspire sus feeds RSS, y luego generar una versión para móviles. Pero este enfoque le cuesta dinero y ofrece resultados en una experiencia enlatada que rara vez es satisfactoria. Simplemente tiene más sentido utilizar las tecnologías web estándar para (re)diseñar su sitio web y hacerlo amigable con los dispositivos móviles. Si lo hace en el nivel de plantilla, puede hacer que su sitio -o por lo menos grandes partes del mismo- sea amigable con los dispositivos móviles.
Como más y más gente adopta tablets y teléfonos inteligentes, los sitios web necesitan anticiparse a su uso.
Galen M. Gruman, InfoWorld (US)