LO QUE DEBES SABER SOBRE EL DISEÑO WEB RESPONSIVO

De ClickPanda
0 Comenta

Si quieres saber cómo puedes crear páginas web que respondan a las necesidades y capacidades según el dispositivo desde el cual tu usuario navega, quédate acá y lee este artículo donde te contaremos los conceptos básicos del diseño web responsivo.

¿Qué es el diseño web responsivo?

Como te puedes dar cuenta en tu día a día, el uso de teléfonos móviles y tabletas para navegar por internet sigue creciendo a gran ritmo.

Los teléfonos y tabletas están limitados por el tamaño de su pantalla y requieren de un enfoque diferente sobre cómo se presenta el contenido.

banner

El diseño web responsivo, se encarga de reconocer las necesidades de los usuarios según el dispositivo que utilicen para navegar.

El diseño responsivo se ocupa de diseñar el contenido de una página web según el tamaño y las capacidades del dispositivo. Por ejemplo, en un celular, los usuarios ven el contenido en una sola columna, mientras que en una tableta se puede mostrar el mismo contenido en dos columnas.

Existe gran variedad en los tamaños de las pantallas, además las medidas de estas cambian constantemente, por esta razón, es importante que el contenido de tu página web pueda adaptarse a cualquier tamaño de pantalla.

A continuación, te explicaremos los conceptos básicos sobre diseño responsivo para que puedas emplearlos y, así, tus usuarios no se perderán de nada y disfrutarán mientras navegan por tu web.

Conceptos básicos del diseño web responsivo

  1. Configura la ventana gráfica:

Las páginas optimizadas, para diferentes tipos de dispositivos, deben incluir una meta etiqueta de ventana gráfica en el encabezado del documento.

Una meta etiqueta de ventana gráfica le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.

El uso del valor de la meta etiqueta de ventana gráfica “width=device-width” indica a la página que coincida con el ancho de la pantalla en pixeles independientes del dispositivo, esto permite que la página redistribuya el contenido para que coincida con diferentes tamaños de pantalla.

Algunos navegadores mantienen el ancho de la página cuando se gira el dispositivo al modo horizontal y hacen zoom en lugar de volver a acomodar el contenido para llenar la pantalla. Agregar el valor “initial-scale=1” indica a los navegadores que establezcan una relación 1:1 entre los pixeles del CSS y los pixeles independientes del dispositivo, sin importar la orientación del dispositivo, además permite que la página aproveche todo el ancho.

  • Adapta el contenido

Los usuarios están acostumbrados a moverse por los sitios web de forma vertical, casi no se desplazan de forma horizontal, por los tanto, obligarlos a desplazarse horizontalmente o a alejarse para ver toda la página, puede ser una mala experiencia para tu usuario.

Al desarrollar un sitio web móvil con una meta etiqueta de ventana gráfica, es fácil crear contenido que no encaje del todo dentro de la ventana gráfica especificada. Por eso, recuerda que debes ajustar el contenido para que se ajuste al ancho de la ventana gráfica, de modo que el usuario no necesite desplazarse horizontalmente.

  • Cuida las imágenes:

Una imagen tiene dimensiones fijas y si es más grande que la ventana gráfica se creará una barra de desplazamiento. Para solucionar este problema puedes dar a todas las imágenes un “max-width” del 100%, con esto lograrás que las imágenes se encojan para ajustarse al espacio disponible.

Cuando usas “max-width” de 100% anulas las dimensiones originales de la imagen; sin embargo, aun así, debes usar los atributos de “width” y “height” en la etiqueta: <img>.

  • Diseño en cuadrículas flexibles:

Las dimensiones y el ancho de la pantalla en pixeles del CSS varían entre dispositivos, por esto el contenido no debe depender de un ancho de ventana.

Las técnicas modernas de diseño de CSS como: Flexbox, Diseño de cuadrículas y Multicol, facilitan la creación de estas cuadrículas flexibles, para que el contenido se ajuste a los diferentes tamaños de ventana.

Te contaremos brevemente cómo funciona cada una:

  • Flexbox

Este método de diseño es perfecto para cuando tienes un conjunto de elementos de diferentes tamaños y te gustaría que encajen en una fila o más.

En un diseño responsivo, puedes usar Flexbox para mostrar elementos en una sola fila o en varias filas a medida que disminuye el espacio disponible.

  • Diseño de cuadrículas CSS

Este tipo de diseño te permite la creación sencilla de cuadrículas flexibles. Puedes usar el diseño de cuadrícula y la “fr”, que representa una parte del espacio disponible en el contenedor.

La cuadrícula también se puede utilizar para crear diseños regulares, con tantos elementos como quepan. El número de pistas disponibles se reducirá a medida que se reduzca el tamaño de la pantalla.

  • Diseño de varias columnas

Para ciertos tipos de diseño, puedes usar un diseño de columnas múltiples (Multicol), con el que puedes crear varias columnas responsivas con la propiedad de “column-width”.

  • Mejorar la capacidad de respuesta con consulta de medios:

Seguramente, en algún punto, necesitarás realizar cambios más extensos en tu diseño para permitir ajustes en pantallas de un tamaño fuera de lo común, donde no te servirán las técnicas que te acabamos de explicar.

Las consultas de medios son filtros simples que se pueden aplicar a los estilos CSS.  Estos facilitan el cambio de estilo según el tipo de dispositivo donde se verá el contenido.

Para proporcionar diferentes estilos, debes apuntar a un tipo de salida para poder incluir los estilos de impresión de la siguiente manera:

Para el diseño web responsivo, debes consultar las características del dispositivo para proporcionar un diseño diferente para pantallas más pequeñas, o cuando detectas que tu usuario está usando una pantalla táctil.

  • Consulta de medios basada en el tamaño de la ventana gráfica:

La consulta de medios te permite crear una experiencia responsiva donde se aplican estilos específicos a cualquier tamaño de pantalla. La “característica” que se quiere detectar es el tamaño de la pantalla, con la que puedes probar las siguientes cosas:

  • width ( min-width max-width )
  • height ( min-height max-height )
  • orientation
  • aspect-ratio

Todas estas “características” tienen una excelente compatibilidad con los navegadores; para obtener más detalles, incluyendo la información de soporte del navegador, debes consultar el ancho, la altura, la orientación y la relación de aspecto en MDN.

  • Consultas de medios basadas en la capacidad del dispositivo:

Como sabes, en el mercado hay miles de dispositivos disponibles. Con algunas adiciones que son más recientes a la especificación de consultas de medios, puedes probar “características” como el tipo de puntero utilizado para interactuar con el dispositivo y si el usuario puede desplazarse sobre los elementos.

  • hover
  • pointer
  • any-hover
  • any-pointer

Estas funciones más recientes tienen un buen soporte en todos los navegadores modernos.

  • Usando any-hover y any-pointer

Las funciones de “any-hover” y “any-pointer” comprueban si el usuario tiene la capacidad de pasar el ratón sobre un elemento (hover). Ten cuidado al usarlos, pues tu usuario puedes sentirse obligado a usar el ratón cuando está empleando su pantalla táctil.  

  • Cómo elegir los breakpoints:

No definas los breakpoints basado en los diferentes tipos de dispositivos.

Elije los breakpoints principales comenzando con algo pequeño. Primero diseña el contenido para que se ajuste a un tamaño de pantalla pequeño, luego expande la pantalla hasta que sea necesario un breakpoint. Esto te permite optimizar los breakpoints según el contenido y mantener la menor cantidad de breakpoints posible.

Además de elegir breakpoints importantes cuando el diseño cambia significativamente, también es útil ajustarlos para cambios menores. Por ejemplo, entre los breakpoints principales puede resultar útil ajustar las márgenes o el relleno de un elemento, o aumentar el tamaño de la fuente para que se sienta más natural en el diseño.

  • Optimiza el texto para leer:

La teoría clásica de la legibilidad sugiere que una columna ideal debe contener de 70 a 80 caracteres por línea (aproximadamente de 8 a 10 palabras en inglés). Por lo tanto, cada vez que el ancho de un bloque de texto supere las 10 palabras, considera agregar un breakpoint.

  1. Evita ocultar contenido:

Ten cuidado al elegir qué contenido ocultar o mostrar según el tamaño de la pantalla. No ocultes el contenido simplemente porque no cabe en la pantalla. El tamaño de la pantalla no es un indicador de lo que puede querer ver un usuario.

  • Chrome DevTools: Una vez que hayas configurado tus consultas de medios de breakpoints, querrás ver cómo se ve tu sitio. Recuerda que puedes cambiar el tamaño de la ventana de tu navegador para activar los puntos de interrupción, pero Chrome DevTools tiene una función incorporada que facilita ver cómo se ve una página en diferentes puntos de interrupción.

Para ver tu página en diferentes breakpoints:

  • Abre DevTools y luego activa el modo de dispositivo. Se abrirá en modo responsivo de forma predeterminada.
  • Para ver tus consultas de medios, abre el menú de modo de dispositivo y selecciona “Mostrar consultas de medios” para mostrar tus breakpoints como barras de colores sobre tu página.
  • Haz clic en una de las barras para ver tu página.
  • Haz clic con el botón derecho en una barra para saltar a la definición de la consulta de medios.

El diseño web responsivo tiene en cuenta muchísimos factores para garantizar una experiencia de usuario satisfactoria.

Esperamos que con este artículo puedas tener más claros los conceptos básicos del diseño web responsivo.

El diseño web responsivo evoluciona rápidamente, pero si te mantienes actualizado sobre las tendencias, podrás brindar una mejor experiencia a tus usuarios.

Si quieres saber más sobre cómo optimizar tu página web te invitamos a visitar nuestro blog y leer los artículos de tu interés. En ClickPanda apoyamos y acompañamos a las pequeñas y medianas empresas, emprendimientos y negocios en su transformación y crecimiento digital, por esto creamos herramientas que faciliten su trabajo, con las que logren sus objetivos y cumplan sus sueños.  No dudes en comunicarte con nosotros si necesitas aclarar alguna duda o si quieres más información sobre nuestros productos, servicios o planes.

banner

Related Articles

Una empresa enfocada en el crecimiento de empresas digitales en Colombia, en apoyo a la economía colombiana.