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.
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.
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.
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.
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—.
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.
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.
Existen varias formas de hacer un sitio móvil, cada una con sus ventajas y desventajas.
Se trata de crear otro sitio para ofrecérselos a los visitantes en móvil.
Ventajas
Desventajas
Involucra algún tipo de detección automática para redirigir al usuario cuando sea necesario.
Ventajas
Desventajas
El sitio estará disponible mediante la instalación de una aplicación.
Ventajas
Desventajas
Los navegadores modernos permiten cargar otra hoja de estilos o aplicar otras reglas de acuerdo a condicionales de tamaño de pantalla.
Ventajas
Desventajas
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).
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.
5 Lineamientos De La Web Móvil fue escrito por fael el día lunes 21 de noviembre de 2011 a las 11:54 p. m.
Este post fue etiquetado: artículos diseño web movil tecnología opinión cool