gympillow82

Quienes hemos estado creando sitios desde los principios de la web, estamos acostumbrados a que nuestras páginas sean “rígidas", esto es, de ancho fijo en pixeles. En los años 90, 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. Sencillamente definíamos tamaños en pixeles a todas nuestras columnas.

Cerca del año 2000, surgió un segundo valor a considerar: 800px de ancho (ya existían monitores de 15 y de 17 pulgadas). El inconveniente era que, si definíamos el ancho total de nuestro sitio 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 sitio 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 los dos costados o hacíamos un lugar con ancho definido en porcentajes, que se estiraba levemente entre las dos medidas.

Más cerca en el tiempo, alrededor del año 2005, 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 bien le dábamos ancho líquido (en porcentajes) para que se estirara entre ochocientos y 1024px, o 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 2010, un cambio verdaderamente revolucionario alteró nuestro escenario. Los teléfonos móviles empezaron a navegar la web, utilizando navegadores similares a los de una PC (Opera, Safari, Explorer, Google Chrome y 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, empresa programacion que un diseño líquido simplemente no soporta ser “estirado" desde un mínimo de 320px hasta múltiples miles y miles de pixeles de ancho.

Y por otro lado, si en lugar de darle ancho líquido, le definiéramos los anchos en pixeles, el efecto sería igualmente negativo: el sitio se “miniaturizará", siendo muy incómodo navegarlo, dependiendo del empleo constante de zoom en ambos sentidos y debiendo realizar 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 bien 3, sino que es necesario comprender 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 PC, por una parte, y pantallas cada vez con mayor resolución en el otro extremo.

La era en la que usamos 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 problema 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. Esto es, un fichero HTML al que no le vinculamos ninguna hoja de estilos, al que no lo maquetamos. Por poner un ejemplo, el siguiente:

Si tratamos de navegar este fichero desde dispositivos de distintos tamaños, no vamos a tener 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 puesto que no está “optimizado” para esos tamaños, jamás afirmamos que fuera estéticamente logrado, solo que es amoldable, que se puede usar en todos y cada uno de los tamaños.

En conclusión, el inconveniente que complica acceder a nuestros sitios 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.).

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

Es decir, somos los diseñadores mismos los que ocasionamos el problema, con nuestro viejo proceso de diseño (heredado de medios gráficos como el papel) y la falla está en ciertas resoluciones que tomamos en su transcurso (como las unidades de medida que escogemos aplicar).

• El hecho de que seamos los responsables del problema es una muy buena nueva, en tanto que si estamos provocando el problema, también está en nuestras manos la solución. No depende de “otros”, no es causada 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 adaptables.

¿Qué son las Media Queries?

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

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

Mediante el uso de esta técnica, presupuesto tienda online cadiz experiencia de uso 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 múltiples condiciones en una usando el operador lógico “and” en tantas ocasiones como sub-condiciones necesitemos combinar. En el siguiente ejemplo, combinaremos 2 condiciones: que sea una pantalla y que mida como mínimo 1024 pixeles de ancho.

En este otro ejemplo, combinaremos tres condiciones: que sea pantalla, que mida más de 320px y menos de 768 pixeles de ancho.

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

Esta posibilidad de combinar múltiples 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 deja condicionar la lectura de distintos 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 en nuestros días. 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 servirnos de un ejemplo) podríamos hacer flotar tres columnas, al paso que en una tableta (una media querie de “Mayor a 800px”, por ejemplo) solo vamos a dejar flotar dos columnas, y en el caso de pantallas más angostas (celulares, sin media queries) anularemos todos y cada uno de los flotados, reduciendo la cantidad de columnas a una sola (“apilando” los contenidos uno bajo el otro).

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

Un código afín al precedente es el utilizado para conseguir estos cambios en el sitio 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 importante amoldar 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 por lo menos cuatro:

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

Complementariamente, aplicaremos sistemáticamente en todas nuestras páginas acomodables, 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 analizar uno por uno estos elementos, así aprenderemos a incluirlos en nuestros proyectos, a fin de 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 usada hasta el instante para acotar el tamaño de las fuentes mediante la propiedad font-size (o sea, los pixeles), por otras dos unidades de medida más versátiles.

Si proseguimos usando pixeles como unidad de medida para nuestras fuentes, vamos a tener dos géneros de problemas:

1. El primero se lo causaremos a algunos de nuestros usuarios, aquellos que empleen IE, en tanto 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 inconveniente de mantenimiento para nosotros mismos, en tanto 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, esto es, en cada media query. Entenderemos este inconveniente a continuación.

Texto primero

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

Pregunta al paso que siempre y en toda circunstancia me agrada proponer a mis alumnos: ¿Cuál es el denominador común de una pizza? ¿Aceitunas? ¿Cebollas? ¿Tomates? ¿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 tendremos el código HTML básico terminado. Ese texto bien estructurado con HTML elemental, será suficiente para cualquier celular de bajas prestaciones que aún pudiese estar utilizando algún usuario.

Tipografía, siempre y en todo momento 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 asegurar la legibilidad de nuestros contenidos. Creamos que la distancia de lectura en una computador es próxima al metro, mucho mayor a la que existe entre nuestros ojos y un teléfono o tableta que sostenemos en nuestras manos:

Por ese motivo, los tamaños de fuentes deberán ser mayores para una PC 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 que usaremos la unidad de medida em y los porcentajes, combinados de una forma particular: al body (y solamente 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 usando indiferentemente etiquetas, id o 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, puesto 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. Es decir, lo que hacemos es mudar el tamaño del em, al cambiar 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 computador, a tamaño de fuente normal, la equivalencia entre ems y pixeles es que 1em = 16px, con lo que, si queremos definir en la hoja de estilos un texto que en Photoshop ocupaba 24px, lo vamos a dividir por uno para saber su valor en em, que en este caso sería 1.5em. Atención: usemos puntos como separador decimal, no comas.

Por supuesto, nada impide que efectuemos ajustes en alguna de las media queries si queremos que determinado texto tenga una medida especial en una de ellas. Pero el punto de partida ya quedará establecido automáticamente.

Con estas nuevas unidades de medida ya vamos a poder crear esquemas tipográficos amoldables, que se visualicen de manera óptima según la distancia de lectura de cada dispositivo.

Notemos que no estamos definiendo un tamaño rígido, sino más bien 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 los dispositivos merced a que vamos a escalar el esquema completo en cada media query.

2. Maquetación acomodable y grilla flexible

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

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

En principio, convengamos que en un celular básico no es suficiente el espacio para flotar dos o más columnas una al lado de la otra, con 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í, vamos a hacer flotar tantos bloques como creamos necesario en todos y cada media query.

Grillas flexibles

La grilla flexible consiste en acotar 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 todos y cada media query del punto anterior.

La fórmula para calcular los porcentajes desde 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 dentro de un contenedor de 960px ahora deberá medir 62.5 por ciento (ese valor surge del 0.625 de la cuenta que acabamos de realizar)

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, deberemos acotar un treinta y uno y veinticinco por cien de ancho a cada una de las 3 columnas.

Márgenes y paddings flexibles

En este contexto, también debemos volver flexibles los márgenes y paddings, a fin de 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 = dos,66 por ciento
   
   
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 = 2,66 por ciento

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

3. Medios adaptables (imágenes, vídeos)

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 tendremos problemas con background-image:

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

Eso hará que en el 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, cien por ciento , consideremos ese ancho al definir el ancho de su elemento contenedor, o viceversa: creemos la imagen al tamaño máximo al que llegará su elemento contenedor.

Existen varias propuestas del W3C para precisar que el navegador descargue distintas imágenes según el tamaño de pantalla (tal como en las imágenes de fondo) como por poner un ejemplo, la posible etiqueta “picture” con varias etiquetas “source”, cada una condicionada por una media query, o que se modifique la etiqueta “img” permitiendo precisar más de un source a través de el atributo srcset. Al instante 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 escasos colores (logos, iconos, etcétera).

4. Navegación adaptable

La navegación es otro de los puntos críticos que debe adaptarse en un sitio para permitir su empleo 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, desde 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 fácil como cambiar el font-size (ya lo vimos en el primer punto de este capítulo) y esconder con display:none los subtítulos por defecto, haciéndolos perceptibles con display:block a partir de 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 esconder 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 muy amplio que es el que se usará en la computador, por un select con options en el teléfono.

En el código HTML, que es exactamente 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 PC 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, merced a las media queries.

Configurando el Viewport

El tamaño de la “ventana” del navegador en una ordenador, siempre y en todo momento coincide o bien es menor que el tamaño de la pantalla. Es decir, o bien empleamos el navegador maximizado, a pantalla completa, o bien lo achicamos un tanto. Mas nunca 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 maximizada), o bien es mayor que el tamaño de pantalla, viendo solo una parte de ella por vez. Jamás es menor ya que no podemos “achicar” la ventana a fin de que ocupe menos de una pantalla. Mas sí puede acontecer lo opuesto, que el contenido supere el tamaño de la pantalla por el hecho de que 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 enseñar lo que suponen una web hecha para PC (y en el noventa y nueve por cien de los casos, ¡aciertan!).

Veamos un ejemplo 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 hacemos es delimitar que el width de la ventana del navegador tenga un valor “real”; esto es, que el navegador no nos “mienta”, sino que utilice como valor de su propiedad “width” el valor de otra propiedad, que es “device-width”, esto es, el ancho físico de su pantalla.

De esa manera, un navegador en un dispositivo de por poner un ejemplo, 320px de ancho, ya no declarará un width falso de 980px, sino 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, a través de la propiedad initial-scale a un valor de “1” que equivale a cien por ciento , esto es, el tamaño natural. De este modo, 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 realizar zoom por la parte del usuario, en tanto que ésta es una atribución suya. Pensemos, por servirnos de un ejemplo, en un usuario miope, que necesita ampliar parte de nuestro sitio. Para eso, evitemos definir en la etiqueta viewport los valores de mínimum-scale y de maximum-scale, desgraciadamente muy difundidos.

Soluciones para navegadores que no entienden Media Queries

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

Las tabletas son dispositivos nuevos, creados a partir del año dos mil nueve, con lo cual sus navegadores aguantan media queries.

El único inconveniente de compatibilidad lo vamos a tener en PCs de escritorio. Los navegadores de computador más modernos tienen soporte para media queries, mas ciertos 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 momento el Explorer ocho interpretará las media queries.

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