Cuando el diseño responsivo va mal (y cómo solucionarlo)

La mayoría de los sitios web que utilizan un diseño responsivo lo utilizan incorrectamente, lo que genera problemas. El enfoque general del diseño responsivo es perezoso, y si adopta ese enfoque, algunos de sus sitios receptivos funcionarán de manera absolutamente impecable, y muchos de ellos no. Para aquellos que funcionan perfectamente, probablemente se trate de una cuestión de suerte.

El concepto de diseño responsivo es simple, pero su simplicidad es lo que lleva a las personas a cometer errores tan fácilmente. Los diseñadores con años de experiencia se han acostumbrado a diseñar para el escritorio, por lo que generalmente planean un diseño basado en un diseño de escritorio.

Los diseños de escritorio difieren de los diseños de tabletas y dispositivos móviles porque normalmente son de varias columnas, normalmente incluyen grandes cantidades de espacio en blanco, y todo es simplemente "grande", por falta de una palabra mejor. Si se utilizan técnicas de diseño receptivo, se supone que este diseño de varias columnas se divide en una sola columna.

Si eso es todo lo que hace su diseño de respuesta cuando se ve en un dispositivo móvil, es posible que tenga un problema. Cuánto de un problema depende de su actitud, pero a los buenos diseñadores les importa la buena experiencia del usuario. Se preocupan aún más por la mala experiencia de usuario. Si su sitio tiene UX incorrecto y desea ser un buen diseñador, entonces necesita arreglarlo.

Este problema al colapsar un diseño de varias columnas en una sola columna es que no funciona de manera proporcional. Si tiene que reducir algo horizontalmente y no hace ningún otro cambio, obviamente se expandirá verticalmente.

Vierta el agua de un vaso corto y gordo en uno alto y delgado, y el agua toma la forma del vaso alto y delgado, mientras que el volumen de agua permanece exactamente igual. Lo que los diseñadores deben entender es que con un sitio web, necesitamos el volumen para cambiar. Normalmente no es una buena idea cambiar la forma pero mantener el contenido exactamente lo mismo. Alguien tiene que ceder.

Alguien que realmente se haya ganado el título de diseñador entenderá que esto representa un problema que debe resolverse, y lo que realmente hacen los diseñadores es encontrar soluciones para los problemas. Por lo tanto, es el trabajo perfecto para que usted encuentre la mejor manera de entregar el contenido central del sitio sin convertir la experiencia del usuario en un frustrante festival de pergaminos. Estas son algunas de las cosas que vale la pena considerar al dividir un diseño de escritorio en un diseño móvil:

1. "Mobile First" es morónico

Lo siento, pero lo es. Todo el mundo está repitiendo esto, pero como concepto no es muy útil porque si realmente diseña "móvil primero", entonces será una pesadilla intentar escalarlo a un diseño de escritorio a menos que se quede con un diseño de una sola columna. arriba.

El mejor enfoque es diseñar físicamente al menos tres (y hasta 11) diseños diferentes. Los mínimos que puedes considerar incluyen:

  • Desktop
  • Paisaje móvil
  • Retrato móvil

Si quieres ser un poco más completo, también debes considerar:

  • Tableta de paisaje
  • Tableta de retrato

Y la lista completa, si quieres estar absolutamente completo sería:

  • Escritorio enorme
  • Escritorio ordinario
  • Tableta de paisaje grande
  • Tableta de retrato grande
  • Tableta de paisaje pequeño
  • Tableta de retrato pequeño
  • Gran paisaje móvil
  • Móvil de retrato grande
  • Pequeño paisaje móvil
  • Pequeño retrato móvil
  • Diminuto / Usable

Con tantas posibilidades diferentes, es obvio por qué un enfoque perezoso de “talla única para todos” es tan tentador, pero también es obvio por qué hay tantas maneras de arruinarlo.

2. Domina ese extenso pie de página

¿El diseño del escritorio incluye uno de esos enormes pies de página con muchos enlaces internos? Genial, eso probablemente será muy útil en un escritorio. En un teléfono móvil, parece ridículo y es más que un simple toque molesto. Puede diseñar pies de página completamente diferentes para cada punto de interrupción del dispositivo. Simplemente ponga esos enlaces de pie de página disponibles en un diálogo modal y todos ganarán.

3. Acepta algunas peculiaridades menores en dispositivos oscuros

Si un dispositivo en particular no es común, entonces no es tan malo si hay algunas peculiaridades en el diseño que aparecen solo cuando se visualizan en ese dispositivo. Cuanto más popular sea un dispositivo, más tendrás que trabajar para deshacerte de cualquier peculiaridad que aparezca en él.

4. Puedes ocultar contenido que no contribuya al mensaje central.

La parte más importante de un sitio es el mensaje central. Sí, en algunos sitios, la parte más importante es la publicidad y solo existen para publicarla, pero si tiene que elegir entre mostrar el mensaje principal o mostrar la publicidad, elija el mensaje. Google es más probable que te considere como persona non grata Si oculta contenido central y luego sirve un montón de anuncios. Es porque ese contenido central es en lo que Google lo indexó, y cuando ese contenido no se muestra, Google lo ve como engañoso.

Además, cosas como las imágenes que son puramente decorativas o estéticas, pero que no contribuyen significativamente al mensaje central, son candidatas para la reducción u ocultación del todo.

Algunas personas han propuesto que ocultar contenido es "castigar" a los usuarios móviles, pero esto es un poco absurdo. La realidad es que está ocultando el contenido porque está ahí para mejorar la experiencia de escritorio, pero no contribuye suficientemente al mensaje central del sitio para que sea necesario.

5. Puedes usar fondos alternativos

Recientemente recibí una asignación ridícula en la que el propietario del sitio había pagado por un fondo particular y quería que todo el contenido se adaptara a ese fondo. Los puntos de viñeta tenían que ser un número muy exacto de caracteres, el número total de líneas tenía que ser exacto, y así sucesivamente.

Esta es definitivamente una mala práctica en diseño web, porque deberías nunca Diseñar contenido para adaptarse a un diseño. El diseño debe siempre Ser diseñado para contener el contenido. Si por alguna razón el diseño no puede contener el contenido, entonces el diseño debería ser rediseñado, no el contenido. Es muy posible utilizar diferentes fondos para diferentes dispositivos. Eres un diseñador Use su imaginación.

El contenido es el elemento vital de un sitio web, y modificarlo o restringirlo en función de las restricciones de un diseño es un signo claro de falta de afición por parte del propietario del sitio, y un signo de que el diseño no fue diseñado correctamente en la primera lugar. Respete sus principios, porque ese cliente tendrá problemas si usted acepta.

El cliente siempre tiene la razón, excepto cuando ese cliente es un cliente de diseño web. Los clientes rara vez saben qué es lo mejor para ellos, y es importante que se haga valer como un diseñador web que sepa cómo proporcionar el resultado correcto para el cliente. De lo contrario, te arriesgas a crear otro sitio web. abominación.

6. Controle manualmente el orden de colapso (o evite las referencias espaciales dentro del contenido)

Este es un problema complejo. El orden de colapso de un sitio depende del orden en que se apilan los divs. Necesita apilar sus divs en el orden correcto para que se colapsen en el orden correcto.

Uno de los problemas que surgen de los creadores de sitios web WYSIWYG de arrastrar y soltar es que normalmente no puede dictar en qué orden se apilan los divs, y en los muy raros casos en que puede hacer eso, su arduo trabajo se deshace cada vez realiza la edición más pequeña y tendrá que volver a ingresar y hackear el código fuente nuevamente.

Si no controlas el orden de colapso, esta imagen explica claramente lo que puede salir mal. Además, debe evitar hacer referencias espaciales (como "en la columna de la izquierda"), ya que en un dispositivo móvil, cualquier cosa que esté a la izquierda o la derecha se puede desplazar hacia arriba o hacia abajo, más Si hace que el lector piense que es lo suficientemente importante como para desplazarse para ver, entonces tendrán que retroceder de nuevo, y eso no está bien.

7. Es posible que necesite diferentes tamaños de fuente para diferentes diseños

Es fácil controlar el tamaño de fuente con CSS y puede establecer diferentes tamaños de fuente e incluso diferentes tipos de letra (si se ven mejor) para tamaños de pantalla particulares. Puede encontrar el tamaño de la pantalla con las consultas de los medios de CSS, y luego modifica el tamaño de la fuente o la fuente para que esté en los valores que mostrarían el contenido para obtener la máxima ventaja en el tipo de dispositivo al que se dirige.

8. Es mejor usar imágenes de respuesta

Todas las imágenes deben responder siempre que sea posible. Esto conlleva que a veces el detalle de una imagen puede perderse si se reduce demasiado. Una solución a este problema es hacer que la imagen se pueda hacer clic para que el usuario pueda ver una versión ampliada de la imagen por separado del contenido. La forma normal de hacerlo es a través de un cuadro de diálogo modal.

imagen del encabezado cortesía de

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.