Tutorial: Transforma tu web en Responsive Design

Internet no para de evolucionar en todos los sentidos, incluso en su tecnología. Hay cosas que se marchan poniendo de moda y después, poco a poco, se marchan dejando de lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a proseguir".

El "Responsive Design" o bien en español "Diseño adaptativo", es una de estas últimas. Un sistema basado en los estándares web actuales que deja que nuestras webs se adapten a la pantalla del usuario que está viéndolas. El Adaptable Design se ha puesto muy de tendencia con el apogeo de la navegación movil, mas va considerablemente más allí, se trata de webs con diseños inteligentes (smart que afirmarían los ingleses) que facilitan la usabilidad de las webs en funcion de quien las observa.

Pero el Adaptable Design no son bien simples añadidos a una web, es una filosofía del desarrollo del front de la misma totalmetne diferente y que abarca tal cantidad de detalles que resulta inaccesible para muchas empresas y realmente complejo para otras. Realmente yo a día de el día de hoy no aconsejo realizar webs en Adaptable Design, pues no estamos dispuestos para ello, mas si que podemos sacar algunos conocimientos sobre estas aplicaciones para hacer nuestras webs seudo-adaptables y mejorar la experiencia del usuario. Tal vez no hasta el nivel que los diseños responsive que vamos viendo nos marcan pero si con suficiente calidad como para que el ratio "mejoría/coste" nos valga la pena.

Back to top

1) Por qué es complejo desarrollar webs en adaptable design

Básicamente por dos motivos:

• Porque es una tecnología verde, donde las distintas opciones para su aplicación empleo incluso no están lo suficientemente desarrolladas como para saber "como es la mejor". Si bien no paran de aparecer novedades al respecto, No hay un framework ganador ni un estándar sobre como solucionar la mayor parte de dificultades.
• Porque un diseño adaptativo no nace en la tecnología, sino más bien en el diseño de la página web. No se trata solo de que una vez tengamos nuestro diseño terminado debamos diseñar como variará con distintas pantallas y dispositivos, sino de forma directa hay que diseñar las webs pensando como se comportará. Esto, resulta exageradamente complejo para diseñadores que no saben precisamente como reacciona cada elemento a su adaptabilidad duplicando o bien triplicando el trabajo del maquetador que lo hace efectivo.

En definitiva, necesitamos más tiempo a fin de que la mayoría puedan permitirse trabajar con diseños adaptativos. Necesitamos que los conocimientos globales del sector (maquetadores, diseñadores, programadores e inclusive el personal comercial y de marketing) evolucionen en este sentido. Solo de esta manera vamos a poder acortar los tiempos de desarrollo de un diseño adaptativo y hacerlo práctico para su empleo en webs normales. La realidad es que hoy puede resultar mucho más rápido sacar una nueva versión de la página web para moviles que rediseñarla para que sea adaptable.

Eso no quiere decir que absolutamente nadie pueda lanzarse. Es normal que ciertos deseen destacar y ser de los primeros y más "avanzados". Excelente! Que ellos abran el camino y nos muestren entonces sus fallos al resto de mortales.

Back to top

2) Entonces... ¿qué puedo hacer ?

Como decía ya antes, no lanzarnos a rediseñar todas y cada una nuestras webs no significa que no podamos aprovechar las nuevas posibilidades que se nos ofrecen para hacer pequeños cambios en nuestras webs y en consecuencia progresar sensiblemente su adaptación a distintos navegadores y dispositivos.

Para ello, lo que tenemos que ver es de qué manera es nuestra web. Sobretodo a nivel de maquetación y fundamentalmente estructura HTML y CSS y a partir de ahí ver que pequeñas mejoras queremos aplicar.

Back to top

3) Consideraciones anteriores y hacks a conocer

Antes siquiera de plantearnos la posibilidad de "reparar" nuestras webs para hacerlas más amoldables debemos conocer ciertas técnicas y consejos que nos vendrán muy bien para trabajar y sin los que el trabajo no se hace solo complicado sino prácticamente imposible.

1. El no es indispensable pero ayuda

Una web en código HTML semántico es una web cuya maqueta se ha realizado adecuadamente. Donde se han utilizado solo los elementos HTML imprescindibles, pensando más en el significado de cada etiqueta que en el diseño y dejando por tanto todo el trabajo de diseño al CSS basándonos en clases e ID's.

Si bien no es preciso usar apropiadamente los DIV, P, UL, LI, etc. en nuestras maquetas para hacer Responsive Design lo que si que es cierto es que cuando menos la parte de suprimir todo el diseño de la maqueta debemos cumplirla. Es decir, no podemos usar CSS intrusivo (nada de atributos "style" en medio del código) y cuanto más limpio (y con menos divs) sea nuestro HTML más simple va a ser efectuar las adpataciones, pues el CSS tendrá más poder sobre el resultado final.

2. Elección del Zoom en los navegadores móviles

Dado que esta claro que han existido ya antes los navegadores móviles que los diseños amoldados a ellos estos emplearon desde el comienzo herramientas de zoom para poder visualizar webs completas. Si tu entras en una web normal con un móvil no verás la resolución real de tu móvil sino una versión que realiza un zoom para adecuarse a los 960px de ancho.

Este es su comportamiento por defecto, sin embargo, también se han creado etiquetas HTML para mudarlo. Así, si nosotros vamos a adaptarnos un poco a resoluciones móviles podemos simplemente señalarle al móvil que use otro tipo de escalado.

Para ello se emplea la meta-etiqueta "viewport" (a añadir en el head de la página), donde podemos concretar el comportamiento que esperamos que tenga un navegador de estas características en con nuestra página web.

Esta es la configuración de la etiqueta viewport más utilizada para adaptable design, pero no es la única que podemos emplear. Debemos comprender las dos variables que acá aparecen para que el movil se adapte a nosotros y no al revés.

• width:
  El ancho que forzamos al móvil a adoptar con la web. Normalmente se señala como "device-width" a fin de que se muestre la resolución real del dispositivo pero dependiendo del diseño que finalmente hayamos creado en la página web posiblemente deseemos detallar un tamaño fijo que coincida con la resolución que hemos preparado nosotros para la versión móvil de nuestra web.

  En webs que no llegan a ser totalmente amoldables (o bien que no lo son en absoluto) resulta realmente útil, al poder controlar el ancho de nuestro navegador. Supongamos que tengo una web de 1200px de ancho y no voy a hacerla adaptable. Señalando el width a 1200px al menos conseguire que la primera visualización desde móvil la contemple entera.

• initial-scale:
  Con esta orden indicamos el valor del zoom que queremos que use el movil. Siendo diez una visualización sin Zoom y dos.0 una ampliación de toda la página web al doble de su tamaño.

  Por supuesto si vamos a crear un diseño adaptado al ancho del movil la configuración de initial-scale=1.0 es la adecuada puesto que pedimos al móvil que no haga ningún género de zoom, mas muchas veces va a ser mejor no usar esta variable y permitir al móvil 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 tomaría el aspecto de una pantalla de 500px pero nosotros el en móvil solo veríamos la configuración original del móvil (que equivaldrían a unos 320px de los 500px totales generalmente). Sin embargo si no señalamos initial-scale la web se mostraría con el zoom amoldado para verla completa (probablemente los 500px declarados).

En webs que no llegan a ser totalmente adaptables (o bien que no lo son en absoluto) resulta realmente útil, al poder controlar el ancho de nuestro navegador. Supongamos que tengo una web de 1200px de ancho y no voy a hacerla adaptable. Señalando el width a 1200px cuando menos conseguire que la primera visualización desde movil la contemple entera.

Por supuesto si crearemos un diseño adaptado al ancho del movil la configuración de initial-scale=1.0 es la conveniente pues pedimos al móvil que no haga ningún género de zoom, pero muy frecuentemente será mejor no utilizar esta variable y permitir al móvil 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 página web tomaría el aspecto de una pantalla de 500px mas el en móvil solo veríamos la configuración original del móvil (que equivaldrían a unos 320px de los 500px totales por lo general). Sin embargo si no señalamos initial-scale la web se mostraría con el zoom amoldado para verla completa (seguramente los 500px declarados).

Por lo tanto tenemos 2 habituales configuraciones de viewport...

Para webs con responsive design adaptado perfectamente a resoluciones móviles:

Para webs que no se han amoldado del todo a resolución móvil:

Existen otras configuraciones, como por servirnos de un ejemplo crear webs con un ancho de móvil mas con zoom ya aplicado para enseñar solo una parte... mas son webs extrañas con una usabilidad incierta.

3. Las media queries

Las media queries son sentencias del CSS que nos permiten hacer declaraciones que solo se apliquen en nuestros diseños si se cumplen determinados requisitos que declaramos. Estas media queries se pueden aplicar básicamente en dos posibles puntos de la página web.

• Al llamar al archivo css, indicando en cada uno de ellos las condiciones para cargarlo
• O en el propio fichero 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 diferentes de nuestras webs. Seguidamente incluyo unos enlaces a fin de que puedas informarte sobre ellas en tanto que no deseo complicar este artículo con explicaciones de cosas que luego no vamos a emplear.

Para lo que nos interesa nos basta saber dos cosas. Por un lado como se declaran estas media queries en nuestro fichero CSS y por otro como dotar a los navegadores Internet Explorer antiguos de esta funcionalidad.

3.1 Declaración de media queries

Para declarar un fragmento de CSS dentro de un condicional marcado por una media query:

Donde además vamos a ver que lo más seguro es que apliquemos condiciones basadas en el ancho de pantalla que producen tres géneros de media queries:

Aplicar solo en resoluciones de menos de X píxeles de ancho:

Aplicar solo en resoluciones de más de X pixeles de ancho:

Aplicar solo en resoluciones entre X e Y pixeles de ancho:

Depende de nuestros gustos cual empleemos, mas lo normal es usar solo la primera de forma acumulativa de forma que a medida que hacemos el ancho más pequeño vayamos alterando elementos en nuestros diseños.

3.1 Compatibilidad de media queries con Internet explorer

Como siempre, explorer no va a aguantar muchas cosas que a día de hoy son ya de dominio público. Por suerte siempre y en todo momento existen desarrolladores muy motivados que nos crean librerías para dotar compatibilidad a estos navegadores. En un caso así nos hallamos con una librería javascript que simplemente debemos agregar para IE de versiones precedentes a la nueve.

Bastará cargar este script en el head de nuestra página y ya podremos usar media queries sin problemas.

Como todas estas librerías, el resultado no es exacto mas si que da una enorme compatibilidad en la mayoría de los casos.

Back to top

4) Los tres diseños base en el design responsive

Una vez hemos visto los detalles de tecnología nuevos a emplear con este tipo de diseños debemos ver como manejarlos. Como decía antes, soluciones hay miles, pero veamos la base que forma la concepción de la mayor parte de diseños adaptativos el día de hoy en día:

Estamos habituados a que nuestras webs sean fijas, tal como se diseñan en Photoshop las mostramos en nuestra página web. Esta claro que la equivalencia no es pixel a pixel pero se aproxima bastante una visualización a otra. En responsive design esto cambia. Nos hallamos con una infinidad de dispositivos donde deseamos que nuestra página web se adapte perfectamente. Mas estos dispositivos vamos a dividirlos en 3 grupos básicos para saber como afrontarlos:

• Grandes pantallas, donde nuestra web cabe y sobra aun espacio para visualizarla
• Pequeñas o bien antiguas pantallas, donde nuestra página web, para el ancho marcado no cabe y nos aparece la odiosa barra inferior (que absolutamente nadie emplea) para terminar de ver el contenido.
• Pantallas móviles, donde el espacio es tan pequeño que la información no se lee correctamente con el diseño global

Lo que debemos buscar entonces es como dar salida, con nuestro diseño actual a un diseño valido y usable para todas y cada una con nuestro actual diseño y maqueta de página. Esto, en dependencia de como esté maquetada nuestra página puede darnos aproximadamente problemas, pero por norma general, con el género de trabajo que se efectúa en la actualidad podemos lograr ciertas cosas.

4.1) Solucionando las pantallas grandes en adaptable design

En este aspecto generalmente no hay mayor inconveniente ya que nuestra web ya ha sido creada para ser vista en pantallas grandes. Hoy lo normal es que nuestra web tenga un marco centrado de 960px de pantalla y de este modo encaje bien al ser cargada con el zoom aplicado en la mayoría de móviles. Si nuestra página web es un poco antigua puede que tenga incluso algunos pixeles más habiendo sido concebida para pantallas de 1024px de ancho.

Sea como sea, lo lógico es que nuestra web disponga de contenedores de este tipo:

Esta sintaxis nos deja crear un contenedor (main) que queda centrado en la página. Además de esto con distintos backgrounds será posible decorar el exterior de la página para darle un tanto de diseño y no dejarla toda blanca o negra.

En fin, en estos casos no hay mucha cosa que hacer con pantallas grandes. Es cierto que posiblemente nuestra web sea vista en un televisión donde además de gran pantalla nos encontramos con que el usuario navega a cierta distancia del monitor. Esto requeriría de tratar estas pantallas como los móviles (con grandes cambios) mas verdaderamente es tan poca la gente que navega en su TV que no acostumbran a merecer la pena estas adaptaciones. Si todavía de esta manera, quieres crear tu adaptación a televisores puedes jugar con reglas similares a las de móvil que se explicarán más adelante.

4.2) Solucionando las pantallas pequeñas en responsive design

Aquí es donde comenzamos a localizar nuestros inconvenientes. Nuestra web está lista para un ancho de pantalla y resulta que tenemos un porcentaje de usuarios significativo con resoluciones menores.

Comprobar si esto nos sucede es sencillo si usamos Google Analytics o bien cualquier otro sistema de analítica de página. Ahí vamos a poder encontrar no solo las resoluciones de pantalla de nuestros usuarios sino que partes de nuestra página web suelen verse en nuestra página web. Hace no mucho disponíamos 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 termina la pantalla pequeña y cuando comienza la móvil. Es decir, esta claro que nuestra web no cabe en resoluciones pequeñas y vamos a deber encogerla un poco para ellas, pero llegará un instante en el que deje de tener sentido este "encogimiento" simple por aglutinar demasiados elementos en la pantalla con exactamente el mismo. Para tomar esa decisión conozcamos ciertos datos sobre los móviles:

• Un dispositivo móvil en vertical (como más acostumbra a emplearse), sin importar lo más mínimo su auténtica resolución, acostumbra a adoptar una resolución de dispositivo de 320px de ancho.
• En horizontal esta resolución se adapta al tamaño real de pantalla, mas suele quedar entre los 400px y los 600px. Por poner un ejemplo en mi Samsung Galaxy S2 adopta 530px de ancho
• En tablets esta resolución depende de la del dispositivo mas acostumbra a quedar en los modelos más vendidos por encima de los 600px, si bien puede llegar a los 1024px

El estándar que se está adoptando es trabajar encogiendo la página para resoluciones pequeñas hasta los 400px de ancho, medida a partir de la cual se comprende que el dispositivo debe cambiar radicalmente su visionado y probablemente funcionamiento básico. Asimismo encontraremos como algunas personas deciden visualizar encogiendo hasta los 600px de ancho y desde ahí empiezan a crear versiones intermediasentre pantalla pequeña y móvil.

Por último, también sabemos que el mínimo de ancho en el que tenemos que meditar estará en los 320px de ancho, lo que nos permite además de esto tener un margen desde el que no operar en absoluto.

Tu decides, yo creo que procurar abarcar todos los dispositivos es una insensatez. Al final lo que debemos meditar es en estilos de navegación del usuario donde solo tenemos tres.

• Móviles en vertical: Donde la pantalla solo deja lectura y navegación muy simplificada (320px-400px)
• Móviles en horizontal y tablets: Donde ya se deja una visualización horizontal tradicional mas donde hay que vigilar que la navegación se genera con taps y no con clicks (por lo que hay que eludir las acciones onMouseOver (400px-600px-800px)
• Dispositivos de sobremesa: Donde nuestra página web normal (>800px)

Así, yo entiendo la "pantalla pequeña" como una mezcla de pc, móviles horizontales y tablets, lo que la vuelve tenuemente compleja en si misma, mas nos simplifica el trabajo real de maquetación por bloques al unificar todos estos dispositivos en una sola acción.

Bien, una vez decidido nuestro ancho móvil, lo que tenemos que hacer es trabajar en esa visualización media convirtiendo los bloques que tenemos en nuestros días a fin de que puedan mudar de tamaño dependiendo del tamaño de pantalla.

Contenedores globales de la página

Llamamos contenedores globales a aquellos que marcan los anchos globales de nuestra página web. Esos que afirmábamos antes que nos permitían centrarla y dalre un ancho concreto.

Los contenedores globales son los más fáciles de amoldar puesto que lo único que tenemos que hacer es no ser tan rígidos con su ancho y pasar de un ancho fijo a un ancho máximo. Dicho de otra manera, bastará con que en mi declaración inicial del marco de la página pase de "width" a "max-width". Además y ya que hemos pensado en como será nuestra resolución mínima para pantallas móviles agregaremos esta como min-width para supervisar que ante dispositivos realmente extraños no provoquemos una página no controlada.

El resultado va a ser exactamente el mismo para pantallas grandes y no obstante, veremos como al hacer más pequeña nuestra página este marco se marcha haciendo más pequeño.

Os voy poniendo ejemplos sobre la transformación que he ido efectuando en mi blog (weblog.ikhuerta.com, o sea la web que ves ahora)

En mi caso marcado un ancho de 1080px de página 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 máximo de página en vez de fijo. En tu caso esto podría representar más o menos sentencias dependiendo de la cantidad de bloques de este género que utilices.

Contenedores interiores

A partir de acá es donde acostumbramos a empezar a tener inconvenientes. Nuestra página probablemente estará formada por un layout que se va a dividir en múltiples piezas:

• Cabecera a cien por cien de ancho
• Contenido ocupando una gran parte del ancho
• Uno o bien más sidebars ocupando solo una parte del lateral
• Pie de página a un cien por ciento de ancho

En definitiva, tenemos determinados contenedores que seguramente van a tener un ancho fijo para marcar columnas en la web. Luego estos podrán haberse transformado en columnas con distintas técnicas (floats en la mayoría de los casos, display:inline o bien en otros). Conque lo siguiente que tengo que hacer es transformar esos valores en declaraciones menos estrictas y que respeten que el contenedor primordial ya no mide precisamente lo que habíamos marcado.

Es decir, tenemos que pasar de Pixeles a porcentajes todo cuanto represente algún espacio en el ancho de página: widths, max-widths, margins y paddings.

Por suerte, una vez está terminada nuestra maqueta este paso es realmente sencillo. Solo tenemos que hacer una pequeña división 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] * cien

En mi caso, para este blog, tuve la fortuna de que muchos contenedores ya estaban en medida porcentual. Esta es una buena costumbre de maquetación, si porcentualmente hay un valor claro es preferible utilizarlo de esta manera para futuros cambios independientemente de si usamos o no adaptable design.

El elemento más molesto que me encontré fue el columnado que al estar desarrollado con elementos float al hacer más pequeño el marco el sidebar pasaba a quedar bajo el contenido. Así que realizamos los cálculos de los elementos en el div de contenedor global (que recordemos tenía un ancho de 1080px) y pasamos a porcentaje estas medidas.

Nótese que hemos transformado no solo los anchos, sino más bien también los márgenes horizontales a fin de que toda la página web siga cuadrando. También hemos incluyendo un gran número de decimales en el cálculo para ser lo más precisos al original.

Elementos interiores sueltos que crecen demasiado

En algunas ocasiones posiblemente nos hallemos con elementos sueltos en nuestra maqueta que por sus características pueden llegar a hacerse más grandes de lo que lo es su contenedor con max-width.

Lo mejor para detectar estos elementos es ir jugando con tu tamaño de navegador para advertirlos y corregirlos. Pero muchas veces será más veloz y cómo escoger nuestors contenedores y prohibir que ninguno de sus elementos interiores medre más de lo que mide el propio contenedor.

En mi caso he decidido aplicar esta corrección dentro de mi contenido primordial y mi sidebar, de forma que ciertos inconvenientes (sobretodo derivados de widgets como facebook y twitter) se resolviesen por si acaso solos.

Elementos posicionados en absoluto

Para los elementos posicionados en lo más mínimo va a haber que realizar exactamente el mismo proceso que con los anchos de elemento. Estos van a deber amoldarse a porcentajes en su eje X y variar su ancho.

En mi caso, disponía de varios elementos en absoluto en la cabecera por lo que he debido amoldar sus posiciones para que no quedasen flotando en el aire al hacer más pequeña la página.

Elementos que no caben... nuestras primeras "Media Queries"

Por mucho que adaptemos nuestros anchos probablemente haya elementos que sencillamente por el contenido que deben incluir no quepan en el diseño. Estos elementos nos están molestando y haciendo que todos nuestros cambios se vean mal. Para evitarlo deberemos comenzar a hacer empleo de media queries sencillas que nos permitan mudar drasticamente el CSS cuando se produzcan ciertas dimensiones.

Las media queries son un planeta, aun a día de hoy que no han sido completamente explotadas, se pueden hacer cosas asombrosas con ellas. Pero lo que vamos a hacer va a ser algo sencillísimo, sencillamente las usaremos para marcar condiciones sobre el ancho de pantalla a partir del como nuestro CSS cambie.

Recordemos esa sintáxis:

Estas media queries, para este caso concreto, en el que solo buscamos adaptar el diseño a diferentes resoluciones, nos servirán sobretodo para ocultar ciertos elementos secundarios que desde cierto ancho de pantalla molestan más que asisten al usuario y para hacer pequeñas adaptaciones a fin de que ciertos objetos quepan en el diseño ante diferentes situaciones.

En mi caso, he decidido esconder algunos elementos con resoluciones menores de 800px o bien 600px, pues no dejaban que se pudiese ver bien el contenido principal del blog.

En resoluciones de menos de 800px, oculto los botones de like, el breadcrumb, los botones sociales y alguna cosilla más. Desde menos de 600px he decidido además eliminar los últimos tuits del sidebar a fin de que no quedara todo tan apretado.

Sencillo, ¿cierto??

Pero las media queries no solo sirven para esconder contenido. Sino que permiten hacer modificaciones en algunos estilos. Esto es singularmente útil cuando un factor no se amolda 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 ciertos problemas los botones sociales a poco que bajase el ancho de página, con lo que he decidido cambiar un tanto su formato (eliminando iconos y reduciendo la letra) cuando la página baja de 960px de ancho.

Qué hacer con los menús y sus opciones

Los menús suelen ser un problema grave al hacer nuestras páginas más pequeñas puesto que tratándose de un conjunto de elementos mínimamente largo que además de esto no forma parte de la información primordial de la página (y por lo tanto no podemos permitirnos que ocupe demasiado espacio de exactamente la misma) el espacio destinado a exactamente los mismos se nos acostumbra a quedar corto en algún momento. Completemos esta problemática con que los dispositivos táctiles resultan incómodos con listados de enlaces pequeños (por lo que encoger los links no acostumbra a ser una alternativa)

Por suerte podemos recurrir a distintos recursos que solventan estos inconvenientes. A mi el que más me gusta (de momento) es el de reemplazar los menús por un SELECT que cuando el usuario utiliza cambiar la dirección de la página que estamos viendo por la del destino del link.

Me gusta porque resume grandes listados en un solo bloque pequeño y por el hecho de que al mismo tiempo, llegados a un móvil o tablet el comportamiento de los SELECT se vuelve ideal, puesto que permite al usuario elegir sus opciones cómodamente.

Para realizar este cambio os aconsejo el un fácil complemento, con gran compatibilidad, al que señalamos los diferentes elementos UL de nuestros listados y el agrega antes de estos un SELECT con las características que mencionabamos. Por lo tanto solo nos queda esconder el propio UL o bien el SELECT con nuestras media queries para lograr un resultado óptimo.

En mi caso he añadido 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 cuestión.

Así que he efectuado 3 pasos:

1- Añadir el script y en el "ready" de mi jquery hacer la llamada al nuevo método:

Esto añade el SELECT en los tres listados de enlaces del menú superior.

2- Añadir a mi CSS básico que no se muestren estos nuevos SELECT.

3- Incorporar dentro de la media query adecuada el formato del select y la desaparición del propio listado.

Y ya tenemos nuestros SELECTs bajo los 800px de ancho.

Backgrounds de bloques

Aquí, dependiendo de nuestra maqueta es donde podemos tener arduos problemas. En CSS decoramos nuestros bloques con imágenes de fondo. Existen inumerables técnicas para hacer esto pero unas son más amigables que otras a los redimensionamientos. Por lo tanto, en dependencia de las técnicas que hayamos empleado podemos toparnos con que nuestros fondos pierden sentido al ocultarse sus bordes.

Esto puede ser simplemente anecdótico en algunos casos, mas preferible a que el factor no se adapte al diseño pero en otros puede ser un verdadero quebradero de cabeza.

Soluciónes varias:

• Cambia todos los fondos que puedas por estilos CSS3 que responderán a la perfección a estos cambios. A día de hoy es simple dar compatibilidad a la mayoría de los navegadores para el empleo de bordes redondeados, sombras o degradados. Con estas tres funciones CSS es difícil que tus diseños precisen de muchas imágenes para crear los bloques.
• Elimina imágenes de fondo (y reemplazalas si puedes por el CSS3 más cercano) a medida que las media queries y anchos adaptables realicen su función
• En el caso de grandes fondos que ya contenían la situación de un bloque duplica en el bloque este estilo y también intenta que se note poco el background original

En mi caso este blog es bastante fácil y solo me he encontrado con tres tipos de imágenes de fondo molestas:

• Los bordes del marco de la página, que incluso no respetándose, al quedar por debajo de la parte no perceptible no han resultado molestos
• Los iconos de ciertos títulos, que he debido ir ocultando con media queries conforme resultaban molestos
• El background global de la cabecera, que incluía el cuadro blanco para el nombre del autor. Acá he debido replicar el estilo en el cuadro de autor de forma que se solape un fondo con otro al empequeñecer la página

No pongo el CSS de como están resueltas estas partes exactas en mi weblog, puesto que en todos y cada caso la solución será distinta.

Se acabó!

Y con todo esto ya hemos logrado un diseño bastante amoldable. De la rigidez que teníamos con un diseño fijo en 1080px de ancho, ahora tenemos un weblog que puede ser gozado en un mayor número de dispositivos... pero falta algo. Faltan los móviles, donde el diseño se ve bien con estos cambios mas resulta poco práctico (con sus 2 columnas y elementos apretados en la cabecera).

4.3) Solucionando las pantallas móviles en adaptable design

Como úlltimo paso debemos delimitar una visualización adecuada para móviles. Esto es de este modo pues el uso que se va a hacer en estos dispositivos no será exactamente el mismo que en páginas normales. Indudablemente desearemos hacer más cambios que simples adaptaciones del ancho de pantalla y desaparición de elementos.

Por suerte, contamos con el viewport para definir como queremos trabajar esta parte.

Comentábamos que el viewport nos sirve para señalar al móvil como deseamos que trabaje su Zoom en el momento de mostrarnos la página. Así pues, básicamente teníamos 2 opciones:

Para webs con responsive design amoldado perfectamente a resoluciones móviles:

Para webs que no se han adaptado completamente a resolución móvil:

La primera es la situación ideal, mas también la que más trabajo va a darnos, por el hecho de que al bajar de los 500-400px de ancho las columnas se vuelven directamente imposibles y eso quiere decir que debemos hacer cambios drásticos en la visualización de la página web.

La segunda opción puede ser más rápida. Simplemente señalamos que el movil se visualice a la resolución que deseemos y de esta manera se comportará... proseguirá siendo nuestra web normal pero en su versión más encogida.

Pero si elegimos la segunda opción tendremos dos inconvenientes con nuestra web:

• Por un lado el viewport es global a todos los navegadores móviles, por lo que si señalamos, por servirnos de un ejemplo, un viewport de 500px de ancho provocaremos que en un ipad de casi 800px de ancho se visualice una versión de nuestra página web a 500px que sin duda desperdiciará el espacio disponible
• Por otro, en resoluciones de 320px de ancho, nuestros contenidos se van a ver bastante reducidos con lo que si no hacemos según que cambios será inmanejable... Mas si adaptamos menús y fuentes asimismo se modificarán en la versión tablet.

En terminante, marcar un ancho fijo con viewport es la opción rápida mas no la buena.

Lo suyo es que dejemos al móvil mostrarnos la resolución que sea capaz de enseñar usando el primer viewport en nuestro HEAD de la página.

Una vez hemos decidido nuestra visualización debemos ponernos a trabajar en nuestra última media query: la versión móvil.

Aquí generalmente suprimiremos las columnas pasándolo todo a bloques de 100 por ciento de ancho. Suprimiremos y comprimirémos algunos elementos más y ajustaremos las fuentes para que la lectura a 320px de ancho resulte cómoda en dispositivos de pequeña pantalla.

Eliminando columnas:

Vamos a poner nuestras columnas una tras otra. Existen entonces 2 posibilidades.

a. Que en el html ya estuviesen ordenadas tal cual las queremos en la versión móvil.

En cuyo caso va a bastar con eliminar los floats o mudar el display:inline-block o display:box por un display:block normal.

b. Que no se encontraran ordenadas.

En cuyo caso vamos a deber jugar con posiciones absolutas que hagan a estos bloques inferiores pasar a la parte alta de la página y márgenes para mover los primeros bloques hacia abajo a fin de que no se crucen.

Imáginemos esta estructura:

Donde queremos que en la versión móvil los elementos del sidebar queden ya antes que los de content. Nuestro css tomará un aspecto cercano al siguiente:

En mi caso me hallé en este segundo caso, con lo que en móvil he debido recurrir a situaciones absolutas. Además situé el cambio a 450px de ancho, dado a que la visualización se volvía verdaderamente incómoda a partir de ese punto.

Ajustando Fuentes

Las fuentes que en su día se diseñaron para ajustarse a grandes pantallas, con un layout de columnas, etc. Cuando cambiamos a las pequeñas pantallas de movil en vertical estas suelen no ser las más cómodas para la lectura: Ocupan demasiado ancho, destacan demasiado los titulares y el texto del cuerpo suele ser bastante difícil de leer. Por ende resulta conveniente hacer una revisión de todas y cada una para ajustar la visualización a una versión cómoda.

En mi caso he tenido que cambiar todo el estilo de las fuentes de los menús, disminuir los titulares y aumentar el cuerpo de los artículos:

Otros ajustes

Por último, queda dejar "bonito" el resultado. Como anteriormente, revisemos nuestros elementos, reestilicemos aquellos que no se ajusten a lo que queremos y suprimamos aquellos que no tengan cabida.

En mi caso he debido eliminar totalmente el bloque de autor, pasar a horizontal los elementos del sidebar y desplazar ciertos márgenes de sitio.

Con todo esto ya tendremos nuestra página web móvil lista para trabajar.

Back to top

5) Testing y pruebas

Para trabajar con todo lo aquí explicado es esencial poder testar lo que vamos haciendo y los cambios que vamos provocando. Aquí me gustaría compartir con vosotros 2 recursos:

1. Para probar en el navegador:

Debemos ir ajustando el ancho de pantantalla para poder ver como nuestras adaptaciones toman forma y detectar pequeños ajustes a efectuar en nuestras media queries.

Para ello tenemos 2 opciones:

• Directamente desmaximizar nuestro navegador y también ir jugando con su ancho
• Usar herramientas como que nos permitirá ir haciendo estos ajustes con fáciles botones

2. Evitando la caché movil

Los móviles en su afán por no solicitar más datos de los rigurosamente precisos cachean más que un navegador tradicional. En un navegador suele bastar con presionar CTRL+F5 para provocar cargas sin cacheo. En móviles es más dificil y algunos navegadores nisiquiera tienen la opción de desactivar esta caché.

Para trabajar de forma más cómoda me gustaría daros 3 consejos:

• Usar variables en la llamada CSS. Esto es en vez de llamar a "/styles.css" vamos a llamar a "/styles.css?version=xxxx" cambiando en todos y cada caso el numero de versión para que la url sea distinta y en consecuencia no se use caché
• Trabajar en el navegador. Subiendo un tanto la resolución mínima móvil (420px-450px) vamos a poder provocar que esta sea vista en nuestro navegador cuando lo encojamos lo bastante. Asimismo utilizando herramientas de redimensionado de página podemos provocar estas acciones. Esto resultará sin duda más cómodo para muchas pruebas pero no evita probar por último en el propio móvil

Back to top

6) Conclusión

Poco a poco hemos ido viendo y conociendo las distintas técnicas y tecnologías que acostumbran a aplicarse al adaptable design pero aplicándolas a una web existente en vez de al desarrollo de webs nuevas.

¿Hemos hecho una web con adaptable design?

La contestación es clara: NO. Hemos hecho más adaptativa una web que no fue creada para serlo. En consecuencia hemos cometido muchos errores a lo largo del proceso:

• Hemos eliminado elementos que en su día consideramos vitales. Además lo hemos hecho por su aspecto no por su importancia en la información trasmitida al usuario
• Seguramente no hemos logrado una visualización perfecta en todos los casos. Hemos mejorado la que había, mas el resultado no es exactamente el mismo que si hubiesemos planificado todo esto de antemano
• Por último, he podido llegar al final con esta web, mas muchas webs, en dependencia de la maqueta de la que broten no van a poder llegar tan lejos y tendrán que conformarse con soluciones intermedias

Estos son los detalles, pero más importante que todo esto es que lo que hemos hecho ha sido una maqueta amoldable sobre un diseño que no era adaptativo. Adaptable Design nos habla de diseño, no de maqueta, por lo que debe venir directametne desde el concepto de diseño a fin de que termine de tener sentido para todos. No se trata de ser "guay" y poder enseñar una web que se encoje y se adapta ligerísimamente al móvil sino que nuestro proyecto debería haber surgido bajo el paradigma de ser multidispositivo, valorando en todos y cada caso su usabilidad.

Sin duda, si sigues este tutorial y lo aplicas a tu web podrás hacer maquetas adaptable mas eso no significa que puedas hacer adaptable design. Como decía al principio, prosigue faltando mucha base, mucho conocimiento y muchos procesos (no tan puntuales, no tan técnicos) para conseguirlo en una compañía normal. Podremos hacer nuestros pequeños proyectos, mas para empresas, este proceso sigue siendo un trauma doloroso por el que no recomendaría a nadie pasar.

¿Te agradó este artículo? Puedes continuar sus comentarios a través de , o realizar desde tu weblog.

Back to top