Un layout responsive se ha vuelto la norma en el diseño web, este tipo de disposición de la página significa que si la ventana que la contiene cambia de tamaño de forma brusca, es decir, de muy grande a muy pequeña y viceversa, nuestros elementos deben estar en la capacidad de reacomodarse para permitir mantener una experiencia de usuario decente y funcional.
Esto siempre ha estado disponible con las reglas de CSS, sin embargo en la última implementación del mismo se tomaron mejores medidas, en parte por la ya existencia del mundo móvil moderno que es uno de los grandes consumidores del diseño responsive.
Si bien existen varios frameworks como Bootstrap o Foundation que nos dan un layout responsive por defecto, no siempre podemos depender de ellos, es por eso que es muy útil saber cómo podemos construir un layout de estas características por nuestros propios medios.
Requisitos
1- Para completar este tutorial vamos a necesitar tener conocimientos básicos de HTML y CSS, ya que son vitales para entender los ejemplos realizados en el tutorial.
2- En el aspecto técnico, requerimos al menos un navegador moderno como Google Chrome, un editor de texto para escribir nuestro código, podemos utilizar Sublime Text o NotePad ++ o hasta el block de notas de Windows o Gedit en Linux si nos sentimos aventureros.
3- Finalmente necesitamos una conexión a Internet para descargar una que otra imagen si deseamos colocarla en nuestro código como veremos en uno de los ejemplos mostrados.
Las propiedades minwidth y maxwidth
Este es quizás el primer aspecto que nos encontramos al trabajar con entornos responsive, ya que muchas veces nos concentramos en cuando la página se haga más pequeña, pero ¿Qué pasa con las nuevas pantallas de 4K? Es por ello que no debemos descuidar la resolución máxima bajo la que nuestra web se ve de forma decente.
En el siguiente ejemplo vamos a demostrar cómo podemos regular nuestro layout gracias a las propiedades mencionadas, para ello vamos a crear un documento HTML con el siguiente contenido:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Layout Responsive ejemplo 1</title> <style> article{ width: 100%; max-width: 1200px; margin: 0 auto; } h1 {text-align:center;} img { width: 100%; height: auto; } .uno { background-color: #222; min-width: 450px; } .dos {background-color:#777} .tres {background-color:#ddd} .float { max-width: 350px; float: left; text-align: justify; } </style></head><body> <article> <h1>Ejemplo de Layout Responsive</h1> <div class="uno float"> <img src="silla.jpg"> </div> <div class ="dos float"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut justo convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis dolor. Aliquam ac nisl vehicula.</p> </div> <div class="tres float"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut justo convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis dolor. Aliquam ac nisl vehicula.</p> </div> </article></body></html>Lo que hicimos es crear tres elementos div que funcionan como unas especies de columnas, entonces le decimos a su elemento contenedor en este caso article que su máximo ancho será de 1200 px, así no importa que tan grande sea la pantalla el diseño nunca va a crecer más de ahí, luego creamos tres clases, una para cada div y a una le asignamos un ancho mínimo de esta forma no importa que tanto se reduzca la pantalla esta siempre va a mantener ese mínimo de proporciones, esto es excelente para imágenes como veremos en la captura de pantalla del ejemplo, y finalmente a la clase float también le asignamos un ancho mínimo. Veamos como luce en el navegador nuestro ejemplo cuando tenemos una resolución grande:
Ahora veamos como escala cuando reducimos un poco la ventana del navegador:
Por último veamos el resultado cuando hacemos que la ventana tenga un tamaño similar al de un móvil:
Pudimos notar como se mantuvo las proporciones establecidas como mínimas y máximas, pero lo más importante es que nuestro diseño se fue adaptando a las diferentes resoluciones con las que lo visualizamos, y de esta manera pudimos hacer que el usuario no perdiera la usabilidad en su experiencia con nuestro sitio.
Claro esto dista de ser algo para ser mostrado en producción, pero nos da una idea de por donde debemos enfocar algunos de los esfuerzos cuando estemos trabajando en diseños reales para nuestras aplicaciones y páginas, lo interesante es que las columnas se fueron ajustando de manera que pudimos ver como pasamos de un diseño de 3 columnas a un diseño de una sola columna.
Utilizando el Padding Relativo
El padding es una medida que nos permite mantener un espacio del contenido contra los bordes del contenedor de forma que establecemos un límite de hasta dónde va a llegar, no se debe confundir con el margen ya que ese es otro concepto.
El tema es que el padding casi nunca es tomado en cuenta al momento de hacer un layout que sea responsive resultando en textos y contenidos que luego quedan de forma no estética al momento de cambiar la resolución con la que se ve el diseño.
En el siguiente código lo que haremos será colocar un padding que funciona de forma relativa, es decir, a medida que se va ajustando el tamaño de la ventana, nuestro padding ira cambiando para mantener las proporciones y de esta forma haciendo que el contenido siempre se mantenga como lo hemos dispuesto a pesar de tener menos espacio por el cambio de resolución. Veamos el ejemplo de nuestro código:
<!DOCTYPE html><html lang="es"><head> <meta charset="UTF-8"> <title>Padding Relativo</title> <style> .contenido {padding:0 5% 0 5%;} aside {padding:0 10% 0 20%} .comentario { padding:0 0 0 10%; background-color:#ddd; } </style></head><body> <div class="contenido"> <header>Mantener las proporciones con un Padding relativo</header> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut justo convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. </p> <aside> <h1>Comentarios</h1> <div class="comentario"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut justo convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. </p> <div class="comentario"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut justo convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. </p> </div> </div> </aside> </div></body></html>Como vemos definimos las propiedades padding de cada clase con valores porcentuales en vez de valores fijos con medidas en píxeles, de esta forma el intérprete de estilos del navegador le dará una medida que vaya acorde al valor que hemos colocado, al final cuando vemos nuestro ejemplo en el navegador obtenemos lo siguiente:
Ahora si reducimos el tamaño de la ventana veremos cómo se realiza un ajuste pero manteniendo una distancia proporcional del texto con los bordes:
Notamos entonces como nuestro diseño se mantiene y evita la deformación al reducir la resolución de quien lo contiene, manteniendo así una experiencia consistente para nuestro usuario.
A pesar que hay conceptos más avanzados que tocaremos en otros tutoriales, con este par de trucos o tips podemos lograr conseguir darle nueva vida a nuestros viejos sitios, y mucho más ahora que buscadores como Google nos piden una versión móvil para poder darnos preferencias en los resultados. Lo más importante para conseguir grandes resultados es experimentar y mantenernos practicando mucho para que estas soluciones salgán de forma natural de nuestra mente y no tener que recurrir a guías a cada momento.
Con esto finalizamos este tutorial, como vemos no necesitamos ningún framework para lograr resultados responsive, y tampoco necesitamos salir de la combinación HTML + CSS, lo único es que si debemos construir nuestras propias herramientas, sin embargo la satisfacción de mejorar nuestro diseño es una gran recompensa.
