Con la web móvil creciendo a un ritmo constante y Google confirmando que clasifica las páginas según su capacidad de respuesta, es crucial que su sitio web pueda adaptarse a una variedad de dispositivos y tamaños de pantalla diferentes.

Pero el diseño web receptivo es más que simplemente estirar o apretar su diseño para adaptarse. Se trata de entregar un solo sitio web de varias maneras diferentes, conservando el contenido y la funcionalidad.

Con eso en mente, aquí hay siete consejos de mejores prácticas para el diseño web receptivo.

1. Piensa receptivo

Cuando comenzó el diseño web receptivo, los diseñadores comenzaron planificando las pantallas más grandes y luego las redujeron hasta llegar a las más pequeñas. Con demasiada frecuencia, incluían elementos sofisticados que no se descomponían bien para adaptarse a una pantalla más pequeña, lo que llevó a que la versión móvil fuera una copia diluida del original y se sintiera como una ocurrencia tardía. Hoy en día, los dispositivos móviles comprenden el mayor volumen de tráfico para muchos sitios web, por lo que los usuarios móviles esperan y merecen la misma calidad de experiencia de navegación que otros usuarios. Pero eso tampoco significa que los tamaños de pantalla más grandes deban ignorarse. Mucha gente todavía usa un escritorio grande, y aún más saltan entre diferentes pantallas a lo largo del día.

La mejor manera de abordar esto es adoptar un enfoque de "móvil primero", diseñar primero para la pantalla más pequeña y luego agregar elementos según sea necesario a medida que aumenta el tamaño de la pantalla.

Concéntrese en diseñar para los puntos de interrupción populares, pero también tenga en cuenta las brechas intermedias: todos los días salen al mercado nuevos dispositivos y un tamaño de pantalla que apenas se usa hoy podría ser la gran novedad el próximo mes. Y recuerde considerar a las personas que usan sus tabletas en modo vertical: esto puede pasar desapercibido y terminar pareciendo un escritorio aplastado o un diseño móvil básico con mucho espacio desperdiciado.

2. Presta atención al contenido

No caiga en la trampa de un enfoque de 'ajustar a la medida', donde su atención se centra en encajar todos los elementos en una página sin tener en cuenta su contexto. Comience concentrándose en el contenido y las características que son más importantes, y sea brutal con respecto a qué elementos se enfrentan a la tajada. A medida que avanza en los diferentes tamaños de pantalla, cuestione su inclusión en cada etapa; si tiene que pensarlo durante demasiado tiempo, probablemente no necesite estar allí. Una vez que tenga claro el contenido y las características que necesita, puede comenzar a trabajar en el diseño. La gran variedad de tamaños de pantalla significa que el concepto tradicional de 'above the fold' está prácticamente muerto. La gente está acostumbrada a desplazarse, la llegada de sitios como Facebook y Twitter se ha encargado de eso, así que diseñe sus sitios de una manera que fomente el desplazamiento, pero retenga la información más importante en la parte superior de la pantalla. Esto incluye detalles de contacto, CTA y, en los sitios de comercio electrónico, el importante botón "Agregar a la cesta".

Priorice los elementos en función de su importancia para el usuario, por lo que si puede colocar texto junto a una imagen en un escritorio, piense detenidamente cuál es mejor para captar la atención de sus usuarios en un dispositivo móvil y asegúrese de que sea lo primero. Otros elementos, como una imagen de blog adjunta en una página de vista previa, podrían dejarse fuera de la versión móvil por completo, dejando el foco en el contenido en sí.

3. Experimenta con la navegación escalable

La navegación es uno de los aspectos más desafiantes del diseño web receptivo, pero también es uno de los más importantes. Contrariamente a la mayoría de las reglas de diseño web, este es un lugar en el que no necesita ser consistente: los menús grandes y complejos que se usan en pantallas grandes simplemente no funcionarán en los móviles, por lo que es perfectamente aceptable crear un tipo diferente de navegación para una pantalla diferente. tamaños La navegación oculta es popular en muchos sitios móviles, con un ícono simple como la hamburguesa que indica la presencia del menú. Puede deslizar el menú hacia abajo sobre el contenido a continuación o hacer que se superponga en toda la pantalla. Otra opción es optar por el deslizamiento horizontal, donde el contenido obviamente desaparece del costado de la pantalla y los usuarios pueden deslizarse para activarlo.

Cualquiera que elija, no rechace la consistencia por completo: su menú debe tener una sensación similar a otras versiones en términos de características visuales, incluso si tiene una funcionalidad diferente.

4. Todo sobre imágenes

La calidad de las imágenes en los sitios web es crucial, ya que forman una gran parte de las primeras impresiones de un visitante de un sitio. Pero las imágenes grandes tienen un efecto negativo en las velocidades de descarga de los dispositivos móviles con capacidades de ancho de banda más bajas. Al igual que el contenido, debe cuestionar la inclusión de cada imagen para cada tamaño de pantalla y solo incluir aquellas que sean absolutamente necesarias, mientras reconsidera elementos como los controles deslizantes que contienen varias imágenes grandes.

Optimice sus imágenes restantes, haciéndolas flexibles con tamaños adaptables, y guárdelas usando el formato apropiado. Recuerde, es poco probable que necesite la funcionalidad de 'ampliar imagen' en un dispositivo móvil, ya que la imagen probablemente aparecerá en pantalla completa de todos modos. Si necesita incluir galerías de imágenes, opte por la navegación de desplazamiento largo o use el deslizamiento horizontal para moverse entre ellas.

5. Piensa en la tipografía

La tipografía que elija requiere una consideración cuidadosa, ya que muchos tipos de letra que funcionan en una pantalla mediana o grande se vuelven demasiado difíciles de leer correctamente cuando se reducen para los tamaños de pantalla más pequeños, por lo tanto, siempre pruebe minuciosamente en diferentes pantallas. Equilibra tus encabezados con cuidado (su función debe ser obvia, aunque si son demasiado grandes pueden parecer demasiado dominantes) y asegúrate de que haya un contraste adecuado entre el color de fondo y la fuente.

A medida que avanza en los diferentes tamaños de pantalla, preste atención a la longitud de línea de su contenido: si una línea es demasiado larga, puede ser difícil de leer. Mantenga la longitud de las líneas entre 60 y 75 caracteres aproximadamente y, en pantallas más anchas, rellene el espacio con una barra lateral o imágenes.

6. Optimizar para pantallas táctiles

El diseño web receptivo no solo necesita tener en cuenta los diferentes tamaños de pantalla; también debe optimizarse para diferentes métodos de entrada. Y las pantallas táctiles pueden ser complicadas, por lo que es mejor ser generoso con los tamaños de los botones y los enlaces, con el objetivo de tener un área en la que se pueda hacer clic de aproximadamente 44 puntos cuadrados. También necesita optimizar su experiencia de usuario para pantallas táctiles. Sí, son intuitivos por su propia naturaleza, pero los asistentes de navegación sutiles, como los gestos de deslizamiento, son una valiosa adición.

7. Prueba en dispositivos reales

Finalmente, si bien la planificación de su diseño es un paso crucial, no confíe únicamente en la teoría. Hay emuladores móviles que ayudarán a verificar sus diseños y puntos de interrupción de CSS, pero nada supera a las pruebas en la realidad: muchos de estos emuladores solo replican los distintos tamaños de pantalla, pero no la funcionalidad de los diferentes sistemas operativos. Asegúrese de tener una variedad de pantallas de diferentes tamaños para jugar y una cantidad de usuarios diferentes, y pruebe sus diseños a fondo. Esto a menudo traerá un nuevo punto de vista y confirmará que está en el camino correcto o le mostrará dónde se pueden realizar mejoras.

El diseño web receptivo evoluciona y crece continuamente, y aquí solo hemos arañado la superficie. Las mejores prácticas para este campo también cambian con frecuencia, por lo que vale la pena mantenerse al día con los últimos desarrollos. Recuerde, muchos usuarios tienen un ancho de banda débil, baja resolución y poca potencia de procesamiento en sus dispositivos, por lo que su sitio debe ser simple, bien organizado, limpio, fácil de usar y verse bien en una variedad de pantallas diferentes.