WILFREDO SALAS G. - Responsive Web Design - Webuda

WILFREDO SALAS G.
Responsive
Web Design
Todo lo que necesitas saber para hacer diseños web sensibles

Índice
CAPÍTULO 1
Nuestro Mundo Sensible
CAPÍTULO 2
La grilla flexible
CAPÍTULO 3
Imágenes flexibles
CAPÍTULO 4
Media queries
CAPÍTULO 5
Más sobre responsive
3
8
19
24
30

CAPÍTULO 1
Nuestro Mundo Sensible
AL EMPEZAR A ESCRIBIR no me paro de preguntar en dónde el lector se sentará y en qué verá el contenido de
este libro, inclusive, dada la naturaleza digital de este ejemplar es muy poco probable que las personas
lo bajen, lean un poco de un computador y después lo impriman para poder tomar notas o leer de una
forma más relajada para ellos, pero aún así, hay que ponerse en ese plano. Hay otros que sencillamente
lo leerán dentro de sus tablets, o hasta smartphones e inclusive, otros más prácticos simplemente
tendrán la versión pdf en su computador para poder revisarla las veces que sea necesario mientras están
trabajando, o estudiando, o aplicando el paso a paso de información en los cuáles se verán inmersos
dentro de los próximos capítulos.
La verdad, es un poco complicado analizar todas las posibles situaciones y ver cuál es una buena solución
para cada una de ellas, por eso mismo decidí no preocuparme para nada. En este preciso momento,
existen una gran cantidad de elementos tecnológicos que se convirtieron en parte de nuestras vidas tan
rápido como llegaron, de hecho, hay personas que hasta no pueden concebir su vida sin alguno de estos
aparatos. Digamos que yo tengo un sentimiento parecido con mi PlayStation® 3, pero no va al caso…
del libro, lo que sí va al caso del libro es la libertad de elementos en donde las personas hacen su vida
cotidiana, en donde revisan su correspondencia, ven videos, fotos, se contactan con viejos amigos del
colegio y así. Todo esto estoy seguro que impactará a cualquier persona que se congeló en los años 90 y
viene despertando en estos días.
De hecho, analicemos la historia de la humanidad hasta ahora: la única forma de expresión de los hombres
de las cavernas era dentro las rocas en donde se refugiaban, después se inventó el papel, la escritura, se
podía mantener un registro más perpetuo sobre piedra trabajada. Los procesos se siguieron puliendo, la
maquina aumentó la rapidez y producción de elementos y la era digital nos ha transportado a un mundo
completamente nuevo e instantáneo, y ahora nos lleva a un universo en donde la multiplataforma es pan
de cada día, en donde cada persona joven está conectada a, por lo menos, dos o tres pantallas a la vez.
3 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible

Ahora, cómo se aplica esto a nosotros que trabajamos con las imágenes, qué pasa con los diseñadores
en general. Hasta ahora la adaptación de nuevas tecnologías no ha dado muchos problemas a los
diseñadores gráficos, inclusive, hay veces que el mismo diseño se ha beneficiado enormemente
debido a una actualización de un software por ejemplo, pero el medio que más se fortaleció con
todos estos cambios ha sido el del diseño web. Piensa, ahora para un mismo proyecto tienes tres o
cuatro lienzos para trabajar… a la vez. El ejemplo más cercano que se tiene es este mismo libro, el
cuál lo puedes imprimir, ver desde tu computador, o desde un dispositivo móvil. Estamos dentro de
un mundo completamente adaptado y sensible y es imposible salir de él, y ya es hora de empezar
a adaptarse. Es como en Matrix, en donde tenías la opción de tomar la pastilla azul y conocer la
verdad o tomar la pastilla roja y vivir en ese mundo de mentiras. Bueno, si sigues más allá de este
capítulo te aseguro que habrás tomado la pastilla azul (no, no esa otra “pastilla azul”), y verás más
allá del web.
ALGO MÁS PARA COMENZAR
Hace mucho tiempo, en un lugar muy lejano, John Allsopp escribió un ensayo llamado “Un Dao de
Diseño Web” (http://www.alistapart.com/articles/dao/), en el cuál John dice:
‘El control que los diseñadores tienen sobre el medio impreso, y en el cuál desean comúnmente en el
medio web, es simplemente una función de la limitación de la página impresa. Deberíamos entender
el hecho que la web no tiene las mismas restricciones, y diseñar para esa flexibilidad. Pero primero,
debemos “aceptar el flujo de las cosas”.’
Aunque no se crea, ese ensayo se escribió hace unos diez años, en donde internet era una herramienta
importante, pero no tenía el impacto social que tiene ahora. Nótese que ya se hablaba de flexibilidad
hace diez años, ahora esa flexibilidad está ahí y hay que aceptarla tal como es y aceptar como las
cosas fluyen y en dónde fluyen, y como las cosas siguen fluyendo, el diseño web se adaptó a ese
flujo. Ahora existen diseñadores que tienen conciencia de este flujo y saben que hay que generar
experiencias distintas, dependiendo de dónde esté viendo la página. El mejor ejemplo que pude
encontrar fue un simple artículo de la bbc:
http://www.bbc.co.uk/news/mobile/science-environment-13095307
Si analizan la dirección con más cuidado, uno se fija en la carpeta /mobile/ dentro de la URL. Ya
con eso le dicen al usuario que, cada vez que vean esta página a través de un dispostivo móvil,
tendrá una experiencia única de la misma página en su versión de escritorio. De hecho, si hacen el
experimento de quitar el /mobile/ de la dirección, verán que es la misma noticia, pero una mayor
cantidad de elementos, los cuales se permiten dentro del formato de escritorio. Todo es cosa de
contexto.
4 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible

FIG.2
FIG.1
FIG.1 es el link que se mostró anteriormente, pero visto desde un iphone, mientras que la FIG.2 es la misma página, pero vista
sin el /mobile/ y en una pantalla más grande. Fíjense que la carpeta /mobile/ es la que da la experiencia fluida y dinámica a la
página web y deja que se adapte donde uno la esté viendo.
5 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible

COSA DE CONTEXTO
El contexto, según la RAE, tiene dos acepciones:
1. m. Entorno lingüístico del cual depende el sentido y el valor de una palabra, frase o fragmento
considerados.
2. m. Entorno físico o de situación, ya sea político, histórico, cultural o de cualquier otra índole, en el cual
se considera un hecho.
En resumen, el contexto es el entorno físico o de situación a partir del cual se considera un hecho.
Si ponemos todas estas lindas palabras en función del diseño web, tenemos que cuando se habla de
entorno físico, se refiere a los dispositivos disponibles en donde te puedes conectar a internet, y sus
respectivos navegadores. La situación se refiere al ahora ya en donde el entorno físico se desarrolló y
el hecho que junta todos estos puntos en un contexto le llamaremos Responsive web design. Ahora,
la pregunta es “¿y qué es el Responsive Web Design?”. Responsive Web Design se trata de cómo una
página se convierte en “sensible”, e identifica en el dispositivo en donde se está mostrando – como un
computador de escritorio, tableta o teléfono – y se adapta a ese dispositivo sin perder contenido, o sea,
de “fluir en el contexto” en el cuál se le presenta.
En conclusión, hay que abrazar al responsive web design, impregnarnos con la flexibilidad de la web,
sin el control que requerimos como diseñadores. Todo esto con tecnologías ya estandarizadas para hacer
nuestro trabajo, y haciendo un pequeño pero gran cambio en nuestra filosofía hacia el diseño web.
LOS INGREDIENTES
Entonces, qué es lo necesario para hacer una página estática, rígida y… “fome”, abrace al Responsive Web
Design. Hablando en términos puramente de diseño web front-end, es necesario sólo tres ingredientes:
1. Una diagramación basada en una grilla flexible.
2. Imágenes y media flexibles, y
3. Media queries, un módulo específico de CSS3.
Durante los próximos capítulos desmenuzaremos estos tres puntos – la diagramación flexible, el media
e imágenes flexibles y los media queries - haciendo que nuestro diseño web tenga un acercamiento
más flexible y fluido. Además, de adaptarse a la mayoría de las plataformas y a todos los navegadores,
haciendo que nuestro diseño responda casi a todas las necesidades de los usuarios. Pero entre tantas
palabras, los que trabajamos con gráfica nos enredamos y necesitamos ejemplos visuales para entender
cómo funcionan las cosas. Para este caso, voy a mostrar el ejemplo más cercano que se me pudo ocurrir:
la misma página web en donde descargaron este libro digital ( http://rwd.webuda.com/).
6 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible

Desde que este proyecto empezó a emerger, el tener una página web que reflejara todo el trabajo
teórico llevado a algo práctico era más que necesario. Además, siendo honestos, no tener una página
fluida y flexible – en donde descargarás un libro / manual sobre un sistema fluido y sensible de web
– es algo bastante ridículo, hasta deprimente.
Algo que siempre se nos recalca en las escuelas de diseño es siempre mirar los detalles, y si no te
lo enseñaron, mejor que lo empieces a ver eso ahora mismo, para el diseño web los detalles son
importantes igual, pero hay que tener cosas en consideración: a pesar de que las páginas tienen
muchas plataformas y navegadores en donde pueden ser mostradas, no es una obligación hacer
que se vea completamente igual en todas ellas, especialmente en el “cuco” más grande que todos
los diseñadores front-end tienen a lo largo de su vida… Internet Explorer (hay algunos que hasta los
persigue en los sueños, algo así como Freddy Krueger), pero aún así, no hay que caer en la flojera de
decir “ah, si es Internet Explorer no más”. Siempre hay que dar un paso más y hacer lo casi imposible
para que la página sea lo más compatible posible para todos los navegadores y dispositivos.
A pesar de que Internet Explorer es el dolor de cabeza de todos los diseñadores web, no tiene que
convertirse en un aneurisma como pasa comúnmente. Esta nueva filosofía de diseño flexible y
adaptable va de la mano con tecnologías estandarizadas ya. Microsoft está haciendo cambios
grandes en temas como diseño de sus productos, hardware y en especial software, ya se han visto
cambios bastante interesantes en los nuevos lanzamientos de este año y también han habido haces
de luz en programas como Internet Explorer 9, a pesar de que aún hay que insistir en elementos que
no son compatibles como con los otros navegadores (Chrome, Firefox, Safari, etc), así que mi consejo
es seguir esperando que los estándares actuales de diseño web sean generalmente compatibles,
pero mientras eso no pase, hay que tener en cuenta esos no tan pequeños detalles. ¿Y porqué estoy
hablando de Internet Explorer de repente?, ah, sí, porque la página web que contiene los archivos
descargables de este libro tiene que ser lo más compatible posible para los navegadores más usados:
Chrome, Firefox, Safari, Internet Explorer, Opera, y sumando también el nuevo concepto que
estamos incorporando ahora, el Responsive web design.
Ya, mucho hablar y poca acción. Es hora de ponerse a trabajar.
7 RESPONSIVE WEB DESIGN — Capítulo 1: Nuestro mundo sensible

CAPÍTULO 2
La grilla sensible
UNA DE LAS IDEAS que llevaron a cabo el concepto de Responsive Web Design fue la de tomar la estructura
rígida de las páginas web y llevarlas a un plano flexible y adaptable, como si se pudiera hacer con la
mente. Este pensamiento fue bastante innovador en su tiempo, pero sólo se pudo llevar a cabo como Dios
manda cuando aparecieron dos actores en el diseño web: HTML5 y CSS3.
Lamentablemente el propósito de este manual no es instruir en estos dos temas, así que la persona que
está leyendo esto debería tener por lo menos conocimientos básicos de estos dos lenguajes de maquetación
web. Para los que se saltaron ese párrafo, puedo decir que gracias a las nuevas etiquetas, semántica
y características de estos dos lenguajes se hizo posible transformas las grillas estáticas en forma de
pixeles, a grillas flexibles adaptables a cualquier dispositivo, o sea, hacer las páginas responsive.
A “SANAR EL CONTEXTO”
Sería bastante raro que al leer este título venga uno vestido como chamán a hacerle una «curación» a la
página, manual y todo lo demás. El verdadero sentido del título es sobre la transformación de un estado
rígido a uno flexible de todos los elementos de una página web. Para hacer eso, es necesario transformar
la gráfica que se hizo para la página web en Photoshop o Illustrator, InDesign (en este caso fue InDesign)
(FIG.3.) en algo más fluido y proporcional.
8 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

FIG.3 Un ejemplo de la página web en donde descargaste este manual.
9 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

TIPOGRAFÍA FLEXIBLE
Para esta parte vamos a tomar el ejemplo más cercano que se pudo encontrar en el manual, el cual justo
es la página web en donde descargaste el manual, de ahí nos vamos a enfocar en el título de la página.
Este título viene con el siguiente código:
Responsive Web Design
Todo lo que necesitas saber para hacer diseños web sensibles
Acá tendrás el manual en español, hecho por y para diseñadores sobre
responsive web design. ¿Crees que puedes manejar ser tan cool?.
Bonito ¿no?, pero aún así lo que sale acá es sólo texto plano (FIG.4). Para darle estilo y diseño hay que
utilizar código CSS, que en este caso sería algo como esto:
FIG4. Con código de HTML5 sólo aparecerá esto, un estilo de nada.
#titulo h1{
}
font-family:helvetica_med_con, helvetica, sans-serif;
font-size:72px;
margin-top:40px;
margin-bottom:0;
10 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

#titulo h2{
}
font-family:meta_serif_book, georgia, serif;
font-size:24px;
margin-top:0;
#titulo h3{
}
font-family:meta_serif_book_ita, georgia, serif;
font-size:16px;
Y gracias a la maravilla de CSS, logramos convertir a este adefecio visual en...
FIG5. ... ¡Esto!.
11 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

Ahora sí que se ve «bonito» y agradable a la vida. Analicemos rápidamente lo que vieron: la etiqueta
contiene tres etiquetas de títulos (, , ) y cada una tiene un tipo de fuente
específica (font-family), pero tienen un tamaño rígido (font-size) al medirlos a través de pixeles. No
tiene nada de malo eso, pero para el propósito de una página web fluida, es indispensable cambiarlos
por valores flexibles. Entonces, en vez de px usaremos em.
FLEXIBILIZANDO EL CONTEXTO
Para hacer esto, se tiene que crear el siguiente ejercicio matemático: se toma el tamaño de la fuente y se
divide por el font-size del elemento que lo contenga — en otras palabras, su contexto. El resultado será
que nuestra fuente quedará en un valor em fluido, en vez de px.
En otras palabras, las tipos relativas pueden ser calculadas con la siguiente fórmula:
Objetivo ÷ Contexto = Resultado
Con esta fórmula, ahora podemos calcular el tamaño de nuestras etiquetas , y , que
están dentro del .
Asumiendo que nuestro font-size de base sea de un 100%, nuestro número de contexto será de 16px.
Ahora, se tiene que tomar el tamaño que se usó en primer lugar para las etiquetas ( en este caso) y
dividirlo por su contexto (16px), quedando esto:
70 ÷ 16 = 4.5
Entonces, con esto decimos que 70 es 4.5 veces mayor que 16, o sea, nuestro font-size para es
de 4.5em. Después de eso usamos la misma fórmula para las otras dos etiquetas que faltan, para que
queden:
24 ÷ 16 = 1.5
16 ÷ 16 = 1
Gracias a esto se sabe que el font-size de es de 1.5em y el de de 1em. Con estos cálculos
ya listos se va al CSS y quedan de la siguiente forma:
#titulo h1{
}
font-family:helvetica_med_con, helvetica, sans-serif;
font-size:4.5em; /* 70px / 16px */
margin-top:40px;
margin-bottom:0;
12 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

#titulo h2{
}
font-family:meta_serif_book, georgia, serif;
font-size:1.5em; /* 24px / 16px */
margin-top:0;
#titulo h3{
}
font-family:meta_serif_book_ita, georgia, serif;
font-size:1em; /* 16px / 16px */
Y… ¡listo!, nuestros títulos están listos y encajan en nuestro diseño flexible gracias a ems remedibles y
escalables.
CREANDO LA GRILLA FLEXIBLE
La clave de transformar el contenido fijo a flexible no es algo que queda sólo para las fuentes, tiene que
ser aplicado a todos los elementos dentro de la una página web. Al flexibilizar la grilla nos generamos uno
de las características más importantes dentro de un diseño web responsive, el cual es que el contenido
de la página se pueda redimensionar dependiendo del tamaño en donde se esté viendo. Para esto es
necesario transformar los valores fijos por valores relativos, que en este caso son porcentajes.
Modificar tu grilla a flexible puede ser algo tan fácil que se puede hacer en cinco pasos:
13 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

Paso 1
Ve la grilla: tienes que saber cómo y dónde pusiste cada elemento de tu página antes de hacerle cualquier
modificación (FIG.6). Además, tienes que analizar cuáles serán las áreas dentro de tu página web. (FIG.7)
14 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible
FIG.6 La página web con su grilla
respectiva. Recuerda que el diseño y
diagramación de una página web tiene
que estar basado en una grilla.
FIG.7 Al dividir de esta manera la página,
ya se sabe cuáles son los elementos que
tienen que transformarse en flexibles

Paso 2
Escribe el código: Aunque existen varios software que prácticamente te hacen el código de una página
web, es primordial que aprendas a como hacerlo
¿Qué es responsive web design?
Responsive web design es un término que se está haciendo cada día
más común entre los diseñadores gráficos y web en el mundo, pero que está llegando
muy tarde por estas tierras...
Descargar manual iPad
Este manual está pensado para verse en un iPad, puedes acceder a él a
través de la App Store de Apple. Descarga, conecta, sincroniza y disfruta.
No tengo iPad, ¿qué hago?
Si no tienes iPad no te preocupes. Abajo hay una variedad de archivos para
que puedas leer este manual desde otro computador, otros tablets (como Android o
Kindle) o desde Readmill.
El código HTML.
15 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

#que-es, #descarga, #no-ipad{
}
width:320px;
height:180px;
padding-right:15px;
position:relative;
float:left;
font-size:0.875em;
line-height:20px;
cursor:pointer;
#que-es p, #descarga p, #no-ipad p{
}
color:#666;
cursor:auto;
#que-es h1:hover, #descarga h1:hover, #no-ipad h1:hover{
}
text-decoration:underline;
Un extracto de la hoja de estilos CSS.
Paso 3
Mide las columnas: Para saber qué transformar, primero hay que saber cuáles serán las medidas fijas
de cada columna, sección o elemento de la grilla. Lo importante es saber el tamaño total del contenedor
de la página y, además, de cada sección.
16 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

Paso 4
Aplicar la fórmula: La fórmula que se mostró antes, que era Objetivo ÷ Contenido =
Resultado, ahora se aplica a los tamaños de las etiquetas. Para este caso, cuando se quiera
modificar el tamaño del contenedor de los cuadros de información (320px), tomamos el
tamaño del Objetivo, que ahora es de 980px y lo dividimos por el contenido en cuestión:
320 ÷ 980 = 0,32653061 * 100 = 32,653061
Después se le agregó un último paso que es multiplicar por cien. A pesar que la
calculadora lo toma como un número, nosotros tenemos que tener en cuenta que
estamos multiplicando por 100%, para así tener un porcentaje real y que se pueda
aplicar a la hoja de estilo CSS. Abajo va el ejemplo:
17 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

#que-es, #descarga, #no-ipad{
}
width:32.653061%; /* 320px / 980px * 100% */
Recuerda que también puedes aplicar a todas las propiedades de CSS que apliques que
tengan medidas en px, como por ejemplo margin, padding, height, y más.
Paso 5
Voilà!: Nuestra página web al fin tiene su grilla fluida. Abajo pueden ver cómo una grilla
flexible, con medidas dinámicas hechas a través de porcentajes en vez de px se adapta
casi por arte de magia al dispositivo en que se encuentre (FIG.8). Eso sí, no sólo de grillas
viven las páginas web responsive, también hay otros dos características necesarias para
esto: que son las imágenes flexibles y los media queries.
FIG.7 En distintos tamaños de pantalla, la grilla flexible empieza a trabajar.
18 RESPONSIVE WEB DESIGN — Capítulo 2: La grilla felxible

CAPÍTULO 3
Imágenes flexibles
HASTA AHORA EL PRIMER ingrediente para hacer nuestro sitio web responsive, la grilla flexible, está
listo. Es momento de mirar hacia el segundo ingrediente, que son las imágenes flexibles. Como pasó
con la grilla, las imágenes tienen medidas fijas, si se les deja con esas medidas van a haber problemas
cuando la página se tenga que reacomodar a un navegador pequeño, como el de los smartphones, porque
el navegador entiende que la grilla está en porcentajes y que la tiene que acomodar a su tamaño, pero las
imágenes tienen un ancho fijo. Entonces, ¿qué pasará si usamos un ancho dinámico en la grilla flexible?,
ese es el propósito de este capítulo.
Desde el principio que se ha mencionado como ejemplo la página en donde pudiste bajar este manual (y
seguiré dando el link, para que no te olvides: http://rwd.webuda.com/). Después de las secciones del
menú y de descarga, se pusieron seis imágenes con ejemplos de páginas que también han “abrazado”
al responsive web design y lo han hecho una parte de ellos. A continuación verás cómo estas imágenes
dejaron de tener un ancho fijo aburrido y pasaron a una divertida medida dinámica.
IMÁGENES FLUIDAS
Cuando se tiene que incrustar una imagen en una página web, lo primero que uno piensa instintivamente
es en la etiqueta . A pesar de que ya estamos en HTML5 y ya pasó toda la vorágine de cambios en
la estructura y semántica de maquetación web, las imágenes se siguen agregando a las páginas de esa
manera. También lo que se puede hacer es tener una etiqueta vacía y después insertar la imagen a
través de CSS con background-image, pero usaremos la primera opción para este ejemplo.
El primer ejemplo es de la página web de Sony®. Creo que es uno de las mejores páginas web resonsive
que hay allá afuera, por eso está primera en la lista de ejemplos. Ahora, en nuestra página web el código
en donde irá la imagen es así:
19 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles

Sony
Ésta es la imagen que queremos mostrar (FIG.8) y de esta forma se verá con el código (FIG.9)
FIG.8 Si bien no hay nada malo con la imagen, su tamaño puede causar problemas (1249 × 697)
20 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles

FIG.9 Y dio problema. A pesar de que se ve bien dentro del contenedor, la idea de los ejemplos es mostrar
tres por línea.
Ahora, el elemento img se va a renderizar a cualquier tamaño que se le ocurra, siempre que sea más
angosto que el elemento en que se contenga. Pero qué tal si la imagen es más grande que su contenedor,
entonces el max-width: 100% fuerza a que el ancho de las imágenes coincidan con el tamaño del
contenedor en el que están. (FIG.10)
img{
}
max-width:100%;
21 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles

FIG.10 La imagen se ajustó al tamaño que ya tenía el contenedor y que fue calculado con la fórmula que se usó
en el capítulo 2 para la grilla flexible.
Más aún, los navegadores han evolucionado de tal manera que redimensionan las imágenes
proporcionalmente. Como nuestra página web se redimensiona por sí sola, al encoger o alargar la
imagen, su proporción se mantendrá intacta. Además, max-width: 100% también se puede aplicar a
casi todos los elementos con un ancho fijo (fixed-width), como video u otros medios. De hecho, podemos
fortalecer el selector para cubrir otros elementos multimedia, así:
img, embed, object, video{
}
max-width:100%;
Sea un video de flash, u otro medio adjunto, o un humilde img, los navegadores hacen un muy buen
trabajo al redimensionarlos proporcionalmente en una grilla flexible, todo gracias a nuestro querido
elemento max-width.
22 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles

EL PLACER DE ESTAR “OCULTO”
Como había mencionado antes, hay varios métodos para hacer que las imágenes de tu página web sean
flexibles, uno de ellos es utilizar la propiedad overflow. En la mayoría de los casos, la regla max-width:
100% es la mejor alternativa para redimensionar las imágenes, pero de forma alternativa puedes eliminar
el exceso de datos dentro del contenedor con overflow: hidden. Entonces, es vez de que la imagen se
redimensione automáticamente se puede eliminar toda la información sobrante.
#view{
}
#view img{
}
overflow: hidden;
display: block;
overflow: hidden;
Como pueden ver, esta no es una solución totalmente fiable. De hecho, se ha encontrado que en la
mayoría de los casos overflow es generalmente menos útil que escalar la imagen vía max-width. Pero
aún así, es una opción que se tiene que considerar y encontrarle un uso para alguna ocasión en especial.
Hasta ahora hemos explorado todo lo que se necesita para desarrollar sitios web flexibles, acordes a los
dispositivos actuales, mejor dicho, sitios responsive. Con las herramientas y características que se han
mostrado antes ya están preparados para poder hacer sitios con grillas flexibles y con imágenes auto
redimensionadles, sólo es cosa de que ponerse a estudiar, aplicar y trabajar en lo que he mostrado y las
cosas que han quedado afuera.
Con nuestro cimiento flexible en lugar, es hora de poner el último ingrediente a nuestro diseño responsive.
23 RESPONSIVE WEB DESIGN — Capítulo 3: Imágenes flexibles

CAPÍTULO 4
Media queries
CON LAS HERRAMIENTAS QUE se han dado durante el paso del manual están “casi” listos para hacer sitios
web flexibles. Por qué “casi”, porque inclusive en este punto la página web no es a prueba de balas.
Van a haber partes en donde nuestro diseño se rompa cuando se redimensione, o sea, hay algo que está
saliendo mal o el navegador no entiende bien lo que quisimos decir al principio en nuestro código.
Desde que empezamos a trabajar con nuestro sitio flexible, podemos probarlos redimensionando el
tamaño de nuestro navegador a distintos anchos. Ahora, esto no es un substituto para no probar nuestro
sitio en los distintos dispositivos en el cual vamos a trabajar, pero nos permite un acceso rápido a nuestro
sitio es varios tamaños disponibles, y simular cómo se verá en smartphones, tablets, y otros dispositivos
que tengamos que usar.
En este momento es donde tenemos que usar el tercer y último ingrediente esencial para nuestra página
web flexible, que son los media queries.
¿MEDIA QUÉ?
Media Queries (http://bkaprt.com/rwd/27/) es una característica única de CSS3, que se hizo
gracias a los media types que venían en las versiones anteriores de este lenguaje de programación.
Es un mecanismo robusto que, no sólo identifica tipos de media, sino que también inspecciona las
especificaciones físicas de los dispositivos y navegadores que renderizan el contenido.
Aquí va un ejemplo:
24 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

@media screen and (min-width: 1024px) { body {
}
}
font-size: 100%;
Cada media query — incluyendo el que se mostró arriba — consta de dos partes:
1. Cara query empieza con un media type (screen), viniendo de las especificaciones de CSS2.1
aprobadas para los media types. (http://bkaprt.com/rwd/26/).
2. Inmediatamente después viene el query en sí, envuelto en paréntesis. (min-width: 1024px).
Ahora, nuestro query se puede dividir en dos componentes: el nombre de la característica (min-width)
y su valor correspondiente (1024px).
Piensa cómo un navegador analiza un media query. Cuando el navegador lea tu hoja de estilos, el screen
and (min-width: 1024px) hace dos preguntas: la primera es que si pertenece al media type screen
y la segunda si el espacio del navegador es, de al menos 1024 pixeles de ancho. Si el navegador coincide
con los dos criterios, entonces el código que se encuentra dentro del query se ejecutará, y si no es así, el
navegador felizmente evitará ese estilo y seguirá con su vida.
El media query de arriba es parte de una declaración @media, lo que permite poner queries directamente
en nuestra hoja de estilos CSS. Aunque también se pueden poner queries en un elemento link
insertándolo en el atributo media:
IDENTIFICANDO LOS PUNTOS DE RESOLUCIÓN
Los puntos de resolución son los quiebres que tienes que hacer para saber en dónde aplicar los media
queries que necesitas para tu página web. Eso no quiere decir que las resoluciones que no aparezcan
acá se tienen que ignorar, o que algunos dispositivos no se acomodarán a alguna resolución que no
esté en lista, dado que el diseño responsive está basado en una grilla flexible, entonces hay un grado
de independencia en su construcción. Pero al mostrar los queries como se hará a continuación ayuda
a definir un alcance a nuestros esfuerzos, permitiendo idenfiticar los dispositivos más usados por los
clientes y cómo funcionar de la mejor manera a través de las resoluciones.
25 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

320 px
Para dispositivos con pantallas pequeñas, como los
smartphone, en tamaño vertical.
480 px
Para dispositivos con pantallas pequeñas, como los
smartphone, en tamaño horizontal.
26 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

600 px
Tablets pequeños, como el Amazon Kindle, en
tamaño vertical.
768 px
Tablets de 10 pulgadas, como el iPad (1024 x 768),
en tamaño vertical.
27 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

1024 px
Tablets como el iPad (768 x 1024), en tamaño
vertical, también como algunos laptops, netbooks y
computadores de escritorio.
28 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

1200 px
Pantallas anchas (widescreen), de laptop y
computadores de escritorio.
29 RESPONSIVE WEB DESIGN — Capítulo 4: Media Queries

CAPÍTULO 5
Más sobre responsive
AL FIN TIENES TODAS las herramientas necesarias para diseñar páginas web responsive. Has logrado
manejar la idea detrás de la grilla flexible, investigado algunas estrategias para incorporar elementos de
multimedia dinámicos a tu diseño, y explorado como los media queries pueden llevar a nuestros diseños
más allá del escritorio.
En este capítulo analizaremos algunos conceptos e ideas que mejoran el diseño responsive. Veremos
formas diferentes de agregarlas a nuestro trabajo, y como mejorar algunas técnicas que hemos aprendido
durante el transcurso de este manual.
PRIMERO EL MÓVIL
Hacia finales del 2009, el diseñador Luke Wroblewski lanzó un pequeño desafío a la industria, sugiriendo
que la experiencia móvil de un diseño web no tiene que ser una idea tardía (http:// bkaprt.com/
rwd/47/). Citando el crecimiento explosivo del tráfico web móvil, Wroblewski sugirió que que los
profesionales web de hoy deben diseñar para el móvil primero.
“Mobile first” (o “móvil primero”) esa una filosofía de diseño, de hecho, es una de las filosofías invaluables
para el diseño web responsive. Mientras más navegadores y dispositivos nuestros clientes usen para
acceder a nuestros diseños, más interés se tiene en diseñar fuera del escritorio. Es una oportunidad
perfecta para repensar en cómo se ha diseñado la web: nuestro proceso, como también las preguntas que
usamos y cuáles serían las soluciones que podemos aplicar.
30 RESPONSIVE WEB DESIGN — Capítulo 5: Más sobre responsive

REPASA LA “MEJORA PROGRESIVA”
La mejora progresiva (o “progressive enhacement”) es otra estrategia de diseño web que acentúa la
accesibilidad, margen de la semántica, y tecnologías externas de manera que permite que cada uno
tenga acceso a la funcionabilidad básica de una página web, a través de cualquier navegador.
Durante el 2003, Nick Finck y Steve Champeon acuñaron el término “progressive enhacement”, desde
entonces ha sido la marca para un alcance responsable para un diseño web estándar. Empezando con
una semántica fuerte, marcas bien definidas, estilos hechos con CSS, y scripts de DOM a través de
JavaScript cuando se necesite, se pueden crean experiencias completas a través de diseño web, mientras
se asegura un acceso universal del contenido a través del diseño.
Steven Hay también reiteró la necesidad de mejora progresiva, a través de su ensayo (en inglés) “No hay
web móvil” (http://bkaprt.com/rwd/54 /):
“la mayoría de los sitios en la web no están hechos con usos específicos para web. En cambio, millones de
personas acceden a estos sitios cada día a través de dispositivos móviles. Ellos a sitios webs “normales” (lo
que sea que eso quiera decir) a través de sus dispositivos “móviles”.
…
para ser honesto, puedo pensar en un par, pero no tantos usas de sitios webs o aplicaciones los cuales son
o deberían ser exclusivos para móviles. Pareciese que la web móvil nos permite revivir toda la charla de
inclusión, mejora progresiva y accesibilidad de hace años.”
En vez de simplemente depositar nuestro contenido en diferentes sitios, podemos usar la mejora
progresiva para aquellos dispositivos que sea capaces de soportarla.
SÉ RESPONSABLE CON EL RESPONSIVE
Se mencionaron estas mejoras no porque sean necesariamente las mejores. En este tiempo de 3G hotspots
portables y teléfonos habilitados con wifi, puede ser peligroso igualar automáticamente la dimensión de
una pantalla con el ancho de banda disponible para ello. Pero si necesitas algo de resolución extra en tu
trabajo, estas herramientas están disponibles.
Aún así, que es beneficioso en mantener la filosofía de “móvil primero” en mente cuando te encuentras
en una situación en donde se amerita. Porque más que nada, el diseño web es sobre hacer la respuesta
correcta. Y realmente, de eso se trata el diseño responsive: una posible solución, una forma más para
diseñar la web de forma flexible. En el primer capítulo, dije que los ingredientes para el diseño responsive
son una grilla flexible, imágenes flexibles y media queries. Pero realmente, ellos son el vocabulario que
usaremos para articular respuestas a los problemas que nuestros clientes se enfrentan, una forma para
ordenar el contenido a un sinfín de dispositivos y navegadores.
Si estamos dispuestos a investigar en las necesidades de nuestros clientes, y aplicar estos ingredientes
cuidadosamente, entonces el diseño web responsive es un alcance poderoso.
31 RESPONSIVE WEB DESIGN — Capítulo 5: Más sobre responsive

Este sitio web y manual fueron creados para el proyecto para optar al título de
Diseñador Gráfico Publicitario: Diseño editorial digital de «responsive web design»
(diseño web sensible)
INSTITUCIÓN ENCARGADA DEL PROYECTO
ALUMNO TESISTA
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 3.0 Unported.