Inicio Libros Tutoriales Eventos Foro Buscar

El proceso de rediseo de
LibrosWeb.es
Hace unas semanas presentamos el nuevo rediseo del sitio web librosweb.es. En este
artculo explico cmo fue el proceso que segu para la actualizacin, tanto desde el
punto de vista tcnico como del diseo. Mi propsito 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.

Planificacin
Antes de comenzar a redisear el sitio, estos fueron los principales objetivos que me
marqu:

El nuevo diseo deba basarse en Bootstrap 3, en vez de continuar con la versin

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 El nuevo diseo deba basarse en Bootstrap 3, en vez de continuar con la versin
Bootstrap 2.

Adems de los mviles, tablets y escritorios normales, el nuevo diseo responsive

deba tener un cuarto punto de ruptura para los escritorios de alta resolucin (que
sois la mayora de los que visitis el sitio).

El nuevo diseo deba seguir la lnea minimalista de eliminar cualquier elemento

que no sea estrictamente necesario.

Actualizando a Bootstrap 3
El cambio tecnolgico ms importante detrs del rediseo ha sido el cambio de
Bootstrap 2 a Bootstrap 3, la versin ms reciente del famoso framework CSS. Como
actualizar de una versin a otra no es posible, tuvimos que rehacer prcticamente todas
las reglas de nuestro archivo CSS y tambin actualizamos el cdigo HTML de todas las
pginas (especialmente los atributos class que definen la estructura de la pgina).

Al margen de estos detalles tcnicos, el principal cambio de Bootstrap 3 es lo que sus

creadores denominan estrategia "mobile first". En la anterior generacin de frameworks
CSS, primero se diseaba el sitio para escritorios normales y luego se aadan media
queries de CSS para ajustar el diseo en los dispositivos inferiores (mviles y tablets).
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Bootstrap 3 te obliga a disear primero la versin para el dispositivo ms
pequeo: los mviles con poca resolucin y en vertical. Despus tienes que ir
aadiendo los media queries para los otros dispositivos en orden creciente segn su
tamao: tablets, escritorios normales y escritorios muy grandes.

De esta manera, el nuevo sitio es totalmente responsive y tiene cuatro puntos de ruptura
en funcin de la resolucin del dispositivo. La hoja de estilos tiene ms o menos la
siguiente estructura (tal y como expliqu en esta pregunta que plantearon en el foro):

/* ESTILOS NORMALES (para mviles en vertical) */

body { ... }
p { ... }

/* ESTILOS RESPONSIVE para Mviles en horizontal o tablets en vertical */

@media (min-width: 768px) {
...
}

/* ESTILOS RESPONSIVE para Tablets en horizonal y escritorios normales */

@media (min-width: 1024px) {
...

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 }

/* 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 disear sitios y
aplicaciones web.

Por otra parte, una de las desventajas de Bootstrap 3 es que su archivo CSS completo es
mucho ms grande que el de Bootstrap 2, por lo que puede penalizar ligeramente el
tiempo de carga de tus pginas.

A pesar de estas desventajas, Bootstrap 3 es mucho mejor que su antecesor en todos

los aspectos tcnicos, tal y como puedes comprobar leyendo el manual oficial de
Bootstrap 3. Mi recomendacin es que si vas a desarrollar un proyecto nuevo,
solamente utilices Bootstrap 3. Si el proyecto ya est diseado con Bootstrap 2, creo que
la conversin no merece la pena a menos que dispongas de muchos recursos para
hacerlo o sepas que el proyecto va a crecer en el futuro.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Otros cambios tcnicos
Como Bootstrap 3 me obligaba a cambiar todas las plantillas HTML del sitio, aprovech
para incorporar un pequeo cambio que estoy introduciendo ltimamente en todas las
aplicaciones que desarrollo. El elemento <body> de todas las pginas incluye ahora un
atributo id con un cdigo nico para cada pgina. Observa por ejemplo la portada del
sitio:

<body id="p-0" class="homepage">

...
</body>

El atributo id es un cdigo numrico nico para cada pgina ( p-0 es la portada, p-1 es
la pgina de ndice de los libros, p-1-1 es la pgina de ndice de un libro, etc.) Como
este valor es nico para cada pgina y est a nivel de <body> , me permite simplificar
mucho los estilos CSS del sitio. Para no volverme loco, como parte de la documentacin
del sitio mantengo actualizado un catlogo de pginas con sus correspondientes
atributos id :

Cdigo Pgina URL

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 p-0 Portada /

p-1 ndice de la seccin de libros /libros

p-1-1 ndice de un libro /libro/{titulo}

p-1-2 Pgina interior de un libro /libro/{titulo}/{seccion}/{pagina}

... ... ...

Adems, como las pginas que pertenecen a una seccin del sitio suelen tener estilos
muy parecidos, utilizo el atributo class del <body> para aplicar un mismo valor a las
diferentes pginas de una misma seccin (libros, tutoriales, foro, etc.) As que por
ejemplo la hoja de estilos para la seccin de los libros tiene este aspecto:

/* Estilos comunes para todas las pginas de la seccin de libros */

body.libros {
h1 { ... }
p { ... }
}

/* Estilos especficos para las pginas interiores de los libros */

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 body#p-1-2 {
h1 { ... }
p { ... }
}

Iconos
Como me obsesiona el diseo limpio y no quiero penalizar el tiempo de carga de las
pginas, soy muy reacio a incluir imgenes o iconos en el diseo de las pginas. Por eso
no utilizo directamente la increble coleccin 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 ms de 400 iconos que incluye FontAwesome.

Logotipo
Debido al diseo responsive el logotipo del sitio se muestra en tres tamaos diferentes y
en dos colores diferentes. En el pasado utilizaba la tcnica 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 aumentara demasiado el tamao del archivo.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 As que convert el logotipo en un archivo vectorial SVG que puedo manipular para
mostrarlo en cualquier tamao y con cualquier color. Para evitar tener que hacer una
conexin al servidor para descargar el logotipo del sitio, decid incluir el propio
contenido del archivo SVG directamente dentro del HTML de cada pgina.

Buscando inspiracin para el diseo grfico

Si alguien te dice que ha diseado algo sin inspirarse en un diseo 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 diseo son muy limitadas, inspirarse en otros diseos no
es para m una opcin sino una obligacin. 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 pgina que me
guste su diseo. Adems, gracias a las etiquetas de Evernote, al capturar una referencia
indico si me gustan sus colores, la tipografa, el diseo en general, los iconos, etc. As es
muy fcil buscar despus referencias muy especficas (ejemplo: diseo + rojo +
minimalista, iconos + barra lateral, degradado + gris)

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Adems, prcticamente a diario visito Dribbble y Behance para guardar los diseos que
ms me gustan y aquellos en los que creo que podra inspirarme ms adelante. Como
en nuestro sitio web lo ms importante es que los contenidos se puedan leer bien, en
Behance la categora que ms visito es la de Print Design, ya que ah se encuentran los
diseadores de revistas en papel, que son los que mejor saben disear los contenidos
de texto.

Con todo esto, al empezar el rediseo de este sitio, d un repaso a todas las referencias
que haba capturado en los ltimos meses y a continuacin explico cules son las que
finalmente utilic.

El men principal de navegacin

Cuando visitas este sitio en un escritorio con mucha resolucin, la cabecera se muestra
como una columna esttica en la parte izquierda del navegador. Para ello busqu
buenas referencias de columnas laterales de navegacin y al final me qued con la
columna izquierda del sitio web corporativo del New York Times.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 (Izquierda: columna original del New York Times. Derecha: nuestra nueva columna de
navegacin.)

La principal diferencia es que su columna izquierda tiene una anchura que vara cuando
aumentas la ventana del navegador y la nuestra es fija. Por cierto, si ves el cdigo fuente
de este sitio, vers que utilizo el mismo truco que ellos para establecer el color de fondo
de la columna ... y es un truco realmente curioso!

Tipografa
El anterior diseo utilizaba una fuente web de las disponibles en Google Web Font. Sin
embargo, en el rediseo decid prescindir de este tipo de fuentes por varios motivos:

Las fuentes aaden un peso no despreciable a las pginas 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 especfico 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:

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Para el texto normal: "Helvetica Neue", Helvetica, Arial, sans-serif.

Para el cdigo fuente: Consolas, "Liberation Mono", "Droid Sans Mono", Monaco,
Menlo, "Courier New", Courier, monospace.

Como las fuentes Helvetica/Arial son tan populares, algunos diseadores piensan que
los diseos resultantes no tienen personalidad. Puede que estn en lo cierto, pero a
cambio todas las personas estn 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 diseos limpios
basados en Helvetica. De todas ellas, al final me qued con Swiss, la aerolnea suiza. Su
material corporativo hace un muy buen uso de la tipografa y al ser tambin su color
corporativo el rojo, la decisin fue bastante fcil.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 (Izquierda: diseo original de Swiss. Derecha: nuestra nueva tipografa.)

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Paleta de colores
Los diseadores profesionales no recomiendan utilizar el color blanco puro como color
de fondo de los sitios web, ya que es muy agresivo y puede cansar rpidamente los ojos
de los lectores. Despus 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 diseadores 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 saba que quera
mostrarlos en color azul para que destaquen lo mximo posible, decid utilizar el mismo
color azul que usa Google en sus resultados de bsqueda. En el momento de hacer el
rediseo este color era #12C , pero ahora Google lo ha cambiado a un color ms oscuro
#1A0DAB . De momento seguir manteniendo el color azul original de Google.

Cuando el sitio web que diseas tiene un color principal muy marcado, como el rojo en
nuestro caso, es recomendable que visites los sitios ms populares que utilizan tu
mismo color. En nuestro caso el "sitio web popular y rojo" que ms me gusta es Yelp.
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Adems, han publicado una gua de estilo completsima de la que copi la idea de
empezar a utilizar grises clidos en vez de grises fros.

Los grises fros son los colores grises que utilizan la mayora 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 aades un poco de amarillo el resultado es un gris mucho ms clido.
Compara nuestra paleta actual con la paleta que utilizbamos antes:

(Arriba: nuestra paleta original de grises fros. Abajo: nuestra nueva paleta de grises
clidos.)

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 Probando el nuevo rediseo
Una vez terminado el rediseo, lo primero que tienes que hacer es probarlo en
diferentes dispositivos y navegadores. Hace unos aos bastaba con probar los diseos
en los navegadores Firefox e Internet Explorer. Hoy en da 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 atrs en lo que respecta a los mviles y tablets.

modern.IE Website Screenshots, servicio de Microsoft que te permite probar una

web en los sistemas operativos y dispositivos ms modernos.

WebPageTest, este servicio se utiliza sobre todo para medir el rendimiento de los
sitios web, pero tambin puedes usarlo para probar tu sitio en diferentes
navegadores y dispositivos.

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 En resumen
Pasar un sitio web de Bootstrap 2 a Booststrap 3 requiere de mucho trabajo, pero la
nueva versin del framework es mucho mejor en todo.

Vivimos en la era responsive y estamos metindonos de lleno en la era mobile first,

donde los diseos se empiezan en el mvil y se acaban en el escritorio.

Visita con regularidad sitios en los que puedas inspirarte con los diseos de otras
personas. Captura (con Evernote o como sea) los diseos que ms te gusten para
poder repasarlos cuando necesites inspiracin.

Si tienes cualquier pregunta sobre cmo realizamos el rediseo o si quieres compartir

tus propias experiencias, puedes iniciar una conversacin en nuestro foro.

Comentarios
2 Comentarios LibrosWeb
1 Acceder

Ordenar por los mejores

Recomendar 1 Compartir
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 nete a la conversacin...

Evert Cruz Reyes hace un ao

Hola que tal, muy buena tu pagina, y gracias por compartir esta informacin, no tengo mucha experiencia y esto m
ha sido muy til, ademas tu Web Site ha quedado muy bien.

Saludos
1 Responder Compartir

Rosevelt Barahona hace 7 meses

gran referencia esta pgina. gracias por compartir.
Responder Compartir

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 SSL que puede ser lo que este pasando

Suscrbete d Aade Disqus a tu sitio web Privacidad

Fecha de publicacin
13 de agosto de 2014

ETIQUETAS POPULARES

composer css diseo html javascript php programacin sistemas symfony

SUSCRBETE GRATIS
RSS Todos los tutoriales

RSS Tutoriales de diseo

RSS Tutoriales de programacin

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
 3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad

das online

open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com