therror

Les había contado que me encanta la web? Con sus cambios tan rápidos es relativamente fácil ponerse a estudiar y comenzar a utilizar tecnología que la competencia no está usando. Y también es muy fácil quedarse atrás.
 
Cuando me muestran un sitio nuevo, espectacular y moderno, mi análisis comienza no por ver el sitio en diferentes navegadores —como sucedía hace apenas algunos meses—, sino en abrir mi BlackBerry y ver el sitio ahí. Si no tiene compatibilidad con dispositivos móviles, no es un sitio moderno.

En cierta forma, este cambio es como un flashback a hace diez años. Los smartphones actuales tienen más o menos las especificaciones mínimas de Windows XP y por lo tanto, la capacidad del procesador es limitada —en comparación, por supuesto, de las computadoras de escritorio—.

Fuera de países desarrollados, la tendencia podría ser elitista, enfocada a un sector muy pequeño que no sólo cuenta con smartphones sino también conexión a Internet permanente. Aún así, la tendencia es tan clara que Google espera que el tráfico de móviles rebase al de computadoras en un futuro no muy lejano.

Y esto para los negocios brick and mortar es como un sueño, pues con tecnologías como la geolocalización, uno va a poder estar en cualquier parte de una ciudad que incluso no conoce, sacar el smartphone y buscar un restaurante de nuestra comida favorita en un par de kilómetros a la redonda.

Entonces, si eventualmente tendremos que diseñar también para móviles, porqué no empezar hoy mismo?

Estos son cinco lineamientos para desarrollar sitios compatibles con móviles.

1. Rendimiento

La frase menos es más nunca será más cierta que para los dispositivos móviles. Menos recursos, imagenes, código HTML y Javascript significa no sólo que el sitio cargará más rápido —por tener menos recursos qué transmitir—, sino responderá más rápido.

En mi experiencia personal, incluso cargando sólo jQuery y un par de instrucciones básicas para un menú suele afectar el rendimiento. Si tenemos un sitio con sliders, menús desplegables con animaciones y efectos por todos lados, sin duda desesperará al usuario y terminará cerrando su teléfono.

La opción más viable para Javascript en móviles es jQuery mobile.

2. Tamaño de pantalla

Si te dabas de topes para decidir el ancho de tu sitio cuando las resoluciones de monitores más populares eran 800×600, 1,024×768 y 1,280×720 entonces hoy vas a llorar. Con monitores de escritorio de 27 pulgadas cada vez más comunes, así como los normales de 14 a 20 pulgadas, laptops, netbooks, tablets y smartphones, ahora sí podemos decir que hay de todo.

Ya no hay una decisión correcta de pixeles; los layouts modernos deben ser flexibles. Si aún maquetas con tablas, por muy bien que hagas lo demás, no tendrás suficiente flexibilidad para ofrecer un buen sitio a todos tus usuarios.

3. Compatibilidad

Flash, para empezar. Si tu sitio tiene flash, ningún usuario en dispositivo móvil lo podrá ver. Y aunque fuera compatible, probablemente utilizaría tantos recursos que sencillamente sería imposible de usar. Estamos casi en 2012 y no hay una buena excusa para utilizar flash —más que para videos y juegos, si me preguntan—.

Sólo menciono flash por ser el más popular pero la misma regla aplica para cualquier tipo de plugin de terceros o tecnología no-estándar, que va desde Windows Media Video y Silverlight hasta Quicktime —que me parece una inconsistencia por parte de Apple.. sí, una más—.

4. Interfaz

El mouse y el puntero es para PCs; de ninguna forma aplicará para dispositivos móviles —aunque RIM diga lo contrario—, por lo tanto, la interfaz no puede ser idéntica. Conceptos como el hover, tan útiles para nuestros menús, son inexistentes en estos dispositivos. Es necesario probar y replantear los elementos de navegación desplegables, pues ahora deben de abrirse con un tap. Pero también tendremos nuevos elementos de input propios de las pantallas táctiles: el desliz, los gestos de zoom y hasta sacudir el teléfono.

Por otro lado, los elementos de interfaz —todo aquello que el usuario pueda tocar— debe ser lo suficientemente grande y separado de los demás elementos, ya que el dedo ocupa gran parte de la pantalla, reduciendo su precisión.

5. Universal

Sí, es cierto que el iPhone representa una parte muy grande del pastel, pero Android va muy cerca y BlackBerry posiblemente se mantenga un par de años más. Y vienen muchos detrás que tal vez no se muden a Android y saquen su propia plataforma.

Por lo tanto, a menos que seas Instagram —o algo que requiera una tecnología que no ofrece la web—, no quiero tu aplicación para ver tu sitio. Y peor si es sólo compatible con iPhone, pues apuesto a que ese tiempo que le dedicaste en crear la aplicación, pudiste haberlo invertido en tener una buena estructura para tener una mejor visualización en cualquier navegador de cualquier dispositivo móvil.

Cómo hacer un sitio móvil?

Existen varias formas de hacer un sitio móvil, cada una con sus ventajas y desventajas.

Versión móvil por separado

Se trata de crear otro sitio para ofrecérselos a los visitantes en móvil.

Ventajas

• Fácil de optimizar recursos por cargar (jQuery móvil, imágenes más ligeras)
• Rendimiento idóneo, sin código mezclado del sitio completo
• Alta compatibilidad
• Posibilidad de cambiar de versión

Desventajas

• Duplica trabajo
• Difícil de mantener
• Necesita que el usuario escriba otra dirección a la que está normalmente acostumbrado
• Cuando una URL se comparte, llevará al sitio móvil

Detectar y redirigir a versión móvil

Involucra algún tipo de detección automática para redirigir al usuario cuando sea necesario.

Ventajas

• Optimizado en recursos, rendimiento y compatibilidad
• No requiere que el usuario escriba otra dirección
• Posibilidad de cambiar de versión

Desventajas

• Duplica trabajo, difícil de mantener
• La detección no es sencilla y podría dejar de funcionar correctamente en el futuro
• Muchos requieren Javascript y cookies para recordar las preferencias, de estas últimas no estar activadas, ocasionaría preguntarle al usuario si quiere la versión móvil en cada carga de página

App

El sitio estará disponible mediante la instalación de una aplicación.

Ventajas

• Acceso a más funcionalidades del teléfono como cámara o micrófono, no compatibles aún con tecnologías web estándar
• Experiencia hecha a la medida

Desventajas

• Requiere al menos dos desarrollos paralelos para acaparar las plataformas más populares
• Posibilidad de requerir alto mantenimiento
• Requiere pasos adicionales para disfrutar del sitio —abrir, instalar, permitir, esperar, abrir aplicación—
• Saturación de aplicaciones, el usuario decidiría ya no instalar ni una más

Media Queries

Los navegadores modernos permiten cargar otra hoja de estilos o aplicar otras reglas de acuerdo a condicionales de tamaño de pantalla.

Ventajas

• Fácil de implementar
• No requiere más desarrollo
• Alta compatibilidad

Desventajas

• Los recursos cargados son los mismos que del sitio normal, imposible de optimizar
• El rendimiento se ve afectado, pues además de cargar la hoja de estilos normal, tiene que procesar las reglas especiales para la versión móvil. Los scripts cargados son los mismos
• Atado a limitaciones de CSS

Quién hace correctamente versiones para móvil?

Mi primer elección es imgur, pues detecta un navegador en móvil y muestra una versión especial para este, de forma automática y sin cambiar la URL. Como contras, podría ser un dolor de cabeza con nuevos dispositivos o falsos positivos y el mantenimiento del código debe ser complicado, por no decir más.
reddit no redirige automáticamente ni mantiene una misma estructura de URL, pero sus elementos de interfaz, el tamaño de letra y el diseño está optimizado para pantallas pequeñas.
Hicksdesign aprovecha una estructura de HTML muy consistente y utilizando media queries, se hace compatible con tres diferentes resoluciones de pantalla (intenten redimensionando la ventana de su navegador).

therror ya es compatible con móviles, por cierto

Y todo este artículo fue la excusa perfecta para comentarles que aunque no haya diseño nuevo, es una vergüenza saber de lo que viene en los próximos años y no prepararse para eso. Les agradecería si me dijeran si funciona correctamente.

Como conclusión, verán que hay diferentes formas de hacer un sitio en móvil. Cada una con sus ventajas y desventajas. Gigantes como Google pueden optar por detección automática y presentar una versión optimizada para una mejor experiencia, pero para un simple mortal los media queries son la mejor opción.

P.S. WTF Mobile Web Antes de comenzar su versión móvil, por favor chequen estos errores y asegúrense de que si van a cometer alguno, que al menos no esté en la galería.