Hace unas semanas presentamos el nuevo rediseño del sitio web librosweb.es. En este artículo explico cómo fue el proceso que seguí para la actualización, tanto desde el punto de vista técnico como del diseño. Mi propósito no es dar lecciones de nada a nadie, sino contar mi experiencia por si te puede servir para coger ideas y aplicarlas en tu propio trabajo.
Planificación
Antes de comenzar a rediseñar el sitio, estos fueron los principales objetivos que me marqué:
- El nuevo diseño debía basarse en Bootstrap 3, en vez de continuar con la versión Bootstrap 2.
- Además de los móviles, tablets y escritorios normales, el nuevo diseño responsive debía tener un cuarto punto de ruptura para los escritorios de alta resolución (que sois la mayoría de los que visitáis el sitio).
- El nuevo diseño debía seguir la línea minimalista de eliminar cualquier elemento que no sea estrictamente necesario.
Actualizando a Bootstrap 3
El cambio tecnológico más importante detrás del rediseño ha sido el cambio de Bootstrap 2 a Bootstrap 3, la versión más reciente del famoso framework CSS. Como actualizar de una versión a otra no es posible, tuvimos que rehacer prácticamente todas las reglas de nuestro archivo CSS y también actualizamos el código HTML de todas las páginas (especialmente los atributos class que definen la estructura de la página).
Al margen de estos detalles técnicos, el principal cambio de Bootstrap 3 es lo que sus creadores denominan estrategia "mobile first". En la anterior generación de frameworks CSS, primero se diseñaba el sitio para escritorios normales y luego se añadían media queries de CSS para ajustar el diseño en los dispositivos inferiores (móviles y tablets).
Bootstrap 3 te obliga a diseñar primero la versión para el dispositivo más pequeño: los móviles con poca resolución y en vertical. Después tienes que ir añadiendo los media queries para los otros dispositivos en orden creciente según su tamaño: tablets, escritorios normales y escritorios muy grandes.
De esta manera, el nuevo sitio es totalmente responsive y tiene cuatro puntos de ruptura en función de la resolución del dispositivo. La hoja de estilos tiene más o menos la siguiente estructura (tal y como expliqué en esta pregunta que plantearon en el foro):
/* ESTILOS NORMALES (para móviles en vertical) */
body { ... }
p { ... }
/* ESTILOS RESPONSIVE para Móviles en horizontal o tablets en vertical */
@media (min-width: 768px) {
...
}
/* ESTILOS RESPONSIVE para Tablets en horizonal y escritorios normales */
@media (min-width: 1024px) {
...
}
/* ESTILOS RESPONSIVE para Escritorios muy anchos */
@media (min-width: 1200px) {
...
}La estrategia "mobile first" es la que incorporan todos los frameworks CSS modernos, por lo que te recomiendo que te adaptes cuanto antes a esa forma de diseñar sitios y aplicaciones web.
Por otra parte, una de las desventajas de Bootstrap 3 es que su archivo CSS completo es mucho más grande que el de Bootstrap 2, por lo que puede penalizar ligeramente el tiempo de carga de tus páginas.
A pesar de estas desventajas, Bootstrap 3 es mucho mejor que su antecesor en todos los aspectos técnicos, tal y como puedes comprobar leyendo el manual oficial de Bootstrap 3. Mi recomendación es que si vas a desarrollar un proyecto nuevo, solamente utilices Bootstrap 3. Si el proyecto ya está diseñado con Bootstrap 2, creo que la conversión no merece la pena a menos que dispongas de muchos recursos para hacerlo o sepas que el proyecto va a crecer en el futuro.
Otros cambios técnicos
Como Bootstrap 3 me obligaba a cambiar todas las plantillas HTML del sitio, aproveché para incorporar un pequeño cambio que estoy introduciendo últimamente en todas las aplicaciones que desarrollo. El elemento <body> de todas las páginas incluye ahora un atributo id con un código único para cada página. Observa por ejemplo la portada del sitio:
<body id="p-0" class="homepage">
...
</body>El atributo id es un código numérico único para cada página (p-0 es la portada, p-1 es la página de índice de los libros, p-1-1 es la página de índice de un libro, etc.) Como este valor es único para cada página y está a nivel de <body>, me permite simplificar mucho los estilos CSS del sitio. Para no volverme loco, como parte de la documentación del sitio mantengo actualizado un catálogo de páginas con sus correspondientes atributos id:
| Código | Página | URL |
|---|---|---|
p-0 |
Portada | / |
p-1 |
Índice de la sección de libros | /libros |
p-1-1 |
Índice de un libro | /libro/{titulo} |
p-1-2 |
Página interior de un libro | /libro/{titulo}/{seccion}/{pagina} |
| ... | ... | ... |
Además, como las páginas que pertenecen a una sección del sitio suelen tener estilos muy parecidos, utilizo el atributo class del <body> para aplicar un mismo valor a las diferentes páginas de una misma sección (libros, tutoriales, foro, etc.) Así que por ejemplo la hoja de estilos para la sección de los libros tiene este aspecto:
/* Estilos comunes para todas las páginas de la sección de libros */
body.libros {
h1 { ... }
p { ... }
}
/* Estilos específicos para las páginas interiores de los libros */
body#p-1-2 {
h1 { ... }
p { ... }
}Iconos
Como me obsesiona el diseño limpio y no quiero penalizar el tiempo de carga de las páginas, soy muy reacio a incluir imágenes o iconos en el diseño de las páginas. Por eso no utilizo directamente la increíble colección de iconos llamada FontAwesome. En su lugar creé mi propia fuente de iconos gracias al excelente servicio Fontello y me quedé solamente con seis de los más de 400 iconos que incluye FontAwesome.
Logotipo
Debido al diseño responsive el logotipo del sitio se muestra en tres tamaños diferentes y en dos colores diferentes. En el pasado utilizaba la técnica de embeber la imagen PNG del logotipo en el propio archivo CSS. Pero con las seis variantes del logotipo que necesita el nuevo sitio, esto aumentaría demasiado el tamaño del archivo.
Así que convertí el logotipo en un archivo vectorial SVG que puedo manipular para mostrarlo en cualquier tamaño y con cualquier color. Para evitar tener que hacer una conexión al servidor para descargar el logotipo del sitio, decidí incluir el propio contenido del archivo SVG directamente dentro del HTML de cada página.
Buscando inspiración para el diseño gráfico
Si alguien te dice que ha diseñado algo sin inspirarse en un diseño anterior creado por otra persona, simplemente te está mintiendo. Nadie crea nada completamente original. De ahí la famosa frase de Picasso: "Los buenos artistas copian, los genios roban".
Como mis habilidades para el diseño son muy limitadas, inspirarse en otros diseños no es para mí una opción sino una obligación. Mi secreto para tener buenas referencias en las que inspirarme es muy sencillo: siempre que navego utilizo Evernote con sus correspondientes extensiones de navegador para capturar cualquier página que me guste su diseño. Además, gracias a las etiquetas de Evernote, al capturar una referencia indico si me gustan sus colores, la tipografía, el diseño en general, los iconos, etc. Así es muy fácil buscar después referencias muy específicas (ejemplo: diseño + rojo + minimalista, iconos + barra lateral, degradado + gris)
Además, prácticamente a diario visito Dribbble y Behance para guardar los diseños que más me gustan y aquellos en los que creo que podría inspirarme más adelante. Como en nuestro sitio web lo más importante es que los contenidos se puedan leer bien, en Behance la categoría que más visito es la de Print Design, ya que ahí se encuentran los diseñadores de revistas en papel, que son los que mejor saben diseñar los contenidos de texto.
Con todo esto, al empezar el rediseño de este sitio, dí un repaso a todas las referencias que había capturado en los últimos meses y a continuación explico cuáles son las que finalmente utilicé.
El menú principal de navegación
Cuando visitas este sitio en un escritorio con mucha resolución, la cabecera se muestra como una columna estática en la parte izquierda del navegador. Para ello busqué buenas referencias de columnas laterales de navegación y al final me quedé con la columna izquierda del sitio web corporativo del New York Times.
(Izquierda: columna original del New York Times. Derecha: nuestra nueva columna de navegación.)
La principal diferencia es que su columna izquierda tiene una anchura que varía cuando aumentas la ventana del navegador y la nuestra es fija. Por cierto, si ves el código fuente de este sitio, verás que utilizo el mismo truco que ellos para establecer el color de fondo de la columna ... ¡y es un truco realmente curioso!
Tipografía
El anterior diseño utilizaba una fuente web de las disponibles en Google Web Font. Sin embargo, en el rediseño decidí prescindir de este tipo de fuentes por varios motivos:
- Las fuentes añaden un peso no despreciable a las páginas y requieren al menos dos conexiones con los servidores de Google (una para obtener el CSS de la fuente y otra para obtener el archivo específico para tu dispositivo).
- Las fuentes web siguen sin verse perfectas en todas las plataformas y dispositivos. Esto es especialmente cierto para dispositivos Windows.
Así que finalmente opté por utilizar las siguientes familias de fuentes:
- Para el texto normal: "Helvetica Neue", Helvetica, Arial, sans-serif.
- Para el código fuente: Consolas, "Liberation Mono", "Droid Sans Mono", Monaco, Menlo, "Courier New", Courier, monospace.
Como las fuentes Helvetica/Arial son tan populares, algunos diseñadores piensan que los diseños resultantes no tienen personalidad. Puede que estén en lo cierto, pero a cambio todas las personas están acostumbradas a esas fuentes, se ven perfectamente en cualquier dispositivo y ofrecen una legibilidad realmente buena.
Así que para inspirarme busqué entre las referencias relacionadas con diseños limpios basados en Helvetica. De todas ellas, al final me quedé con Swiss, la aerolínea suiza. Su material corporativo hace un muy buen uso de la tipografía y al ser también su color corporativo el rojo, la decisión fue bastante fácil.
(Izquierda: diseño original de Swiss. Derecha: nuestra nueva tipografía.)
Paleta de colores
Los diseñadores profesionales no recomiendan utilizar el color blanco puro como color de fondo de los sitios web, ya que es muy agresivo y puede cansar rápidamente los ojos de los lectores. Después de muchas pruebas con colores de fondo grises muy claros, pensé que ninguno quedaba tal y como a mí me gustaba y decidí seguir con el color blanco puro #FFF.
Para el color de texto principal sí que decidí hacer caso a los diseñadores profesionales y no utilizo el negro puro #000. En su lugar utilizo un color "casi negro" que tiene muy buena legibilidad y no resulta tan agresivo como el negro puro. En concreto la web utiliza el color #222.
Otro de los elementos importantes del sitio son los enlaces. Como sabía que quería mostrarlos en color azul para que destaquen lo máximo posible, decidí utilizar el mismo color azul que usa Google en sus resultados de búsqueda. En el momento de hacer el rediseño este color era #12C, pero ahora Google lo ha cambiado a un color más oscuro #1A0DAB. De momento seguiré manteniendo el color azul original de Google.
Cuando el sitio web que diseñas tiene un color principal muy marcado, como el rojo en nuestro caso, es recomendable que visites los sitios más populares que utilizan tu mismo color. En nuestro caso el "sitio web popular y rojo" que más me gusta es Yelp. Además, han publicado una guía de estilo completísima de la que copié la idea de empezar a utilizar grises cálidos en vez de grises fríos.
Los grises fríos son los colores grises que utilizan la mayoría de sitios web y en los que los tres componentes R, G, B del color son iguales. Ejemplos: #777, #CCC, #F5F5F5. Si a estos grises le añades un poco de amarillo el resultado es un gris mucho más cálido. Compara nuestra paleta actual con la paleta que utilizábamos antes:
(Arriba: nuestra paleta original de grises fríos. Abajo: nuestra nueva paleta de grises cálidos.)
Probando el nuevo rediseño
Una vez terminado el rediseño, lo primero que tienes que hacer es probarlo en diferentes dispositivos y navegadores. Hace unos años bastaba con probar los diseños en los navegadores Firefox e Internet Explorer. Hoy en día hay cientos de combinaciones posibles de navegadores y dispositivos, así que ya no puedes probarlo en tu propio ordenador.
Para probar el nuevo aspecto del sitio eché mano de estos tres servicios gratuitos:
- Browsershots, prueba tu sitio en decenas de navegadores. Lo único malo es que se ha quedado atrás en lo que respecta a los móviles y tablets.
- modern.IE Website Screenshots, servicio de Microsoft que te permite probar una web en los sistemas operativos y dispositivos más modernos.
- WebPageTest, este servicio se utiliza sobre todo para medir el rendimiento de los sitios web, pero también puedes usarlo para probar tu sitio en diferentes navegadores y dispositivos.
En resumen
- Pasar un sitio web de Bootstrap 2 a Booststrap 3 requiere de mucho trabajo, pero la nueva versión del framework es mucho mejor en todo.
- Vivimos en la era responsive y estamos metiéndonos de lleno en la era mobile first, donde los diseños se empiezan en el móvil y se acaban en el escritorio.
- Visita con regularidad sitios en los que puedas inspirarte con los diseños de otras personas. Captura (con Evernote o como sea) los diseños que más te gusten para poder repasarlos cuando necesites inspiración.
Si tienes cualquier pregunta sobre cómo realizamos el rediseño o si quieres compartir tus propias experiencias, puedes iniciar una conversación en nuestro foro.