Abordamos el tema, diseño responsivo: qué es y cómo aplicarlo, considerando que esta tendencia refleja el mayor uso de los dispositivos móviles.
La tendencia del diseño responsivo
Un informe de DataReportal indica que el 50.2% del tráfico web en 2020 proviene de dispositivos móviles, es decir, un 3.1% más que las computadoras portátiles y de escritorio.
Por lo tanto, el tráfico proveniente de dispositivos móviles cada vez aumenta, en ese sentido hay que asegurarse de que los sitios web sean compatibles con dispositivos móviles y que ofrezcan una buena experiencia al usuario.
Diseño responsivo: qué es
Es un concepto que combina el diseño y desarrollo de sitios web a fin de adaptar la experiencia de un usuario de acuerdo con la ventana gráfica, el dispositivo o la plataforma del usuario.
Por lo tanto, este tipo de diseño además de ser estéticamente agradable en todos los tipos de dispositivos, resoluciones u orientaciones, la experiencia del usuario tiene que ser eficiente y agradable.
Cómo crear un diseño responsivo
Antes de comenzar el diseño, los administradores y creadores de páginas web deben de plantearse los siguientes cuestionamientos: ¿Se adapta al tamaño de la pantalla?, ¿Es accesible desde cualquier lugar?, ¿Aprovecha las capacidades del dispositivo?
Consejos para aplicar este tipo de diseño
Considerar las proporciones
El sitio web debe de adaptarse al tamaño de la pantalla de un dispositivo mediante el uso de cuadrículas fluidas, las cuales funcionan en términos de proporciones.
De esta manera, cuando un diseño se comprima en un dispositivo móvil pequeño o se extienda en una pantalla enorme, los elementos del diseño cambiarán el tamaño en relación con los demás.
Las resoluciones más comunes para diseñar sitios web receptivos son 1920 × 1080, 1366 × 768 y 360 × 640.
Consultas de los medios
Mediante las consultas de medios, se puede establecer reglas CSS que se ejecutarán dependiendo de si se cumplen las condiciones que ha establecido (por ejemplo, ancho de la ventana gráfica, orientación).
Por ejemplo, se puede ocultar una sección del sitio web cuando se visualiza desde un dispositivo móvil. Así es como se vería esa consulta de medios:
@media screen and (width: 300px) {
.section {
Display:none;
}
}
.section-reviews es lo que se llama una clase CSS. Esta consulta de medios dicta que cuando se ve desde una pantalla que tiene un ancho mínimo de 300 píxeles.
Capacidades del dispositivo
Hay que tener en cuenta cuáles son las diferentes capacidades de un dispositivo al diseñar el sitio web. Las pantallas táctiles vienen con pautas de diseño diferentes a las de la interacción basada en el cursor.
Por ejemplo, los enlaces flotantes no funcionarán con pantallas táctiles, ya que no hay un cursor que pueda navegar por el sitio web.
Sin embargo, puede resultar difícil para los visitantes del sitio web distinguir los enlaces del texto sin formato si no hay consideraciones de diseño adicionales para quienes ven desde un dispositivo móvil.
Imágenes flexibles
Los medios flexibles son relativos a la cuadrícula flexible, ya que estos tamaños generalmente se establecen como un porcentaje de una cuadrícula, lo que evita que el medio sea más grande que las cuadrículas en las que están colocados sin sacrificar su relación de aspecto.
Al hacerlo, se tiene la seguridad de que no importa cómo se cambie el ancho de la página, la imagen siempre se mostrará correctamente.
Gutenberg como forma de diseño responsivo
Diseñar un sitio web receptivo puede parecer un gran reto, sin embargo, la mayoría de los sistemas de gestión de contenido (por ejemplo, WordPress, Wix, Shopify) ya cuentan con funciones integradas que ayudan a los principiantes a hacer que los sitios web sean receptivos.
En el editor de bloques de WordPress, Gutenberg, se puede ver cómo se verá el sitio web cuando lo visualice desde una computadora de escritorio, tableta o dispositivo móvil.
Leíste: Diseño responsivo: qué es y cómo aplicarlo, te recomendamos: MLOps: qué es, características y habilidades
Síguenos en nuestras redes sociales: