shortsice9

Quienes hemos estado creando sitios desde los principios de la página web, estamos habituados a que nuestras páginas sean “rígidas", esto es, de ancho fijo en pixeles. En los años noventa, los monitores de catorce pulgadas con un ancho de pantalla de 640px eran los únicos que existían, y ese era el tamaño que dábamos a nuestros diseños. No pensábamos en otra opción. Simplemente definíamos tamaños en pixeles a nuestras columnas.

Cerca del año dos mil, surgió un segundo valor a considerar: 800px de ancho (ya existían monitores de 15 y de 17 pulgadas). El problema era que, si definíamos el ancho total de nuestro lugar en 800px, a los usuarios de monitores de 640px de ancho que todavía quedaban, les aparecía una poco muy elegante y nada usable barra de desplazamiento horizontal. El lugar no entraba en la pantalla.

Las soluciones para ese escenario dividido en dos tamaños eran muy sencillas: hacíamos un contenedor general de 640px de ancho y lo centrábamos dejando una pequeña franja sin ocupar a ambos costados o bien hacíamos un sitio con ancho definido en porcentajes, que se estiraba levemente entre las dos medidas.

Más cerca en el tiempo, alrededor del año dos mil cinco, la decisión a tomar era similar: seguían existiendo monitores de 800px (ya no quedaba ningún monitor de 640px de ancho), mas la resolución mayoritaria pasó a ser de 1024px. Entonces, o le dábamos ancho líquido (en porcentajes) para que se estirara entre ochocientos y 1024px, o bien creábamos un contenedor de 800px centrado, sobrando unas pequeñas franjas a los costados, y asunto resuelto.

Pero al llegar la década del dos mil diez, un cambio realmente revolucionario alteró nuestro escenario. Los teléfonos móviles empezaron a navegar la web, utilizando navegadores similares a los de una ordenador (Opera, Safari, Explorer, Google Chrome y Mozilla Firefox) y apareció la primera tableta (el iPad). Desde ese instante, nuestras decisiones de diseño se volvieron más complejas, a raíz de la diversidad de tamaños de pantalla con los que los usuarios navegan nuestros sitios. ¿Para cuál de todos esos tamaños vamos a diseñar? ¿Para todos? ¿Eso es posible?

Algún cambio es necesario en nuestra metodología de diseño, en tanto que un diseño líquido simplemente no aguanta ser “estirado" desde un mínimo de 320px hasta múltiples miles y miles de pixeles de ancho.

Y por otro lado, si en vez de darle ancho líquido, le definiéramos los anchos en pixeles, el efecto sería igual de negativo: el lugar se “miniaturizará", siendo muy incómodo navegarlo, dependiendo del uso constante de zoom en los dos sentidos y debiendo efectuar desplazamientos horizontales. Algo así como sobrevolar la página web en helicóptero, a la manera de cómo visualizamos un mapa.

En el escenario actual, ya no podemos confiar en una resolución mayoritaria, ni en dos o tres, sino que es necesario entender que las resoluciones usadas por los usuarios cada vez estarán más fragmentadas y serán más variadas, cubriendo rangos intermedios entre dos puntas cada vez más distantes: dispositivos más pequeños que un monitor de computador, por un lado, y pantallas poco a poco con mayor resolución en el otro extremo.

La era en la que empleamos y abusamos de sitios de ancho fijo en pixeles, grillas y columnas definidas en pixeles y hasta metodologías de diseño visuales como las de maquetar usando celdas de tablas, ya llegó a su fin. Es el fin del diseño rígido. Precisamos algo nuevo.

El diseño como inconveniente y como solución

Las páginas web por naturaleza son “adaptables" desde el nacimiento mismo de la Web. Para comprobar que esta hipótesis es adecuada, pensemos en un fichero HTML correctamente estructurado, con encabezados, párrafos y listas. Pero sin diseño. Es decir, un archivo HTML al que no le vinculamos ninguna hoja de estilos, al que no lo maquetamos. Por servirnos de un ejemplo, el siguiente:

Si tratamos de navegar este archivo desde dispositivos de distintos tamaños, no tendremos ningún problema para acceder a sus contenidos: el texto será inteligible en un celular, en una tableta y en una PC también.

Desde en tanto que no está “optimizado” para esos tamaños, jamás afirmamos que fuera estéticamente logrado, solo que es adaptable, que se puede utilizar en todos los tamaños.

En conclusión, el inconveniente que dificulta acceder a nuestros sitios web desde móviles es generado por nuestro proceso de diseño: brota cuando añadimos hojas de estilo y diseñamos, dando medidas a cada bloque de contenidos y a los elementos que lo componen (imágenes, tipografías, etcétera).

Aunque más que el diseño en sí, diríamos que es el “sobre-diseño” el culpable de la rigidez. El fallo consiste en delimitar toda medida en pixeles, pretendiendo supervisar al detalle la ubicación de la información. Ese es el primordial causante de esta inflexibilidad.

Es decir, somos los diseñadores mismos los que causamos el inconveniente, con nuestro antiguo proceso de diseño (heredado de medios gráficos como el papel) y la falla está en ciertas decisiones que tomamos en su trascurso (como las unidades de medida que elegimos aplicar).

• El hecho de que seamos los responsables del inconveniente es una muy buena noticia, ya que si estamos provocando el problema, también está en nuestras manos la solución. No depende de “otros”, no es ocasionada por los fabricantes de dispositivos ni de navegadores ni de editores HTML: está absolutamente en nuestras manos la decisión de hacer que nuestros sitios empleen técnicas amoldables.

¿Qué son las Media Queries?

Ante todo, la técnica: se denomina Media Queries a la posibilidad de delimitar condiciones que deben cumplirse para que el navegador procese ciertas reglas de estilo específicas en nuestra hoja CSS.

Por ejemplo, podríamos acotar una condición que determine que si el tamaño de pantalla es menor a 480px de ancho, el navegador procese determinados estilos CSS que vamos a dejar preparados. En esos estilos, definiremos diseños ideales para un dispositivo que cumpla con esa condición, es decir, que no supere ese ancho de pantalla de 480px.

Mediante el empleo de esta técnica, se procura optimizar la experiencia de empleo de un sitio web para adaptar el diseño al contexto. En un caso así, sería un tamaño variable de pantallas el que le brinda un contexto muy particular a los contenidos, limitando los diseños posibles.

Combinación de condiciones para crear rangos

También podemos combinar varias condiciones en una sola utilizando el operador lógico “and” en tantas ocasiones como sub-condiciones necesitemos conjuntar. En el próximo ejemplo, combinaremos dos condiciones: que sea una pantalla y que mida como mínimo mil veinticuatro pixeles de ancho.

En este otro ejemplo, combinaremos 3 condiciones: que sea pantalla, que mida más de 320px y menos de setecientos sesenta y ocho pixeles de ancho.

• Deberemos tener especial cuidado en que los valores de los rangos que definamos no se superpongan. O sea, si el valor máximo de uno es 320, definiremos el comienzo del siguiente rango en 321 y no en 320 precisos, en tanto que de lo contrario se leerán las 2 hojas en el momento en que un dispositivo tenga exactamente esa medida.

Esta posibilidad de combinar varias condiciones será imprescindible para poder advertir los rangos de tamaños a los que se aplicará una u otra hoja de estilos.

Diseño web adaptable/sensible/responsive

Esta técnica llamada media queries, que nos permite condicionar la lectura de diferentes estilos, es la que nos abre la posibilidad a un nuevo enfoque de diseño web, que resulta ideal para dar soporte a la enorme diversidad de dispositivos existentes hoy día. Este enfoque es conocido como “diseño web adaptable” o “diseño web sensible” (adaptable web design, originalmente).

En pantallas grandes (una media querie de “Mayor a 1024px”, por ejemplo) podríamos hacer flotar tres diseño de ui , al tiempo que en una tableta (una media querie de “Mayor a 800px”, por servirnos de un ejemplo) solo vamos a dejar flotar 2 columnas, y en el caso de pantallas más estrechas (celulares, sin media queries) anularemos todos los flotados, reduciendo la cantidad de columnas a una sola (“apilando” los contenidos uno debajo del otro).

Veamos cómo sería el código:

Un código similar al anterior es el utilizado para conseguir estos cambios en el lugar del Japan Times:

Pero no solo el layout puede mudar entre una pantalla y otra; analizaremos a continuación cuáles son los elementos de diseño que es esencial adaptar a fin de que el contenido web quede optimado para diferentes dispositivos.

Elementos del diseño web adaptable

Los elementos centrales de un diseño acomodable o “sensible” son cuando menos cuatro:

1. Esquema tipográfico flexible
2. Maquetación amoldable usando Media Queries, modificando la cantidad de columnas del diseño, con grillas flexibles, adaptando los anchos en cada rango.
3. Imágenes y multimedia amoldables, cambiando el tamaño de las imágenes y otros elementos vinculados. No debemos olvidar, si el lugar los incluye, la adaptación de videos y animaciones, y demás contenidos complejos como mapas, tablas, diapositivas, etc.
4. Navegación adaptable, optimada para touch en pantallas pequeñas.

Complementariamente, aplicaremos sistemáticamente en nuestras páginas amoldables, 2 elementos extra:

1. Una etiqueta meta viewport que impida la “miniaturización” de nuestras páginas.
2. Y un script compatibilizador para que funcione en navegadores antiguos la técnica de media queries.

Comencemos a examinar uno por uno estos elementos, así vamos a aprender a incluirlos en nuestros proyectos, para que podamos volverlos acomodables y dejemos atrás la era de la rigidez.

1. Esquema tipográfico flexible

El primer elemento del diseño que volveremos flexible desde nuestra hoja de estilos será el texto. La novedad será que cambiaremos la unidad de medida más empleada hasta el momento para delimitar el tamaño de las fuentes mediante la propiedad font-size (es decir, los pixeles), por otras 2 unidades de medida más versátiles.

Si seguimos usando pixeles como unidad de medida para nuestras fuentes, tendremos dos géneros de problemas:

1. El primero se lo causaremos a algunos de nuestros usuarios, aquellos que usen IE, ya que no podrán escalar el tamaño de la fuente si ésta fue definida en pixeles (un inconveniente de accesibilidad que afectará a nuestros usuarios miopes).
2. Y el segundo, será un problema de mantenimiento para nosotros mismos, ya que deberíamos duplicar, triplicar o más, las declaraciones de tamaños de fuentes en cada zona de la hoja de estilos, para poder delimitar cuál ha de ser su tamaño en todos y cada rango o condición, o sea, en todos y cada media query. Comprenderemos este problema a continuación.

Texto primero

¿Por dónde comenzamos entonces el proceso de codificación (HTML) si queremos aplicar Media Queries? Por el principio: el texto.

Pregunta al paso que siempre y en toda circunstancia me agrada plantear a mis alumnos: ¿Cuál es el denominador común de una pizza? ¿Aceitunas? ¿Cebollas? ¿Tomates? agencia diseño web galicia #xBF;O la masa?

¿Y el denominador común de una Web? ¿Flash? ¿Imágenes? ¿Videos? ¿O el texto?

Una vez marcados los textos semánticamente (con h1, h2, p, ul con li), aplicamos los identificadores y clases que creamos necesarios, y ya vamos a tener el código HTML básico terminado. Ese texto bien estructurado con HTML elemental, será suficiente para cualquier celular de bajas posibilidades que aún pudiese estar utilizando algún usuario.

Tipografía, siempre en EM

Ahora sí, llegó el instante de acotar en nuestra hoja de estilos las unidades de medida que volverán flexible nuestro esquema tipográfico, para garantizar la legibilidad de nuestros contenidos. Creamos que la distancia de lectura en una ordenador es cercana al metro, considerablemente mayor a la que existe entre nuestros ojos y un teléfono o bien tableta que mantenemos en nuestras manos:

Por ese motivo, los tamaños de fuentes deberán ser mayores para una ordenador que para una tableta, y los de una tableta, mayores que los de un celular.

Para conseguirlo, no usaremos más pixeles para definir el tamaño de fuentes, sino usaremos la unidad de medida em y los porcentajes, combinados de una manera particular: al body (y únicamente al body) le definiremos un font-size base en porcentaje, y al resto de textos, se lo definiremos en em:

Observemos que hemos definido en em los tamaños de fuentes de nuestros contenidos utilizando indistintamente etiquetas, id o bien clases, en un lugar: la zona inicial de nuestra hoja de estilos, aquella que leerán todos y cada uno de los dispositivos sin condiciones, ya que no se encuentra envuelta en ninguna media query.

Por otro lado, cuando aplicamos una condición para cierto tamaño, lo único que cambiamos es el valor base en porcentaje aplicado al body, lo que hará que todo el esquema tipográfico definido en ems se escale proporcionalmente a un nuevo tamaño. O sea, lo que estamos haciendo es mudar el tamaño del em, al mudar su punto de referencia (que es ese porcentaje que definimos en el body).

Como orientación, podemos calcular que en la mayoría de las pantallas de PC, a tamaño de fuente normal, la equivalencia entre ems y pixeles es que 1em = 16px, por lo que, si deseamos definir en la hoja de estilos un texto que en Photoshop ocupaba 24px, lo dividiremos por uno para saber su valor en em, que en un caso así sería 1.5em. Atención: usemos puntos como separador decimal, no comas.

Por supuesto, nada impide que realicemos ajustes en ciertas media queries si deseamos que determinado texto tenga una medida especial en una de ellas. Mas el punto de inicio ya quedará establecido automáticamente.

Con estas nuevas unidades de medida ya podremos crear esquemas tipográficos acomodables, que se visualicen de forma óptima según la distancia de lectura de cada dispositivo.

Notemos que no estamos definiendo un tamaño rígido, sino una relación proporcional entre los distintos tamaños de texto de nuestra página, proporción que se mantendrá a lo largo de todos y cada uno de los dispositivos gracias a que vamos a escalar el esquema completo en todos y cada media query.

2. Maquetación adaptable y grilla flexible

Aprovechando que cada zona de la hoja de estilos que envolvamos entre media queries permite que determinados estilos se apliquen solo en un rango de tamaños de pantalla, en todos y cada zona acomodaremos los contenidos en columnas de una forma optimizada para el tamaño del dispositivo.

• “Flotar o bien no flotar, that is the question”

En principio, convengamos que en un celular básico no es suficiente el espacio para flotar dos o bien más columnas una a la vera de la otra, por lo que el layout será exageradamente simple: solo vamos a dejar que los bloques se apilen uno bajo el otro por orden de aparición en el código HTML.

A partir de allí, haremos flotar tantos bloques como creamos necesario en cada media query.

Grillas flexibles

La grilla flexible consiste en definir anchos de contenedor y de columnas en porcentajes, para que los bloques de un diseño sostengan una proporción entre sí dentro del rango de ancho mínimo y máximo definido en cada media query del punto anterior.

La fórmula para calcular los porcentajes a partir de un boceto en pixeles es la de dividir el ancho del elemento por el del que lo envuelve:

Ejemplo: 600px / 960px = 0,625

Es decir, ese bloque que medía 600px en un contenedor de 960px ahora deberá medir 62.5 por ciento (ese valor surge del 0.625 de la cuenta que terminamos de efectuar)

Repitamos la fórmula en otro caso:

Ejemplo de tres columnas para fotos situadas en una zona de 480px:

150px / 480px = 0,3125

Es decir, vamos a deber acotar un treinta y uno y veinticinco por ciento de ancho a cada una de las tres columnas.

Márgenes y paddings flexibles

En este contexto, también debemos regresar flexibles los márgenes y paddings, para que no arruinen con pixeles la proporcionalidad de los espacios conseguida.

1. Margen: el contexto es el ancho del elemento padre (contenedor):
   
   • Ej. 24px / 900px = 0,02666 = 2,66 por cien
   
   
2. Padding: el contexto es el ancho del elemento mismo al que lo aplico:
   
   • Ej. 24px / 200px = 0,12 = 1. por cien
   
   

• Ej. 24px / 900px = 0,02666 = dos,66 por ciento

• Ej. 24px / 200px = 0,12 = uno por ciento

3. Medios acomodables (imágenes, videos)

Si en todos y cada zona de los estilos CSS acotada por una media querie apuntamos a distintas imágenes (de distintos tamaños), no vamos a tener inconvenientes con background-image:

en el caso de etiquetas IMG, vamos a hacer flexible la imagen dentro del rango mínimo y máximo de un layout:

Eso hará que dentro del rango de ancho del elemento que envuelva a la fotografía (columna) la imagen se estire desde un mínimo y hasta un máximo. Como el máximo es su tamaño real, 100 por ciento , consideremos ese ancho al delimitar el ancho de su elemento contenedor, o bien viceversa: creemos la imagen al tamaño máximo al que llegará su elemento contenedor.

Existen múltiples propuestas del W3C para detallar que el navegador descargue diferentes imágenes según el tamaño de pantalla (tal como en las imágenes de fondo) como por ejemplo, la posible etiqueta “picture” con varias etiquetas “source”, cada una condicionada por una media query, o que se modifique la etiqueta “img” permitiendo concretar más de un source mediante el atributo srcset. Al momento de redactar este libro ninguna de ellas está estandarizada ni incorporada por los navegadores.

Otros casos son los de usar dibujos vectoriales escalables SVG en lugar de una etiqueta IMG cuando lo que muestre la imagen sea un dibujo con pocos colores (logos, iconos, etcétera).

4. Navegación adaptable

La navegación es otro de los puntos críticos que debe amoldarse en un lugar para permitir su uso en teléfonos y tabletas.

Tomemos como ejemplo la navegación de este sitio:

En el caso de la ordenador, vemos una serie de submenús desplegables, a partir de una lista (ul) de primer nivel que contiene el nombre de cada sección en letras grandes, y con una segunda línea descriptiva. Vemos cómo, en un tamaño mediano de pantalla (tableta), esa segunda línea desaparece, y el tamaño de fuente es menor. Ese cambio puede lograrse con algo tan sencillo como cambiar el font-size (ya lo vimos en el primer punto de este capítulo) y ocultar con display:none los subtítulos por defecto, haciéndolos perceptibles con display:block desde cierto tamaño de pantalla.

Por ejemplo:

Y en el caso de la navegación en la pantalla más pequeña (teléfono), vemos que se aplicó exactamente el mismo criterio mas para ocultar el gran listado de submenús, dejando solamente los botones de primer nivel, haciendo que no floten uno al lado del otro y dándoles un tamaño grande, para poder ser fácilmente pulsados con los dedos en una pantalla táctil.

Otro caso bastante común es el de sustituir un menú visualmente amplísimo que es el que se usará en la ordenador, por un select con options en el teléfono.

En el código HTML, que es el mismo para todos y cada uno de los dispositivos, estará el código HTML de los dos menús (el formulario con el select y la “ul” con botones).

Por ejemplo:

Desde la hoja de estilos, en la zona inicial de la hoja sin condiciones, ocultamos el menú de ordenador y mostramos el de celular:

Y en una media query, invertiremos esto para cuando estemos en pantallas grandes:

De esta manera, ya podemos manipular la visualización de diferentes herramientas de navegación, gracias a las media queries.

seo para paginas web

El tamaño de la “ventana” del navegador en una computador, siempre coincide o bien es menor que el tamaño de la pantalla. Esto es, o bien usamos el navegador maximizado, a pantalla completa, o bien lo achicamos un tanto. Mas jamás es más grande que la pantalla.

En móviles, en cambio, o la ventana del navegador coincide con el tamaño de pantalla (siempre y en todo momento maximizada), o bien es mayor que el tamaño de pantalla, viendo solo una parte de ella por vez. Nunca es menor en tanto que no podemos “achicar” la ventana para que ocupe menos de una pantalla. Pero sí puede ocurrir lo opuesto, que el contenido supere el tamaño de la pantalla pues estemos viendo solo una parte, debido a la utilización del zoom.

Por ejemplo: Safari y Opera Mini asignan 980px de ancho al viewport y hacen zoom para mostrar lo que suponen una web hecha para PC (y en el noventa y nueve por cien de los casos, ¡aciertan!).

Veamos un caso equiparando exactamente la misma página sin que el navegador le haga zoom, “miniaturizándola”, y con la etiqueta viewport que lo impide, que vamos a ver a continuación:

¿Cómo podemos impedir que los navegadores móviles escalen nuestros sitios y los miniaturicen? La solución es una nueva etiqueta meta cuyo name es “viewport”, que solo es aplicada por dispositivos móviles y es ignorada en computadoras de escritorio.

Su sintaxis es la siguiente:

Dentro del atributo content, lo que estamos haciendo es acotar que el width de la ventana del navegador tenga un valor “real”; o sea, que el navegador no nos “mienta”, sino utilice como valor de su propiedad “width” el valor de otra propiedad, que es “device-width”, es decir, el ancho físico de su pantalla.

De esa manera, un navegador dentro de un dispositivo de por ejemplo, 320px de ancho, ya no declarará un width falso de 980px, sino que lo dejará en 320px, que es el ancho del dispositivo, con lo que no miniaturizará nuestro diseño.

Por otro lado, notemos que hemos definido un valor inicial para el zoom, mediante la propiedad initial-scale a un valor de “1” que equivale a cien por ciento , o sea, el tamaño natural. De esta manera, cuando el navegador ingrese a nuestra página, no aplicará ningún nivel de zoom que previamente el usuario hubiese configurado.

• Atención con el zoom: no debemos desactivar por completo la posibilidad de efectuar zoom por parte del usuario, ya que ésta es una atribución suya. Pensemos, por servirnos de un ejemplo, en un usuario miope, que precisa ampliar parte de nuestro sitio. Para eso, evitemos acotar en la etiqueta viewport los valores de mínimum-scale y de maximum-scale, desgraciadamente muy difundidos.

Soluciones para navegadores que no comprenden Media Queries

Los celulares más viejos, cuyos navegadores no comprenden media queries, no tendrán inconvenientes en enseñar un diseño acorde a su tamaño si ese diseño es el primero en la hoja de estilos y no está envuelto dentro de ninguna condición. Los navegadores móviles más modernos procesan media queries, así que tampoco son un inconveniente.

Las tabletas son dispositivos nuevos, creados a partir del año 2009, con lo que todos sus navegadores soportan media queries.

El único inconveniente de compatibilidad lo tendremos en PCs de escritorio. Los navegadores de computador más modernos tienen soporte para media queries, mas algunos navegadores viejos como Explorer ocho todavía subsisten, y no interpretan las media queries.

Para solventarlo, usaremos un script compatibilizador llamado CSS3-mediaqueries-js que puede descargarse en:

-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

Simplemente vinculamos nuestra página HTML a ese script con una etiqueta
<script>y desde ese instante el Explorer 8 interpretará las media queries.

A forma de conclusión, vimos que es a la perfección posible crear experiencias de navegación por sitios web multidispositivo, o sea, que se puedan usar con un diseño y unas herramientas optimados para diferentes tamaños de pantalla, si aprovechamos la técnica de media queries para crear esquemas tipográficos amoldables, layouts y grillas flexibles, elementos visuales como imágenes y vídeos líquidos, y herramientas de navegación optimados para el uso en pantallas táctiles.