Diseño fluido con CSS3
Puf, que recuerdos!
Este cambio viene motivado principalmente porque los usuarios «consumen» nuestros sitios web desde múltiples dispositivos con distintos tamaños de pantalla al contrario de lo que sucedía hace unos años, donde más o menos todo el mundo sólo navegaba por internet desde la pantalla de 15 o 17″ de su ordenador. Para adaptarnos a estos cambios en el diseño, las nuevas capacidades de CSS3 a través de las media queries y otras propiedades CSS más antiguas han sido determinantes, permitiéndonos crear diseños fluidos y que se adapten al dispositivo, móvil o no, en el que el usuario está viendo nuestra web.
En este caso vamos a ver con un pequeño ejemplo cómo trabajar con elementos e imágenes fluidas que vayan adaptándose a la anchura del navegador. Si necesitáis información acerca de diseño adaptable con media queries no os perdáis nuestro artículo sobre responsive design, publicado en nowezone hace unos meses. Podéis profundizar mucho más en nuestro curso de diseño web con HTML5 y CSS3 si os atrevéis…
Fijo=pixels, Fluido=porcentaje
Pues si, básicamente consiste en trabajar las anchuras de los distintos elementos que componen nuestra maqueta en unidades de porcentaje (%). Cualquiera de las propiedades CSS que trabajan con medidas (anchura, altura, márgenes, padding, etc) pueden usar distintas unidades de medida. En nuestro caso, puesto que necesitamos una unidad relativa para que vaya cambiando de valor, vamos a usar el porcentaje para determinar la anchura de los elementos de nuestra web. En el bloc de notas o tu editor de código favorito empezamos escribiendo el código HTML básico:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Diseño fluido</title> </head>
<body>
<div class="contenedor">
<div class="elem-fluido">
Esto es un div de anchura variable
</div>
</div>
</body>
</html>
Guarda tu archivo como fluido.html, por ejemplo. Hemos creado simplemente un div con la clase contenedor que utilizaremos para colocar dentro de él todos los elementos de nuestra página. Las clases CSS aún no las hemos creado, lo haremos a continuación. Dentro de nuestro div contenedor hemos colocado otro div, con la clase elem-fluido que será el primer elemento de nuestra página, con un texto en su interior. A continuación vamos a crear los estilos CSS, lo haremos en el mismo documento HTML para que lo veáis todo junto más clarito:
<style type="text/css">
body {
margin: 0;
}
.contenedor {
width: 100%;
height: 600px;
background-color: #E0E0E0;
}
.elem-fluido {
width: 75%;
margin: auto;
padding: 10px 0;
font-family: "Open Sans", Arial, sans-serif;
text-align: center;
font-size: 1.5em;
background-color: #2887E6;
color: #FFFFFF;
}
</style>
En nuestro CSS hemos creado los siguientes estilos:
body: para el cuerpo <body> de nuestra página, definimos margin: 0 para eliminar los márgenes y que el contenido se pegue a la parte superior izquierda de la página.
.contenedor: definimos las propiedades del div contenedor con un selector de clase en el que vamos a encontrar todo el contenido de nuestra página. Le damos un color de fondo (background-color) gris claro y una altura de 200 px (height) para distinguirlo visualmente Y nos queda la más importante, width, que en este caso lo definimos al 100% de la anchura de la página.
.elem-fluido: En el interior del contenedor metimos un elemento <div> al que le aplicamos también un estilo con un selector de clase. Con las propiedades font-family, font-size, text-align y color definimos las propiedades del texto: tipo de letra, tamaño, alineación (centrada) y color (blanco). También le ponemos un color de fondo (background-color) en este caso azul, para identificarlo también visualmente, y algo de padding (10px) para separar el borde del div del texto y darle un poco de aire. Y de nuevo, las propiedades más importantes: width, anchura en este caso definida al 75% medido respecto al div contenedor. Como el elemento no ocupará el total de ancho del contenedor, con la propiedad margin: auto, conseguimos que se vea siempre centrado.
Probando: redimensiona la ventana del navegador
Abre tu documento en tu navegador favorito y prueba a redimensionar la ventana del navegador. Hazla más ancha y estrecha tirando del borde derecho de la ventana y verás como el tamaño del contenedor gris se adapta para ocupar el total de la ventana del navegador sin que aparezca ninguna barra de scroll horizontal. Igualmente verás como el div azul ocupa siempre las tres cuartas partes (75%) del div gris. De esta manera conseguimos que la anchura de nuestros elementos se adapte automáticamente a la anchura de la ventana, independientemente del tamaño de ésta. Es importante tener en cuenta que cuando definimos la anchura de un elemento en porcentaje, ese porcentaje está referido a la anchura de su predecesor, de la siguiente manera:
- Ventana del navegador (body) = anchura 100%
- .contenedor = 100% de la ventana del navegador (su predecesor)
- .elem-fluido = 75% del elemento contenedor (su predecesor)
Con imágenes también funciona
Para las imágenes también funciona, es decir, podemos hacer que una imagen cambie su anchura para adaptarse al tamaño de la ventana u otros elementos. Vamos a ver como se haría y luego hacemos una serie de puntualizaciones. Primero, descárgate una imagen cualquiera o cógela de tu ordenador. Para simplificar las cosas, copiala en la misma carpeta en la que tengas tu documento HTML y añadimos la imagen en el código de nuestra página:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Diseño fluido</title> </head>
<body>
<div class="contenedor">
<img src="curso-html5-css3-js.jpg" class="img-fluida" />
<div class="elem-fluido">
Esto es un div de anchura variable
</div>
</div>
</body>
</html>
Lo ponemos en negrita para que se vea claramente dónde la hemos introducido: la tenemos dentro del contenedor y justo antes del <div> fluido. Obviamente, si tu imagen tiene otro nombre distinto, deberás cambiar el atributo src=»curso-html5-css3.jpg» por el nombre de archivo que tenga tu imagen.
Primera cosa importante: si queremos que la anchura de nuestra imagen cambie debemos evitar añadir los atributos width y height en la etiqueta img de nuestra imagen. Algunos programas, como Dreamweaver, añaden automáticamente estos atributos que indican la anchura y altura en pixels y por tanto, al ser tamaños fijos, harían que no funcionaran nuestros estilos en porcentaje. Por tanto, los eliminamos si estuvieran.
A continuación vamos con el CSS para la imagen:
.img-fluida {
display: block;
margin: auto;
width: 75%;
}
Definimos la clase .img-fluida que tiene aplicada la imagen con las propiedades display:block, para la imagen se vea en formato de bloque (por defecto se ven en linea) y margin:auto para que la imagen se centre automáticamente, igual que el div fluido. E igual que antes, le ponemos un 75% en width para que tenga el mismo tamaño que el div fluido y se adapte al tamaño de la ventana del navegador. Probamos y voila! vemos como nuestra imagen también va cambiando de tamaño a medida que redimensionamos la ventana.
Cuidado con las imágenes fluidas…
Cuando usamos las imágenes de mapa de bit con esta técnica debemos tener cuidado con dos cosas:
Proporciones. Nuestra imagen originalmente tiene unas proporciones determinadas que vienen definidas por la relación que existe entre su altura y anchura. Por ejemplo, una imagen de 300×300 pixels tiene una proporción de 1:1, es decir, cuadrada. Es importante no modificar esta proporción pues la imagen se distorsionaría y no se vería correctamente. Afortunadamente es muy sencillo, si os fijáis en el css solo hemos definido la propiedad width (anchura) por lo que nuestro navegador calculará automáticamente la altura correspondiente para mantener sus proporciones originales.
No creemos que a apple le haga mucha gracia ver su logo distorsionado… a la derecha
Tamaño (en pixels). Como todos sabemos, cuando aumentamos el tamaño en pixels de una imagen de mapa de bits esta pierde calidad. Se pixela. Cuanto más grande, peor. Como al definir la anchura de la imagen en porcentaje ésta puede tomar tamaños desde muy grandes hasta muy pequeños, es muy importante asegurarnos que, como mínimo, el tamaño original de nuestra imagen es el tamaño más grande con el que puede verse en la web. En nuestro ejemplo, suponiendo que como mucho la imagen puede verse en una pantalla con resolución 1920×1080 (HD) y hemos definido la anchura de la imagen en el 75%, deberíamos contar con una imagen de al menos 1440×810 para que no llegue nunca a pixelarse. Esto puede provocar un problema serio: al usar imágenes tan grandes podemos tener tiempos de carga elevados lo cual sería un desastre. Afortunadamente en Nowezone te damos claves para resolver también este problema.
Para resolver esta cuestión y dependiendo del tipo de diseño que queramos crear, podemos usar la propiedad CSS3 max-width, la cual determina la anchura máxima que puede tener un elemento. Aplicado a la imagen, si ponemos por ejemplo max-width: 300px; estaríamos indicando que como mucho, la imagen puede medir 300px de ancho y no puede redimensionarse más allá de ese valor. Lo que vamos a hacer es añadirlo a nuestro CSS con la anchura de nuestra imagen original:
.img-fluida {
display: block;
margin: auto;
width: 75%;
max-width:840px
}
Con esto estamos indicando que la imagen no puede superar los 840px (que es el tamaño original de la imagen) y por tanto nunca se verá pixelada.
Conclusión
Es muy sencillo crear elementos fluidos trabajando con porcentajes. Si combinamos esta técnica con las media queries podemos hacer webs completamente adaptables a cualquier dispositivo y tamaño de pantalla. Obviamente, si nuestro diseño se complica nos resultará algo más laborioso, pero no hay nada que un buen boceto no pueda solucionar. Tener claras las ideas desde el principio y elaborar un correcto (y completo) mock-up de nuestro proyecto es vital para no perdernos y repetir lineas y lineas de código innecesarias.
Os dejamos el código completo y un link para ver el resultado final:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Diseño fluido</title>
<style type="text/css">
body {
margin: 0;
}
.contenedor {
width: 100%;
height: 600px;
background-color: #E0E0E0;
}
.elem-fluido {
width: 75%;
margin: auto;
padding: 10px 0;
font-family: "Open Sans", Arial, sans-serif;
text-align: center;
font-size: 1.5em;
background-color: #2887E6;
text-shadow: 0px 0px;
color: #FFFFFF;
}
.img-fluida {
display: block;
margin: auto;
max-width:840px;
width: 75%;
}
</style>
</head>
<body> <div class="contenedor"> <img src="curso-html5-css3-js.jpg" class="img-fluida" /> <div class="elem-fluido"> Esto es un div de anchura variable </div> </div> </body> </html>
No dejéis de visitarnos en Nowe!
TE PUEDE INTERESAR
El mundo de la ilustración: Más allá de los dibujos.
El mundo de la ilustración: Más allá de los dibujos. El fascinante mundo de la ilustración es algo más que hacer dibujos. Se trata de una profesión artística con un altísimo componente creativo que se puede adaptar a muchas necesidades de comunicación de las empresas....
Ilustración al detalle. Kashe Gómez.
El poder de una ilustración al detalle Una ilustración bien hecha suele gustar a todos pero cuando miras detenidamente y descubres ciertos detalles, esa obra se queda en tu memoria. Tenemos un ejemplo claro en algunas de las ilustraciones que nos ha enseñado...
Toño Sépul. Constancia y esfuerzo para un trabajo bien hecho.
Antonio Foguet es Toño Sépul, un diseñador con mucha imaginación y una capacidad de trabajo que le hace ser muy eficaz en todos los proyectos en los que participa. Alumno del Certificado de Ilustración, ya realizó Diseño de Productos Gráficos en Nowe. Hoy hablamos con...