Diseño Web Responsive

Publicado el Sab 22 de Settember del 2018 a las 4:42

Antes del año 2010 se diseñaban páginas con estructuras de anchos fijos o en porcentajes que se ajustaran entre resoluciones de 800px a 1024px o se utilizaban contenedores de 800px centrados, pero al llegar el 2010, un cambio revolucionario alteró nuestro escenario. Los teléfonos móviles empezaron a navegar en la web, usando navegadores similares a los de una PC, desde ese momento, nuestras decisiones de diseño se volvieron más complejas, creando las siguientes interrogantes ¿Para cuál de todos esos tamaños vamos a diseñar? ¿Para todos? ¿Eso es posible?.

La solución a todos estas interrogantes es el diseño web responsive.

¿Qué es el diseño web responsive?

El diseño web responsive hace que tu página web se vea bien en todos los dispositivos y solo usa HTML y CSS.

El diseño web responsive no es un programa o un JavaScript.

Este tipo de diseño mejora la experiencia para todos los usuarios, ya que las páginas web, se pueden ver usando diferentes dispositivos, como computadoras de escritorio, tabletas y teléfonos.

El diseño de una página web debe verse bien y ser fácil de usar, independientemente del dispositivo.

Las páginas web no deben omitir la información para adaptarse a dispositivos más pequeños, sino adaptar su contenido para adaptarse a cualquier dispositivo configurando el viewport.

¿Qué es el Viewport?

El Viewport o ventana gráfica es el área visible de una página web para el usuario.

El Viewport o ventana gráfica varía con el dispositivo, y será más pequeña en un teléfono móvil que en una pantalla de computadora.

Configuración del Viewport

HTML5 introdujo un método para permitir que los diseñadores web tomen el control de la ventana gráfica a través de la etiqueta <meta>.

Esta etiqueta <meta> debe ser incluida en todas sus páginas web:

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

Este elemento <meta> le da instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página.

width=device-width establece el ancho de la página para seguir el ancho de pantalla del dispositivo (que variará según el dispositivo).

initial-scale=1.0 establece el nivel de zoom inicial cuando el navegador carga la página por primera vez.

EJEMPLO

Una vez configurada la etiqueta <meta> Viewport, haremos uso de las cuadriculas Grid-View y Media Queries

¿Qué es un Grid-View?

Muchas páginas web se basan en Grid-View o vista de cuadrícula, lo que significa que la página está dividida en columnas. Usar un Grid-View es muy útil cuando se diseñan páginas web, hace que sea más fácil colocar elementos en la página.

Un Grid-View responsive a menudo tiene 12 columnas y tiene un ancho total de 100%, y se contraerá y expandirá a medida que cambie el tamaño de la ventana del navegador.

Construyendo Grid-View Responsive

Vamos a comenzar a construir una vista de cuadrícula sensible. Primero nos aseguramos de que todos los elementos HTML tengan la propiedad de box-sizing establecida en border-box. Esto asegura que el relleno y el borde estén incluidos en el ancho y la altura total de los elementos.

EJEMPLO: responsive.css

* {
    box-sizing: border-box;
}

Una vez establecido el box-sizing construiremos el Grid-View con 12 columnas para tener más control sobre la página web.

Primero debemos calcular el porcentaje para una columna: 100% / 12 columnas = 8.33%.

Luego hacemos una clase para cada una de las 12 columnas, class="col-" y un número que define cuántas columnas debe abarcar la sección:

EJEMPLO: responsive.css

* {
    box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 15px;
}

Cada fila debe estar envuelta en un <div>. El número de columnas dentro de una fila siempre debe sumar hasta 12:

EJEMPLO HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Las columnas dentro de una fila flotan hacia la izquierda y, por lo tanto, se sacan del flujo de la página y otros elementos se colocarán como si las columnas no existieran. Para evitar esto, agregaremos un estilo que borre el flujo:

.row::after {
    content: "";
    clear: both;
    display: table;
}

¿Qué son las Media Queries?

Media query es una técnica CSS introducida en CSS3. 

Utiliza la regla @media para incluir un bloque de propiedades CSS solo si una determinada condición es verdadera.

Por ejemplo, podríamos definir una condición que determine que si el tamaño de pantalla es menor a 480 px de ancho, el navegador procese ciertos estilos CSS que dejaremos preparados.

EJEMPLO: responsive.css

Si la ventana del navegador es 480px o menor, el color de fondo será azul claro:

@media only screen and (max-width: 480px) {
    body {
        background-color: lightblue;
}