Perlas del responsive web design

Hoy tocaba un workshop que imparte Javier Usobiaga (@htmlboy) de Swwwet sobre Responsive Web Design organizado por Enpresa Digitala.  Estos cursos monodosis me gustan mucho porque nos ahorran muchas horas de estudio, ya que poniendo las bases de la teoría y las buenas prácticas en pocas horas, luego cada uno se puede pelear con el resto, que es como se interiorizan las cosas.

Hoy han sido cuatro horas, y mañana otras tantas, y aunque mañana empecemos a meternos en materia con el código, hoy han caído unas perlas que creo que pueden ser muy útiles para la comunidad. No voy a hacer un resumen de lo que es el diseño responsive, ya que para eso es mejor asistir al workshop o estudiar el millón de documentación que hay por ahí. Haré una lista de los tricks que me han parecido interesantes. Para mí, por lo menos han sido como una revelación.

Revelación number 1: Cambio del modelo de caja

¿Qué quebraderos de cabeza nos da que la anchura total de una caja sea el width + su borde + su padding, verdad? ¿No sería más sencillo que la anchura sea el width que le pones y si tiene padding lo añada por dentro y no se tenga que sumar? Pues a alguien le han valido sus rezos ya que tenemos solución para esto, y además sencillo y efectivo:

*{
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}

Este cachito de código reseteará todos los elementos para cambiar el modelo de caja. ¿Magia? Lo parece. Esto nos permitirá trabajar de manera más sencilla con bloques de contenido en nuestro proyecto responsive.
Buscando documentación al respecto, he encontrado en la Biblia del CSS (css-tricks.com), un artículo (http://css-tricks.com/box-sizing/) que hace referencia a esto. ¡Es del 2010! Vergüenza me debería dar enterarme a estas alturas, jajaja

Revelación number 2: redimensión de imágenes

Tema controvertido en responsive design: las imágenes. ¿Cómo las redimensionamos? Creo que mañana veremos más soluciones, pero de momento para abrir el apetito:

.img-container img {max-width:100%}

También sirve para vídeo, iframe, canvas y object.

Revelación number 3: el famoso viewport, ¿para qué sirve?

Había utilizado el meta viewport en mis proyectos pero sin entender demasiado para qué. Es sencillo: Los móviles sin esta etiqueta muestran las páginas web en zoom-out por defecto para que el usuario haga zoom-in para navegar. Pero si nuestra web es responsive y no queremos que el dispositivo actue de esa manera, sino que queremos que le haga caso a nuestro css, le ponemos esta línea de código en el <head> para avisarle que somos unos ‘pros’ y tenemos el responsive trabajado. 😉

<meta name=”viewport” content=”width=device-width, inicial-scale=1.0″ />

Este meta es un mundo. Os dejo un artículo sobre sus caraterísticas.

Revelación number 4: ¿Dónde ponemos los breakpoints?

Facil: Cuando el diseño se rompa vas y lo arreglas con una media query. Ya está. Punto pelota.

Revelación number 5: la unidad rem

En responsive se recomienda trabajar con la em en lugar de con px. Si no se está acostumbrado cuesta un pelín al principio, porque tienen ciertas características un poco especiales: las unidades em son relativas al padre. Es decir, 1em no es igual en todas las declaraciones que hacemos en el código, ya que dependerá del font-size que tenga su progenitor. La unidad rem viene a salvar la papeleta porque sigue teniendo lo bueno que tiene el em, que es una unidad relativa, pero nos quita la dependencia de los ‘parientes’, ya que es relativa al root, a la etiqueta html.

Y por hoy eso es todo. La bombillita de la imagen hace referencia a una idea de proyecto que he tenido para el #hackelarre que se va a montar en febrero desde el El comité, pero eso seguramente me dará para otros posts futuros.

Gabon.

Leave a Reply

Your email address will not be published. Required fields are marked *