/ Frontend

Fundamentos del diseño web responsive

Por que ya no se trata de una opción sino de una necesidad, a continuación explico los fundamentos básicos para crear diseños web responsive y estos funcionen correctamente en cualquier dispositivo

Hoy en día, el uso de dispositivos móviles como teléfonos inteligentes, Smartphones, phablets, consolas de video juegos y televisores es su gran variedad de resoluciones; han forzado al profesional del Frontend ser creativo y lograr que, independientemente el dispositivo, su diseño web se ajuste y funcione correctamente en todas las resoluciones de pantalla posibles.

Diseño Web Responsive

Para lograrlo, el profesional Frontend debe esforzarse un poco y dar una serie de instrucciones a los navegadores web con la ayuda de HTML5 CSS3 y en algunos casos algo de JavaScript.

Y si aún no creas entornos web adaptables (responsive) a dispositivos móviles pues ¡despierta! Hoy en día crear entornos web Responsive no es una opción de innovación, es una necesidad.

Es una necesidad porque la mayoría de personas en el mundo están en constante movimiento y la mejor manera para mantenernos conectados se llama Smartphone; Por ende, la mayoría de personas acceden a nuestras páginas, aplicaciones y proyectos web a través de dispositivos móviles y la tendencia sigue creciendo. Así que más allá de ofrecerle a tus clientes un diseño web responsive por hacerle sentir especial, hazlo porque realmente eres consciente de las necesidades de la industria y porque deseas ser un verdadero profesional frontend que crea el futuro de la web.

El diseño web adaptable fue en principio definido por Ethan Marcotte quien buscó darle solución a las necesidades entre usuarios y dispositivos, como por ejemplo que en teléfonos inteligentes los usuarios solo tienen la oportunidad de ver los contenidos a través de una columna y en una Tablet según su postura, los usuarios tienen la posibilidad de verla en dos columnas.

Comprendiendo ahora si las raíces del ‘Responsive Web Design’, aquí documentaré las bases para su implementación en un sitio y/o proyecto web.

Paso primero: Decirle al explorador web que el usuario está accediendo a un sitio web adaptable a dispositivos móviles.

Para esto debemos agregar un meta tag de la siguiente manera:

<meta name="viewport" content="width=device-width, initial-scale=1">

Haciendo uso de esta meta, le estamos dando instrucciones al explorador de cómo debe controlar la escala y dimensiones del sitio, para ajustarlo a su tamaño en pantalla. Además evitamos que los usuarios tengan que hacer esfuerzos adicionales para observar el contenido de nuestro sitio.

Acerca de width=device-width

Por defecto** la mayoría de navegadores en los dispositivos móviles procesan el ancho como si se tratara de un equipo de escritorio**, usualmente a unos 980 píxeles de ancho como máximo (Esta cifra puede variar en algunos dispositivos); al encontrarse con esta meta etiqueta en la cabecera, lo responsive entra en acción y de inmediato ajusta el diseño a su tamaño en pantalla y evita que el usuario deba hacer zoom para poder observar los contenidos.

Diseño web responsive: Ejemplo sin Viewport

Diseño web responsive: Ejemplo Con Viewport

Acerca de initial-scale=1

Cuando rotamos nuestro dispositivo móvil, por lo general el navegador del dispositivo mantiene constante la anchura en pantalla, entonces esta propiedad se hace necesaria, para que haya un reajuste cuando el usuario gira el dispositivo y se aproveche su nuevo ancho.

También puedes aprovechar estas propiedades adicionales para el viewport

  • Minimum-scale
  • Maximun-scale
  • User-scalable

Como estos restringen un poco más la escalabilidad de nuestro diseño, pueden ocasionar algunos inconvenientes de funcionamiento, así que deben aplicarse con cuidado.

Paso segundo: Que el contenido no tenga un ancho fijo

Cuando desarrollamos un sitio web responsive por lo general insertamos contenidos como imágenes y videos que también debemos ajustarlos al tamaño en pantalla. A partir de aquí, el todo poderoso meta tag viewport ya no puede ayudarnos. Así que, también debemos ajustar ese tipo de contenidos a nuestro ancho en pantalla, ya que en la mayoría de los casos vienen con un ancho fijo y obligarían al usuario a hacer scrolling horizontal, lo cual no sería un objetivo del Responsive Web Design.

En este ejemplo a continuación, el iPhone por lo general tiene una resolución en pantalla de 320 píxeles como máximo, al darle un ancho fijo a la etiqueta <div style=”width: 45px;”>…</div> podemos darnos cuenta que los contenidos van más allá de la pantalla, forzando al usuario a realizar un scrolling horizontal para leer el contenido. En la otra imagen podemos observar como con un <div style=”width: 100%;”>…</div>, hacemos que el contenido ocupe el 100 % del ancho disponible en pantalla, no yéndose más allá de los 320 píxeles límite que tiene el iPhone.

Diseño Web Responsive: ancho fijo

Diseño Web Responsive: ancho no fijo

Así que considera el uso de anchos relativos.

Si lo sé, la primera imagen corresponde a un iPhone y la segunda a un Android, pero el funcionamiento es exactamente el mismo 😉

Paso tres: Aplicando media queries CSS basados en el Viewport

Las media queries CSS son una serie de instrucciones CSS que funcionan como un filtro, el cual activa determinadas propiedades de estilos dependiendo de las características del tamaño en pantalla y resolución del dispositivo.

Es decir, en nuestros diseños debemos tener todo listo y preparar unos estilos CSS para varios tamaños y resoluciones de pantalla. No se trata de volvernos locos y crear media queries para todos los dispositivos existentes, pero si por lo menos para los tamaños en pantalla más comunes en el mercado.

Antes de realizar media queries:

  • Las media queries sirven para aplicar estilos en base a las características del dispositivo.
  • Usa min-width sobre min-device-width para una mejor experiencia de usuario
  • Usa anchos relativos para que no te salgas del layout

La sintaxis primaria de una media query es la siguiente:

@media (query) {
/* Reglas CSS para esa media query */
}

Puedes agregar N reglas que consideres necesarias, Las más utilizadas para alcanzar el objetivo son:

  • Min-width
  • Max-width
  • Min-height
  • Max-height
  • Orientation=portrait
  • Orientation=landscape

Aprende con este ejemplo:

See the Pen Fundamentos del Diseño Responsive by Esteban Alvarez (@estebancito) on CodePen.

Observa el ejemplo en tu navegador y ¿Qué ocurre?

  1. Cuando el navegador ocupa un espacio de más de 800 píxeles, a través de CSS le estamos dando la orden que muestre los bloques distribuidos de la forma como la ves.

  2. Te invito a que minimices la ventana del navegador y la desplaces de derecha a izquierda hasta más o menos la mitad de la pantalla. Observarás que la distribución de los bloques cambia cuando se le da la orden al navegador que cuando esté en un tamaño que oscile entre los 600 y 800 píxeles muestre los bloques de una manera diferente.

  3. Cuando arrastramos aún más el explorador hacia la izquierda, te darás cuenta que todos los bloques ocupan el 100% de la pantalla disponible en el navegador.

Para que lo entendieras, hablé del tamaño del navegador (Suponiendo que estás en un equipo de escritorio), pero en realidad lo que pasa es que CSS a través del media query le da instrucciones al navegador web del dispositivo, que se comporte según el ancho máximo del tamaño y resolución de la pantalla del dispositivo.

Consejos que mejoran la experiencia del usuario

Usualmente se espera que los usuarios estén forzados a hacer scrolling de forma vertical. La acción de que un usuario deba hacer scrolling horizontal o hacer zoom para observar los contenidos, está catalogado como una mala experiencia para el usuario y debe evitarse al máximo. Por eso sigue estas recomendaciones.

  • No uses anchos fijos: Los contenidos no deben depender de un ancho en particular, es decir, debes ser lo suficientemente versátil para que los contenidos puedan visualizarse en cualquier tipo de dispositivo.
  • Usa media queries en CSS para aplicar diferentes estilos dependiendo del tamaño de la pantalla (Para esto existen ciertos estándares).

Algunas imágenes tomadas de Google Developers

¿Dudas?, deja un comentario y miraré como te colaboro 😉

Fundamentos del diseño web responsive
Share this

Subscribe to Esteban con Gafas