3 Desastres de diseño receptivo y cómo evitarlos
Los métodos de diseño receptivo son muy útiles para los desarrolladores, ya que nos permiten ofrecer contenido a la más amplia gama de dispositivos sin tener que mantener versiones separadas del sitio y sin algunos de los inconvenientes negativos de otros métodos, como la escala y los diseños de fluidos.
Este artículo destacará los 3 principales errores que los diseñadores encuentran con los diseños responsivos, y proporcionará algunas estrategias para evitar estos errores.
Escalado vs. fluido vs. sensible
Hay mucha confusión sobre estos términos y los diseñadores a menudo los usan incorrectamente de manera intercambiable. En verdad, cada uno de estos son pasos evolutivos distintos en la técnica de diseño que han surgido a lo largo del tiempo en línea con los avances en la tecnología.
Los diseños de escala están diseñados para escalar cada elemento relativo a cualquier otro elemento . Son receptivos en el sentido de que escalarán el contenido de forma dinámica en respuesta a los cambios en el tamaño de la ventana gráfica. El diseño en sí permanece estático, cambiando el tamaño de cada elemento para mantener una apariencia uniforme.
Arriba: ejemplo de un diseño de escala en diferentes resoluciones: el diseño sacrifica la legibilidad por consistencia.
Los diseños de fluidos son diferentes porque escalan los elementos del contenedor en relación con el tamaño de la ventana gráfica . Esto se logra mediante el uso de unidades relativas, como ems, para superar el problema del encogimiento del texto. El diseño se puede romper si el usuario lo escala.
Arriba: ejemplo de un diseño fluido a diferentes resoluciones: el diseño sacrifica la consistencia para la legibilidad.
Los diseños receptivos no escalan nada. En cambio, cambian lo que se muestra dependiendo del tamaño de la ventana gráfica.
Arriba: un ejemplo de un diseño receptivo en diferentes resoluciones.
Desastre 1) Envolver menús
Si usa una barra de navegación en la parte superior de la página, se supone que un diseño receptivo debe "ajustarse" a un formato más compacto cuando la página se muestra en una pantalla pequeña. Pero esto no siempre funciona a la perfección si el área de visualización es más ancha que el punto de ruptura, pero demasiado pequeña para mostrar todos los elementos del menú en una sola línea. El resultado es un menú que se envuelve.
Hay varias formas de resolver este problema. El primero es reducir el número de elementos que se muestran horizontalmente en la barra de navegación clasificándolos en categorías y subcategorías. Luego puede usar elementos desplegables para mostrar las subcategorías cuando se selecciona una categoría.
La segunda forma es cambiar el punto de ruptura a un valor inferior. El número real que se debe usar es el ancho al que la barra de navegación comienza a fallar, no un tamaño de dispositivo específico.
La tercera forma es usar un menú diferente para dispositivos, como un cajón deslizante.
Desastre 2) Usar imágenes de ancho fijo
Las áreas de contenido suelen tener un tamaño relativo a la ventana gráfica. Por lo tanto, cuando una imagen de ancho fijo es más ancha que el tamaño del área, se produce un recorte de imagen.
Arriba: ejemplo de una imagen de ancho fijo malo que es demasiado grande: ahora tiene barras de desplazamiento y el contenido se desplaza fuera de la pantalla.
Puede evitar este problema usando unidades relativas para establecer el ancho de la imagen, o si usa un marco que lo soporte (como Bootstrap) puede usar una clase de imagen receptiva (por ejemplo: class = "img-responsive" ).
Arriba: El mismo elemento con un enfoque de clase de imagen receptiva: ahora la barra de desplazamiento se ha ido.
Desastre 3) Distorsión del elemento
Este es un poco más oscuro, pero esencialmente lo que sucede cuando su diseño se muestra en una pequeña ventana es que las columnas no manejadas se comportan como filas. Esto es un problema porque la distorsión del contenido cambia involuntariamente la jerarquía de su diseño.
Arriba: la columna se convierte en una fila, distorsionando el contenido.
La solución es obvia, sin embargo, es sorprendente cuántas personas luchan con ella: simplemente establezca la altura, el ancho y el relleno del elemento de forma explícita. Si se mueve fuera de posición y cubre otros elementos, puede forzarlo a que esté donde lo desea envolviéndolo en un div y estableciendo márgenes.
La planificación ayuda a evitar errores
Este artículo ha discutido solo los 3 desastres de diseño que responden más comúnmente, pero hay muchas otras maneras para que un buen diseño salga mal. La prevención de errores no es muy difícil. Los navegadores modernos tienen pruebas integradas de diseño receptivo, por lo que planifique bien su diseño y realice pruebas con frecuencia.