Hoy en día, es una práctica común crear un sitio web o una aplicación que ajuste su interfaz de usuario según el navegador o el dispositivo. Hay dos enfoques para lograr este objetivo. La primera implica la creación de diferentes versiones de su sitio web o aplicación para diferentes dispositivos. Pero es ineficiente y puede provocar errores impredecibles.
En la búsqueda de un enfoque confiable y preparado para el futuro, se acuñó el diseño receptivo o adaptativo. Se centra en crear una única versión de su diseño que se adapte automáticamente a diferentes navegadores o dispositivos.
En este artículo, aprenderemos sobre el diseño web receptivo y los principios fundamentales que lo ayudarán a crear un sitio web increíble.
Ingredientes de diseño web receptivo
El diseño web adaptable no es tan complicado como parece. Es un conjunto de prácticas que puede usar al escribir CSS, no una tecnología separada que tendrá que aprender desde cero. Es posible que ya esté siguiendo varios de estos principios sin darse cuenta. Puede comprender el diseño web receptivo explorando sus cuatro ingredientes: diseños fluidos, unidades receptivas, imágenes flexibles y consultas de medios.
Diseños fluidos
Con un diseño fluido, puede crear páginas web que se adapten al ancho y alto de la ventana gráfica actual. La práctica común incluye el uso de la propiedad max-width en lugar de dar un ancho fijo a un elemento. Además, el uso de porcentaje ( % ), altura de la ventana gráfica ( vh ) o ancho de la ventana gráfica ( vw ) ayuda a mejorar la adaptabilidad que no es posible con píxeles ( px ). Por lo tanto, la próxima vez que cree un diseño, asegúrese de introducir estos pequeños cambios y comience a beneficiarse de las técnicas de diseño receptivo.
Unidades receptivas
A medida que pasa a un CSS más avanzado, a menudo verá el uso de unidades rem y em para la longitud en lugar de unidades px . Esto se debe a que la unidad rem hace que sea muy fácil escalar todo el diseño. De forma predeterminada, 1rem equivale a 16 píxeles porque es proporcional al tamaño de fuente del elemento <html> , normalmente 16 píxeles. Sin embargo, puede establecer 1rem igual a 10px (o cualquier otro valor) para facilitar los cálculos, ajustando el tamaño de fuente de nivel superior.
Imágenes flexibles
Las imágenes son una preocupación primordial al diseñar incluso el diseño más básico. Siempre hay que tener cuidado de dimensionarlos correctamente para que se ajusten al diseño. Además, de forma predeterminada, no se escalan con los cambios en la ventana gráfica. Por lo tanto, debe usar % para las dimensiones de sus imágenes, junto con la propiedad de ancho máximo .
Preguntas de los medios
Puede dar vida a los sitios receptivos mediante consultas de medios. Las cuadrículas fluidas son buenas para empezar, pero encontrará que hay algunos puntos en los que el diseño comienza a fallar. Agregar puntos de interrupción para estos anchos de vista ajusta el diseño para diferentes dispositivos. Las consultas de medios le ayudan a aplicar CSS de forma selectiva en función de los resultados de las pruebas de funciones de medios. Puede explorar nuevas funciones de CSS para crear un sitio web receptivo en menos tiempo.
Principios de diseño web receptivo
Aunque el diseño web receptivo es un salvador cuando se trata de problemas de múltiples pantallas, es posible que no tenga una restricción física fija a la que hacer referencia. Por lo tanto, hay seis principios básicos de diseño web receptivo con los que empezar al diseñar un diseño receptivo.
Utilice puntos de interrupción basados en contenido
Uno de los principios de diseño fundamentales establece que el diseño de su sitio web debe respaldar el contenido, no al revés. El contenido multimedia, como videos, fotografías y contenido de texto, como una copia web larga y breve, debe procesarse de manera óptima en todas las pantallas. La clave para el diseño web receptivo es utilizar puntos de interrupción basados en contenido en lugar de basados en dispositivos.
Elija las fuentes web y las fuentes del sistema con prudencia
¡Las fuentes web se ven impresionantes! Tiene numerosas opciones para modificar su diseño con fuentes web de aspecto atractivo. Pero debe saber que los navegadores necesitarán descargar cada fuente web. Más fuentes web, más tiempo de descarga. Por el contrario, las fuentes del sistema son ultrarrápidas. Si el usuario no tiene una fuente del sistema con nombre en su dispositivo local, volverá a la siguiente fuente en la pila de la familia de fuentes . Por lo tanto, asegúrese de considerar el tiempo de carga y la demanda de diseño al elegir las fuentes.
Optimización de imágenes y vectores de mapa de bits
¿Tiene diferentes iconos en su sitio web que respalden el contenido? A menudo, es una buena práctica utilizar un formato de mapa de bits si los iconos tienen muchos detalles. Por otro lado, los formatos vectoriales son el camino a seguir para los íconos que se escalan hacia arriba y hacia abajo muy bien. Los vectores suelen ser pequeños, pero la desventaja es que es posible que algunos navegadores antiguos no los admitan. Además, hay casos en los que los vectores son más pesados que los mapas de bits, como cuando la imagen es muy detallada. Por lo tanto, asegúrese siempre de optimizar sus imágenes y vectores de mapa de bits antes de que se conecten.
Realización de pruebas para el primer pliegue receptivo
El primer pliegue de un sitio web es la vista que ven los visitantes cuando se carga por primera vez, antes de cualquier desplazamiento. A menudo incluye una sección de héroe con una barra de navegación receptiva , texto y medios introductorios y una llamada a la acción. La capacidad de respuesta no se limita simplemente a los dispositivos móviles. También debe considerar tabletas, consolas de juegos y otras pantallas. Por lo tanto, la clave es realizar pruebas frecuentes al menos para la primera vista del sitio web. Puede utilizar Chrome DevTools ( Lighthouse ) para probar la calidad de la página web.
No oculte contenido en pantallas más pequeñas
Muchas personas solían asumir que los usuarios de dispositivos móviles siempre tienen prisa, buscando información breve, mientras que los usuarios de computadoras de escritorio están más interesados en el contenido de formato largo. Ahora reconocemos que esto no es cierto en el mundo actual. La gente usa dispositivos móviles en todas partes, buscando contenido completo y acceso completo a todos los servicios. Debe asegurarse de que, en lugar de ocultar el contenido, esté administrando el diseño y los puntos de interrupción para presentarlo de la manera más fácil y sin esfuerzo posible.
Administrar el diseño con objetos anidados
Crear un diseño de sitio y posicionar los elementos correctamente requiere una cantidad considerable de esfuerzo. También puede haber tenido dificultades para administrar muchos elementos que dependen unos de otros. Por lo tanto, debería considerar envolver los elementos relacionados en un contenedor o <sección> . Esto ayuda a reducir la tarea de diseñar varios elementos a uno en el que está diseñando un solo elemento.
Diseño receptivo: ¿Debería optar por el escritorio primero o el dispositivo móvil primero?
El primer enfoque de escritorio significa que escribirá CSS para pantallas grandes y luego aplicará consultas de medios para reducir el diseño de pantallas más pequeñas. En contraste, el primer enfoque móvil implica escribir CSS para dispositivos móviles, con pantallas más pequeñas, y luego aplicar consultas de medios para expandir el diseño para pantallas más grandes. El objetivo principal es reducir el sitio web y las aplicaciones a lo esencial.
Si recién está comenzando con el desarrollo web receptivo, entonces debe optar por el enfoque de escritorio primero, ya que al final del día, tendrá que apilar el contenedor uno sobre otro en dispositivos móviles. Aunque es una decisión completamente personal, el enfoque móvil primero le ayuda a estructurar el HTML de una mejor manera, mientras que el enfoque del escritorio primero le ayudará con las técnicas de diseño y espaciado.
