Los fundamentos del diseño adaptativo

Los días del diseño adaptado exclusivamente a las pantallas de escritorios de computadoras regulares han terminado definitivamente. El desarrollo rápido de la tecnología y la expansión de los sitios web móviles conducen a que los diseñadores web empiezan a preocuparse por el funcionamiento de sus proyectos en varios dispositivos modernos.

¿Qué es el diseño adaptativo/responsivo/adaptable?

En dos palabras, el diseño web responsivo (RWD) es una técnica especial que permite hacer que el diseño y el código del sitio web se adapten al tamaño de la pantalla del dispositivo. Lo que implica que esta técnica garantiza una experiencia de visualización óptima, independientemente del dispositivo que se utiliza, ya sea un teléfono móvil en Android, iPad mini o una pantalla de 40 pulgadas.

Los mejores sitios web adaptativos https://www.templatemonster.com/es/caracteristicas/opciones/diseno-responsive/ esencialmente utilizan tales cosas como fluid grids (rejillas fluidas), imágenes flexibles y estilos CSS para que sus diseños se adapten automáticamente al ancho del navegador web. Pues, para los diseñadores, el objetivo final debe consistir en conseguir que la interfaz de usuario y la experiencia de usuario sean impecables en diferentes dispositivos y plataformas.

¿Por qué es tan importante el diseño adaptable?

Si tuviéramos que diseñar innumerables versiones de un solo sitio web que fueran adaptadas a todos los dispositivos conocidos por el momento, todo el proceso tomaría demasiado tiempo y sería muy costoso! Por otro lado, este tipo de sitios web son poco efectivos en vista de los futuros cambios tecnológicos, así como casi imposibles de mantener. Así que, el diseño adaptativo es una solución mucho más eficaz para desarrollar una página web preparada para los cambios de la tecnología.

Cuando se trata del diseño adaptable, lo más importante es conocer a tu audiencia y saber qué dispositivos utiliza para abrir tu sitio web. Aproximadamente el 56% del tráfico de los Estados Unidos proviene de los dispositivos móviles. Hoy en día hay alrededor de 2,6 mil millones de usuarios de teléfonos inteligentes y en el año 2020 su número será más de 6 mil millones. El diseño móvil nunca ha sido más importante.

Por lo tanto, es fundamental diseñar sitios web optimizados para diversos dispositivos, pero esta tarea se vuelve más complicada cuando se trata de la optimización para diferentes navegadores web. Cada uno de los principales navegadores web tiene su propia versión móvil y trate sitios web de manera diferente. Aún más, hay muchas versiones de los navegadores existentes que también debes tener en cuenta, como no puedes esperar a que todos los usuarios utilicen la última versión. Pues, es importante que el diseño funcione y adapte a una variedad de versiones del navegador web.

¿Qué dimensiones de pantallas es necesario tener en cuenta?

De hecho, no hay “tamaño universal”. Hay cientos de dispositivos por ahí, y los tamaños de diferentes modelos y las resoluciones de sus pantallas cambian todo el tiempo. Por otro lado, todo sitio web individual atrae a los usuarios que prefieren los dispositivos determinados. Por ejemplo, es más probable que busques una receta en la Web por medio de tu dispositivo móvil (a la hora de cocinar algo) y un tutorial de Photoshop por tu ordenador (cuando necesitas editar algo por medio de Photoshop).

La herramienta como Google Analytics puede ayudarte a entender qué navegadores y tamaños de páginas web son los más populares en cuanto a tu sitio web.

Sin embargo, en vista de infinitas combinaciones posibles de tamaños de navegadores y tamaños de pantallas de dispositivos, ¿cómo es posible diseñar un sitio sin perder la cabeza?

Trata de diseñar al menos 3 diseños

Todo sitio web moderno debe tener al menos 3 diseños optimizados para diferentes anchos del navegador.

• Pequeño: menos de 600px. Así es como se verá el contenido en la mayoría de los teléfonos.
• Medio: 600px – 900px. Así es como se verá el contenido en la mayoría de las tabletas, algunos teléfonos grandes y pequeños ordenadores similares a netbooks.
• Grande: más de 900px. Así es como se verá el contenido en la mayoría de las computadoras personales.

Cada uno de estos diseños debe incluir el mismo texto y los mismos elementos gráficos, pero cada uno de ellos debe estar optimizado para mostrar este contenido de la mejor manera posible en el dispositivo determinado que utiliza el usuario.

Cosas a considerar

• Experiencia de usuario tiene un papel clave: la idea del diseño adaptativo consiste en algo más que simplemente convertir un sitio de escritorio en un sitio optimizado para móviles. Nunca se puede olvidar de la experiencia del usuario, su interacción y el contenido que se busca por medio de un dispositivo móvil particular.
• No crees una versión del sitio adaptada al dispositivo móvil más nuevo con el tamaño de pantalla específico. En su lugar, diseña tu sitio web de acuerdo con su contenido. Piensa en ¿Cómo funcionará el diseño y sus elementos en el escritorio y cómo cambiarán los mismos elementos en el dispositivo móvil?
• Compromiso: la jerarquía del diseño es muy importante, especialmente en caso de los móviles. A menudo menos es más. La experiencia móvil en comparación con la experiencia de escritorio es mucho más limitada por el espacio, por lo que la forma en la que los usuarios leen y navegan por tu sitio debe ser realmente clara para que ellos puedan entender su mensaje clave y de qué se trata en general. También hay que considerar la acción principal de la página. Si el objetivo clave es convencer a la gente de que haga clic en el botón ‘Contáctenos’, no lo ocultes en la parte inferior de la página debajo de los bloques de texto. Adapta tu contenido y diseño, basándote en esa experiencia.
• Las imágenes flexibles son realmente importantes en el diseño responsivo. Es necesario pensar en cómo se escalará cada una imágen del sitio. ¿Cómo se verá en una gran pantalla de escritorio, en una tableta y en una pequeña pantalla de teléfono móvil? Desde una perspectiva del desarrollo web, el código permite hacer que las imágenes se adapten automáticamente. Es posible hacerlo con la ayuda de los valores de porcentaje que se cambian de acuerdo al ancho de la ventana del navegador.
• La navegación es también importante cuando se trata de la experiencia del usuario que navega por tu página web. Hay varias maneras comunes de “disminuir” grandes menús con un montón de contenido. Por ejemplo, puedes optar por un menú de hamburguesa bien conocido o un menú desplegable sencillo, aumentar/reducir los tamaños de varios campos o incluso utilizar pestañas que se desplazan horizontalmente como en YouTube.
• Los gestos abren nuevas posibilidades de diseño. A la gente le encanta leer con sus manos e interactuar con el contenido. En los móviles y las tabletas, los usuarios pueden acercar o deslizar imágenes con sus dedos. La interacción afecta en gran medida el diseño. Por ejemplo, si tienes una galería de imágenes, evita utilizar un carrusel estándar con puntos pequeños. Piensa en el tamaño del dedo de una persona y busca una solución de interfaz de usuario más adecuada. Según los estudios de Apple, el tamaño mínimo óptimo del elemento “táctil” de la interfaz de usuario es 44 x 44 px. Lamentablemente, este límite se rompe a menudo.
• Diseña al menos 3 versiones optimizadas para anchos determinados de navegador. Es decir, necesitas una versión de menos de 600px, una de 600px-900px y una de 900px+. Entre esos anchos, tu contenido puede escalar libremente o puedes optar por 3 diseños fijos. Tener 3 (o más) diseños fijos y agregar márgenes cuando sea necesario es generalmente más fácil que diseñar e implementar la escala fluida (fluid scaling). Sin embargo, fluid scaling puede garantizar una mejor experiencia de usuario en un número mayor de dispositivos.

Herramientas y recursos

• Tu navegador web puede parecer una herramienta obvia, pero de hecho es el recurso más efectivo cuando necesitas previsualizar tus diseños en la Web. Instala un par de navegadores diferentes para obtener una mejor retroalimentación.
• Tu dispositivo móvil es otra herramienta obvia, pero realmente útil porque muestra exactamente cómo tu sitio web se verá en las condiciones específicas.
• Fluid grids es una técnica de diseño que se basa en valores de porcentaje en lugar de píxeles establecidos. Por ejemplo, el ancho del contenido en una pantalla de escritorio podría ser 930px, pero deseas que se vuelva 320px en el móvil. Para hacerlo necesitas utilizar los porcientos, pues, el resultado sería 320/930 = 34.4%. Al aplicar esto al tamaño de pantalla móvil, los elementos de diseño cambiarán de tamaño de manera adecuada.
• Google’s resizer es un buen recurso para previsualizar rápidamente tu sitio web en diferentes dispositivos.
• Media queries es un tipo de código que se implementa en tu sitio cuando se construye. Es importante tener este código porque establece las condiciones para que el diseño se adapte mágicamente al tamaño de la pantalla.

Y no te preocupes, como el diseño adaptativo es un desafío para todos los desarrolladores en la Web. Lo mejor que puedes hacer es seguir las últimas prácticas de UI/UX, diseñar centrándote en el contenido, mantener tus imágenes flexibles, siempre pensar en la mejora de la navegación del sitio y recordar que la experiencia del usuario es la clave del éxito.

P.S. En cuanto a los modelos de páginas web prediseñados, te recomendamos que eches un vistazo a las plantillas adaptativas de TemplateMonster.