HTML para principiantes (parte 21) Diseño web responsivo

El diseño web responsivo consiste en utilizar HTML y CSS para redimensionar, ocultar, reducir o ampliar automáticamente los elementos de un sitio web, para que se vea bien en todos los dispositivos (computadoras de escritorio, tabletas y teléfonos).

Configuración Viewport

Para crear páginas web responsivas, deberás agregar el siguiente elemento <meta> en todas tus páginas web:

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

Código HTML

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Configuración Viewport</h2>
<p>Este ejemplo, en realidad, no hace nada más que mostrar como debes añadir el elemtno meta viewport,</p>

</body>
</html>

La etiqueta <meta> viewport, le da instrucciones al navegador sobre cómo controlar las dimensiones y la escala de la página.

A continuación, ejemplo de una página web, mostrada en la pantalla de un móvil, sin la metaetiqueta viewport y la misma página web con la metaetiqueta viewport:

Imágenes responsivas

Las imágenes responsivas son imágenes que adaptan sus dimensiones a cualquier tamaño de pantalla.

La propiedad width de una imagen

Si la propiedad CSS para determinar el ancho de la imagen se establece en 100%, la imagen se adaptará horizontalmente al tamaño de la ventana del navegador manteniendo sus proporciones:

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Imagen responsiva</h2>
<p>Cuando la propiedad CSS width se establece como porcentaje, la imagen se escalará horizontal y verticalmente para adaptarse al tamaño de pantalla.</p> <p>Redimensiona el tamaño de la ventana del navegador para ver el efecto.</p>

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

Ver el ejemplo en pestaña nueva

Ten en cuenta que en el ejemplo anterior, según el tamaño de la pantalla, la imagen se podría ampliar para que fuera, incluso, más grande de su tamaño original. Una solución mejor, en muchos casos, será utilizar la propiedad max-width en lugar de width.

Usando la propiedad max-widht

Si estableces la propiedad de max-width en 100%, la imagen se reducirá si es necesario, pero nunca se ampliará para ser mayor de su tamaño original:

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h2>Responsive Image</h2>
<p>"max-width:100%" evita que la imagen se muestre a un tamaño mayor que el suyo original. Sin embargo, si el tamaño de la pantalla del navegador es muy pequeño, la imagen, cada vez será más pequeña.</p>
<p>Redimensiona el tamaño de la ventana del navegador para ver el efecto.</p>

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Ver el ejemplo en pestaña nueva

Tamaño de texto responsivo

Puedes establecer sl tamaño del texto utilizando vw, es decir: “ancho de la vista”.

Es el porcentaje del tamaño de la ventana del navegador. Si la ventana gráfica tiene 50 cm de ancho, 1vw mide 0.5 cm.

Ejemplo

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<h1 style="font-size:10vw;">texto responsivo</h1>

<p style="font-size:5vw;">Redimensiona la ventana del navegador para ver como el texto se escala.</p>

<p style="font-size:5vw;">Usa "vw" cuando quieras redimensionar el texto. 10vw establecerá el tamaño del texto a un 10% del ancho de la ventana del navegador.</p>

<p>Es el porcentaje del tamaño de la ventana del navegador. Si la ventana gráfica tiene 50 cm de ancho, 1ovw mide 5 cm.</p>

</body>
</html>

Ver el ejemplo en pestaña nueva

Media Queries

Además de cambiar el tamaño del texto y las imágenes, también es común usar media queries en páginas web responsivas.

Con las media queries, puedes definir estilos completamente diferentes para diferentes tamaños de la ventana del navegador.

Con el siguiente ejemplo: cuando cambies el tamaño de la ventana del navegador verás que los tres elementos< div> que contiene la página se mostrarán horizontalmente en pantallas grandes y se apilarán verticalmente en pantallas pequeñas:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}

.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; /* El ancho está establecido al 60% por defecto */
}

.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; /* El ancho está establecido al 20% por defecto */
}

/*Se utiliza una media query para establecer el punto de ruptura a 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* El ancho es del 100% cuando el ancho de pantalla es de 800px o más pequeño */
  }
}
</style>
</head>
<body>

<h2>Media Queries</h2>
<p>Redimensiona la ventana del navegador.</p>

<p>Asegúrese de de hacer la ventana más grande y menor de 800px  al cambiar el tamaño del navegador.</p>

<div class="left">
  <p>DIV izquierdo</p>
</div>

<div class="main">
  <p>DIV central</p>
</div>

<div class="right">
  <p>DIV derecho</p>
</div>

</body>
</html>

Ver el ejemplo en pestaña nueva

Página web responsiva: ejemplo completo

Una página web responsiva, debería verse bien tanto en pantallas grandes de ordenadores de escritorio como en teléfonos móviles pequeños.

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float:left;
  width:20%;
  text-align:center;
}
.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:60%;
  padding:0 20px;
}
.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hola Mundo</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <a href="#">Menú 1</a>
    <a href="#">Menú 2</a>
    <a href="#">Menú 3</a>
    <a href="#">Menú 4</a>
  </div>

  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="right">
    <h2>Acerca de</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;"></div>

</body>
</html>

Ver el ejemplo en pestaña nueva

Diseño web responsivo – Frameworks

Hay muchos frameworks CSS que te permitirán diseñar páginas web responsivas.

Algunos de ellos son gartuitosy fáciles de usar.

Bootstrap

Un framework muy popular para que diseñes páginas web es Bootstrap, utiliza HTML, CSS y jQuery para crear páginas web responsivas. Es muy eficiente y fácil de aprender.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Ejemplo Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Mi primera página Bootstrap</h1>
    <p>Redimensiona la ventana del navegador para ver el efecto responsivo</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Columna 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Columna 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Columna 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Ver el ejemplo en pestaña nueva

Para aprender a utilizar Bootstrap puedes seguir los artículos que en este mismo blog hemos escrito para su aprendizaje.