El mundo está gobernado por dispositivos móviles, por lo que tiene sentido desarrollar primero para dispositivos móviles, pero ¿estamos dejando atrás la computadora tradicional?
Yo era un niño cuando los teléfonos móviles no tenían pantalla y los módems de las computadoras hacían ruidos extraños al conectarse a la "World Wide Web". Para mí, la idea de tener una computadora en la palma de la mano era algo que sucedía en las películas de ciencia ficción o en los dibujos animados de los sábados por la mañana. Y, sin embargo, aquí estamos: el mundo se ha vuelto móvil.
Cuando Apple lanzó el iPhone en 2007, pocos de nosotros podíamos predecir cuánto cambiaría el teléfono inteligente la forma en que nos relacionamos con la tecnología, Internet y la sociedad. Para que te hagas una idea, en 2012 el tráfico global de datos móviles ascendió a 1,12 exabytes al mes. ¿En 2022? 77,49 exabytes. El crecimiento de la industria móvil no se parece a nada que hayamos visto antes.
Desde 2018, la mitad del tráfico de Internet se debe a dispositivos móviles, incluidos teléfonos inteligentes y tabletas. Esto es solo transmisión de datos, claro. Si analizamos la cuota de mercado, vemos un panorama muy diferente. En 2021, los dispositivos móviles copan casi el 60% del mercado , mientras que los ordenadores sólo copan alrededor del 40%. Podríamos transmitir más datos a través de la PC, pero el mercado para los usuarios de teléfonos es simplemente más grande.
En su llamada a inversores del segundo trimestre de 2022, Activision Blizzard, el estudio detrás del exitoso juego World of Warcraft y el gigante Call of Duty, informó que su división móvil ganó más dinero que el resto de sus productos combinados. ¿El culpable? Un pequeño juego llamado Candy Crush. Las señales están ahí: tenemos que apuntar al mercado móvil.
CSS móvil primero
Mobile first se define de muchas maneras. Filosóficamente, el principio rector es que la experiencia móvil debe estar al frente y al centro del proceso de desarrollo de software. Sí, eso significa priorizar las necesidades del mercado móvil.
Desde una perspectiva de codificación, CSS móvil primero significa que escribimos el estilo de la interfaz de tal manera que los dispositivos más pequeños puedan acceder a sus instrucciones sin tener que desplazarse por las instrucciones de los monitores de escritorio. En otras palabras, primero se escribe código para dispositivos móviles.
La pregunta es: ¿por qué?
- La experiencia de escritorio es muy diferente a la experiencia móvil, desde el tamaño de la vista de la pantalla hasta la forma en que interactuamos con la pantalla. Desplazarse y tocar son muy diferentes a usar un mouse.
- Dado que los dispositivos inteligentes suelen transmitir datos a través de conexiones limitadas a un coste adicional, guardar datos es extremadamente importante.
- Las señales telefónicas tienden a ser menos confiables que el acceso a Internet desde una computadora de escritorio, lo que significa que es posible que las páginas web con un uso intensivo de datos no se carguen correctamente debido a señales deficientes o velocidades de Internet lentas.
En otras palabras, no sólo la base potencial de usuarios móviles es mayor, sino que hay más variables a tener en cuenta que complican el diseño de aplicaciones o páginas web. Puedo garantizar que navegar por una página web diseñada para dispositivos móviles en una PC es mucho menos frustrante que al revés.
Construyendo desde cero
Teniendo en cuenta que Internet existe desde hace mucho más tiempo que los dispositivos móviles, no sorprende que los enfoques más tradicionales para diseñar páginas web se centren principalmente en la experiencia de escritorio. Un ejemplo común de esto es escribir una hoja de estilo larga y luego usar consultas de medios de ancho completo en la parte inferior del código para "eliminar" el material adicional para los dispositivos de escritorio.
Es como si el proceso fuera algo así como "Tengo mi pantalla grande y ahora necesito calcular el ancho máximo del dispositivo móvil para que quepa en mi página". Este es un enfoque que da prioridad al escritorio.
Una alternativa es lo que llamamos mejora progresiva . Con este enfoque, una página web se vuelve más sofisticada cuando el dispositivo es más grande o más potente. El proceso comienza con la creación de una página web con el mínimo común denominador y luego agrega más y más funciones para otros dispositivos.
De esta manera garantizamos que las principales funcionalidades de nuestro producto web se ejecutarán en todos los dispositivos, desde una computadora de pantalla ancha hasta el teléfono inteligente más pequeño.
Construyendo para el futuro
Si hay una constante en el mundo de los dispositivos móviles es que no la hay. Los teléfonos inteligentes son cada vez más grandes y las tabletas vienen en todas las formas y tamaños imaginables. Intentar crear un estilo basado en el ancho esperado del dispositivo es un problema que está a punto de ocurrir.
En cambio, el tamaño de la página web debe guiarse por su contenido . En otras palabras, los puntos de interrupción no deben crearse para tamaños de pantalla específicos, sino en función de dónde sería necesario reubicar el contenido según el espacio disponible. Esto puede requerir un cambio en nuestra forma de pensar, pero cuando funciona, no es tan complicado.
¿Qué pasa con las imágenes?
Las imágenes son la pesadilla de las páginas web orientadas a dispositivos móviles. No sólo consumen una anchura relativamente grande, sino que además resulta extremadamente difícil encajarlos en cualquier dispositivo imaginable. En lugar de imágenes, muchos desarrolladores optan por degradados CSS3 e íconos de fuentes como alternativas livianas.
Si necesita publicar imágenes, considere tener imágenes diferentes para diferentes dispositivos. El impacto en el almacenamiento es mínimo, pero en términos de transferencia de datos, existe una gran diferencia entre descargar una imagen 4K y una imagen 480.
¿Es esto necesario?
Si el CSS móvil primero es tan importante, ¿por qué no todo el mundo lo está haciendo ya? Como mencioné antes, Internet es mucho más antiguo que los dispositivos móviles y algunas prácticas se han vuelto tan arraigadas que es realmente difícil romper con el hábito. Paso la mayor parte de mi tiempo codificando frente a la pantalla de una computadora; Pídeme que imagine una página web y mi mente inmediatamente piensa en un monitor. Es natural que los desarrolladores estén predispuestos hacia nuestras herramientas de trabajo.
Pero lo cierto es que el mercado móvil está creciendo y la frontera entre dispositivos móviles y PC se reduce cada día. Por lo tanto, debemos empezar a considerar los dispositivos móviles no como una alternativa incómoda a nuestras pantallas gigantes, sino como lo que realmente son, una tecnología que ya es popular. A medida que el mercado crece, también lo hacen nuestras oportunidades de llegar a nuevos usuarios. Como dice el viejo refrán, hay que golpear mientras el hierro esté caliente.
