Responsive

Web Design

  • El tamaño de tipografía fija (fixed) ha estado con nosotros desde los inicios de los navegadores de escritorio.

 

  • En los inicios, se utilizaban las opciones de zoom de los navegadores para hacer accesible el contenido.
  • Hoy en día, la Web (y su contenido tipográfico) ya no solo debe ser accesible desde cualquier dispositivo, sino que debe estar optimizado para ello.
  • Es necesario dar y entender el salto entre el tamaño fijo y el tamaño relativo de tipografía con em/rem.

1.1 - Tipografía fija

Responsive Web Design

1 - Relative font-sizing

h1 { font-size: 21px; }
  • Para crear tipografía con tamaño relativo debemos configurar un tamaño de fuente base en porcentaje (generalmente en el elemento <html>).
  • El porcentaje suele ser 62.5 % de los 16px base ya que equivale a 10px (16 x 0.625 = 10) y es más sencillo hacer cálculos con el.
  • De esta forma, 1em equivale a 10px.

1.2 - Uso de <em>

Responsive Web Design

1 - Relative font-sizing

Live demo

html { font-size: 62.5%; } /* 10 px */
h1 { font-size: 3em; } /* 30 px */
h2 { font-size: 2em; } /* 20 px */
p { font-size: 1.2em; } /* 12 px */
  • Como veremos, los valores <em> sufren del efecto cascada (los valores son relativos al elemento parent), con lo que elementos dentro de elementos aumentan de tamaño.
  • Para solucionarlo en CSS3 disponemos de las unidades <rem> (root em), que son relativas al elemento root (<html>), acabando con el problema.

1.2 - Uso de <rem>

Responsive Web Design

1 - Relative font-sizing

Live demo

html { font-size: 62.5%; } /* 10 px */
h1 { font-size: 3rem; } /* 30 px */
h2 { font-size: 2rem; } /* 20 px */
p { font-size: 1.2rem; } /* 12 px */

Lecturas recomendadas

Responsive Web Design

1 - Relative font-sizing

  • Un primer paso para hacer que el contenido se adapte es crear un layout que fluya y encaje en cualquier viewport.
  • Un layout fluido generalmente está compuesto de un grid fluido y unos valores relativos expresados en porcentajes.

2.1 - Contenido que fluye

Responsive Web Design

2 - Layouts fluidos

  • Podemos convertir o crear cualquier layout fluido desde una base fija con una sencilla fórmula:

2.2 - Convertir en fluido

Responsive Web Design

2 - Layouts fluidos

valor base (px) ÷ contexto (px) = resultado (%)

el tamaño del que disponemos en píxeles

el tamaño del elemento parent*, en píxeles

el valor equivalente, en porcentaje

  • Con este proceso podemos pasar de tamaño fijo a fluido sabiendo que mantendremos las proporciones de forma correcta.
  • Veamos un hipotético ejemplo, con esta disposición.
  • Se trata de un layout fijo sencillo, con un contenedor y dos elementos que se apilan uno al lado del otro.

2.2 - Convertir en fluido

Responsive Web Design

2 - Layouts fluidos

main { width: 1152px; }
.sidebar { 
    width: 350px; 
    margin: 10px; 
    float: left;
}
.contenido { 
    width: 802px; 
    padding: 5px; 
    float: right; 
}
<body>
    <main>
        <section class="sidebar">
            <!-- Barra lateral -->
        </section>
        <section class="contenido">
            <!-- Zona de contenido -->
        </section>
    </main>
</body>
  • ¿Cómo lo convertiríamos de layout fijo a fluido?

2.2 - Convertir en fluido

Responsive Web Design

2 - Layouts fluidos

main { 
  /* Contenedor fluído. 
  * Originalmente 1152 */
    width: 90%; 
    max-width: 1920px; 
}
.sidebar { 
    width: 30.38194%; /* 350 ÷ 1152 */
    ...
}
.contenido { 
    width: 69.61805%; /* 802 ÷ 1152 */
    ...
}
<body>
    <main>
        <section class="sidebar">
            <!-- Barra lateral -->
        </section>
        <section class="contenido">
            <!-- Zona de contenido -->
        </section>
    </main>
</body>

valor objetivo (px) ÷ contexto (px) = resultado (%)

Ejercicio

el contexto es <main>

Lecturas recomendadas

Responsive Web Design

2 - Layouts fluidos

  • La creación de layouts adaptativos se centra en diseñar para una adaptación controlada.
  • Esto implica conocer de antemano el contexto al que adaptarse:
    • Dispositivo.
    • Resolución (width).
    • Tamaño de pantalla (device-width).
  • Por lo tanto, es indispensable planificar bien qué partes del contenido es prioritario en el contexto a al que nos queremos adaptar.
  • También hay que optimizar su visualización (del contenido) en ese contexto específico.

3.1 - Contenido que se adapta

Responsive Web Design

3 - Layouts adaptativos

  • Para lograr la adaptación, lo primero es configurar los puntos de ruptura (break points), es decir, las dimensiones del viewport en el que nuestro layout se adaptará.
  • Conocemos de antemano el contexto, por lo que para llegar a él tendremos que usar un tipo de etiqueta HTML llamada media queries.

3.2 - Puntos de ruptura

Responsive Web Design

3 - Layouts adaptativos

Screen Sizes

  • Las media queries son una característica CSS que nos permite limitar la aplicación de nuestros estilos a dispositivos, resoluciones, dimensiones y orientaciones específicas.

3.3 - Media queries

Responsive Web Design

3 - Layouts adaptativos

Media type:

pantalla.

Query:

ancho menor o igual a 680px.

@media screen and (max-width: 680px) {
    /* Estilos */
}
  • Por lo general las media queries se suelen especificar al final del resto de estilos CSS.
  • En lo personal, yo prefiero declararlas tras cada selector que voy a modificar.

3.3 - Media queries

Responsive Web Design

3 - Layouts adaptativos

/* Otros estilos*/
h1 {
    font-size: 2em;
}

@media screen and (max-width: 680px) {
    h1 { font-size: 3em; text-align: center; }
}
/* Otros estilos*/

Live demo

  • Usaremos como base el layout fluido creado anteriormente.
  • Como contexto, apuntaremos al iPhone SE (320px de ancho por 568px de alto).
  • Más concretamente, a su valor de viewport en modo landscape (apaisado): 568px.
  • ¿Qué cambios aplicar en break points para adaptar el layout a este contexto?.

3.4 - Uniéndolo todo

Responsive Web Design

3 - Layouts adaptativos

Ejercicio

Lecturas recomendadas

Responsive Web Design

3 - Layouts adaptativos

  • La filosofía "mobile first" (móvil primero) se centra en asegurar nuestro contenido con un layout preparado para el crecimiento exponencial de dispositivos móviles.
  • Al planificar teniendo en cuenta el móvil primero, te obligas a centrarte en lo más importante.
    • Simplificando el contenido.
    • Optimizando la experiencia del usuario.

4.1 - Mobile First

Responsive Web Design

4 - Layouts responsivos

El dispositivo no es quien dicta los puntos de ruptura, el layout y el contenido, sí.

  • Si lo piensas, tiene todo el sentido. En un móvil o tablet no disponemos del enorme espacio de un monitor moderno (panorámico, Retina, etc). Por lo tanto, el espacio es mucho más valioso.
  • Al hacer el cambio a mentalidad móvil, nos damos cuenta de que cualquier tipo de recurso o contenido que no aporte (imágenes de stock, adornos, etc), no tienen cabida.
  • La filosofía mobile first es sin duda la mejor base y el mejor fundamento para el diseño Web responsivo (responsive Web design).

4.1 - Mobile First

Responsive Web Design

4 - Layouts responsivos

  • Una pregunta típica es si el responsive Web design es lo mismo que adaptive Web design. La respuesta:
    • Todos los diseños responsive pueden considerarse adaptive.
    • No todos los diseños adaptive son responsive.
  • Un sitio Web adaptive suele tener un layout fluido y puntos de ruptura basados en un contexto específico. Es una optimización selectiva.
  • Un sitio Web responsive dispone de un layout fluido y una serie de puntos de ruptura (basados en el contenido) que crean una experiencia universal y continua entre todos los contextos.

4.2 - Responsive Web Design

Responsive Web Design

4 - Layouts responsivos

  • Recapitulemos los tipos de optimización de layout:

4.3 - Responsive Web design vs el resto

Responsive Web Design

4 - Layouts responsivos

Diseño fluido: Una optimización válida pero que resulta muy limitada en viewports pequeños.

Diseño adaptativo: No cubre todos los contextos, está delimitado por uno o varios en particular (dispositivo, resolución, etc...).

Diseño responsivo: Cubre todos los contextos porque se centra en hacer que el layout (y su contenido) sean accesibles de forma universal, es agnóstico a dispositivo, resolución, etc.

Ejercicio

Lecturas recomendadas

Responsive Web Design

4 - Layouts responsivos

  • Hemos visto diferentes formas de hacer que los elementos de nuestro layout se adapten los diferentes tamaños de viewport.
  • Para lograr el mismo objetivo con las imágenes, hay diferentes formas. La principal es usar dos propiedades CSS:
    1. max-width: 100%. Para que la imagen no tenga mayor tamaño del suyo natural o del contenedor.
    2. height: auto; Para que en todos los navegadores su aspecto y proporción no se deformen.

5.1 - Responsive images

Responsive Web Design

5 - Responsive media

Demo

  • Otras opciones para lograr elementos multimedia responsivos:
    • PictureFill: Polyfill que permite usar el elemento <picture> de HTML5 en todos los navegadores.
    • FitVids: Plugin jQuery para lograr vídeos y elementos multimedia de ancho completo y responsivos.
    • FitText: Plugin jQuery que permite tipografía (headlines) flexibles y que se adaptan al viewport del usuario.

5.2 - Responsive media

Responsive Web Design

5 - Responsive media

Responsive Web Design

By Juan Andrés Núñez

Made with Slides.com

Responsive Web Design

  • 977

More from Juan Andrés Núñez