En este post voy a explicar un modo muy sencillo de hacer el diseño de una página adaptativo.
Un diseño adaptativo es aquel en el que la distribución y los elementos que aparecen en la página cambian dependiendo del tamaño de la pantalla de visualización.
Hoy en día esto es imprescindible debido a la gran variedad de dispositivos capaces de acceder a una página web: PCs, Móviles, Tablets, Televisiones, etc.
El objetivo es que la página web tenga 3 diseños:
- Dispositivos con pantalla grande, más de 980px
- Dispositivos con pantalla pequeña, entre 480px y 980px
- Dispositivos con pantalla mini, menos de 480px
A continuación voy a mostrar el resultado final para después ir explicando como he conseguido cada uno de los efectos:
Estructura de ficheros necesarios:
- Index.html: HTML utilizado en el ejemplo.
- /CSS/colors: CSS para el coloreado de los elementos.
- /CSS/base: CSS común.
- /CSS/big: CSS para el diseño grande.
- /CSS/small: CSS para el diseño pequeño.
- /CSS/mini: CSS para el diseño mini.
HTML
Adaptive Page Design <!--Ajusta el viewport al 100% del tam del dispositivo --> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta charset="utf-8" /> <!-- Style sheet--> <link href="css/colors.css" rel="stylesheet" media="all" /> <link href="css/base.css" rel="stylesheet" media="all" /> <link href="css/big.css" rel="stylesheet" media="screen and (min-width: 981px)" /> <link href="css/small.css" rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 980px)" /> <link href="css/mini.css" rel="stylesheet" media="screen and (max-width: 480px)" /></pre> <header> <h1>HTML5 Adaptive Page Design</h1> </header> <div id="wrapper"><nav id="main-nav"> <h2>Menu</h2> <ul class="menu display-big display-small"> <li><a href="Home">Menu Item1</a></li> <li><a href="HTML5">Menu Item2</a></li> <li><a href="CSS">Menu Item3</a></li> </ul> <select class="display-mini"><option value="inicio">Menu Item1</option><option value="html5">Menu Item2</option><option value="css">Menu Item3</option> </select> </nav><section id="main-section"><article> <h1>HTML5</h1> HTML5 is a markup language for structuring and presenting content for the World Wide Web and a core technology of the Internet. It is the fifth revision of the HTML standard (created in 1990 and standardized as HTML 4 as of 1997)[2] and, as of December 2012, is a W3C Candidate. In 1980, physicist Tim Berners-Lee, who was a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[2] Berners-Lee specified HTML and wrote the browser and server software in the last part of 1990. In that year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes[3] from 1990 he listed[4] "some of the many areas in which hypertext is used" and put an encyclopedia first. </article><article> <h1>CSS</h1> Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formattwrappering) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided into several separate documents called "modules". Each module adds new capabilities or extends features defined in CSS 2, over preserving backward compatibility. Work on CSS level 3 started around the time of publication of the original CSS 2 recommendation. </article> </section></div> <footer> Footer <select class="display-mini"><option value="inicio">Menu Item1</option><option value="html5">Menu Item2</option><option value="css">Menu Item3</option> </select> </footer> <pre>
Es necesario añadir la etiqueta meta “viewport” para conseguir que nuestra página se adapte al 100% del tamaño de la pantalla, no es objetivo de este post nombrar todas las posibilidades que ofrece, al final dejaré algunos enlaces con más información al respecto.
El atributo media de los css incluidos en el html funciona como un “trigger” haciendo que el css correspondiente se active únicamente cuando se cumplan unas condiciones. En nuestro caso cuando el modo de representación de la página sea en una pantalla y se cumplan las condiciones de tamaño indicadas.
Se han añadido las clases e identificadores necesarios para realizar la maquetación de la página y algunos elementos aparecen duplicados como el menú que está definido mediante una lista y mediante un selector. Dependiendo del tamaño de pantalla se debe mostrar uno u otro.
Colors.css: Se aplica siempre, se podría incluir su contenido en el base, pero creo que así queda todo más ordenado.
body {
background-color: #808080;
color: #000;
}
a, a:link, a:visited, a:active {
color: #00563c;
}
a:hover {
color: #FF0000;
}
header {
background-color: #07939e;
}
nav {
background-color: #81C0C5;
}
section {
background-color: #bababa;
}
footer {
background-color: #81C0C5;
}
Base.css: Se aplica a todos los elementos, además de modificar algunas propiedades del menú, oculta por defecto todas las clases marcadas como display-big, display-small y display-mini.
/* CSS comun, por defecto se oculta todo lo que se puede
mostrar opcionalmente, en otros CSS se reemplazará
este comportamiento para hacer que se muestre cada uno
de los elementos sólo cuando se cumpla la condición requerida*/
.display-big {
display: none;
}
.display-small {
display: none;
}
.display-mini {
display: none;
}
.menu {
padding-left: 0;
}
.menu li {
list-style-type: none;
}
Big.css, Small.css y Mini.css: Se aplicarán únicamente cuando la pantalla tenga las dimensiones especificadas en el atributo media. Con estos css podríamos cambiar completamente el diseño de la página dependiendo de en qué modo estemos. En el ejemplo se cambia la maquetación, algunas propiedades de representación del menú y se muestra el menú tipo select únicamente en el diseño mini.
La parte más importante se encuentra en display: inherit ¡important.
Recordemos que en el base.css se ocultan todos los elementos, es en esta línea en la que se muestran los elementos marcados con la clase de diseño de la que se encarga el css actual. Al indicar “!important” estamos indicando que este css debe aplicarse sobre otros con los que entre en conflicto.
Big.css
.display-big {
/* !important hace que esta regla css se aplique antes que cualquier otra,
en este caso, se aplicara esta en lugar de la definida en base.css
en la que se ocultan los elementos de la clase display-big */
display: inherit !important;
}
header, footer, #wrapper {
margin-left: auto;
margin-right: auto;
clear: both;
width: 100%;
max-width: 1500px;
}
#main-nav {
float: left;
width: 20%;
max-width: 300px;
}
#main-section {
margin-left: 21%;
width: 79%;
max-width: 1200px;
}
Small.css
.display-small {
/* !important hace que esta regla css se aplique antes que cualquier otra,
en este caso, se aplicara esta en lugar de la definida en base.css
en la que se ocultan los elementos de la clase display-small */
display: inherit !important;
}
.menu li {
display: inline;
}
Mini.css
.display-mini {
/* !important hace que esta regla css se aplique antes que cualquier otra,
en este caso, se aplicara esta en lugar de la definida en base.css
en la que se ocultan los elementos de la clase display-mini */
display: inherit !important;
}
select.display-mini {
font-size: 1.2em;
width: 100%;
}
Con este mecanismo tan sencillo podemos conseguir que la experiencia del usuario mejore enormemente haciendo que la navegación en nuestra página web sea cómoda tanto en dispositivos con pantalla grande como en dispositivos con pantalla pequeña.
En futuros post hablaré de frameworks CSS para diseños adaptativos como: Skeleton o Bootstrap.
Comentarios con sugerencias y problemas detectados son bienvenidos.
—
Más información:
Juan Carlos Sánchez Calle 
Your feedback is important…