¿Recuerdas Internet alrededor de 1997? Las páginas fueron diseñadas para monitores CRT de baja resolución y módems lentos. El texto dominaba la Web y ocasionalmente imágenes JPEG y GIF decoraban páginas aquí y allá. La mayoría de las veces no las veíamos, ya que apagar las imágenes era una forma segura de obtener un poco más de velocidad de un módem de acceso telefónico. Más de una década después, todo el panorama de Internet ha cambiado. Internet de banda ancha a través de conexiones por cable y DSL es el estándar en el mundo desarrollado, y las páginas web pueden utilizar elementos más complejos (toneladas de imágenes, efectos de transparencia e incluso video) para entregar contenido. ¡Incluso podemos transmitir películas completas desde Internet a nuestras computadoras sin esperar a que se descarguen los archivos!
Por muy grande que haya sido el cambio hacia monitores de mayor resolución, velocidades de banda ancha y opciones gráficas sofisticadas, una segunda tendencia ha tenido un impacto importante en la World Wide Web tal como existe hoy. A medida que la tecnología telefónica se ha vuelto más avanzada y menos costosa, los teléfonos inteligentes se han convertido en una parte integral de la experiencia de Internet. Los dispositivos móviles representan una puerta de entrada clave a la Web para millones y millones de usuarios que no poseen PC. Por ejemplo, en India, el uso del popular navegador web Opera Mini creció un 300 por ciento entre marzo de 2010 y marzo de 2011. En muchas partes del mundo, la ventana a Internet no está en un monitor de 23 pulgadas. Está en la pantalla de un teléfono de 3 pulgadas. Incluso los teléfonos baratos y “tontos” sin pantallas táctiles ni hardware potente pueden navegar por la Web.
Ingrese al sitio web móvil. Debido a que la popularidad del uso de Internet móvil ha llegado de la mano de un servicio de Internet de alta velocidad y un hardware informático más potente, los desarrolladores de contenidos en línea se enfrentan a un desafío único. Los sitios web diseñados para monitores grandes, computadoras rápidas e Internet rápido se basan en gran medida en gráficos y programación de vanguardia que no siempre funciona en las pantallas más pequeñas y las redes más lentas de los dispositivos móviles. La solución está en los sitios web móviles: páginas diseñadas específicamente para funcionar en dispositivos más pequeños y ofrecer contenido importante al mismo tiempo que reducen los gráficos que ralentizan la carga de la página. Aunque los sitios web móviles son intencionalmente más simples que los sitios completos, eso no significa que sean fáciles de construir. Los sitios web móviles todavía requieren atención al diseño y la tecnología, y las estrictas limitaciones del hardware móvil no facilitan las cosas.
Por qué los sitios web móviles necesitan consideraciones de diseño especiales
El salto de un navegador de escritorio a uno móvil no se trata sólo de reducir la pantalla. Se trata de eliminar el ruido. Cuando diseñas un sitio web móvil, no estás simplemente haciendo las cosas más pequeñas. Estás repensando lo que importa.
Los usuarios de escritorio esperan estilo visual. Tienen el ancho de banda y el número de píxeles para manejarlo. ¿Usuarios móviles? No tanto. Un usuario con una conexión 3G en una zona rural no está esperando a que se cargue una imagen principal. Quieren el texto. Quieren los datos. Si fuerza una experiencia de escritorio en un dispositivo móvil, no está siendo innovador. Estás siendo un obstáculo.
Esto crea un problema específico para los desarrolladores. ¿Cómo se equilibra la necesidad de contenido rico con la realidad de los recursos limitados?
Las principales limitaciones del diseño web móvil:
- El espacio en pantalla es escaso. Una pantalla de 3 pulgadas no puede mostrar el mismo diseño que un monitor de 23 pulgadas. La navegación debe ser intuitiva, no extensa.
- La potencia del hardware varía enormemente. Si bien los teléfonos inteligentes se han vuelto potentes, todavía existen teléfonos básicos. El código que se ejecuta sin problemas en un iPhone puede ahogarse en un dispositivo Android básico o en un teléfono básico.
- La inestabilidad de la red es la norma, no la excepción. A diferencia de la conexión de banda ancha estable en el hogar, las redes móviles fluctúan. Los activos pesados matan los tiempos de carga.
Es un paseo por la cuerda floja. Cortas demasiado y el sitio parece roto. Si guardas demasiado, todo se carga como si fuera 1998 de nuevo.
“Los sitios web móviles son intencionalmente más simples que los sitios completos, eso no significa que sean fáciles de crear”.
No se trata de
Screen Real Estate dicta el diseño
Todo se reduce a pulgadas cuadradas. O mejor dicho, la falta de ellos.
Incluso las pantallas más grandes de los teléfonos inteligentes, las que superan las cuatro pulgadas (10,2 cm) en diagonal, parecen sellos postales junto a un monitor de escritorio. Las cifras de resolución pueden aumentar, pero la física no miente. Un alto número de píxeles en una pantalla pequeña aún no puede mostrar un sitio web completo de manera legible. Terminas pellizcando para hacer zoom, luchando contra diseños de varias columnas que convierten la navegación en un juego de golpear al topo.
Un buen diseño web móvil no se trata de reducir un sitio de escritorio. Se trata de empezar de nuevo con diseños de una sola columna.
Eso significa condensar todo en una corriente vertical. Reorganiza los enlaces de navegación. Quitas la basura decorativa. Reduce la columna principal para que se ajuste al ancho real del teléfono. La mayoría de los monitores son rectángulos anchos. ¿Teléfonos? Son tiras altas. Claro, puedes girar el dispositivo al modo horizontal, pero la experiencia predeterminada es vertical. Primero diseñe la franja estrecha.
Luego está el problema del método de entrada.
Los navegadores de escritorio dependen del mouse. Pase el cursor sobre un menú y aparecerá un menú desplegable. Pruébalo con el pulgar. No funciona. El diseño web móvil requiere repensar estos “estados al pasar el mouse”. Es necesario tocar los menús, no colocarlos sobre el cursor. Los botones deben ser lo suficientemente grandes para un dedo, no para un cursor preciso. Si su sitio se basa en efectos de desplazamiento, ya no funciona en dispositivos móviles.
La pesadilla de la fragmentación del dispositivo
Construir para el escritorio ya es bastante difícil. Tienes a Internet Explorer haciendo ataques, Firefox haciendo lo suyo y Chrome consumiendo toda la RAM. ¿Pero móvil? Es una bestia completamente diferente.
La variedad de hardware es asombrosa. Por un lado, tenemos teléfonos “tontos” con pantallas diminutas de baja resolución y navegadores básicos. Por otro lado, tienes teléfonos inteligentes con pantallas táctiles nítidas de alta resolución y procesadores potentes.
Una talla única no sirve para todos. A veces, necesitas interfaces separadas.
Mira Facebook. No solo ofrece el mismo HTML a todos. Detecta qué dispositivo estás usando. Si tiene un iPhone o Android, obtendrá una experiencia personalizada optimizada para esa pantalla y capacidad del navegador específicas. Si tienes un teléfono básico, obtienes una versión más ligera.
Un sitio móvil no es suficiente. Tienes que diseñar para el dispositivo, no solo para el navegador.
Esta lógica de detección es el puente entre el usuario y la interfaz adecuada. Es la tecnología la que hace posible el diseño.
Más inteligente, no más simple
Simplificar la interfaz no significa simplificar la experiencia. De hecho, el móvil puede ser más potente que el escritorio para tareas específicas.
Los teléfonos inteligentes tienen hardware del que carecen las PC. Cámaras. GPS. Acelerómetros.
Los códigos QR son un ejemplo perfecto. Apunte su cámara a un código e instantáneamente iniciará un sitio web o descargará una aplicación. No escribir URL. Sin búsqueda. Simplemente escanea y listo.
Los mapas se vinculan con datos GPS para brindarte direcciones en tiempo real o recomendaciones de restaurantes según tu ubicación exacta. Este no es sólo “un sitio web más pequeño”. Es una utilidad diferente.
Crear un sitio móvil eficiente requiere un uso inteligente de esta tecnología backend. No se trata sólo de CSS y HTML. Se trata de aprovechar el propio dispositivo. Diseño y tecnología son dos caras de una misma moneda. No puedes tener uno sin el otro.
Veamos más de cerca cómo ocurre esa detección. ¿Cómo sabe Facebook que estás en un iPhone y no en un Nokia antiguo?
Al servicio de la experiencia móvil: detección, subdominios y elección del usuario
Ves las líneas limpias y el texto legible. Parece sencillo. Debajo del capó hay un desastre de ingeniería inteligente. El diseño web moderno se basa en Hojas de estilo en cascada o CSS. Este código dicta fuentes, colores, márgenes y ancho de página. El contenido reside en una base de datos o archivos HTML. CSS decide cómo se ve ese contenido.
Todos los ajustes de diseño mencionados anteriormente ocurren aquí. Para hacer que un sitio móvil sea rápido, cambie una imagen de fondo pesada por un color sólido. Esto ahorra ancho de banda. Hace que la página se cargue más rápido.
Construir el sitio es el primer paso. Conseguir que la gente lo utilice es el segundo paso. No existe una única forma correcta de ofrecer un sitio móvil. Existen varias opciones.
El método más simple es un enlace. Lo pones en el sitio completo. Dice “Ver sitio móvil”. A menudo, los desarrolladores utilizan un subdominio como m.website.com. Esto es fácil de analizar. Website.com pasa a la versión de escritorio. m.website.com pasa a la versión móvil. Algunos sitios usan i.website.com debido al iPhone. El código funciona de la misma manera.
Algunos usuarios tienen que escribir m.website.com manualmente. La mayoría de los sitios automatizan este proceso.
Cómo los sitios web móviles detectan su dispositivo
Otras técnicas son más complejas. Muchos sitios detectan su tipo de dispositivo automáticamente. Ellos deciden qué archivo CSS servir en función de su hardware.
Esto sucede consultando el dispositivo. El servidor verifica factores de identificación como el ancho de la pantalla en píxeles. Lee la cadena del agente de usuario. Esta cadena declara qué navegador está cargando la página.
Las consultas de medios son líneas de código CSS. Hacen referencia a la cadena del agente de usuario. Seleccionan factores de identificación específicos. Si el agente de usuario se identifica como un navegador móvil con una pantalla estrecha, el servidor carga la página móvil.
Este método tiene defectos. Algunos navegadores le permiten falsificar el agente de usuario. Los nuevos navegadores publican nuevas cadenas constantemente. Los servidores generalmente envían el sitio correcto al dispositivo correcto. Pero no es perfecto.
Este sistema de identificación se vincula con otra opción. Dale al usuario una opción. Navegue a IMDB.com en un teléfono. Carga el sitio móvil automáticamente. También le solicita que descargue una aplicación móvil. La aplicación ofrece más funciones.
Ventajas y desventajas de los navegadores móviles
Los sitios móviles suelen funcionar mejor que los sitios completos en teléfonos inteligentes. Están hechos a medida para pantallas pequeñas. El “talla única” rara vez funciona.
Pero “mejor” es relativo. Los sitios móviles ofrecen una experiencia limitada. Tienen en cuenta las limitaciones del dispositivo. La navegación suele desaparecer. No hay suficiente espacio en pantalla para mantener los menús visibles en todo momento.
Interactuar con un sitio es la parte más difícil de la navegación móvil. Desplazarse por un formulario de entrada lleva tiempo. Seleccionar campos es tedioso. Escribir en un teléfono es más lento que en una computadora. Las pantallas táctiles y los teclados de software empeoran esto.
Los navegadores de los teléfonos pueden almacenar cookies. Recuerdan las contraseñas como lo hacen los navegadores de escritorio. Esto ayuda. Los navegadores con equivalentes de escritorio como Firefox para Android y Opera Mobile pueden sincronizar datos. Usted transfiere sus datos guardados desde su computadora. Esto simplifica la navegación en ambas plataformas.
Los teléfonos también tienen trucos. Pellizcar para ampliar el texto. Tocar para ampliar ajusta un párrafo al ancho de la pantalla.
Por qué falla Flash Video en dispositivos móviles
El vídeo Flash entra en todas las discusiones sobre la navegación móvil. Es exigente con los procesadores. Drena la vida útil de la batería. Ha mejorado con los años. Funciona en muchos dispositivos.
No funciona en ningún dispositivo Apple.
Apple bloquea los vídeos Flash en iOS. En su lugar, admiten vídeo HTML5. YouTube utiliza vídeos HTML5. Muchos otros sitios también lo hacen.
Puede incrustar vídeos Flash en páginas web móviles. Va en contra de los principios de diseño móvil. La simplicidad es la mayor fortaleza de los sitios móviles. Se cargan rápidamente porque usan texto e imágenes pequeñas. Flash rompe esto.
Poner Flash en su sitio limita a los usuarios de iPhone. No pueden interactuar con la página. Pierdes una gran parte de tu audiencia.
Compras móviles: ¿son realmente más seguras que las de escritorio?
Aquí hay un giro. Su teléfono podría ser el lugar más seguro para dejar su tarjeta de crédito.
La mayoría de los virus web se dirigen a Windows. No se ejecutan en iOS o Android. Eres esencialmente invisible para una gran cantidad de malware simplemente porque no estás en una PC. Los teléfonos modernos admiten cifrado HTTPS y SSL al igual que su computadora portátil.
Pero no seas arrogante.
Aún necesitas mirar la barra de URL. Busque el icono de candado. Cíñete a sitios de buena reputación. Si un sitio parece incompleto en una computadora de escritorio, también lo será en un teléfono. Sólo más pequeño. El panorama de amenazas cambia, pero el principio permanece. Es mejor tener cuidado que lamentarlo.
Diseño de páginas móviles explicado
¿Qué es incluso el diseño de una página móvil?
No es sólo un sitio web reducido. Es una optimización específica para pantallas táctiles y ventanas de visualización estrechas. Piensa en algo más pequeño. Más simple. Sin desorden.
Los sitios de escritorio dependen del desplazamiento del mouse y de clics precisos. El móvil depende de los pulgares. Eso lo cambia todo. Los botones se hacen más grandes. Los menús se ocultan. Se prioriza el contenido. Si intentas leer un párrafo denso en una pantalla de 6 pulgadas, estás luchando contra el dispositivo. Un buen diseño móvil detiene esa pelea antes de que comience.
Sitios web móviles frente a sitios tradicionales
La gente confunde estos términos todo el tiempo. Separémoslos.
Un sitio web estándar está diseñado para computadoras de escritorio. Teclados. Ratones. Grandes monitores. Se supone que tienes ancho de banda y paciencia.
Un sitio web móvil está diseñado para teléfonos inteligentes y tabletas. Elimina la grasa. Las funciones que no funcionan en pantallas táctiles se eliminan. Las imágenes se comprimen. Los guiones se aclaran.
La diferencia importa.
¿Por qué? Porque los sitios móviles se cargan más rápido. Utilizan menos datos. Esto no es sólo una comodidad para los usuarios de Apple en Manhattan. Es una necesidad para las personas de los países en desarrollo donde Internet de alta velocidad es un lujo, no una utilidad. Si su sitio es pesado, no pueden cargarlo. Período.
Por qué es importante el diseño móvil
Todo se reduce a la fricción.
La navegación en el escritorio es eficiente. La navegación móvil es conveniente. Tienes Internet en tu bolsillo. Pero escribir en una pantalla de cristal es tedioso.
Un buen diseño móvil hace que ese tedio desaparezca. Respeta tu tiempo. Respeta tu plan de datos. Respeta el hecho de que probablemente estés caminando mientras lo usas.
La publicidad también funciona aquí. ¿Pero ventanas emergentes gigantes? No. De todos modos, están prohibidos en la mayoría de los navegadores móviles. Google AdSense cumple los requisitos. Pequeño. No intrusivo. Importante.
La web móvil no es una versión menor de la web de escritorio. Es un animal diferente. Trátelo de esa manera.
