Ediciones ENI Editorial | líder en informática
El Responsive Web Design
El desarrollo responsivo
Actualmente, los diseñadores de sitios web deben generar sitios web que sean perfectamente visibles y legibles, sea cual sea el soporte de consulta: pantalla de ordenador, tableta o smartphone.
La creación de sitios web que se adapten automáticamente según el soporte recibe el nombre de Responsive Web Design o RWD. El RWD se basa principalmente en el módulo Media Queries, que está en Recommendation desde el 19 de junio de 2012: https://www.w3.org/TR/css3-mediaqueries/. Las Media Queries, o consultas de recursos multimedia en español, permiten crear un formato y una composición específicos según la pantalla de difusión.
Las consultas de recursos multimedia
1. Los criterios
Las consultas de recursos multimedia permiten apuntar de manera concreta a los diferentes tipos de pantallas de difusión, siguiendo criterios bien concretos.
A continuación se muestran los criterios que vamos a poder utilizar en las consultas de recursos multimedia:
-
La longitud de visualización: width. Podemos probar la longitud de la zona de visualización del navegador. Ejemplo: width: 780px.
-
La altura de visualización: height. Podemos probar la altura de la zona de visualización del navegador.
-
La longitud física: device-width. Podemos probar la longitud física de la pantalla de difusión.
-
La altura física: device-height. Podemos probar la altura física de la pantalla de difusión.
-
La orientación de la pantalla: orientation. Ejemplo: orientation: portraitu orientation: landscape. Muy práctico para comprobar si el usuario utiliza su aparato vertical (portrait) u horizontalmente (landscape).
Tenemos acceso a otros criterios menos habituales:
-
El ratio: aspect-ratio. Para probar el valor del ratio longitud/altura. Ejemplo: aspect-ratio: 16/9.
-
El ratio físico: device-aspect-ratio. Para probar el valor del ratio físico longitud/altura de la pantalla.
-
El color: color. Podemos probar si el soporte de difusión utiliza el color, que es el valor por defecto, en negro y blanco o en escala de grises. Ejemplo: min-color:...
El tamaño de las pantallas
Las pantallas de las tabletas y de los smartphones tienen resoluciones muy diferentes según los constructores.
Para determinar las resoluciones de las pantallas, en el elemento <head> podemos utilizar el elemento <meta> con el atributo viewport. Para el atributo content, podemos utilizar el valor device-width, que determina la longitud física de la pantalla.
Por lo tanto, tendremos esta sintaxis:
<meta name="viewport" content="width=device-width" /> De esta manera, la visualización se adapta a cada superficie de visualización de cada navegador.
Un ejemplo de composición responsiva
1. El sitio web inicial
A continuación se muestra el sitio web que vamos a realizar. En un primer momento, no estrará en RWD.
He aquí el código de la página HTML:
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Mi página de inicio</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="estilos.css" />
</head>
<body>
<div id="contenedor">
<header id="alto">
<h1>Mi sitio web</h1>
<h2>El eslogan de mi sitio web </h2>
</header>
<nav id="navegacion">
<p><a href="#">Enlace 1</a> | <a href="#">Enlace 2</a> |
<a href="#">Enlace 3</a> | <a href="#">Enlace 4</a> |
<a href="#">Enlace 5</a> | <a href="#">Enlace 6</a></p>
</nav>
<section id="contenido">
<articulo>
<h1>Mi primer artículo</h1>
<p>Donec ullamcorper...</p>
<p>Nullam quis risus...</p>
</articulo>
<articulo>
<h1>Mi segundo artículo</h1>
<p>Cras justo odio...</p>
<p>Donec id elit non...</p>
</articulo>
<articulo>
...
