Datos imprescindibles sobre el diseño adaptable

El diseño receptivo es un término relativamente nuevo en el diseño web. Solo se acuñó hace tres años, en mayo de 2010, cuando el diseñador web Ethan Marcotte usó el término en su articulo para A List Apart.

Hoy en día, incluso hay un pequeño debate sobre si el diseño receptivo está aquí para quedarse o si es solo un destello en la sartén. Solo el tiempo lo 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 la creación de sitios que brindan a los usuarios una experiencia de visualización mejorada. Esto incluye características como navegación y lectura sin esfuerzo, y un mínimo de cambio de tamaño, desplazamiento y panorámica del navegador. Todo esto tiene lugar en una variedad de dispositivos diferentes, desde computadoras de escritorio hasta teléfonos inteligentes.

Dado que este enfoque de diseño web aún se encuentra 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 contenido sin problemas en múltiples plataformas, o se trata principalmente de ayudar a las empresas a crear sitios más atractivos para aumentar sus ventas a través de una mejor experiencia de usuario?

Mashable ya se ha arriesgado y llamada 2013 el año del diseño receptivo. Si bien eso está por verse, algunos aspectos básicos del diseño receptivo son estándares que nunca desaparecerán. Estos son los hechos de diseño receptivo más importantes con los que debe familiarizarse.

Existe una diferencia entre el diseño receptivo y el diseño móvil

Se le perdonará por pensar que el diseño receptivo y el diseño móvil son lo 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 compatibles con dispositivos móviles, pero el diseño receptivo realmente es un diseño web completo. El problema de referirse a este enfoque de diseño web como diseño móvil es que es inherentemente limitante, lo que perjudica al enfoque en sí.

Los sitios web con mayor capacidad de respuesta pueden verse como deben ser, en una variedad de resoluciones. Esto incluye todo, desde los habituales 1024 × 768 píxeles hasta las pantallas de 1920 × 1080 y todo lo demás. Sitios como estos también se ven espléndidos en tabletas (tanto retina como pantallas estándar), así como en teléfonos inteligentes. Si un diseñador web analiza el diseño receptivo únicamente a través del contexto de los dispositivos móviles, es posible que se esté perdiendo una experiencia de usuario más amplia.

Al mismo tiempo, los dispositivos móviles son un punto de partida realmente oportuno para toda la discusión sobre el 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 hacer crecer los elementos visuales que minimizarlos.

La calidad y el tamaño de la imagen son prioridades

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 tarda un sitio en 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é debe hacer un diseñador web? Simplemente alcance un equilibrio inteligente entre el tiempo de carga y la calidad. Esto incluye escalar imágenes con propiedades CSS de altura y ancho, evitar cargar imágenes de tamaño completo y optimizar imágenes para Internet. Antes de cargar, se recomienda encarecidamente recortar cualquier imagen y guardar cada imagen en el tamaño más pequeño posible, siempre que mantenga una calidad visual nítida.

Verificar Sitio web de Sony USA. Tenga en cuenta que todas las imágenes tienen una calidad súper nítida, sin importar el tamaño que tengan. Una vez que visite el sitio o actualice la página de inicio, también observe qué tan rápido se cargan las imágenes. No tiene que esperar más de un segundo para que todo se enfoque de manera extremadamente nítida.

Los diseñadores tienen muchas opciones al incorporar imágenes en un entorno receptivo. Pueden usar solo unas pocas imágenes; disminuir el uso de imágenes dentro de esquemas de tamaño móvil; permitir que las imágenes se enmascaren en entornos móviles; o utilizar varios tamaños y versiones de archivos. Estas opciones funcionarán de manera efectiva, aunque algunos desarrolladores están en contra de ocultar imágenes, porque el usuario aún tendrá que cargar las imágenes a pesar de que no las ve.

Hablemos de tipo receptivo

El tipo no debe ser de talla única. Un tipo de fuente que parece atractivo a la vista en su escritorio puede resultar 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 una legibilidad fluida, el tipo debe optimizarse en función del ancho de la pantalla. La regla general, para los sitios web de escritorio, es que entre 50 y 75 caracteres por línea es ideal; para dispositivos móviles, lo ideal es solo entre 35 y 50 caracteres.

El texto también debe leerse fácilmente en vertical. Muchos sitios utilizan un espacio de línea que es hasta el 140 por ciento del tamaño en puntos 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 las tipografías novedosas tienen la capacidad de verse visualmente atractivas en pantallas más grandes, pero son difíciles de leer si el tamaño en puntos es pequeño. Este tipo de fuentes deben tener mucho espacio entre ellas. Cuando trabaja 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 genera una buena capacidad de respuesta. Observe cómo la longitud de la 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 limpio y fácil de leer. Además, el espacio entre líneas también es mayor que el tamaño en puntos de la fuente. En los dispositivos móviles, la capacidad de respuesta del sitio funciona aún mejor: en una pantalla de iPhone 5, la cantidad de caracteres por línea era de aproximadamente 67, que es un poco más de la regla ideal de entre 35 y 50 caracteres.

No te olvides de la navegación

Cuando se trata de la experiencia del usuario, que es uno de los factores más importantes en los que los diseñadores web deben pensar, la navegación es una de las principales prioridades. La navegación debe ser fluida y eficiente para garantizar una experiencia de usuario cómoda.

El diseño de respuesta eficaz debe garantizar esto prestando especial atención al ancho específico de un navegador determinado. Un sitio que utiliza bien el diseño receptivo distribuirá la navegación del sitio en diferentes áreas, todas dependiendo del ancho del navegador. Uno de los mejores ejemplos de esto es Sentido de la comidanavegación del sitio.

Sería un error para el diseño receptivo escalar la navegación del sitio a proporciones más grandes en dispositivos con pantallas más grandes.

La conclusión del diseño receptivo

Entonces, cuando escuche a los diseñadores web hablar sobre diseño receptivo, sabrá que no se trata solo de hacer que un sitio web se vea bien y funcione 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 al usuario, sin importar lo que estén 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 todavía no pueden ponerse de acuerdo sobre qué hace que el diseño receptivo sea… diseño receptivo. ¿Se trata de ver todo correctamente en las pantallas de los 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 también 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.

Imagen destacada / miniatura, vía s58y