Navego por Internet todos los días, en múltiples dispositivos. Uso mi Macbook Pro, iMac, PC, iPad, iPhone y sí, incluso mi televisor. Entonces 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 discuten en contra. De hecho, el único resúmen convincente que he escuchado recientemente es que un cliente no está dispuesto a pagar por el tiempo adicional involucrado. Pero como con cualquier práctica nueva, los mitos han crecido para contraponerlo.
Veamos si podemos descifrar algunos de esos conceptos erróneos ...
Sí, la web móvil está explotando y sí, es la fuerza que impulsa el diseño receptivo, pero cuando pensamos en un diseño receptivo, debemos considerar algo más que solo el móvil. Con la introducción de pantallas de retina y navegadores de videojuegos, los usuarios de Internet ahora están viendo sitios web en resoluciones de pantalla más grandes y en diferentes contextos.
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 a la televisión? Debe pensar dónde se encuentra el usuario: ¿está el usuario en fila en la tienda de comestibles o acampando en el desierto? Tener un 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. Por eso, 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 tamaños de texto y aumentar el rendimiento para cualquier contexto, así que recuerde usarlos.
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.
Solía decir 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 centrados 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 cada vez más grandes. 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.
He notado una tendencia emergente en la industria donde los diseñadores y desarrolladores están creando sitios web receptivos que se adaptan solo a ciertas resoluciones de dispositivos, y 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, tenemos que darnos cuenta de que el diseño receptivo se trata de diseñar puntos de corte 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 corte para trabajar. Te sugiero que crees el tuyo. Optimiza tu diseño de acuerdo con el contenido. La mejor manera de descubrir qué puntos de interrupción funcionan mejor es dibujar unos pocos wireframes primero para tener una idea, luego puede comenzar a establecer píxeles en el software de su elección. Asegúrese de trabajar fuera de la misma cuadrícula cuando realice wireframing y diseñe.
Si eres como yo, entonces codifica 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 se rompe el diseño en lugar de tratar de meter los píxeles en Photoshop.
Uno de los mayores problemas que he notado en una gran cantidad de sitios web receptivos es que la tipografía se lanza a los lobos cuando los diseñadores y desarrolladores eligen utilizar los puntos de interrupción del dispositivo sobre los puntos de corte del diseño. En mi opinión, elegir el dispositivo sobre el diseño muestra una total indiferencia por el contenido que se publica y el usuario que consume ese contenido. El contenido debe mantener su legibilidad hasta que tenga que ajustarse 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 tamaño de letra, relleno, márgenes y diseño. El diseño receptivo se trata de diseños proporcionales y, en mi opinión, los ems son perfectos.
Los Ems son unidades relativas que son escalables según el tamaño de fuente de los elementos principales, pueden ahorrarle mucho tiempo y problemas, y ayudan a mantener la estructura de su diseño completo. ¿Qué quiere decir esto que usted pide? Bueno, esto significa que a medida que el tamaño de fuente base aumenta o disminuye, el diseño se ajusta de manera uniforme sin alterar nada.
Aquí hay un ejemplo, digamos que hemos encontrado dos puntos de corte de diseño, uno para un monitor de escritorio muy grande con una resolución súper y otro para una tableta pequeña. Digamos también que nuestro tamaño de fuente base es 16px, que equivale a 1.0em, y aumentamos el tamaño de fuente base hasta 22px cuando el sitio se ve con una resolución de 3840 x 2160 (superresolución) y bajamos 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 en 1.4em con un tamaño de fuente 22px para resoluciones más grandes significa que 1.4em es igual a 30.8px y en el tamaño de letra 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 la disposición del diseño porque también se ha ajustado. Digamos que nuestro elemento contenedor tenía un ancho de 50em. Con una resolución de 800 x 600 eso sería 700px pero a la resolución de 3840 x 2160 sería 1100px. Nuestro relleno y márgenes se ajustarían también. En la resolución más grande que tiene el tamaño de fuente y el diseño establecido en ems, nuestro diseño se ha escalado proporcionalmente, lo que hace que nuestro contenido sea más accesible y más legible.
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 tiene que ocultarlo, no lo necesita para empezar. Ocultar contenido lo hace ilegible para los lectores de pantalla y ahora está haciendo que su contenido sea inaccesible para las personas con discapacidades visuales o cognitivas. Tenga esto en cuenta, el contenido debe ser universal en todos los dispositivos, no castigue a los usuarios al limitar lo que pueden ver en un dispositivo diferente.
Dicho esto, todavía encuentro algunos casos de uso donde mostrar: ninguno; Viene muy bien. La mayoría de los casos de uso se refieren a algún tipo de navegación, y uso display: none; en elementos de navegación que cambian de forma en diferentes dispositivos. Nunca es una buena idea limitar u ocultar el 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.
Ha habido una serie de sitios web que he visto últimamente que han demostrado 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 de gran tamaño y grandes bibliotecas de JavaScript, y muchos de estos sitios web podrían haberse optimizado si se diseñaron con un primer enfoque móvil.
Debido a que todavía hay mucho debate sobre imágenes receptivas, es difícil para cualquiera comprometerse con una solución única. 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 corra con él. No encontrar una solución significa problemas de rendimiento para todos, y eso frustra completamente el propósito del diseño receptivo.
Las grandes bibliotecas de JavaScript también pueden causar problemas en dispositivos más pequeños. Intente encontrar una forma de llamarlos de forma condicional en función de la resolución de pantalla o el tipo de dispositivo. El rendimiento no debe ser una idea de último momento cuando se trata de un diseño receptivo.
La web se ha disparado y con el advenimiento de la tecnología móvil y de teléfonos inteligentes podemos acceder al contenido en cualquier lugar y en cualquier contexto. Es importante asegurarse de que podamos llegar a todos nuestros usuarios y darles lo que quieran, cuando lo deseen. 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 diseño receptivo te gustaría desacreditar? ¿Hay algún inconveniente en el diseño receptivo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen web sensible a través de Shutterstock.