Tutorial: Transforma tu web en

Responsive Design
Internet no para de evolucionar en todos los sentidos, incluso en su tecnologa. Hay cosas que
se van poniendo de moda y luego, poco a poco, se van dejando de lado, otras en cambio
llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a seguir".
El "Responsive Design" o en espaol "Diseo adaptativo", es una de estas ltimas. Un sistema
basado en los estndares web actuales que permite que nuestras webs se adapten a la
pantalla del usuario que est vindolas. El Responsive Design se ha puesto muy de moda con
el auge de la navegacin movil, pero va mucho ms all, se trata de webs con diseos
inteligentes (smart que diran los ingleses) que facilitan la usabilidad de las webs en funcion de
quien las observa.
Pero el Responsive Design no son simples aadidos a una web, es una filosofa del desarrollo
del front de la misma totalmetne distinta y que abarca tal cantidad de detalles que resulta
impracticable para muchas empresas y realmente complejo para otras. Realmente yo a da de
hoy no recomiendo realizar webs en Responsive Design, pues no estamos preparados para
ello, pero si que podemos sacar ciertos conocimientos sobre estas aplicaciones para hacer
nuestras webs seudo-adaptables y mejorar la experiencia del usuario. Quizs no hasta el nivel
que los diseos responsive que vamos viendo nos marcan pero si con suficiente calidad como
para que el ratio "mejora/coste" nos merezca la pena.

Por qu es complejo desarrollar webs en
responsive design
Bsicamente por dos motivos:
Porque es una tecnologa verde, donde las distintas opciones para su aplicacin uso aun no
estn lo suficientemente desarrolladas como para saber "cual es la mejor". Aunque no paran
de aparecer novedades al respecto, No hay un framework ganador ni un estndar sobre
como resolver la mayora de complicaciones.
Porque un diseo adaptativo no nace en la tecnologa, sino en el diseo de la web. No se
trata solo de que una vez tengamos nuestro diseo terminado debamos disear como variar
con distintas pantallas y dispositivos, sino que directamente hay que disear las webs
pensando como se comportar. Esto, resulta extremadamente complejo para diseadores
que no saben exactamente como reacciona cada elemento a su adaptabilidad duplicando o
triplicando el trabajo del maquetador que lo hace efectivo.
En definitiva, necesitamos ms tiempo para que la mayora puedan permitirse trabajar con
diseos adaptativos. Necesitamos que los conocimientos globales del sector (maquetadores,
diseadores, programadores e incluso el personal comercial y de marketing) evolucionen en
este sentido. Solo as podremos acortar los tiempos de desarrollo de un diseo responsive y
hacerlo prctico para su uso en webs normales. La realidad es que a da de hoy puede resultar
mucho ms rpido sacar una nueva versin de la web para moviles que redisearla para que
sea adaptable.
Eso no significa que nadie pueda lanzarse. Es normal que algunos quieran destacar y ser de los
primeros y ms "avanzados". Genial! Que ellos abran el camino y nos muestren luego sus
errores al resto de mortales.
Entonces... qu puedo hacer yo?
Como deca antes, no lanzarnos a redisear todas nuestras webs no significa que no podamos
aprovechar las nuevas posibilidades que se nos brindan para hacer pequeos cambios en
nuestras webs y por lo tanto mejorar sensiblemente su adaptacin a distintos navegadores y
dispositivos.
Para ello, lo que tenemos que ver es cmo es nuestra web. Sobretodo a nivel de maquetacin
y fundamentalmente estructura HTML y CSS y a partir de ah ver que pequeas mejoras
queremos aplicar.
Consideraciones previas y hacks a conocer
Antes siquiera de plantearnos la posibilidad de "arreglar" nuestras webs para hacerlas ms
adaptables tenemos que conocer algunas tcnicas y consejos que nos vendrn muy bien para
trabajar y sin los cuales el trabajo no se hace solo complicado sino casi imposible.
1. El Html semntico no es imprescindible pero ayuda
Una web en HTML semntico es una web cuya maqueta se ha realizado correctamente. Donde
se han usado solo los elementos HTML imprescindibles, pensando ms en el significado de
cada etiqueta que en el diseo y dejando por lo tanto todo el trabajo de diseo al CSS en base
a clases e ID's.
Si bien no es necesario usar correctamente los DIV, P, UL, LI, etc. en nuestras maquetas para
hacer Responsive Design lo que si que es cierto es que al menos la parte de eliminar todo el
diseo de la maqueta debemos cumplirla. Es decir, no podemos usar CSS intrusivo (nada de
atributos "style" en medio del cdigo) y cuanto ms limpio (y con menos divs) sea nuestro
HTML ms fcil ser realizar las adpataciones, pues el CSS tendr ms poder sobre el resultado
final.
2. Eleccin del Zoom en los navegadores mviles
Dado que esta claro que han existido antes los navegadores mviles que los diseos adaptados
a ellos estos usaron desde el principio herramientas de zoom para poder visualizar webs
completas. Si tu entras en una web normal con un mvil no vers la resolucin real de tu mvil
sino una versin que realiza un zoom para adecuarse a los 960px de ancho.
Este es su comportamiento por defecto, sin embargo, tambin se han creado etiquetas HTML
para cambiarlo. De esta forma, si nosotros vamos a adaptarnos un poco a resoluciones mviles
podemos simplemente indicarle al mvil que use otro tipo de escalado.
Para ello se usa la meta-etiqueta "viewport" (a incorporar en el head de la pgina), donde
podemos especificar el comportamiento que esperamos que tenga un navegador de estas
caractersticas en con nuestra web.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Esta es la configuracin de la etiqueta viewport ms usada para responsive design, pero no es
la nica que podemos usar. Debemos entender las dos variables que aqu aparecen para que el
movil se adapte a nosotros y no al revs.
width:
El ancho que forzamos al mvil a adoptar con la web. Normalmente se indica como "device-
width" para que se muestre la resolucin real del dispositivo pero dependiendo del diseo que
finalmente hayamos creado en la web es posible que queramos especificar un tamao fijo
que coincida con la resolucin que hemos preparado nosotros para la versin mvil de
nuestra web.
En webs que no llegan a ser del todo adaptables (o que no lo son en absoluto) resulta muy
til, al poder controlar el ancho de nuestro navegador. Imaginemos que tengo una web de
1200px de ancho y no voy a hacerla responsive. Indicando el width a 1200px al menos
conseguire que la primera visualizacin desde movil la contemple entera.
initial-scale:
Con esta orden indicamos el valor del zoom que queremos que use el movil. Siendo 1.0 una
visualizacin sin Zoom y 2.0 una ampliacin de toda la web al doble de su tamao.
Por supuesto si vamos a crear un diseo adaptado al ancho del movil la configuracin de
initial-scale=1.0 es la adecuada pues pedimos al movil que no haga ningn tipo de zoom,
pero en muchas ocasiones ser mejor no usar esta variable y permitir al mvil que adapte
el solo el zoom al width que le hemos definido.
Por ejemplo, si indicamos que nuestro width es de 500px e indicasemos initial-scale, la web
tomara el aspecto de una pantalla de 500px pero nosotros el en mvil solo veramos la
configuracin original del mvil (que equivaldran a unos 320px de los 500px totales por lo
general). Sin embargo si no indicamos initial-scale la web se mostrara con el zoom
adaptado para verla completa (seguramente los 500px declarados).
Por lo tanto tenemos dos tpicas configuraciones de viewport...
Para webs con responsive design adaptado perfectamente a resoluciones mviles:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Para webs que no se han adaptado del todo a resolucin mvil:
<meta name="viewport" content="width=[Pixeles del mnimo ancho para visualizar
bien la web]" />
Existen otras configuraciones, como por ejemplo crear webs con un ancho de movil pero con
zoom ya aplicado para mostrar solo una parte... pero son webs extraas con una usabilidad
dudosa.
3. Las media queries
Las media queries son sentencias del CSS que nos permiten hacer declaraciones que solo se
apliquen en nuestros diseos si se cumplen ciertos requisitos que nosotros declaramos. Estas
media queries se pueden aplicar bsicamente en dos posibles puntos de la web.
Al llamar al archivo css, indicando en cada uno las condiciones para cargarlo
O en el propio archivo CSS, formando un apartado donde incluir fragemntos de css a aplicar
Las media queries son realmente potentes y permiten salirse del responsive design para cubrir
aspectos muy diversos de nuestras webs. Seguidamente incluyo unos links para que puedas
informarte sobre ellas ya que no quiero complicar este post con explicaciones de cosas que
luego no vamos a usar.
Documentacin en w3.org
Documentacin en Mozilla
Media queries en Wikipedia
Para lo que nos interesa nos basta saber dos cosas. Por un lado como se declaran estas media
queries en nuestro archivo CSS y por otro como dotar a los navegadores Internet Explorer
antiguos de esta funcionalidad.
3.1 Declaracin de media queries
Para declarar un fragmento de CSS dentro de un condicional marcado por una media query:
@media screen and ([CONDICION]) {
/* Nuestras nuevas reglas con este ancho o menos de pantalla */
}
Donde adems veremos que lo ms seguro es que apliquemos condiciones basadas en el
ancho de pantalla que generan tres tipos de media queries:
Aplicar solo en resoluciones de menos de X pxeles de ancho:
@media screen and (max-width:[ANCHO]px) {
/* Nuestras nuevas reglas con este ancho o menos de pantalla */
}
Aplicar solo en resoluciones de ms de X pixeles de ancho:
@media screen and (min-width:[ANCHO]px) {
/* Nuestras nuevas reglas con este ancho o ms de pantalla */
}
Aplicar solo en resoluciones entre X e Y pixeles de ancho:
@media screen and (min-width:[ANCHO X]px) and (max-width:[ANCHO Y]px) {
/* Nuestras nuevas reglas con este ancho o ms de pantalla */
}
Depende de nuestros gustos cual usemos, pero lo normal es usar solo la primera de forma
acumulativa de forma que a medida que hacemos el ancho ms pequeo vayamos modificando
elementos en nuestros diseos.
3.1 Compatibilidad de media queries con Internet explorer
Como siempre, explorer no va a soportar muchas cosas que a da de hoy ya son de dominio
pblico. Por suerte siempre existen desarrolladores muy motivados que nos crean libreras
para dotar compatibilidad a estos navegadores. En este caso nos encontramos con css3-
mediaqueries-js una librera javascript que simplemente debemos aadir para Internet
Explorer de versiones anteriores a la 9.
Bastar cargar este script en el head de nuestra pgina y ya podremos usar media queries sin
problemas.
<!--[if lt IE 9]><script src="http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
Como todas estas libreras, el resultado no es exacto pero si que da una gran compatibilidad
en la mayora de los casos.
Los tres diseos base dentro del design
responsive
Una vez hemos visto los detalles de tecnologa nuevos a usar con este tipo de diseos
debemos ver como manejarlos. Como deca antes, soluciones hay miles, pero veamos la base
que forma la concepcin de la mayor parte de diseos responsive hoy en da:
Estamos acostumbrados a que nuestras webs sean fijas, tal cual se disean en Photoshop las
mostramos en nuestra web. Esta claro que la equivalencia no es pixel a pixel pero se acerca
bastante una visualizacin a otra. En responsive design esto cambia. Nos encontramos con una
infinidad de dispositivos donde queremos que nuestra web se adapte perfectamente. Pero
estos dispositivos vamos a dividirlos en 3 grupos bsicos para saber como afrontarlos:
Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla
Pequeas o antiguas pantallas, donde nuestra web, para el ancho marcado no cabe y nos
aparece la odiosa barra inferior (que nadie usa) para terminar de ver el contenido.
Pantallas mviles, donde el espacio es tan pequeo que la informacin no se lee
correctamente con el diseo global
Lo que tenemos que buscar entonces es como dar salida, con nuestro diseo actual a un
diseo valido y usable para todas ellas con nuestro actual diseo y maqueta de pgina. Esto,
dependiendo de como est maquetada nuestra pgina puede darnos ms o menos problemas,
pero por lo general, con el tipo de trabajo que se realiza actualmente podemos conseguir
ciertas cosas.
Solucionando las pantallas grandes en responsive design
En este aspecto normalmente no hay mayor problema ya que nuestra web ya ha sido creada
para ser vista en pantallas grandes. A da de hoy lo normal es que nuestra web tenga un
marco centrado de 960px de pantalla y as encaje bien al ser cargada con el zoom aplicado
en la mayora de mviles. Si nuestra web es un poco antigua puede que tenga incluso algunos
pxeles ms al haber sido pensada para pantallas de 1024px de ancho.
Sea como sea, lo lgico es que nuestra web disponga de contenedores de este tipo:
#main { width:960px; margin:0 auto; }
Esta sintaxis nos permite crear un contenedor (main) que queda centrado en la pgina.
Adems con distintos backgrounds ser posible decorar el exterior de la pgina para darle un
poco de diseo y no dejarla toda blanca o negra.
En fin, en estos casos no hay mucha cosa que hacer con pantallas grandes. Es cierto que es
posible que nuestra web sea vista en un televisor donde adems de gran pantalla nos
encontramos con que el usuario navega a cierta distancia del monitor. Esto requerira de tratar
estas pantallas como los mviles (con grandes cambios) pero realmente es tan poca la gente
que navega en su televisor que no suelen merecer la pena estas adaptaciones. Si an as,
quieres crear tu adaptacin a televisores puedes jugar con reglas parecidas a las de mvil que
se explicarn ms adelante.
Solucionando las pantallas pequeas en responsive
design
Aqu es donde empezamos a encontrar nuestros problemas. Nuestra web est preparada para
un ancho de pantalla y resulta que tenemos un porcentaje de usuarios significativo con
resoluciones menores.
Comprobar si esto nos est sucediendo es sencillo si usamos Google Analytics o cualquier otro
sistema de analtica de pgina. Ah podremos encontrar no solo las resoluciones de pantalla de
nuestros usuarios sino que partes de nuestra web suelen verse en nuestra web. Hace no
mucho disponamos de una herramienta llamada "Google Browser size", pero est obsoleta en
favor de la misma funcionalidad en Google Analytics.
Lo primero que tenemos que decidir es en que punto acaba la pantalla pequea y cuando
empieza la mvil. Es decir, esta claro que nuestra web no cabe en resoluciones pequeas y
deberemos encogerla un poco para ellas, pero llegar un momento en el que deje de tener
sentido este "encogimiento" simple por aglutinar demasiados elementos en la pantalla con el
mismo. Para tomar esa decisin conozcamos algunos datos sobre los mviles:
Un dispositivo mvil en vertical (como ms suele usarse), sin importar su verdadera
resolucin, suele adoptar una resolucin de dispositivo de 320px de ancho.
En horizontal esta resolucin se adapta al tamao real de pantalla, pero suele quedar entre
los 400px y los 600px. Por ejemplo en mi Samsung Galaxy S2 adopta 530px de ancho
En tablets esta resolucin depende de la del dispositivo pero suele quedar en los modelos
ms vendidos por encima de los 600px, aunque puede llegar a los 1024px
El estndar que se est adoptando es trabajar encogiendo la pgina para resoluciones
pequeas hasta los 400px de ancho, medida a partir de la cual se entiende que el dispositivo
debe cambiar radicalmente su visionado y posiblemente funcionamiento bsico. Tambin
encontraremos como algunas personas deciden visualizar encogiendo hasta los 600px de
ancho y a partir de ah empiezan a crear versiones intermediasentre pantalla pequea y mvil.
Por ltimo, tambin sabemos que el mnimo de ancho en el que tenemos que pensar estar en
los 320px de ancho, lo cual nos permite adems tener un margen desde el que no operar en
absoluto.
Tu decides, yo creo que intentar abarcar todos los dispositivos es una locura. Al final lo que
tenemos que pensar es en estilos de navegacin del usuario donde solo tenemos tres.
Mviles en vertical: Donde la pantalla solo permite lectura y navegacin muy simplificada
(320px-400px)
Mviles en horizontal y tablets: Donde ya se permite una visualizacin horizontal clsica pero
donde hay que vigilar que la navegacin se produce con taps y no con clicks (por lo que hay
que evitar las acciones onMouseOver (400px-600px-800px)
Dispositivos de sobremesa: Donde nuestra web normal (>800px)
As, yo entiendo la "pantalla pequea" como una mezcla de pc, mviles horizontales y tablets,
lo que la vuelve ligeramente compleja en si misma, pero nos simplifica el trabajo real de
maquetacin por bloques al unificar todos estos dispositivos en una sola accin.
Bien, una vez decidido nuestro ancho mvil, lo que tenemos que hacer es trabajar en esa
visualizacin intermedia transformando los bloques que tenemos actualmente para que puedan
cambiar de tamao en funcin del tamao de pantalla.
Contenedores globales de la pgina
Llamamos contenedores globales a aquellos que marcan los anchos globales de nuestra web.
Esos que decamos antes que nos permitan centrarla y dalre un ancho concreto.
Los contenedores globales son los ms fciles de adaptar pues lo nico que tenemos que hacer
es no ser tan rgidos con su ancho y pasar de un ancho fijo a un ancho mximo. Dicho de otra
forma, bastar con que en mi declaracin inicial del marco de la pgina pase de "width" a
"max-width". Adems y ya que hemos pensado en cual va a ser nuestra resolucin mnima
para pantallas mviles aadiremos esta como min-width para controlar que ante dispositivos
realmente extraos no provoquemos una pgina no controlada.
#main {max-width:960px; min-width:320px; margin:0 auto;}
El resultado ser exactamente el mismo para pantallas grandes y sin embargo, veremos como
al hacer ms pequea nuestra pgina este marco se va haciendo ms pequeo.
Os voy poniendo ejemplos sobre la transformacin que he ido realizando en mi blog
(blog.ikhuerta.com, es decir la web que ests viendo ahora mismo)
En mi caso marcado un ancho de 1080px de pgina que se aplicaba en los elementos de
cabecera, contenido principal y footer. Mi primer paso ha sido por lo tanto pasar esa medida,
en los distintos bloques globales a ancho mximo de pgina en lugar de fijo. En tu caso esto
podra representar ms o menos sentencias dependiendo de la cantidad de bloques de este
tipo que uses.
#header #top {position:relative; max-width:1074px; min-width:320px; height:115px;
margin:0 auto; [...]}
[...]
#header ul.menu {position:relative; max-width:1008px; min-width:320px;
height:95px; [...]}
[...]
#aux-main{position:relative; max-width:1008px; min-width:320px; margin:0 auto;
[...]}
[...]
#footer ul {max-width:768px; min-width:320px; margin:10px auto;}
Contenedores interiores
A partir de aqu es donde solemos empezar a tener problemas. Nuestra pgina seguramente
estar formada por un layout que se dividir en varias piezas:
Cabecera a 100% de ancho
Contenido ocupando gran parte del ancho
Uno o ms sidebars ocupando solo una parte del lateral
Pie de pgina a un 100% de ancho
En definitiva, tenemos ciertos contenedores que seguramente tendrn un ancho fijo para
marcar columnas en la web. Luego estos podrn haberse transformado en columnas con
distintas tcnicas (floats en la mayor parte de los casos, display:inline o display:box en otros).
As que lo siguiente que tengo que hacer es transformar esos valores en declaraciones menos
estrictas y que respeten que el contenedor principal ya no mide exactamente lo que habamos
marcado.
Es decir, tenemos que pasar de Pixeles a porcentajes todo lo que represente algn espacio en
el ancho de pgina: widths, max-widths, margins y paddings.
Por suerte, una vez est terminada nuestra maqueta este paso es realmente sencillo. Tan solo
tenemos que hacer una pequea divisin para saber el valor porcentual que representa una
medida en pixeles sobre la de su elemento contenedor.
[Px de ancho elemento interior] / [Px de ancho elemento padre] * 100
En mi caso, para este blog, tuve la suerte de que muchos contenedores ya estaban en medida
porcentual. Esta es una buena costumbre de maquetacin, si porcentualmente existe un valor
claro es preferible usarlo as para futuros cambios independientemente de si usamos o no
responsive design.
El elemento ms molesto que me encontr fue el columnado que al estar desarrollado con
elementos float al hacer ms pequeo el marco el sidebar pasaba a quedar bajo el contenido.
As que realizamos los clculos de los elementos dentro del div de contenedor global (que
recordemos tena un ancho de 1080px) y pasamos a porcentaje estas medidas.
#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }
[...]
#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }
Ntese que hemos transformado no solo los anchos, sino tambin los mrgenes horizontales
para que toda la web siga cuadrando. Tambin hemos incluido un gran nmero de decimales
en el clculo para ser lo ms exactos al original.
Elementos interiores sueltos que crecen demasiado
En algunas ocasiones es posible que nos encontremos con elementos sueltos dentro de nuestra
maqueta que por sus caractersticas pueden llegar a hacerse ms grandes de lo que lo es su
contenedor con max-width.
Lo mejor para detectar estos elementos es ir jugando con tu tamao de navegador para
detectarlos y corregirlos. Pero muchas veces ser ms rpido y cmo seleccionar nuestors
contenedores y prohibir que ninguno de sus elementos interiores crezca ms de lo que mide el
propio contenedor.
En mi caso he decidido aplicar esta correccin dentro de mi contenido principal y mi sidebar,
de forma que algunos problemas (sobretodo derivados de widgets como facebook y twitter) se
solucionasen por si solos.
#main #content {float:left; width:63.9880952%; margin:30px 0 0 1.98412698%; }
#main #content * {max-width:100%}
[...]
#main #sidebar {float:left; margin:20px 0 0 3.47222222%; width:28.7698413%; }
#main #sidebar * {max-width:100%}
Elementos posicionados en absoluto
Para los elementos posicionados en absoluto habr que realizar el mismo proceso que con los
anchos de elemento. Estos debern adaptarse a porcentajes en su eje X y variar su ancho.
En mi caso, dispona de varios elementos en absoluto en la cabecera por lo que he debido
adaptar sus posiciones para que no quedasen flotando en el aire al hacer ms pequea la
pgina.

[...]
#header #top p.breadcrumb {position:absolute; top:90px; left:3.72439479%;
color:white;}
[...]
#header #top p.like { position:absolute; top:10px; left:54.0037244%; }
[...]
#header #top div.vcard{position:absolute; top:11px; right:5.49348231%;
width:27.9329609%;}
Elementos que no caben... nuestras primeras "Media Queries"
Por mucho que adaptemos nuestros anchos es probable que haya elementos que simplemente
por el contenido que deben incluir no quepan en el diseo. Estos elementos nos estn
molestando y haciendo que todos nuestros cambios se vean mal. Para evitarlo tendremos que
empezar a hacer uso de media queries sencillas que nos permitan cambiar drasticamente el
CSS cuando se produzcan ciertas dimensiones.
Las media queries son todo un mundo, incluso a da de hoy que no han sido del todo
explotadas, se pueden hacer cosas asombrosas con ellas. Pero nosotros lo que haremos ser
algo muy sencillo, simplemente las usaremos para marcar condiciones sobre el ancho de
pantalla a partir del cual nuestro CSS cambie.
Recordemos esa sintxis:
@media screen and (max-width:[ANCHO]px) {
/* Nuestras nuevas reglas con este ancho o menos de pantalla */
}
Estas media queries, para este caso concreto, en el que solo buscamos adaptar el diseo a
distintas resoluciones, nos servirn sobretodo para esconder algunos elementos secundarios
que a partir de cierto ancho de pantalla molestan ms que ayudan al usuario y para hacer
pequeas adaptaciones para que algunos objetos quepan en el diseo ante distintas
situaciones.
En mi caso, he decidido esconder algunos elementos con resoluciones menores de 800px o
600px, pues no permitan que se pudiese ver bien el contenido principal del blog.
@media screen and (max-width: 800px) {
#header #top p.like,
#header #top p.breadcrumb,
#header #top div.vcard p.twitter,
#header #top div.vcard p.linkedin,
#header #top div.vcard p.delicious,
#header #top div.vcard p.google,
.vcard h2{ display:none;}
}
@media screen and (max-width: 600px) {
#sidebar .twitter {display:none;}
}
En resoluciones de menos de 800px, escondo los botones de like, el breadcrumb, los botones
sociales y alguna cosilla ms. A partir de menos de 600px he decidido adems eliminar los
ltimos tweets del sidebar para que no quedase todo tan apretado.
Sencillo, verdad?
Pero las media queries no solo sirven para ocultar contenido. Sino que permiten hacer
modificaciones en algunos estilos. Esto es especialmente til cuando un elemento no se adapta
simplemente con anchos pero aun no queremos hacerlo desaparecer. En ese momento le
cambiamos un poco el estilo para que se adapte a lo que buscamos.
En mi caso, me daban algunos problemas los botones sociales a poco que bajase el ancho de
pgina, por lo que he decidido cambiar un poco su formato (eliminando iconos y disminuyendo
la letra) cuando la pgina baja de 960px de ancho.
@media screen and (max-width:960px) {
#header #top div.vcard p {font-size:9px;}
#header #top div.vcard p.twitter a,
#header #top div.vcard p.linkedin a ,
#header #top div.vcard p.delicious a,
#header #top div.vcard p.google a {background:none; padding:0;width:50%;
float:left;}
}
Qu hacer con los mens y sus opciones
Los mens suelen ser un problema grave al hacer nuestras pginas ms pequeas pues al
tratarse de un conjunto de elementos medianamente largo que adems no forma parte de la
informacin principal de la pgina (y por lo tanto no podemos permitirnos que ocupe
demasiado espacio de la misma) el espacio destinado a los mismos se nos suele quedar corto
en algn momento. Completemos esta problemtica con que los dispositivos tctiles resultan
incmodos con listados de links pequeos (por lo que encoger los links no suele ser una
alternativa)
Por suerte podemos recurrir a distintos recursos que solucionan estos problemas. A mi el que
ms me gusta (de momento) es el de reemplazar los mens por un SELECT que cuando el
usuario usa cambiar la direccin de la pgina que estamos viendo por la del destino del link.
Me gusta porque resume grandes listados en un solo bloque pequeo y porque al mismo
tiempo, llegados a un mvil o tablet el comportamiento de los SELECT se vuelve ideal, pues
permite al usuario seleccionar sus opciones cmodamente.
Para realizar este cambio os recomiendo el plugin de jquery tinynav un sencillo plugin, con
gran compatibilidad, al que indicamos los distintos elementos UL de nuestros listados y el
aade antes de estos un SELECT con las caractersticas que mencionabamos. Por lo tanto solo
nos queda ocultar el propio UL o el SELECT con nuestras media queries para conseguir un
resultado ptimo.
En mi caso he aadido el plugin para los listados de links de la cabecera, de forma que al bajar
de 800px de ancho estos sean reemplazados por el SELECT en cuestin.
As que he realizado 3 pasos:
1- Aadir el script y en el "ready" de mi jquery hacer la llamada al nuevo mtodo:
$(".menu ul").tinyNav();
Esto aade el SELECT en los 3 listados de links del men superior.
2- Aadir a mi CSS bsico que no se muestren estos nuevos SELECT.
.tinynav { display: none }
3- Aadir dentro de la media query adecuada el formato del select y la desaparicin del propio
listado.
@media screen and (max-width: 800px) {
#header ul.menu li ul {display:none}
.tinynav { display: block; position:absolute; bottom:5px; width:79%;
margin-left:15%}
}
Y ya tenemos nuestros SELECTs por debajo de los 800px de ancho.
Backgrounds de bloques
Aqu, dependiendo de nuestra maqueta es donde podemos tener serios problemas. En CSS
decoramos nuestros bloques con imgenes de fondo. Existen inumerables tcnicas para hacer
esto pero unas son ms amigables que otras a los redimensionamientos. Por lo tanto,
dependiendo de las tcnicas que hayamos utilizado podemos encontrarnos con que nuestros
fondos pierden sentido al ocultarse sus bordes.
Esto puede ser simplemente anecdtico en ciertos casos, pero preferible a que el elemento no
se adapte al diseo pero en otros puede ser un verdadero quebradero de cabeza.
Solucines varias:
Cambia todos los fondos que puedas por estilos CSS3 que respondern perfectamente a
estos cambios. A da de hoy es fcil dar compatibilidad a la mayor parte de los navegadores
para el uso de bordes redondeados, sombras o degradados. Con estas tres funciones CSS es
dificil que tus diseos necesiten de muchas imgenes para crear los bloques.
Elimina imgenes de fondo (y reemplazalas si puedes por el CSS3 ms cercano) a medida
que las media queries y anchos adaptables realicen su funcin
En el caso de grandes fondos que ya contenan la situacin de un bloque duplica en el bloque
este estilo e intenta que se note poco el background original
En mi caso este blog es bastante sencillo y solo me he encontrado con tres tipos de imgenes
de fondo molestas:
Los bordes del marco de la pgina, que aun no respetndose, al quedar por debajo de la
parte no visible no han resultado molestos
Los iconos de algunos ttulos, que he debido ir ocultando con media queries a medida que
resultaban molestos
El background global de la cabecera, que ya inclua el cuadro blanco para el nombre del
autor. Aqu he debido replicar el estilo en el cuadro de autor de forma que se solape un fondo
con otro al empequeecer la pgina
No pongo el CSS de como estn resueltas estas partes exactas en mi blog, puesto que en cada
caso la solucin ser distinta.
Se acab!
Y con todo esto ya hemos conseguido un diseo bastante adaptable. De la rigidez que
tenamos con un diseo fijo en 1080px de ancho, ahora tenemos un blog que puede ser
disfrutado en un mayor nmero de dispositivos... pero falta algo. Faltan los mviles, donde el
diseo se ve bien con estos cambios pero resulta poco prctico (con sus 2 columnas y
elementos apretados en la cabecera).
Solucionando las pantallas mviles en responsive design
Como lltimo paso debemos definir una visualizacin correcta para mviles. Esto es as porque
el uso que se har en estos dispositivos no ser el mismo que en pginas normales. Sin duda
querremos hacer ms cambios que simples adaptaciones del ancho de pantalla y desaparicin
de elementos.
Por suerte, contamos con el viewport para definir como queremos trabajar esta parte.
Comentbamos que el viewport nos sirve para indicar al mvil como deseamos que trabaje su
Zoom a la hora de mostrarnos la pgina. As pues, bsicamente tenamos dos opciones:
Para webs con responsive design adaptado perfectamente a resoluciones mviles:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Para webs que no se han adaptado del todo a resolucin mvil:
<meta name="viewport" content="width=[Pixeles del mnimo ancho para visualizar
bien la web]" />
La primera es la situacin ideal, pero tambin la que ms trabajo va a darnos, porque al bajar
de los 500-400px de ancho las columnas se vuelven directamente imposibles y eso significa
que tenemos que hacer cambios drsticos en la visualizacin de la web.
La segunda opcin puede ser ms rpida. Simplemente indicamos que el movil se visualice a la
resolucin que queramos y as se comportar... seguir siendo nuestra web normal pero en su
versin ms encogida.
Pero si escogemos la segunda opcin tendremos dos problemas con nuestra web:
Por un lado el viewport es global a todos los navegadores mviles, por lo que si indicamos,
por ejemplo, un viewport de 500px de ancho provocaremos que en un ipad de casi 800px de
ancho se visualice una versin de nuestra web a 500px que sin duda desaprovechar el
espacio disponible
Por otro, en resoluciones de 320px de ancho, nuestros contenidos se vern bastante
reducidos con lo que si no hacemos segn que cambios ser inmanejable... Pero si
adaptamos mens y fuentes tambin se modificarn en la versin tablet.
En definitiva, marcar un ancho fijo con viewport es la opcin rpida pero no la buena.
Lo suyo es que dejemos al mvil mostrarnos la resolucin que sea capaz de mostrar usando el
primer viewport en nuestro HEAD de la pgina.
Una vez hemos decidido nuestra visualizacin debemos ponernos a trabajar en nuestra ltima
media query: la versin mvil.
Aqu normalmente eliminaremos las columnas pasndolo todo a bloques de 100% de ancho.
Eliminaremos y comprimirmos algunos elementos ms y ajustaremos las fuentes para que la
lectura a 320px de ancho resulte cmoda en dispositivos de pequea pantalla.
Eliminando columnas:
Vamos a poner nuestras columnas una detrs de otra. Existen entonces dos posibilidades.
a. Que en el html ya estuviesen ordenadas tal cual las queremos en la versin mvil.
En cuyo caso bastar con eliminar los floats o cambiar el display:inline-block o display:box por
un display:block normal.
@media screen and (max-width: 400px) {
#content {display:block; float:none; }
}
b. Que no se encontrasen ordenadas.
En cuyo caso deberemos jugar con posiciones absolutas que hagan a estos bloques inferiores
pasar a la parte alta de la pgina y mrgenes para desplazar los primeros bloques hacia abajo
para que no se crucen.
Imginemos esta estructura:
<div id="main">
<div id="content"></div>
<div id="sidebar"></div>
</div>
Donde queremos que en la versin mvil los elementos del sidebar queden antes que los de
content. Nuestro css tomar un aspecto cercano al siguiente:
@media screen and (max-width: 400px) {
#main {position:relative; width:100%; }
#content{margin-top:80px; width:100%; float:none;}
#sidebar{height:80px; position:absolute; top:0; width:100%; float:none; }
}
En mi caso me encontr en este segundo caso, por lo que en mvil he tenido que recurrir a
posiciones absolutas. Adems situ el cambio a 450px de ancho, debido a que la visualizacin
se volva realmente incmoda a partir de ese punto.
@media screen and (max-width: 450px) {
#main #sidebar {display:block; float:none !important; width:100%;
position:absolute; top:-80px; margin:0 !important; border-bottom:1px solid #aaa;
padding:0 0 20px 0;}
#main #content {float:none; width:auto; margin:100px 0 0 0; }
}
Ajustando Fuentes
Las fuentes que en su da se disearon para ajustarse a grandes pantallas, con un layout de
columnas, etc. Cuando cambiamos a las pequeas pantallas de movil en vertical estas suelen
no ser las ms cmodas para la lectura: Ocupan demasiado ancho, destacan demasiado los
titulares y el texto del cuerpo suele ser difcil de leer. Por lo tanto es conveniente hacer una
revisin de todas para ajustar la visualizacin a una versin cmoda.
En mi caso he tenido que cambiar todo el estilo de las fuentes de los mens, disminuir los
titulares y aumentar el cuerpo de los artculos:
#header ul.menu li,
#header ul.menu li.analytics,
#header ul.menu li.development {background:none;}
#header ul.menu li h4 {margin:30px 0 0 0px; font-size:12px; text-indent:10%;}

#main #content .hnews h3 a,
#main #content .hnews h1 a{ font-size:22px; }
#main #content .hnews .entry-content {font-size:16px;}
Otros ajustes
Por ltimo, queda dejar "bonito" el resultado. Como antes, revisemos nuestros elementos,
reestilicemos aquellos que no se ajusten a lo que queremos y eliminemos aquellos que no
tengan cabida.
En mi caso he tenido que eliminar del todo el bloque de autor, pasar a horizontal los elementos
del sidebar y mover algunos mrgenes de sitio.
Con todo esto ya tendremos nuestra web mvil lista para trabajar.
Testing y pruebas
Para trabajar con todo lo aqu explicado es esencial poder testear lo que vamos haciendo y los
cambios que vamos provocando. Aqu me gustara compartir con vosotros dos recursos:
1. Para probar en el navegador:
Debemos ir ajustando el ancho de pantantalla para ver como nuestras adaptaciones van
tomando forma y detectar pequeos ajustes a realizar en nuestras media queries.
Para ello tenemos dos opciones:
Directamente desmaximizar nuestro navegador e ir jugando con su ancho
Usar herramientas como ish que nos permitir ir haciendo estos ajustes con sencillos botones
2. Evitando la cach movil
Los mviles en su afn por no solicitar ms datos de los estrictamente necesarios cachean
mucho ms que un navegador tradicional. En un navegador suele bastar con presionar
CTRL+F5 para provocar cargas sin cacheo. En mviles es ms dificil y algunos navegadores ni
siquiera tienen la opcin de desactivar esta cach.
Para trabajar de forma ms cmoda me gustara daros tres consejos:
Usar variables en la llamada CSS. Es decir en lugar de llamar a "/styles.css" llamaremos a
"/styles.css?version=xxxx" cambiando en cada caso el numero de versin para que la url sea
distinta y por tanto no se use cach
Trabajar en el navegador. Subiendo un poco la resolucin mnima mvil (420px-450px)
podremos provocar que esta sea vista en nuestro navegador cuando lo encojamos lo
suficiente. Tambin usando herramientas de redimensionado de pgina podemos provocar
estas acciones. Esto resultar sin duda ms cmodo para muchas pruebas pero no evita
probar finalmente en el propio mvil
Conclusin
Poco a poco hemos ido viendo y conociendo las distintas tcnicas y tecnologas que suelen
aplicarse al responsive design pero aplicndolas a una web existente en lugar de al desarrollo
de webs nuevas.
Hemos hecho una web con responsive design?
La respuesta es clara: NO. Hemos hecho ms adaptativa una web que no fue creada para
serlo. En consecuencia hemos cometido muchos errores durante el proceso:
Hemos eliminado elementos que en su da consideramos vitales. Adems lo hemos hecho por
su aspecto no por su importancia en la informacin transmitida al usuario
Seguramente no hemos conseguido una visualizacin perfecta en todos los casos. Hemos
mejorado la que haba, pero el resultado no es el mismo que si hubiesemos planificado todo
esto de antemano
Por ltimo, yo he podido llegar al final con esta web, pero muchas webs, dependiendo de la
maqueta de la que surjan no podrn llegar tan lejos y tendrn que conformarse con
soluciones intermedias
Estos son los detalles, pero ms importante que todo esto es que lo que hemos hecho ha sido
una maqueta adaptable sobre un diseo que no era adaptativo. Responsive Design nos habla
de diseo, no de maqueta, por lo que debe venir directamente desde el concepto de diseo
para que termine de tener sentido para todos. No se trata de ser "guay" y poder mostrar una
web que se encoje y se adapta mnimamente al movil sino que nuestro proyecto debera haber
surgido bajo el paradigma de ser multidispositivo, valorando en cada caso su usabilidad.
Sin duda, si sigues este tutorial y lo aplicas a tu web podrs hacer maquetas responsive pero
eso no significa que puedas hacer responsive design. Como deca al principio, sigue faltando
mucha base, mucho conocimiento y muchos procesos (no tan puntuales, no tan tcnicos) para
conseguirlo en una empresa normal. Podremos hacer nuestros pequeos proyectos, pero para
empresas, este proceso sigue siendo un trauma doloroso por el que yo no aconsejara a nadie
pasar.