El diseño receptivo es un término relativamente nuevo en el diseño web. Fue acuñado hace tres años en mayo de 2010, cuando el diseñador web Ethan Marcotte utilizó el término en su artículo para A List Apart.
Hoy en día, incluso hay un mini debate sobre si el diseño receptivo llegó para quedarse o si es solo un destello. Solo el tiempo dirá, pero por ahora, está claro que el diseño receptivo se esfuerza por hacer que la experiencia del usuario sea lo más cómoda posible.
El diseño receptivo es una filosofía de diseño web que se centra en crear sitios que brinden a los usuarios una experiencia de visualización mejorada. Esto incluye funciones como navegación y lectura sin esfuerzo, y un mínimo de cambio de tamaño del navegador, desplazamiento y panorámica. Todo esto tiene lugar en una amplia gama de dispositivos diferentes, desde computadoras de escritorio hasta teléfonos inteligentes.
Dado que este enfoque de diseño web todavía está en un estado incipiente, es posible que no tenga totalmente claro de qué se trata el diseño receptivo. ¿Se trata más de mostrar el contenido de manera transparente en múltiples plataformas, o se trata principalmente de ayudar a las empresas a construir sitios más atractivos para aumentar sus ventas a través de una mejor experiencia de usuario?
Mashable ya ha salido en una extremidad y llamado 2013, el año del diseño receptivo. Mientras que eso está por verse, algunos aspectos básicos del diseño receptivo son estándares que nunca desaparecerán. Aquí están los datos de diseño receptivos más importantes para familiarizarse.
Sería perdonado por pensar que el diseño receptivo y el diseño móvil son uno y el mismo, pero no lo son. Claro, el diseño receptivo crea sitios web para que ambos respondan al tamaño de un navegador y sean amigables para dispositivos móviles, pero el diseño receptivo es en realidad un diseño web completo. El problema de referirse a este enfoque de diseño web como diseño móvil es que es intrínsecamente limitante, lo que perjudica el enfoque en sí mismo.
Los sitios web receptivos más efectivos se pueden ver como deberían ser, a través de una gama de resoluciones. Esto incluye todo, desde los habituales 1024 × 768 píxeles a las pantallas de 1920 × 1080 y todo lo demás. Sitios como estos también lucen espléndidos en tabletas (tanto en retina como en pantallas estándar), así como también en teléfonos inteligentes. Si un diseñador web considera el diseño receptivo únicamente a través del contexto de un dispositivo móvil, es posible que se pierda una experiencia de usuario más amplia.
Al mismo tiempo, el móvil es un punto de partida realmente oportuno para toda la discusión de diseño receptivo. Ha sido la norma comenzar con un esquema móvil y luego expandir este diseño a tamaños adicionales a medida que se desarrolla un sitio web receptivo. Muchos diseñadores creen que es más sencillo crear imágenes en lugar de minimizarlas.
Si hay una regla que los diseñadores web deben seguir, es que la calidad de la imagen es mucho más vital que la cantidad real de imágenes. La razón es que una imagen de baja calidad simplemente no se ve atractiva en ningún tamaño. El tiempo que le toma a un sitio cargar una imagen es casi tan importante como el tamaño. Los usuarios móviles estarán de acuerdo con esto porque tienen un ancho de banda limitado con el que lidiar.
¿Qué es un diseñador web para hacer? Simplemente alcance un equilibrio inteligente entre el tiempo de carga y la calidad. Esto incluye escalar imágenes con las propiedades de alto y ancho de CSS, evitando cargar imágenes de tamaño completo y optimizando imágenes para Internet. Antes de realizar la carga, se recomienda encarecidamente recortar cualquier imagen y guardar cada imagen al menor tamaño posible, siempre que mantenga una calidad visual nítida.
Revisa El sitio web de Sony USA . Tenga en cuenta que todas las imágenes tienen una calidad súper nítida, independientemente del tamaño que tengan. Una vez que visite el sitio o actualice la página de inicio, también tenga en cuenta la velocidad de carga de las imágenes. No tiene que esperar más de un segundo para que todo se concentre de forma extremadamente nítida.
Los diseñadores tienen muchas opciones al incorporar imágenes en una configuración receptiva. Pueden usar solo algunas imágenes; disminuir el uso de imágenes dentro de esquemas de tamaño móvil; permitir imágenes para enmascararse en un entorno móvil; o utilice varios tamaños de archivos y versiones. Estas opciones funcionarán de manera efectiva, aunque algunos desarrolladores están en contra de ocultar imágenes, ya que el usuario aún tendrá que cargar las imágenes a pesar de que no las vea.
El tipo no debe ser de una sola talla para todos. Un tipo de fuente que parece atractiva a la vista en su escritorio puede ser horrible en su teléfono inteligente. La tipografía debe seguir las mismas reglas que otros aspectos del diseño receptivo.
El aspecto más importante de la tipografía receptiva es la longitud de la línea. Para facilitar la lectura, el tipo debe optimizarse según el ancho de la pantalla. La regla general, para sitios web de escritorio, es que entre 50 y 75 caracteres una línea es ideal; para dispositivos móviles, solo entre 35 y 50 caracteres es ideal.
El tipo también se debe leer fácilmente en forma vertical. Muchos sitios utilizan un espacio de línea que es hasta un 140 por ciento del tamaño del punto de la pantalla para bloques de texto más grandes. Si la pantalla es más pequeña, se debe agregar más espacio.
Incluso el tipo de letra específico que se utiliza es significativo. Las fuentes elegantes y los tipos de letra novedosos tienen la capacidad de verse visualmente atractivos en pantallas más grandes, pero son difíciles de leer si el tamaño de los puntos es pequeño. Este tipo de fuentes debe tener mucho espacio entre ellas. Cuando trabajas con tamaños más pequeños, es más fácil utilizar estilos sans serif normales e incluso trazos.
En Sitio de Hardboiled Web Design , puede ver que se siguen muchos de estos principios, lo que permite una buena receptividad. Observe cómo la longitud de línea de texto en un escritorio, aunque en promedio es mayor que la recomendación ideal de 50 a 75 caracteres, se compone de un tipo de letra que es limpia y fácil de leer. Además, el espacio de línea también es mayor que el tamaño del punto de la fuente. En los dispositivos móviles, la capacidad de respuesta del sitio es aún mejor: en una pantalla de iPhone 5, el número de caracteres por línea era de aproximadamente 67, lo que representa un poco más de la regla ideal de entre 35 y 50 caracteres.
En lo que respecta a la experiencia del usuario, que es uno de los factores más importantes en los que los diseñadores web deberían pensar, la navegación es la prioridad. La navegación debe ser fluida y eficiente para garantizar una experiencia de usuario cómoda.
Un diseño receptivo eficaz debe garantizar esto prestando especial atención al ancho específico de un navegador determinado. Un sitio que usa bien el diseño receptivo establecerá su navegación en diferentes áreas, todo depende del ancho del navegador. Uno de los mejores ejemplos de esto es Sentido de la comida Navegación del sitio.
Sería un error que el diseño receptivo escalara la navegación del sitio a mayores proporciones en dispositivos con pantallas más grandes.
Así que ahora, cuando escuche a los diseñadores web hablar sobre diseño receptivo, sabrá que no solo se trata de hacer que un sitio web se vea bien y funcionar sin problemas en pantallas móviles más pequeñas. Sabrá que este enfoque de diseño se basa en el principio de hacer que los sitios web de todos los tamaños brinden la experiencia más óptima para el usuario, sin importar lo que esté usando para ver el sitio.
El diseño receptivo sigue siendo un concepto relativamente nuevo, al menos para la mayoría de las personas que solo ven sitios web en Internet. Es por eso que muchas personas aún no pueden ponerse de acuerdo sobre qué hace que un diseño receptivo ... un diseño receptivo. ¿Se trata de ver todo correctamente en las pantallas de los dispositivos móviles? ¿Se trata solo de tiempos de carga e imágenes de alta calidad que agradarán a la vista? ¿Se trata de un diseño limpio y tipos de letra fáciles de leer?
Es todo eso y más. Esos son solo los fundamentos de este enfoque de diseño web, pero el diseño receptivo aún está evolucionando y cambiando, por lo que es muy probable que se consideren elementos adicionales. Al final, se trata de mejorar la experiencia del usuario, porque nadie quiere lidiar con un sitio web lento, borroso, difícil de leer, desordenado o difícil de navegar.
¿El diseño receptivo es solo una tendencia? ¿Cuáles son los aspectos clave del diseño receptivo? Háganos saber sus pensamientos en los comentarios.