JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

Responsive Design Web

La mejor elección para el desarrollo web

Con una sola versión web, cubre todas las resoluciones de pantalla, es decir, el sitio web creado está optimizado para todo tipo de dispositivos: PCs, tabletas, teléfonos móviles, etc.

Es importante que se añada esta etiqueta en el <head> de la página, para optimizarlo en móviles

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

Estructura

  • Usar semántica html y wai-aria para accesibilidad
  • div y span son elementos contenedores que semánticamente no significan nada
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <header role="banner">
      ...
    </header>
    
    
    <nav role="navigation">
      ...
    </nav>
    
    
    <footer role="contentinfo">
      ...
    </footer>
    
    <aside role="complementary">
      ...
    </aside>
    
  • Estas etiquetas html5 no las entiende los navegadores antiguos, por ello hay que descargar html5shiv e incluir en <head>:
  • 1
    2
    3
    
    <!--[if lt IE 9]>
    <script src="files/html5shiv.js"></script>
    <![endif]-->
    
  • Hay otros recursos como modernizr que hacen lo mismo: Modernizr
  • Para ajustar los contenedores a un width determinado, sin importar el padding que tenga. No lo suma. (ie7 y anteriores no trabaja)
  • 1
    2
    3
    4
    5
    
    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    

Modelado de Cajas (Box model)

Para ello hacemos uso de los media queries.

¿Cuántos media query?. Un ejemplo claro lo tenemos en Bootstrap 3, al ser mobile first, no hay media querys hasta los 768px (tabletas), y usa los valores por defecto.

1
2
3
4
5
6
7
8
9
10
11
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Ejemplos de usos de media queries:

  • Columnas: mediante el uso de grids
  • Navitation: mostrando u ocultando según el ancho de pantalla
  • Tipografía: cambia el tamaño de la fuente dependiendo del ancho del contenedor
  • Imágenes: mostrando diferentes tamaños de la misma imagen

Diseño con grids

Para diseñar el sistema de grids manualmente

Uso de frameworks:

Imágenes adaptables

1
<img src="images/paisaje2.jpg" alt="Un paisaje ventoso">
  • Usar alt para describir la imagen. (para ciegos o si falla la imagen)
  • Evitar background-image
  • Fomentar image sprites (Pequeñas imágenes en una sola, que usando css muestra una zona particular de la imagen)
  • Utilizar max-width y min-width
  • Medidas en porcentaje, nunca en píxeles
  • Evitar que la imagen sea más ancha que el contenedor
  • 1
    2
    3
    4
    
      img {
          max-width: 100%;
      }
      
    
  • Uso de imágenes según tamaño con srcsset y picture
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- ejemplo de srcset -->
<img src="low-density-photo.jpg" srcset="small-photo.jpg 480w, big-photo.jpg 1024w, high-density-photo.jpg 1024w 2x">

<!-- ejemplo de picture -->
<picture>
<source media="(min-width: 45em)" src="images/flower-large.jpg">;
<source media="(min-width: 18em)" src="images/flower-medium.jpg">
<source src="flower-small.jpg">
<img src="images/flower-small.jpg" alt="a flower">
</picture>

<!-- usando los 2 a la vez -->
<picture>
<source media="(min-width: 45em)" srcset="flower-large.jpg 1x, flower-large-hd.jpg 2x">
<source media="(min-width: 18em)" srcset="flower-med.jpg 1x, flower-med-hd.jpg 2x">
<source srcset="flower-small.jpg 1x, flower-small-hd.jpg 2x">
<img src="flower-small.jpg" alt="a flower">
</picture>


Otras soluciones responsivas en imágenes son a través de “polyfills”, es decir, uso de las nuevos comportamientos html5 en navegadores antiguos a través de código.

  • Picturefill
  • 1
    2
    3
    4
    5
    6
    7
    
                     
    <span data-picture data-alt="a flower">
    <span data-src="images/flower-small.jpg"></span>;
    <span data-src="images/flower-medium.jpg" data-media="(min-width: 18em)"></span>;
    <span data-src="images/flower-large.jpg" data-media="(min-width: 45em)"></span>;
    <noscript><img src="images/flower-small.jpg" alt="aflower"></noscript>
    </span>
    
  • Adaptive Images
  • HiSRC

Herramientas de prototipado

Si no quieres crear prototipos en html, hay varias herramientas que pueden crearlas:

Panel de navegación

1
2
3
4
5
6
7
8
9
 
<nav role="navigation">
  <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/links/">Links</a></li>
      <li><a href="/contact/">Contact</a></li>
  </ul>
</nav>
  • Para transformar la lista no ordenada en un panel de navegación, modificamos estilos
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    
    nav ul {
      list-style-type: none;
      padding: 0;
      margin: 25px 0 0;
    }
    nav li {
      border: 1px solid  #666;
      background-color: #eee;
      padding: 10px 1em;
      margin: 3px 0 0;
      text-align: center;
    }
    nav li a{
      text-decoration: none;
      font-size: 1.2em;
    }
    
    /*Panel de navegación horizontal*/
    @media only screen and (min-width: 30em) {
      nav li { display: block; float: left; width: 25%; }
    }
    
  • Herramientas para paneles de navegación responsive

Referencias

Learning Responsive Web Design (2014)

Comentarios