Diseño responsivo

Este codelab forma parte del curso de capacitación Developing Progressive Web Apps, desarrollado por el equipo de capacitación de Google Developers. Aprovecharás al máximo este curso si trabajas con los codelabs de forma secuencial.

Para obtener detalles completos sobre el curso, consulta la descripción general de Developing Progressive Web Apps.

Introducción

En este lab, se muestra cómo aplicar un diseño al contenido de tu sitio web para que sea responsivo.

Qué aprenderás

  • Cómo aplicar estilo a tu app para que funcione bien en varios factores de forma
  • Cómo usar Flexbox para organizar fácilmente tu contenido en columnas
  • Cómo usar consultas de medios para reorganizar tu contenido según el tamaño de la pantalla

Lo que debe saber

  • Conocimientos básicos de HTML y CSS

Lo que necesitarás

  • Una computadora con acceso a la terminal o al shell
  • Conexión a Internet
  • Editor de texto

Descarga o clona el repositorio de pwa-training-labs desde GitHub y, si es necesario, instala la versión LTS de Node.js.

Si no tienes un servidor de desarrollo local preferido, instala el paquete http-server de Node.js:

npm install http-server -g

Ve al directorio responsive-design-lab/app/ y, luego, inicia el servidor:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Puedes detener el servidor en cualquier momento con Ctrl-c.

Abre el navegador y navega a localhost:8080/.

Nota: Cancela el registro de todos los service workers y borra todas las memorias caché de service workers para localhost, de modo que no interfieran en el lab. En las Herramientas para desarrolladores de Chrome, puedes hacer clic en Borrar datos del sitio en la sección Borrar almacenamiento de la pestaña Aplicación.

Si tienes un editor de texto que te permite abrir un proyecto, abre la carpeta responsive-design-lab/app/. Esto facilitará la organización. De lo contrario, abre la carpeta en el sistema de archivos de tu computadora. La carpeta app/ es donde compilarás el lab.

Esta carpeta contiene lo siguiente:

  • index.html es la página HTML principal de nuestro sitio o aplicación de ejemplo
  • modernizr-custom.js es una herramienta de detección de funciones que simplifica las pruebas de compatibilidad con Flexbox.
  • styles/main.css es la hoja de estilo en cascada del sitio de ejemplo.

Regresa a la app en el navegador. Intenta reducir el ancho de la ventana a menos de 500 px y observa que el contenido no responde bien.

Abre las herramientas para desarrolladores y habilita el modo de dispositivo en tu navegador. Este modo simula el comportamiento de tu app en un dispositivo móvil. Observa que la página se aleja para que el contenido de ancho fijo quepa en la pantalla. Esta no es una buena experiencia, ya que es probable que el contenido sea demasiado pequeño para la mayoría de los usuarios, lo que los obligará a acercar y desplazar la pantalla.

Reemplaza TODO 3 en index.html con la siguiente etiqueta: 

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

Guarda el archivo. Actualiza la página en el navegador y revísala en el modo de dispositivo. Observa que la página ya no está alejada y que la escala del contenido coincide con la escala de un dispositivo de escritorio. Si el contenido se comporta de forma inesperada en el emulador de dispositivos, activa y desactiva el modo de dispositivo para restablecerlo.

Nota: La emulación de dispositivos te brinda una aproximación cercana de cómo se verá tu sitio en un dispositivo móvil, pero para obtener una imagen completa, siempre debes probar tu sitio en dispositivos reales. Puedes obtener más información para depurar dispositivos Android en Chrome y Firefox.

Explicación

Una metaetiqueta de viewport le indica al navegador cómo controlar las dimensiones y el escalamiento de la página. La propiedad width controla el tamaño del viewport. Se puede establecer en una cantidad específica de píxeles (por ejemplo, width=500) o en el valor especial device-width,, que es el ancho de la pantalla en píxeles de CSS a una escala del 100%. (Hay valores de height y device-height correspondientes, que pueden ser útiles para las páginas con elementos que cambian de tamaño o posición según la altura del viewport).

La propiedad initial-scale controla el nivel de zoom cuando se carga la página por primera vez. Establecer el nivel de zoom inicial mejora la experiencia, pero el contenido sigue desbordándose más allá del borde de la pantalla. Corregiremos esto en el siguiente paso.

Más información

Reemplaza TODO 4 en styles/main.css con el siguiente código:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Guarda el archivo. Inhabilita el modo de dispositivo en el navegador y actualiza la página. Intenta reducir el ancho de la ventana. Observa que el contenido cambia a un diseño de una sola columna en el ancho especificado. Vuelve a habilitar el modo de dispositivo y observa que el contenido responde para ajustarse al ancho del dispositivo.

Explicación

Para asegurarnos de que el texto sea legible, usamos una consulta de medios cuando el ancho del navegador alcanza los 48 rem (768 píxeles con el tamaño de fuente predeterminado del navegador o 48 veces el tamaño de fuente predeterminado en el navegador del usuario). Consulta Cuándo usar em vs. rem para obtener una buena explicación de por qué rem es una buena opción para las unidades relativas. Cuando se activa la consulta de medios, cambiamos el diseño de tres columnas a una cambiando el width de cada uno de los tres divs para que llenen la página.

El módulo de diseño de caja flexible (Flexbox) es una herramienta útil y fácil de usar para hacer que tu contenido sea responsivo. Flexbox nos permite lograr el mismo resultado que en los pasos anteriores, pero se encarga de todos los cálculos de espaciado por nosotros y proporciona una gran cantidad de propiedades CSS listas para usar para estructurar el contenido.

Cómo comentar las reglas existentes en CSS

Marca como comentario todas las reglas en styles/main.css envolviéndolas en /* y */. Estas serán nuestras reglas de resguardo para cuando Flexbox no sea compatible en la sección Flexbox como mejora progresiva.

Agrega diseño Flexbox

Reemplaza TODO 5.2 en styles/main.css con el siguiente código:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Guarda el código y actualiza index.html en tu navegador. Inhabilita el modo de dispositivo en el navegador y actualiza la página. Si estrechas la ventana del navegador, las columnas se harán más delgadas hasta que solo quede visible una de ellas. Corregiremos esto con consultas de medios en el siguiente ejercicio.

Explicación

La primera regla define el container div como el contenedor flexible. Esto habilita un contexto de Flex para todos sus elementos secundarios directos. Combinamos la sintaxis antigua y la nueva para incluir Flexbox y obtener una compatibilidad más amplia (consulta Más información para obtener detalles).

La segunda regla usa la clase .col para crear elementos secundarios flexibles de igual ancho. Establecer el primer argumento de la propiedad flex en 1 para todos los divs con la clase col divide el espacio restante de manera uniforme entre ellos. Esto es más conveniente que calcular y establecer el ancho relativo por nuestra cuenta.

Más información

Opcional: Establece diferentes anchos relativos

Usa la seudoclase nth-child para establecer los anchos relativos de las dos primeras columnas en 1 y el de la tercera en 1.5. Debes usar la propiedad flex para establecer los anchos relativos de cada columna. Por ejemplo, el selector de la primera columna se vería de la siguiente manera:

.container .col:nth-child(1)

Usa consultas de medios con Flexbox

Reemplaza TODO 5.4 en styles/main.css con el siguiente código:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Guarda el código y actualiza index.html en tu navegador. Ahora, si reduces el ancho del navegador, el contenido se reorganizará en una sola columna.

Explicación

Cuando se activa la consulta de medios, cambiamos el diseño de tres columnas a una columna estableciendo la propiedad flex-flow en column. Esto logra el mismo resultado que la consulta de medios que agregamos en el paso 5. Flexbox proporciona muchas otras propiedades, como flex-flow, que te permiten estructurar, reordenar y justificar tu contenido fácilmente para que responda bien en cualquier contexto.

Como Flexbox es una tecnología relativamente nueva, debemos incluir alternativas en nuestro CSS.

Cómo agregar Modernizr

Modernizr es una herramienta de detección de funciones que simplifica las pruebas de compatibilidad con Flexbox.

Reemplaza TODO 6.1 en index.html con el código para incluir la compilación personalizada de Modernizr:

<script src="modernizr-custom.js"></script>

Explicación

Incluimos una compilación de Modernizr en la parte superior de index.html, que prueba la compatibilidad con Flexbox. Esto ejecuta la prueba en la carga de la página y agrega la clase flexbox al elemento <html> si el navegador admite Flexbox. De lo contrario, agrega una clase no-flexbox al elemento <html>. En la siguiente sección, agregaremos estas clases al CSS.

Nota: Si usáramos la propiedad flex-wrap de Flexbox, tendríamos que agregar un detector de Modernizr independiente solo para esta función. Las versiones anteriores de algunos navegadores admiten parcialmente Flexbox y no incluyen esta función.

Usa Flexbox de forma progresiva

Usemos las clases flexbox y no-flexbox en el CSS para proporcionar reglas de resguardo cuando no se admita Flexbox.

Ahora, en styles/main.css, agrega .no-flexbox delante de cada regla que comentamos:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

En el mismo archivo, agrega .flexbox delante del resto de las reglas:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Recuerda agregar .flexbox a las reglas de las columnas individuales si completaste el paso opcional 5.3.

Guarda el código y actualiza index.html en el navegador. La página debería verse igual que antes, pero ahora funciona bien en cualquier navegador y dispositivo. Si tienes un navegador que no admite Flexbox, puedes probar las reglas de resguardo abriendo index.html en ese navegador.

Más información

Aprendiste a aplicar estilo a tu contenido para que sea adaptable. Con las consultas de medios, puedes cambiar el diseño de tu contenido según el tamaño de la ventana o la pantalla del dispositivo del usuario.

Temas abordados

  • Cómo configurar el viewport visual
  • Flexbox
  • Consultas de medios

Recursos

Más información sobre los conceptos básicos del diseño adaptable

Más información sobre Flexbox como mejora progresiva

Obtén información sobre las bibliotecas para CSS responsivo

Más información para usar consultas de medios

Para ver todos los codelabs del curso de capacitación sobre APW, consulta el codelab de bienvenida del curso.