Consultor seo en mallorca e Ibiza Iaki Huerta

Ests viendo: consultor seo en mallorca e ibiza Iaki Huerta blog

199

658
Me gusta Me gusta
"ikhuerta" es Iaki Huerta
Seo en Mallorca e Ibiza
Mallorca (Espaa)
Twitter
Linkedin
Contactar
Google+
Seo
Seo On Page
Seo Off Page
Indexacin
Estrategias Seo
Eleccin de Keywords
Google
Consultor Seo
Informes Seo
- Seo On Page
Analtica web
Google Analytics:
Universal Analytics
Informes Personalizados
Segmentacin
Herramientas Google
- Google Analytics:
Desarrollo Web
jQuery
Tutoriales
Maquetacin
Programacin
Api de Facebook
Facebook Connect
Ajax Crossdomain
- jQuery
Do not speak Spanish? Read this post in English.
Mircoles, 30 de enero de 2013.
Tutorial: Transforma tu web en Responsive Design
62

A 115 personas les gusta esto. S el primero de tus amigos. Me gusta Me gusta
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
#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 nisiquiera 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 directametne 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.
Comparte este artculo:
Temas Relacionados: maquetacion tutoriales html semantico responsive design
Autor: Iaki Huerta
Te gust este post? Puedes seguir sus comentarios mediante RSS, o realizar trackball desde tu blog.
14 Comentarios para Tutorial: Transforma tu web en Responsive Design
1. Eduardo dice:
16 marzo 2013 a las 17:45
Excelente artculo, muy completo
2. Oscar dice:
20 marzo 2013 a las 22:51
Un articulo muy completo que vale la pena leer!
3. David dice:
28 marzo 2013 a las 12:40
Pedazo de articulo. Me lo guardo porque precisamente estoy con el tema de los responsive. Esto me viene de perlas. Gracias
4. Mariano dice:
15 mayo 2013 a las 18:40
Muy buen artculo y super completo.
Creo que la demanda de Responsive Design en estos das es cada vez mayor para mejorar la experiencia de navegacin del usuario.
Existen CMS como Drupal en donde por suerte ya hay plantillas gratuitas que vienen con Responsive Design: Por ejemplo Adaptive Themes o Omega.
Creo que en general la idea que debe buscarse detrs de un Responsive Design, es que los contenidos de un sitio web sigan siendo accesibles y fciles de encontrar sin
importar el dispositivo que se use para navegar.
5. Carolina dice:
23 mayo 2013 a las 13:06
Buensimo y muy bien explicado. Me viene de lujo. Mil gracias!
6. Elen dice:
23 mayo 2013 a las 18:31
Muy buen artculo! Me estoy peleando con el tema del diseo responsive y encontrar explicaciones tan concretas se agradece un montn, mil gracias.
115 Share Share
7. alejandro dice:
28 mayo 2013 a las 10:42
Gracias por el tutorial! muy buen post!! Yo haba hecho alguna web pequea desde 0 'responsive' utilizando el framework foundation zurb, pero ahora tengo estoy
intentando adaptar mi web a diferentes dispositivos, justo lo que explicas en el post, por lo que me ha sido de gran ayuda
A m lo que realmente ms me complica son las imgenes para pantallas retina :S
Un saludo!
8. Doris Anglica Marn Taype dice:
31 octubre 2013 a las 0:22
sabes eh tomado una plantilla de moodle y lo estoy pasando a responsive desde el body esta todo bien pero tengo problemas en el pie de pagina no puedo hacer que se
haga responsive. Ayudame porfavor
9. Juan dice:
15 noviembre 2013 a las 22:27
Gran post. Y lo sera mucho ms si no fuese un copy&paste de mejorando.la
Hay que ser cutre para ponerte como autor... TRISTE!
10. ikhuerta dice:
16 noviembre 2013 a las 15:24
Juan
Puedes decirme donde esta ese articulo de mejorandola? El articulo es mio y puedo demostrarlo asi que me interesara mucho pedirles a los de mejorando.la que pusieseon
la referencia a mi blog ya que estas cosas me tocan las narices y mucho.
11. Christian dice:
12 diciembre 2013 a las 16:52
Estoy proponiendo diseos adaptativos en mi empresa y este artculo es la base de todo.
Grande!
12. dheybi grover dice:
13 enero 2014 a las 3:46
Muy buen artculo, comprensible para los q nos dedicamos a otras cosas.
13. Ariel dice:
16 enero 2014 a las 12:52
Excelente, muy bien explicado, muchas gracias !!!
14. Jess dice:
8 mayo 2014 a las 10:27
Estupendo manual. Teora y por ltimo a lo prctico. Me va a servir mucho, muy bueno
15. Roxana dice:
Tu comentario est pendiente de moderacin
22 mayo 2014 a las 15:16
Excelente articulo muy didctico, muchas gracias por compartir este contenido
Anmate y deja tu comentario
Roxana Nombre: (obligatorio)
roxph@yahoo.com eMail (obligatorio)
Tu Web
Excelente articulo muy didctico, muchas gracias por compartir este contenido
Submit Comment
Puedo ayudarte en algo?
Si te gusta lo que lees y crees que podra ser aplicable a tu negocio debes saber que ofrezco mis servicios como Consultor Independiente en Marketing Online, especialmente
focalizado en SEO y Analtica Web
Si quieres que hablemos sobre tu proyecto, tan solo hzmelo saber y me pondr en contacto contigo lo antes posible
Suscribete por Rss
Follow @ikhuerta
ltimos Tweets...
Consultor Seo Ikhuerta
consultor seo ikhuerta est desarrollado con Wordpress. Diseo, Maqueta y Contenidos por Ikhuerta | seo ibiza seo mallorca psiquiatras ibiza hoteles en ibiza baile de
salon