playwax3

Internet no para de evolucionar en todos los sentidos, aun en su tecnología. Hay cosas que se van poniendo de tendencia y luego, poco a poco, se van dejando a un lado, otras en cambio llegan con suficiente fuerza como para que todos sepamos que marcan el "camino a seguir".

El "Responsive Design" o bien en castellano "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 Responsive Design se ha puesto muy de moda con el apogeo de la navegación móvil, pero 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 Responsive Design no son bien simples añadidos a una web, es una filosofía del desarrollo del front de la misma totalmetne distinta y que abarca tal cantidad de detalles que resulta inaccesible para muchas empresas y verdaderamente complejo para otras. Verdaderamente yo a día de hoy no aconsejo realizar webs en Adaptable Design, puesto que no estamos preparados para ello, pero si que podemos sacar determinados conocimientos sobre estas aplicaciones para hacer nuestras webs seudo-amoldables y mejorar la experiencia del usuario. Quizá no hasta el nivel que los diseños adaptativos que vamos viendo nos marcan pero si con suficiente calidad como para que el ratio "mejoría/coste" nos merezca la pena.

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 uso aun no están lo suficientemente desarrolladas para saber "cual es la mejor". Aunque no paran de aparecer novedades a este respecto, No hay un framework ganador ni un estándar sobre como solucionar la mayoría de complicaciones.
• Porque un diseño adaptativo no nace en la tecnología, sino en el diseño de la web. No se trata solo de que una vez tengamos nuestro diseño terminado debamos diseñar como cambiará con diferentes pantallas y dispositivos, sino que de manera directa hay que diseñar las webs pensando como se comportará. Esto, resulta exageradamente complejo para diseñadores que no saben exactamente como reacciona cada elemento a su adaptabilidad duplicando o tresdoblando el trabajo del maquetador que lo hace efectivo.

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

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

Entonces... ¿qué puedo hacer ?

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

Para ello, lo que debemos ver es de qué forma es nuestra página web. Sobretodo a nivel de maquetación y esencialmente estructura HTML y CSS y desde ahí ver que pequeñas mejoras deseamos aplicar.

Consideraciones anteriores y hacks a conocer

Antes siquiera de plantearnos la posibilidad de "reparar" nuestras webs para hacerlas más acomodables 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 mas ayuda

Una web en HTML semántico es una web cuya maqueta se ha realizado apropiadamente. Donde se han usado solo los elementos HTML imprescindibles, pensando más en el significado de cada etiqueta que en el diseño y dejando por ende todo el trabajo de diseño al CSS en base a clases e ID's.

Si bien no es necesario utilizar apropiadamente los DIV, P, UL, LI, etc. en nuestras maquetas para hacer Responsive Design lo que si que es es cierto que cuando menos la una parte de eliminar todo el diseño de la maqueta debemos cumplirla. O sea, no podemos utilizar 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 fácil va a ser efectuar las adpataciones, puesto que el CSS va a tener más poder sobre el resultado final.

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

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

Este es su comportamiento por defecto, no obstante, asimismo se han creado etiquetas HTML para mudarlo. De esta forma, si vamos a amoldarnos un tanto a resoluciones móviles podemos sencillamente señalarle al móvil que use otro género de escalado.

Para ello se usa la meta-etiqueta "viewport" (a agregar 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 utilizar. Debemos comprender las dos variables que acá aparecen a fin de que el movil se adapte a nosotros y no del revés.

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

  En webs que no llegan a ser totalmente adaptables (o que no lo son en absoluto) resulta muy útil, al poder controlar el ancho de nuestro navegador. Pongamos que tengo una web de 1200px de ancho y no voy a hacerla adaptable. Indicando el width a 1200px por lo menos conseguire que la primera visualización 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 visualización sin Zoom y 2.0 una ampliación de toda la página web al doble de su tamaño.
  

  Por supuesto si crearemos un diseño amoldado al ancho del movil la configuración de initial-scale=1.0 es la conveniente pues solicitamos al móvil que no haga ningún tipo de zoom, pero muy frecuentemente 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 y también indicasemos initial-scale, la 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 generalmente). No obstante si no señalamos initial-scale la web se mostraría con el zoom adaptado para verla completa (probablemente los 500px declarados).
  

  
  

En webs que no llegan a ser completamente adaptables (o bien 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 adaptable. Señalando el width a 1200px por lo menos conseguire que la primera visualización desde móvil la contemple entera.

Por supuesto si vamos a crear un diseño amoldado al ancho del movil la configuración de initial-scale=1.0 es la adecuada pues solicitamos al móvil que no haga ningún tipo de zoom, pero en muchas ocasiones 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 y también indicasemos initial-scale, la 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 norma general). No obstante si no señalamos initial-scale la página web se mostraría con el zoom amoldado para verla completa (seguramente los 500px declarados).

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

Para webs con adaptable design amoldado de forma perfecta a resoluciones móviles:

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

Existen otras configuraciones, como por poner un ejemplo crear webs con un ancho de movil pero 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 dejan hacer declaraciones que solo se apliquen en nuestros diseños si se cumplen algunos requisitos que nosotros declaramos. Estas media queries se pueden aplicar esencialmente en 2 posibles puntos de la página web.

• Al llamar al fichero css, indicando en cada uno las condiciones para cargarlo
• O en el propio fichero CSS, formando un apartado donde incluir fragemntos de css a aplicar

Las media queries son verdaderamente potentes y permiten salirse del responsive design para cubrir aspectos muy distintos de nuestras webs. Seguidamente incluyo unos links a fin de que puedas informarte sobre ellas ya que no deseo complicar este post con explicaciones de cosas que luego no vamos a usar.

Para lo que nos resulta de interés nos basta saber dos cosas. Por una parte como se declaran estas media queries en nuestro fichero CSS y por otro como dotar a los navegadores IE antiguos de esta funcionalidad.

3.1 Declaración de media queries

Para declarar un fragmento de CSS en 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 y también Y pixeles de ancho:

Depende de nuestros gustos como empleemos, pero lo normal es utilizar solo la primera de forma acumulativa de manera que conforme 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 hoy son ya de dominio público. Afortunadamente siempre y en todo momento existen desarrolladores muy motivados que nos crean librerías para dotar compatibilidad a estos navegadores. En este caso nos encontramos con una librería javascript que sencillamente debemos incorporar para IE de versiones precedentes a la nueve.

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

Como todas y cada una estas librerías, el resultado no es exacto pero si que da una gran compatibilidad en la mayor parte de los casos.

Los tres diseños base dentro del design responsive

Una vez hemos visto los detalles de tecnología nuevos a emplear con esta clase de diseños debemos ver como manejarlos. Como afirmaba ya antes, soluciones hay miles, mas 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 cual se diseñan en Photoshop las mostramos en nuestra web. Esta claro que la equivalencia no es pixel a pixel mas se acerca bastante una visualización a otra. En adaptable design esto cambia. Nos hallamos con una infinidad de dispositivos donde queremos que nuestra web se adapte de manera perfecta. Mas estos dispositivos vamos a dividirlos en 3 conjuntos básicos para saber como afrontarlos:

• Grandes pantallas, donde nuestra web cabe y sobra incluso espacio para visualizarla
• Pequeñas o viejas pantallas, donde nuestra página web, para el ancho marcado no cabe y nos aparece la aborrecible barra inferior (que nadie usa) para finalizar de ver el contenido.
• Pantallas móviles, donde el espacio es tan pequeño que la información no se lee apropiadamente con el diseño global

Lo que tenemos que 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 más o menos problemas, pero por lo general, con el tipo de trabajo que se realiza hoy día podemos lograr ciertas cosas.

Solucionando las pantallas grandes en responsive design

En este aspecto por norma general no hay mayor inconveniente ya que nuestra página web ya ha sido creada para ser vista en pantallas grandes. A día de hoy lo normal es que nuestra web tenga un marco centrado de 960px de pantalla y de esta manera encaje bien siendo cargada con el zoom aplicado en la mayor parte de móviles. Si nuestra web es un poco antigua puede que tenga incluso algunos píxeles más habiendo sido pensada para pantallas de 1024px de ancho.

Sea como sea, lo razonable es que nuestra web disponga de contenedores de este tipo:

Esta sintaxis nos permite crear un contenedor (main) que queda centrado en la página. Además con distintos backgrounds será posible decorar el exterior de la página para darle un poco 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 es posible que 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 televisión que no suelen merecer la pena estas adaptaciones. Si aún de esta manera, quieres crear tu adaptación a televisores puedes jugar con reglas parecidas a las de móvil que se explicarán más adelante.

Solucionando las pantallas pequeñas en responsive design

Aquí es donde empezamos a localizar 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 sucede es sencillo si utilizamos Google Analytics o bien cualquier otro sistema de analítica de página. Ahí podremos localizar no solamente las resoluciones de pantalla de nuestros usuarios sino que unas partes de nuestra web acostumbran a verse en nuestra web. Hace no mucho disponíamos de una herramienta llamada "Google Browser size", pero está obsoleta en favor de exactamente la misma funcionalidad en Analytics.

Lo primero que debemos decidir es en que punto acaba la pantalla pequeña y cuando comienza la móvil. O sea, esta claro que nuestra página web no cabe en resoluciones pequeñas y deberemos encogerla un poco para ellas, mas llegará un momento en el que deje de tener sentido este "encogimiento" simple por unir demasiados elementos en la pantalla con exactamente el mismo. Para tomar esa decisión conozcamos algunos datos sobre los móviles:

• Un dispositivo móvil en vertical (como más suele emplearse), sin importar su auténtica resolución, acostumbra a adoptar una resolución de dispositivo de 320px de ancho.
• En horizontal esta resolución se amolda al tamaño real de pantalla, pero 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 pero suele quedar en los modelos más vendidos por encima de los 600px, aunque 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 desde la como se comprende que el dispositivo debe mudar radicalmente su visionado y posiblemente funcionamiento básico. Asimismo encontraremos como ciertas 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, asimismo sabemos que el mínimo de ancho en el que debemos pensar estará en los 320px de ancho, lo que nos deja además tener un margen desde el que no operar en absoluto.

Tu decides, creo que intentar englobar todos y cada uno de los dispositivos es una locura. Al final lo que tenemos que meditar es en estilos de navegación del usuario donde solo tenemos 3.

• 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 permite una visualización horizontal tradicional pero donde hay que observar que la navegación 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 página web normal (>800px)

Así, comprendo la "pantalla pequeña" como una mezcla de pc, móviles horizontales y tablets, lo que la vuelve levemente compleja en si misma, pero nos facilita 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 debemos hacer es trabajar en esa visualización media convirtiendo los bloques que tenemos en nuestros días para que puedan mudar de tamaño en función del tamaño de pantalla.

Contenedores globales de la página

Llamamos contenedores globales a aquellos que marcan los anchos globales de nuestra web. Esos que decíamos ya antes que nos permitían centrarla y dalre un ancho concreto.

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

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

Os voy poniendo ejemplos sobre la transformación que he ido efectuando en mi blog (blog.ikhuerta.com, esto es la web que ves ya)

En mi caso marcado un ancho de 1080px de página que se aplicaba en los elementos de cabecera, contenido primordial y footer. Mi primer paso ha sido en consecuencia 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 en dependencia de la cantidad de bloques de este género que utilices.

Contenedores interiores

A partir de acá es donde solemos comenzar a tener problemas. Nuestra página seguramente estará formada por un layout que se va a dividir en varias piezas:

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

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

Es decir, debemos 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. Tan 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 weblog, tuve la fortuna de que muchos contenedores ya estaban en medida porcentual. Esta es buena costumbre de maquetación, si porcentualmente hay un valor claro es preferible utilizarlo de esta forma para futuros cambios con independencia de si utilizamos o bien no adaptable design.

El elemento más molesto que me hallé 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. Con lo que efectuamos 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 solamente los anchos, sino más bien asimismo los márgenes horizontales a fin de que toda la web prosiga cuadrando. Asimismo hemos incluyendo un elevado número de decimales en el cálculo para ser lo más exactos al original.

Elementos interiores sueltos que medran demasiado

En algunas ocasiones posiblemente nos encontremos 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 advertir estos elementos es ir jugando con tu tamaño de navegador para detectarlos y corregirlos. Pero muy frecuentemente va a ser más rápido y cómo escoger nuestors contenedores y prohibir que ninguno de sus elementos interiores crezca 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 algunos inconvenientes (sobretodo derivados de widgets como facebook y twitter) se resolviesen por si acaso solos.

Elementos posicionados en absoluto

Para los elementos posicionados en absoluto habrá que efectuar exactamente el mismo proceso que con los anchos de elemento. Estos van a deber adaptarse a porcentajes en su eje X y variar su ancho.

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

< diseño web profesional tarragona que no caben... nuestras primeras "Media Queries"

Por mucho que amoldemos nuestros anchos es probable que 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 empezar a hacer uso de media queries fáciles que nos permitan mudar drasticamente el CSS cuando se produzcan ciertas dimensiones.

Las media queries son todo un planeta, incluso hoy que no han sido totalmente explotadas, se pueden hacer cosas pasmosas con ellas. Mas lo que haremos será algo sencillísimo, sencillamente las usaremos para marcar condiciones sobre el ancho de pantalla a partir del cual nuestro CSS cambie.

Recordemos esa sintáxis:

Estas media queries, para este caso específico, en el que solo procuramos adaptar el diseño a distintas resoluciones, nos servirán sobretodo para esconder ciertos elementos secundarios que a partir de cierto ancho de pantalla incordian más que ayudan al usuario y para hacer pequeñas adaptaciones para que ciertos objetos quepan en el diseño ante distintas situaciones.

En mi caso, he decidido esconder ciertos elementos con resoluciones menores de 800px o bien 600px, puesto que no permitían que se pudiera ver bien el contenido primordial del blog.

En resoluciones de menos de 800px, oculto los botones de like, el breadcrumb, los botones sociales y alguna cosa más. A partir de menos de 600px he decidido además eliminar los últimos tuits del sidebar para que no quedase todo tan apretado.

Sencillo, ¿verdad??

Pero las media queries no solo sirven para esconder contenido. Sino que dejan hacer modificaciones en ciertos estilos. Esto es singularmente útil cuando un elemento no se amolda sencillamente con anchos pero incluso no deseamos hacerlo desaparecer. En ese instante le cambiamos un tanto el estilo a fin de que se adapte a lo que buscamos.

En mi caso, me daban ciertos inconvenientes los botones sociales a poco que bajase el ancho de página, con lo que he decidido mudar un tanto su formato (suprimiendo iconos y disminuyendo la letra) cuando la página baja de 960px de ancho.

Qué hacer con los menús y sus opciones

Los menús acostumbran a ser un problema arduo al hacer nuestras páginas más pequeñas pues tratándose de un conjunto de elementos mínimamente largo que además no es parte integrante de la información principal de la página (y en consecuencia no podemos dejarnos que ocupe demasiado espacio de exactamente la misma) el espacio destinado a los mismos se nos acostumbra a quedar corto en algún instante. Completemos esta problemática con que los dispositivos táctiles resultan incómodos con listados de enlaces pequeños (por lo que encoger los enlaces no acostumbra a ser una alternativa)

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

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

Para realizar este cambio os recomiendo el un sencillo complemento, con gran compatibilidad, al que señalamos los distintos elementos UL de nuestros listados y el añade antes de estos un SELECT con las características que mencionabamos. Por consiguiente solo nos queda esconder el propio UL o el SELECT con nuestras media queries para conseguir un resultado perfecto.

En mi caso he añadido el complemento para los listados de links de la cabecera, de manera que al bajar de 800px de ancho estos sean sustituidos por el SELECT en cuestión.

Así que he realizado 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- Añadir 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í, en dependencia 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 mas unas son más amigables que otras a los redimensionamientos. Por ende, en dependencia de las técnicas que hayamos empleado podemos encontrarnos con que nuestros fondos pierden sentido al ocultarse sus bordes.

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

Soluciónes varias:

• Cambia todos los fondos que puedas por estilos CSS3 precios diseño paginas web . A día de hoy es simple dar compatibilidad a la mayoría de los navegadores para el uso 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 acomodables 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 e procura que se note poco el background original

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

• Los bordes del marco de la página, que aun no respetándose, al quedar bajo la parte no visible no han resultado molestos
• Los iconos de ciertos títulos, que he debido ir ocultando con media queries a medida que resultaban molestos
• El background global de la cabecera, que ya incluía el cuadro blanco para el nombre del autor. Acá he debido contestar 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 precisas en mi blog, pues en todos y cada caso la solución será diferente.

Se terminó!

Y con todo esto ya hemos conseguido un diseño bastante amoldable. De la rigidez que teníamos con un diseño fijo en 1080px de ancho, ahora tenemos un blog que puede ser disfrutado en un mayor número de dispositivos... mas 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).

Solucionando las pantallas móviles en responsive design

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

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

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

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

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

La primera es la situación ideal, pero asimismo 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 significa 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 queramos y así se comportará... proseguirá siendo nuestra página web normal mas en su versión más encogida.

Pero si escogemos la segunda opción tendremos 2 problemas con nuestra web:

• Por un lado el viewport es global a todos y cada uno de los navegadores móviles, con lo que si indicamos, por poner un ejemplo, un viewport de 500px de ancho provocaremos que en un ipad de prácticamente 800px de ancho se visualice una versión de nuestra 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 amoldamos menús y fuentes también se modificarán en la versión tablet.

En definitiva, marcar un ancho fijo con viewport es la opción rápida pero 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í normalmente eliminaremos las columnas pasándolo todo a bloques de 100 por ciento de ancho. Eliminaremos y comprimirémos algunos elementos más y ajustaremos las fuentes a fin de 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 dos posibilidades.

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

En cuyo caso va a bastar con quitar los floats o bien cambiar 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 desplazar los primeros bloques hacia abajo para 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 va a tomar un aspecto próximo al siguiente:

En mi caso me hallé en este segundo caso, con lo que en móvil he tenido que recurrir a situaciones absolutas. Además de esto situé el cambio a 450px de ancho, dado a que la visualización se volvía realmente incómoda desde 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étera Cuando cambiamos a las pequeñas pantallas de móvil en vertical estas acostumbran a no ser las más cómodas para la lectura: Ocupan demasiado ancho, resaltan demasiado los titulares y el texto del cuerpo suele ser difícil de leer. Por lo tanto 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 debido mudar todo el estilo de las fuentes de los menús, reducir los titulares y aumentar el cuerpo de los artículos:

Otros ajustes

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

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

Con todo esto ya vamos a tener nuestra web móvil lista para trabajar.

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:

< empresa marketing y publicidad . Para probar en el navegador:

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

Para ello tenemos dos 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 anhelo por no solicitar más datos de los estrictamente necesarios cachean mucho más que un navegador tradicional. En un navegador acostumbra a bastar con presionar CTRL+F5 para provocar cargas sin cacheo. En móviles es más difícil y algunos navegadores nisiquiera tienen la opción de desactivar esta caché.

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

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

Conclusión

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

¿Hemos hecho una web con adaptable design?

La respuesta 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, yo he podido llegar al final con esta web, pero muchas webs, dependiendo de la maqueta de la que surjan no podrán llegar tan lejos y tendrán que conformarse con soluciones intermedias

Estos son los detalles, mas más esencial que todo esto es que lo que hemos hecho ha sido una maqueta amoldable sobre un diseño que no era adaptativo. Responsive Design nos habla de diseño, no de maqueta, con lo que debe venir directametne desde el concepto de diseño para que termine de tener sentido para todos. No se trata de ser "genial" y poder mostrar una web que se encoje y se adapta ligerísimamente al movil sino 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 vas a poder hacer maquetas adaptable mas eso no significa que puedas hacer adaptable design. Como afirmaba al comienzo, sigue faltando mucha base, mucho conocimiento y muchos procesos (no tan puntuales, no tan técnicos) para conseguirlo en una empresa normal. Podremos hacer nuestros pequeños proyectos, mas para empresas, este proceso prosigue siendo un trauma doloroso por el que yo no aconsejaría a nadie pasar.

¿Te gustó este blog post? Puedes proseguir sus comentarios a través de , o efectuar desde tu weblog.