Responsive Web Design

Diseño flexible para PC, celulares y tabletas

(y relojes, televisores, heladeras, etc…)

Hernán Beati

@hernan_beati
hernan@saberweb.com.ar
 Hernán Beati
Diseñador gráfico (+19 años) → Web (+14 años)
Analista de Sistemas / Desarrollador Web (+13 años)
Diseñador de Webs Móviles (+2 años)

Terminando libro sobre:

Autor de:

Y empezando otro sobre

Responsive Web Design

Docente en:
 Unidad 1:

Introducción al
diseño web adaptable
Antes, la web podía ser rígida:

1995: 640 x 480px

2000: 800 x 600px

2005: 1024 x 768px

Ancho líquido (%) era suficiente...

Pero los monitores crecieron...
Y siguen, y seguirán, creciendo...
Y también se achicaron
en celulares y tabletas...

22.70% = Otros!
DIVERSIDAD
“La web y los estándares web han
sido siempre responsive”
Bruce Lawson

La web es inherentemente flexible,

el problema es el “sobre-diseño”
(clavar todo con alfileres…)
Toda web se “miniaturiza”
 Textos ilegibles
 Fotos irreconocibles
 Enlaces no pulsables

 Zoom constante
 Scroll = horizontal +
vertical
! !! !
a b le
Inus
1er Objetivo = adaptar el diseño
Distinto tamaño = distinto diseño

2 columnas
-tableta chica-
3 columnas (o más)
3 columnas -PC-
1 columna -tableta grande-
-celular-

http://www.mediaqueri.es
¿Qué puede entregarle RWD
a cada dispositivo?

-Distinto código CSS

-Y distinto código HTML (x CSS)

Esos CSS, ¿qué deberían cambiar?

1) Optimizar layout (cantidad de columnas)

2) Adaptar textos y fotos decorativas para
garantizar legibilidad
3) Hacer medios flexibles (fotos, sliders, videos,
mapas, tablas de datos)
4) Herramientas de navegación adaptadas
¿Cómo lo cambian?
Con la técnica de Media Queries
Distintos estilos
dependiendo de
características
del dispositivo
(condiciones)
¿Dónde definir condiciones? (I)
1. Al vincular distintas hojas CSS:

<link rel="stylesheet" href="pantalla.css"

media="screen">

<link rel="stylesheet" href="papel.css"

media="print"> a bl e
t i biliz
m pa
n c o
etc... n to
e i
a , l e
i de
Mala
¿Dónde definir condiciones? (II)
2. En distintas zonas de una única hoja:

/* Estilos para todos los medios */

p{ font-size:2em; }

/* Estilos para papel */

@media print{ le
t i b
p{ font-size:14pt; } o m pa
, y c
i ón
} ol a pe t i c
s
Una
¿Cómo detectar el medio?
Medios posibles: braille, handheld, print,
projection, screen, tty, tv, embossed, speech
all (todos)

Ejemplo:
<link rel="stylesheet" media="screen"
href="pantalla.css" /> r e en
o s s c
u s ar e m
So l o
¿Cómo agregar medio + condición?
Esquema:

<link media="medio and (condición)" href="hoja.css" />

-Ejemplo en HTML:

<link rel="stylesheet" media="screen and (min-

width:1024px)" href="grande.css" />

-Ejemplo en CSS:

@media screen and (min-width:1024px) {

…
}
¿Qué propiedades CSS puedo
detectar con condiciones?
 Width / Height / Device-width / Device-height
 Orientation (portrait o landscape)
 Aspect-ratio y Device-aspect-ratio
 Color, Color-index y Monochrome
 Resolution (300dpi)
 Y “supuestamente” más...
¿Cuáles usaremos el 99% de casos?

 Width (con min-width y/o max-width)

 Resolution y Aspect-ratio
Ejercicio 1
1) Crear una página con un título y varios
párrafos, y vincularle una hoja CSS.
2) Definirle un tamaño de texto global (al body)
en “pixeles”; y dentro de una media querie,
definirle otro tamaño más chico para cuando el
dispositivo mida “menos de 800px”
Ejercicio 2
Al ejercicio anterior, dentro de otra media
querie extra, definirle otro tamaño más chico
de fuentes para cuando el dispositivo mida
“menos de 480px”
Nos ganamos un café!...
Vamos al break, y seguimos en 10 minutos
 Objetivo de medidas de fuentes:

Garantizar la legibilidad
 PREGUNTA:

¿El pixel es una unidad de medida

“fija” (independiente)
o “relativa” (dependiente)?
Probemos a aumentar el tamaño
de fuente en px en Explorer...

¿se puede?
¡No sirve más usar px!
Si declaré fuentes
en px en 20
declaraciones de
mi hoja, tendré
que redefinir el
valor en px en los
20 lugares por
“cada” media
querie que
aplique!!!...
 1. Tamaño de fuentes (I)
Porcentajes + Ems

body{ font-size:60%; } Body en %

h1{ font-size:2em; }
Elementos en Em
p{ font-size:1em; }

@media screen and (min-width:480px) {

body{font-size:80%;}
}
Cambiando un % cambia todo el esquema
 1. Tamaño de fuentes (II)
@media screen and (min-width:600px) {
body{ font-size:80%; }
}
@media screen and (min-width:1024px) {
body{ font-size:100%; }
}
Ejercicio 3

- Modificar el ejercicio anterior para

que las unidades de medida de
fuentes sean flexibles
 Script compatibilizador

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

1. Requiere un servidor (hosting o local), no soporta file:

(ATENCION: con doble click al archivo NO ANDA)...
2. Solo funciona en media queries dentro de una misma
hoja de estilos, no lee <link ni @import
 Script compatibilizador

<!--[if lt IE 9]>
<script src=”http://css3-mediaqueries-
js.googlecode.com/svn/trunk/css3-
mediaqueries.js”></script>
<![endif]-->
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
 Viewport
<meta name="viewport"
content="width=device-width, initial-scale=1">

http://www.youtube.com/watch?feature=player_embedded&v=OP2GnAFeFTY
Ejercicio 4

- Modificar el ejercicio anterior

agregando la etiqueta viewport y el
script compatibilizador
Breakpoints
1) Scaffolding “acumula” estilos
Al menos 480px
Al menos 800px (también aplica anterior)
Al menos 1024px
(también aplica anteriores)

2) Rangos: excluye
Al menos 320 y como máximo 480
Al menos 481 y como máximo 800
(no aplica anterior)
Al menos 801 (no aplica anteriores)
 Mobile First: el orden importa
El orden de los breakpoints ¡importa mucho!
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
Ejercicio 4
- Crear cuatro condiciones con media queries,
ordenando según el concepto Mobile First:
- 1er tamaño, para celular, sin media querie
- 2do tamaño, de 320 a 480
- 3er tamaño, de 480 a 800
- 4to tamaño de 800 a 1280
- Ultimo, más de 1280

Que en cada media querie cambie el color de

fondo del body, así lo percibimos