Por qué tienes que empezar a practicar el desarrollo móvil primero

Si ha intentado codificar un sitio web receptivo, se ha topado con este problema: cambia una propiedad CSS pequeña y simple, y altera el diseño en diferentes tamaños de pantalla.

Esto lo obliga a verificar una y otra vez que el valor de margen más reciente no haya arruinado el sitio para tabletas o teléfonos. Por supuesto, puede solucionar este problema fácilmente con anulaciones específicas para diferentes tamaños de pantalla. Pero en el transcurso de un proyecto, los archivos CSS se llenan de excepciones a los problemas. Luego hay excepciones para las excepciones, que luego tienen una excepción para la excepción de la excepción.

Se complica rápidamente y termina luchando contra su propio código, consumiendo muchas horas de proyecto y perdiendo lentamente la cordura.

¡Pero no temas! El primer desarrollo móvil está aquí para evitarle dolores de cabeza, excepciones y cargas lentas de páginas.

Qué sucede con el desarrollo de escritorio primero

El desarrollo inicial para la versión de escritorio de un sitio web receptivo va en contra del flujo natural de un documento CSS. Los archivos CSS se leen linealmente de arriba a abajo, por lo que cada propiedad CSS se sobrescribe con cualquier estilo nuevo aplicado más abajo en el documento.

Al desarrollar para pantallas grandes y luego agregar los estilos móviles más abajo en el documento CSS, aparecen dos problemas:

1. Cualquier cambio realizado en el estilo del escritorio (más arriba en el documento) cambiará la forma en que aparece el sitio móvil si el nuevo estilo no se sobrescribe explícitamente para el sitio móvil. Crear líneas adicionales de CSS frívolo consume muchas horas de proyecto y va en contra del principio del código DRY.
2. Los dispositivos móviles comienzan a cargar una página mostrando todo el estilo del escritorio. Una vez que la pesada versión de escritorio ha terminado de renderizarse, se aplica el estilo móvil. Esto carga recursos adicionales, lo que significa que los dispositivos móviles tardan aún más en entregar una página completamente cargada.

Aquí es donde entra el desarrollo móvil primero para salvar el día. Este método fomenta el orden correcto de CSS (móvil a escritorio de arriba a abajo), asegurando que un dispositivo solo aplique la información que necesita cuando la necesita.

Echemos un vistazo a algunas soluciones a estos problemas.

Cómo se ve el renderizado de dispositivos móviles

Las imágenes son fácilmente los mayores contribuyentes al tamaño de un sitio web, ya que tardan una eternidad en descargarse si un dispositivo no está conectado a wifi. Eliminar imágenes adicionales de tu estilo móvil es lo mejor que puedes hacer para mejorar la velocidad de un sitio.

Pasar primero a los dispositivos móviles significa servir solo unas pocas imágenes pequeñas a los dispositivos móviles. En el siguiente ejemplo, creé el mismo documento CSS implementado con métodos de escritorio y móvil primero.

Si está utilizando el método de escritorio primero, los dispositivos móviles se renderizarán en el siguiente orden:

1. Lea el primer estilo.
2. Descargue la imagen grande (que pronto será reemplazada).
3. Renderiza el elemento.
4. Leer el estilo móvil.
5. Descarga la imagen pequeña (en sustitución de la grande).
6. Renderice el elemento de nuevo.

Sin embargo, si se usa el método móvil primero, el dispositivo se procesa en este orden:

1. Lea el primer estilo.
2. Descarga la imagen pequeña.
3. Omita el estilo de solo escritorio (ya que no se aplica).
4. Renderice el elemento una vez.

¡El sitio web no solo tiene menos pasos para ejecutar antes de mostrar una página terminada al navegador, sino que también elimina las llamadas adicionales a imágenes frívolas que no se usan!

Tenga en cuenta que las consultas de medios cambiarán de ancho máximo a ancho mínimo con el desarrollo móvil primero. Las consultas de ancho máximo se aplicarán a todos los dispositivos de menos de 1000 píxeles, mientras que las consultas de ancho mínimo se aplicarán a los dispositivos de más de 1000 píxeles.

Cambiar a ancho mínimo crea una barrera que evita que el nuevo estilo que escribimos para dispositivos más grandes afecte el aspecto del sitio en dispositivos más pequeños. Esto aumenta la velocidad de carga de sus sitios web receptivos y garantiza que todo lo que cambie en la consulta de medios solo para escritorio no afectará su diseño móvil. ¡Es un ganar-ganar!

Deja de luchar contra ti mismo

Digamos que estamos trabajando en un proyecto que tiene su archivo CSS comentado en tres partes principales: computadora de escritorio, tableta y dispositivo móvil.

Desafortunadamente, hemos seguido el método de escritorio primero y el sitio se está cargando lentamente para los teléfonos. Hemos intentado reducir el tamaño de las imágenes, agregar el almacenamiento en caché del navegador e incluso minimizar el HTML (bruto). Pero el sitio todavía funciona para los visitantes primerizos, y necesita arreglarse.

Dado que construimos nuestro sitio con el método de escritorio primero, nuestro CSS se vería así para nuestro elemento .header:

Nuestro objetivo es reducir la cantidad de estilo que se envía al móvil. Para comenzar, debemos hacer un inventario de lo que se está aplicando a un elemento, tomando nota cuando sobrescribimos nuestros propios estilos.

Primero, cambiemos a un enfoque móvil primero. Haremos que el móvil sea nuestro estilo predeterminado, no consultado por los medios (nota: no hagas esto en producción, dañará el sitio y hará que tus clientes se enojen).

Echemos un vistazo a nuestras imágenes nuevamente, ya que tienen el mayor impacto en la velocidad de nuestro sitio.

Dado que no estamos cargando un fondo en los dispositivos móviles, podemos eliminar esa propiedad. Agregaremos las imágenes para dispositivos más grandes más adelante, cuando realmente se necesiten. Lo mismo ocurre con la propiedad de la parte inferior del margen, ¡dejándonos con solo dos propiedades que realmente deben aplicarse para dispositivos móviles!

Pasando a la sección de la tableta, tendremos que mover los atributos de fondo y el relleno del estilo del escritorio al estilo de la tableta, ya que la tableta es la siguiente sección que se renderizará.

Recuerde, nuestro objetivo es sobrescribir una propiedad solo si cambia y solo agregar nuevas propiedades cuando el cambio debe ocurrir, como se muestra en la imagen a continuación:

¡Mucho mejor! Al examinar cómo un dispositivo móvil representaría nuestro CSS recién optimizado, rápidamente se vuelve evidente cuánto impacto tiene el desarrollo móvil primero en dispositivos más pequeños en comparación con el método de escritorio primero.

Trabaja inteligentemente y no duro

El desarrollo de escritorio primero crea más problemas de los que soluciona. “Cambiar a un método de desarrollo basado en dispositivos móviles le permite trabajar de manera inteligente, no difícil. ”

Al desarrollar sitios receptivos, tenga en cuenta que, de forma predeterminada, se mostrará todo lo que no esté dentro de una consulta de medios. Al hacer que el estilo predeterminado (sin consulta de medios) se adapte a los dispositivos móviles, permitimos que se envíe la menor cantidad de información posible al dispositivo que se ve afectado más fácilmente por el tamaño de los sitios web.

Las computadoras de escritorio y las tabletas están conectadas a una conexión rápida a Internet el 99,999 por ciento del tiempo, lo que permite que se transmitan grandes cantidades de información a altas velocidades. Es más probable que los teléfonos carguen información a través de conexiones de Internet lentas. Adaptar sus hojas de estilo para adaptarse a los dispositivos más sensibles le permite ofrecer el mejor sitio web posible a los clientes.