Initializr: Con las grandes plantillas vienen grandes "Responsividades"
La plantilla adaptable (responsiva) ahora está disponible en Initializr, te ayudará a lidiar con los diferentes dispositivos que se utilizan para mostrar su sitio. Móviles, tabletas (tablets), netbooks, portátiles (laptops), monitores de computadores de escritorio (desktops) y monitores GIGANTES de desktops.
Lograr que tu sitio se muestre correctamente en todos éstos dispositivos es una pesadilla. Pues adivina, la pesadilla... no se ha acabado completamente! Pero por lo menos, el código de Boilerplate para hacer a tu sitio adaptable, está aquí para hacerte la vida más fácil.
Veamos cómo funciona y cuáles son las mejores prácticas introducidas en ésta nueva plantilla.
Pequeño recordatorio sobre el diseño web adaptable
Para aquellos que han estado viviendo en una caverna durante los últimos meses (entiéndase como la gente que tiene vida y no gasta sus días leyendo tweets y blogs), probablemente necesiten una pequeña actualización con respecto a lo que el diseño web adaptable, quiere decir.
El concepto, introducido por Ethan Marcotte, es bastante sencillo: La disposición de los elementos del sitio, debe adaptarse dependiendo del tamaño de la pantalla para que sea siempre conveniente y fácil de leer para el usuario. En un dispositivo móvil por ejemplo, es más cómodo tener una vista vertical, minimalista y a una sola columna que tener 2 o 3 columnas - lo cual sería más apropiado para un desktop.
Qué hay sobre las tablets? Tal vez también podríamos adaptar el diseño para ajustarse al tamaño medio de la pantalla? Como no es posible saber el tamaño de la pantalla de los dispositivos de nuestros usuarios, aún hay que buscar un método para que funcione bien en cualquier parte. (Libro recomendado: Responsive Web Design por Ethan Marcotte)
Para diseñar un sitio adaptable, hay que olvidar la disposición usual de anchos estáticos de 960px y empezar a trabajar con contenidos líquidos que respondan a anchos con porcentajes y media-queries (éste tema se abordará más adelante).
Un diseño líquido (o fluido) con anchos basados en porcentajes
La primera cosa que nuestra página necesita es un diseño "líquido". Se conoce como diseño líquido a que el texto se adapte al tamaño del contenedor y a que las proporciones se mantengan cuando la resolución cambia (cuando la pantalla cambia, bien sea porque el usuario la reajusta o porque el dispositivo cambia). Para lograr que esto funcione no podemos tener ningún código estático, ni de anchos, padding horizontal ni márgenes horizontales. Así que podemos básicamente usar sólo porcentajes:
#esto-es-un-contenedor-fluido{
width:50%;
padding: 20px 10%;
margin:0 10%;
}
Si sigues estrictamente éste método, tu diseño se escalará perfectamente desde la pequeña pantalla de un móvil al monitor gigante de un desktop. Así que ya es bastante interesante, pero todavía tenemos el mismo diseño para cada dispositivo, lo cual está muy lejos del ideal! Pero no te preocupes, ahora viene la parte divertida con media-queries, con lo que solucionaremos el problema.
Primer acercamiento a media-queries en dispositivos móviles
Media-queries es una gran manera de especificar diferentes estilos dependiendo del dispositivo usado (señalando resoluciones de pantalla específicas o la orientación, por ejemplo). La idea es empezar con los dispositivos de resolución más baja y luego ir progresando hacia las pantallas más grandes.
La vista "móvil"
Ésta es la sencilla vista de la plantilla adaptable para móviles. Aún no ha tomado en cuenta nada relacionado con media-queries.
Puedes ver que el aside (bloque naranja), ha sido localizado en la parte baja del sitio.
Recuerda que el elemento aside, no se refiere a que deba estar solamente a la izquierda o a la derecha de otro elemento. Su definición semántica es que el contenido de éste elemento, debe estar relacionado al contenido principal, por lo tanto, no hay ningún problema con que esté debajo de los artículos.
La vista "intermedia"
Si éste sitio es visto desde un dispositivo más grande (como una tablet o un smartphone en posición horizontal u orientación de paisaje como también se le conoce), el menú vertical se volverá molesto y feo porque los botones se estrecharán demasiado. Por lo que podemos usar un media-query para mostrarlos horizontalmente para pantallas mayores a 480px de ancho, algo como esto:
@media only screen and (min-width: 480px) {
nav a{
float:left;
width:27%;
margin:0 1.7%;
padding:25px 2%;
margin-bottom:0;
}
}
Lo que tendrá el siguiente resultado:
La vista "ancha"
Ahora tenemos un menú más conveniente para las tablets. Pero qué pasaría si abriéramos la página en un portátil? Éstos tienen pantallas más grandes, así que la columna vertical única podría no ser lo mejor para ajustarse a éstos dispositivos. Sería mejor una diagramación a dos columnas, para que podamos mover tanto el aside como el menú a la derecha de la página, para mantener el contenido principal en la izquierda. Así que vamos a usar un segundo media-query para las resoluciones mayores a 768px de ancho:
@media only screen and (min-width: 768px) {
#titulo{
float:left;
}
nav{
float:right;
width:38%;
}
#artículo principal{
float:left;
width:57%;
}
#aside principal{
float:right;
width:38%;
}
}
Esto es lo que obtenemos en una pantalla de aproximadamente 900px de ancho:
Ahora tenemos una diagramación a dos columnas, que se ajusta a la "vista de un desktop"". Ahora ves que no era difícil empezar desde la versión móvil! Admito que tal vez no sea muy intuitivo al principio, pero te acostumbrarás bastante rápido, y definitivamente conseguiremos código mucho más limpio.
Habrás notado unas nuevas sombras en ésta vista. Los efectos CSS3, como las sombras, consumen CPU por lo que no son muy recomendables para móviles y dispositivos con CPUs bajas en general. Por el contrario, probablemente ésta última diagramación será mostrada en un dispositivo más poderoso como un portátil o un desktop, ya que podemos esperar que sean lo suficientemente buenos para manejar éstos efectos.
La vista de "ancho máximo"
El último pero no menos importante. Necesitamos que nuestro sitio se muestre de mejor manera en las pantallas anchas. Si dejamos el código como está ahora y abrimos la página en una de éstas pantallas, un párrafo de 5 líneas se convertirá en una sola línea gigante de texto, lo que es terrible para la legibilidad! Necesitamos un límite máximo para el ancho para evitar esto en las pantallas anchas. Éste límite puede ser cualquier cosa: 960px, 1140px, 2000px, lo que sea, simplemente escoge el que tenga más sentido para tu sitio.
Para éste caso, elegí como límite 1140px, lo que se ajusta bien para pantallas de 1280px de ancho, que es la resolución más común. Si utilizamos un wrapper (bien conocido por algunos como el estilo que envuelve básicamente todo el contenido), con un ancho fijo y márgenes automáticas el trabajo se habrá completado a la perfección.
@media only screen and (min-width: 1140px) {
.wrapper{
width:1026px; /* 1140px - 10% para los márgenes */
margin:0 auto;
}
}
Hice que el ancho del wrapper fuera de 1026px (1140px - 10%) porque en las diagramaciones previas los márgenes habían sido ajustados al 10%. Por lo tanto si reajustamos el tamaño del navegador, el contenido cambiará sin problemas y se ajustará. Ésta es la diagramación más ancha que podemos conseguir:
Y esto fue todo con media-queries!
Regalos para los desarrolladores web
Jonathan Verrecchia, en su blog, en el post oficial de la guía para Initializr Responsive, dio unos regalos de navidad, los cuales pongo a continuación con su descripción en español:1er regalo: Un demo funcional!
Actualmente ya hay un demo funcional para la plantilla adaptable, para ver si ésta funciona como se espera antes de bajar cualquier archivo. Esto también es particularmente conveniente para ver como corre en tu móvil o tableta.
Puedes encontrar el demo en initializr.com/try.
2do regalo: La proporción áurea
Ésta es una plantilla adaptable que trae consigo la magia negra de la proporción áurea. Tal vez hayas escuchado de ella, es una extraña proporción matemática que a nuestros cerebros les parece gustar. Así que si estás usando la proporción áurea en tus diseños, por alguna razón a la gente le va a gustar más, sin siquiera saber por qué.
Se han establecido las proporciones de las secciones de la izquierda y la derecha de la vista del desktop a 62% y 38% (ten en cuenta las márgenes) respectivamente, para que de éste modo siempre se ajuste a la proporción áurea al reajustar el tamaño del navegador.
Aquí hay también una calculadora de proporción áurea (en inglés) para que puedas jugar con ella, además de un interesante tutorial(también en inglés) de cómo aplicarla a tu diagramación. Puedes sentirte libre de usar ésta magia negra o no.
Legibilidad para la victoria
Ésta nueva plantilla viene con una hoja de estilos bastante decente para una buena legibilidad. Recuera que la legibilidad es crucial para tus usuarios. Les hará leer lo que tienes para decir en vez de sólo ver las imágenes, y si la lectura es placentera hará que estén más ansiosos por suscribirse, hacer retweets, comprar tus cosas o lo que sea que quieres que hagan. No hay mejor forma de hacerlo!
Aquí hay unos consejos para una legibilidad mejorada:
- Utiliza una fuente grande con un interlineado adaptado (la plantilla utiliza 16px/24px).
- Una línea de texto debe tener aproximadamente 80 caracteres (esto ya viene listo en la plantilla).
- Evita los párrafos con más de 5 líneas.
- Evita secciones con más de 5 párrafos seguidos.
- Pon cosas (tablas, imágenes, código, decoraciones, etc.) entre los párrafos cuando puedas y tenga sentido, para que el lector pueda tomar un respiro antes de continuar con el siguiente.
4to regalo: Un repositorio en Github para ésta plantilla adaptable
Algunos podrán haber caído en cuenta que el repositorio de Initializr en Github es el de la página web, no el de la plantilla, por lo que es bastante inútil para ti a menos que quieras saber cómo generar archivos en Java! Se ha creado un nuevo repositorio para ésta plantilla, así que puedes sugerir modificaciones y mejoras para ésta. Mucho más útil!
Éste es el nuevo repositorio: github.com/verekia/initializr-template.
Disfruta!
Espero que ésta nueva plantilla adaptable haga de tu vida como desarrollador web algo más fácil, para que puedas enfocarte en tu trabajo actual en vez de estar configurando una y otra vez el mismo código. A Jonathan le encantaría conocer tus comentarios sobre esto, así que siéntete libre de abrir temas en Github o mencionar @Initializr o @verekia en Twitter. Cómo última opción te ofrezco enviarme a mí un correo a soy@diegoante.com, y yo lo traduciré para Jonathan.
Gracias por haber leído sobre Initializr Responsive, esperamos que te sea de gran ayuda!
