Conceptos erróneos comunes sobre el diseño receptivo

Navego por Internet todos los días, en varios dispositivos. Utilizo mi Macbook Pro, iMac, PC, iPad, iPhone y sí, incluso mi televisor. Así que realmente me molesta cuando veo sitios web que no están optimizados para resoluciones de pantalla más grandes o que tardan dos minutos en cargarse en mi dispositivo móvil.

Todos hemos adoptado el concepto de diseño receptivo. Muy pocas personas se oponen a ello. De hecho, la única reenvío convincente que he escuchado recientemente es que un cliente no está dispuesto a pagar por el tiempo adicional involucrado. Pero al igual que con cualquier práctica nueva, los mitos han crecido para contrarrestarla.

Veamos si podemos romper algunos de esos conceptos erróneos …

El diseño receptivo se trata de dispositivos móviles

Sí, la web móvil está explotando y sí, es la fuerza impulsora detrás del diseño receptivo, pero cuando pensamos en el diseño receptivo, debemos considerar más que solo el móvil. Con la introducción de las pantallas retina y los navegadores de videojuegos, los usuarios de Internet ahora ven sitios web en resoluciones de pantalla más grandes y en muchos contextos diferentes.

Intente tener en cuenta los diferentes contextos de usuario al diseñar y desarrollar sitios web receptivos. Debe pensar en qué dispositivo está usando un usuario: ¿está el usuario en un dispositivo móvil o en casa frente al televisor? Debe pensar en dónde se encuentra el usuario: ¿está el usuario en la fila de la tienda de comestibles o acampando en el desierto? Tener buen contenido no significa nada si su sitio tarda diez minutos en cargarse mientras sus usuarios están sentados en la playa tomando una margarita.

El contenido lo es todo, pero el contexto está en todas partes y es algo sobre lo que no tienes absolutamente ningún control. Es por eso que, de manera realista, su contenido debe escalar a cualquier resolución, grande o pequeña. Tenemos un conjunto de herramientas a nuestra disposición que nos permitirán manipular diseños, optimizar el tamaño del texto y aumentar el rendimiento para cualquier contexto, así que recuerde utilizarlas.

Recuerde que el contexto está cambiando todo el tiempo, por lo que es tan importante equilibrar el diseño visual, las necesidades del usuario y el rendimiento al abordar un diseño receptivo. No se trata solo de dispositivos móviles.

El diseño receptivo no funciona para todos los casos de uso

Solía ​​argumentar que el diseño web receptivo no funcionará para todos los proyectos y que depende del caso de uso. Bueno, recientemente modifiqué mi punto de vista y creo firmemente que si vamos a ser diseñadores y desarrolladores enfocados en el usuario, debemos abordar cada proyecto con un diseño receptivo en mente.

Los sitios web de ancho fijo pueden limitar las resoluciones de pantalla más grandes y más pequeñas. La conclusión es que nuestros sitios web deben ser accesibles para todos, sin importar qué dispositivo o resolución de pantalla estén usando, sin restricciones.

El diseño receptivo se trata de puntos de interrupción del dispositivo

He notado una tendencia emergente en la industria en la que los diseñadores y desarrolladores están creando sitios web receptivos que escalan solo a ciertas resoluciones de dispositivos, y yo también soy culpable de esto. Los tres dispositivos más comunes son, por supuesto, computadoras portátiles / de escritorio, iPads y iPhones (u otros dispositivos móviles). Como diseñadores, debemos darnos cuenta de que el diseño receptivo se trata de diseñar puntos de interrupción y hacer que el contenido sea legible y accesible para todos, no solo para los usuarios de ciertos dispositivos.

Dicho esto, si está diseñando sitios web en un programa de software, es importante tener algún tipo de marco con puntos de interrupción para trabajar. Sugiero crear el tuyo propio. Optimice su diseño de acuerdo con el contenido. La mejor manera de averiguar qué puntos de interrupción funcionan mejor es dibujar algunos wireframes primero para tener una idea, luego puede comenzar a establecer píxeles en el software que elija. Asegúrese de trabajar con la misma cuadrícula al diseñar y hacer wireframes.

Si eres como yo, codificas tus wireframes y creas un prototipo en vivo. Esto me ha ayudado mucho con mi flujo de trabajo receptivo porque puedo crear una maqueta fluida y agregar puntos de interrupción al diseño a medida que el diseño se rompe en lugar de intentar abarrotar píxeles en Photoshop.

El diseño receptivo daña la tipografía

Uno de los mayores problemas que he notado en muchos sitios web receptivos es que la tipografía se lanza a los lobos cuando los diseñadores y desarrolladores eligen usar puntos de interrupción del dispositivo en lugar de los puntos de interrupción del diseño. En mi opinión, elegir el dispositivo en lugar del diseño muestra un total desprecio por el contenido que se publica y el usuario que consume ese contenido. El contenido debe mantener su legibilidad hasta que posee ajustar para mantener esa legibilidad. El contenido siempre será el rey y la accesibilidad y legibilidad de su contenido siempre debe ser la máxima prioridad.

Una de las formas en que me gusta manejar el mantenimiento de la legibilidad del contenido en un diseño receptivo es usar unidades relativas como ems para el tamaño de fuente, el relleno, los márgenes y el diseño. El diseño receptivo tiene que ver con diseños proporcionados y, en mi opinión, los ems encajan perfectamente.

Los ems son unidades relativas que son escalables al tamaño de fuente de los elementos principales, pueden ahorrarle mucho tiempo y molestias, y ayudan a mantener la estructura de todo su diseño. ¿Qué quiere decir esto que usted pide? Bueno, significa que a medida que el tamaño de fuente base aumenta o disminuye, el diseño se ajusta uniformemente sin alterar nada.

Aquí hay un ejemplo, digamos que hemos encontrado dos puntos de interrupción de diseño, uno para un monitor de escritorio muy grande con una superresolución y otro para una tableta pequeña. Digamos también que nuestro tamaño de fuente base es 16px, lo que equivale a 1.0em y aumentamos el tamaño de fuente base hasta 22px cuando el sitio se ve a una resolución de 3840 x 2160 (superresolución) y reducimos ese tamaño de fuente base a 14px a una resolución de 800 x 600 (pequeña computadora portátil / tableta). Acabamos de modificar drásticamente el tamaño del tipo y el diseño de nuestro sitio web en dos puntos de interrupción designados, uno grande y otro pequeño. Un título de 1.4em con un tamaño de fuente base de 22px para resoluciones más grandes significa que 1.4em equivale a 30.8px y con un tamaño de fuente base más pequeño de 14px, 1.4em equivaldría a 19.6px. A pesar de que nuestro tamaño de fuente aumentó dramáticamente a 3840 x 2160, no tenemos que preocuparnos por que el diseño se rompa porque también se ha ajustado. Digamos que nuestro elemento contenedor tiene un ancho de 50em. A una resolución de 800 x 600 sería 700px, pero a una resolución de 3840 x 2160 sería 1100px. Nuestro acolchado y márgenes también se ajustarían. En la resolución más grande, tener tamaños de fuente y diseño establecidos en ems ha permitido que nuestro diseño se escale proporcionalmente, lo que hace que nuestro contenido sea más accesible y más legible.

El diseño receptivo significa ocultar contenido

El propósito del diseño receptivo es hacer que su contenido sea accesible para todos, incluso para los discapacitados, en todas las resoluciones de pantalla y dispositivos. Ocultar contenido nunca es una buena idea y, lo más probable es que, si tienes que ocultarlo, no lo necesitas para empezar. Ocultar contenido hace que sea ilegible para los lectores de pantalla y ahora está haciendo que su contenido sea inaccesible para aquellos con discapacidades visuales o cognitivas. Tenga esto en cuenta, el contenido debe ser universal en todos los dispositivos, no castigue a sus usuarios limitando lo que pueden ver en un dispositivo separado.

Dicho esto, todavía encuentro algunos casos de uso en los que pantalla: ninguna; Viene muy bien. La mayoría de los casos de uso tratan con algún tipo de navegación, y yo uso pantalla: ninguna; en elementos de navegación que cambian de forma en diferentes dispositivos. Nunca es una buena idea limitar u ocultar contenido en diferentes dispositivos porque lo más probable es que haya basado esa decisión en una suposición y algún usuario, en algún lugar, tendrá una experiencia muy mala.

El diseño receptivo sacrifica el rendimiento

Ha habido una serie de sitios web que he visto últimamente que han mostrado una falta de empatía hacia los usuarios con poco ancho de banda. La mayoría de estos sitios tienen las mismas cosas en común, imágenes grandes y grandes bibliotecas de JavaScript, y muchos de estos sitios web podrían haberse optimizado si hubieran sido diseñados con un enfoque móvil primero.

Debido a que todavía hay mucha discusión sobre las imágenes receptivas, es difícil para cualquiera comprometerse con una solución. Entiendo el dilema, pero esperar una solución perfecta que sea estándar en todos los navegadores y dispositivos no hace que su sitio web actual sea más fácil de usar en dispositivos con ancho de banda limitado. Encuentre la solución que mejor solucione su problema y ejecútela. No encontrar una solución significa problemas de rendimiento para todos, y eso frustra por completo el propósito del diseño receptivo.

Las bibliotecas de JavaScript grandes también pueden causar problemas en dispositivos más pequeños. Intente encontrar una forma de llamarlos condicionalmente según la resolución de la pantalla o el tipo de dispositivo. El rendimiento no debería ser una ocurrencia tardía cuando se trata de un diseño receptivo.

Conclusión

La web se ha disparado y, con la llegada de la tecnología móvil y de los teléfonos inteligentes, podemos acceder al contenido en cualquier lugar y en cualquier contexto. Es importante asegurarnos de que podemos llegar a todos nuestros usuarios y darles lo que quieren, cuando lo quieren. El diseño receptivo es una técnica muy nueva y, en mi opinión, es la técnica perfecta para unificar nuestro contenido en la web.

¿Qué otros mitos sobre el diseño receptivo le gustaría desacreditar? ¿Hay inconvenientes en el diseño receptivo? Háznoslo saber en los comentarios.

Imagen destacada / miniatura, imagen web receptiva a través de Shutterstock.