1. RESPONSIVE DESIGN
Madrid,
19
de
Julio
de
2012
#responsivetucamon
MANU MEDINA

2. #responsivetucamon
@medinamanu

3. RESPONSIVE DESIGN
Madrid,
19
de
Julio
de
2012
#responsivetucamon
MANU MEDINA

4. @medinamanu
manumedina@gmail.com
• Manumedina.com (mi blog)
• maspixel.com (mi proyecto)
Trabajo:
- Isban (Consultor de UX)
- TAI (Profesor)
#responsivetucamon
@medinamanu

5. ¡
Un
an
illo
que
gobier
lo
ne
tod
o
!
¿Porqué el futuro es Responsive design?
Cada
vez
hay
más
tamaños
de
pantallas
diferentes
y
más
disposi6vos
móviles
#responsivetucamon
@medinamanu

6. Os presento al señor….Ethan Marcotte
Creó el término de Responsive Design en el post del blog “A list apart”
#responsivetucamon
@medinamanu

7. ¿Qué es Responsive Design?
Es un diseño flexible y diferente para las diferentes resoluciones de
nuestros dispositivos. (Es
más
que
hacer
una
web
líquida)
-­‐
Escalar
los
textos
para
que
en
los
disposi6vos
móviles
se
vean
más
grandes
-­‐
Ocultar
información
no
necesaria
para
determinados
disposi6vos
-­‐
Mostrar
la
información
en
orden
diferente
-­‐
Reducir
opciones
de
menú
-­‐
Ocultar
publicidad
#responsivetucamon
@medinamanu

8. CONCEPTOS
CLAROS
ANTES
DE
EMPEZAR
A
HACER
RESPONSIVE
#responsivetucamon
@medinamanu

9. Diferentes aplicaciones para Móviles
Apps
NaOvas
Programación
propia
para
IOS,
Android,
Blackberry….
Webapps
Usar
HTML5,
CSS3
y
JS
y
Frameworks
6po
Phonegap,
Sencha,
Lungojs…
Responsive
Web
en
tu
móvil
Accedes
mediante
el
navegador
de
tu
disposi6vo
móvil..
Safari,
Chrome,
Opera….
#responsivetucamon
@medinamanu

10. Viewport vs Resolución
Que nuestra web se vea a 100% sin que se redimensione.
Ampliar
o
agrandar
un
objeto,
Zoom
in
Añadiendo
este
código
en
el
head
<meta
name="viewport"
content="width=device-­‐width”/>
#responsivetucamon
@medinamanu

11. Viewport en Iphone: Navegador
Iphone-­‐
Portrait:
Iphone-­‐
Landscape
:
Pantalla:
320x480
Pantalla:
480x320
Viewport:
320x356
Viewport:
480x208
Viewport:
320x356
px
#responsivetucamon
@medinamanu

12. Viewport en IPHONE: Aplicaciones nativas
En
aplicaciones
naOvas
de
Iphone
en
posición
-­‐
Portrait:
Pantalla
y
viewport:
320x480
-­‐
Landscape:
Pantalla
y
viewport:
480x320
#responsivetucamon
@medinamanu

13. Retina Display
Iphone
3G:
Iphone
4S:
Tamaño
Pantalla:
480x320
Tamaño
Pantalla:
480x320
Resolución
480X320
(163
ppp)
Resolución
960
x
640
(326
ppp)
#responsivetucamon
@medinamanu

14. EMPECEMOS
A
HACER…
RESPONSIVE
#responsivetucamon
@medinamanu

15. ¡¡¡Emp
ieza
lo
bueno
!!!
¿Qué es lo que necesitamos para hacer
RESPONSIVE DESIGN?
#responsivetucamon
@medinamanu

16. FLEXIBLE GRID Es
com
o
la
fó
r
de
la
C mula
secreta
oca-­‐Co
la
Todo flexible…
Nuestra
web
6ene
que
tener
su
contenido
en
porcentaje
para
que
pueda
ser
flexible.
ObjeOvo/
contenedor
=
resultado
#responsivetucamon
@medinamanu

17. Nuestra plantilla flexible
-­‐
ObjeOvo/
contenedor
=
resultado
640/960=
0,666667
300/960=
0,3125
-­‐
Nuestra
CSS:
#wrap{
width:960px;}
66,66667%
31,25%
#content{
width:
66.666667%;}
#sidebar{
widht:
31.25%;}
#responsivetucamon
@medinamanu

18. Nuestra plantilla flexible
-­‐
ObjeOvo/
contenedor
=
resultado
obje6vo:
290px
contenedor=640px
290/640=0.453125
(45,3125%)
-­‐ Nuestra
CSS:
.lem
,
right
{
width:45,3125%
45.3125%
}
#responsivetucamon
@medinamanu

19. Las fuentes flexibles
Volvem
os
ObjeOv
a
la
formula
o/
con
Por
defecto
el
tamaño
de
las
fuentes
son:
tenedo de
font-­‐size:
100%;
resulta r
=
do
font-­‐size:
16px;
font-­‐size:
1em;
Para
hacerlo
proporcional
ponemos:
h1{
font-­‐size:
3em;
48px/16px=3
}
p{
font-­‐size:
75%;
12px/16px=0,75
(75%)
}
#responsivetucamon
@medinamanu

20. ¿y las imágenes? …también flexibles
<style>
img
{
max-­‐width:
100%;
}
</style>
<img
src="img/nombre.jpg”
alt=”Texto
alt"
width="99"
height="135”
/>
#responsivetucamon
@medinamanu

21. MEDIA QUERIES ¡
Ahora
empie
za
la
m
agia
!
Dentro
de
nuestra
CSS
Ejemplo
IPHONE-­‐
Landscape
CHULETA
min-­‐width:
Si
la
ventana
es
mayor
que…
@media
screen
and
(max-­‐device-­‐width:
480px)
max-­‐width:
si
la
ventana
e
menor
que…
{
Mis
es&los
para
este
tamaño
de
pantalla
de
480px
}
Ejemplo
IPAD
–
Portrait
@media
screen
and
(min-­‐widht:
480)
and
(max-­‐width:
768px)
{
Mi
es&lo
para
viewport
entre
480
y
768
pixels
}
#responsivetucamon
@medinamanu

22. CSS + MEDIA QUERY
Bajando
el
sidebar
en
Iphone:
@media
screen
and
(max-­‐device-­‐witdh:
480px){
#wrap
{
width:100%;
}
#content,
#sidebar{
width:100%;
float:lem;
}
}
#responsivetucamon
@medinamanu

23. Cambi
a
diseña de
mentalida
Resumiendo… r,
¡pien d
sa
en
m
al
óvil!
1. Haz
tu
grid
o
plan6lla
flexible
2. Haz
las
imágenes
y
otros
elementos
flexibles
3. Añade
a
tu
CSS
uno
o
2
media
queries
(para
iphone
y
ipad)
4. Empieza
a
fijarte
en
los
detalles
#responsivetucamon
@medinamanu

24. RESPONSIVE…
RECURSOS
FRAMEWORKS
LIBRERÍAS
JS
#responsivetucamon
@medinamanu

25. ¡
Al
ha
cer
Retina Display imágen zoom
nuestr
es
no
p as
ierden
resoluc
ión
!
RETINA.JS
-­‐
Imagen
normal:
<img
src="/images/my_image.png"
/>
-­‐
Imagen
de
alta
resolución
habría
que
llamarla
igual
añadiendo
“@2x”
"/images/my_image@2x.png"
#responsivetucamon
@medinamanu

26. Diferentes imágenes para diferentes resoluciones
AdapOve
Images
Muestra
imágenes
diferentes
dependiendo
de
la
resolución
del
disposi6vo
Únicamente
modificando:
fichero
.htcaccess,
e6queta
meta,
subiendo
un
fichero
php
al
servidor
y
modificando
nuestro
fichero
media
query
#responsivetucamon
@medinamanu

27. ¡Recom
ien
Colum do
nal!
CSS Responsive frameworks
5
Frameworks
con
Responsive
Grid:
Seman6c
Skeleton
Less
Framework
1140
CSS
Grid
Columnal
#responsivetucamon
@medinamanu

28. Responsive Framework para prototipar
#responsivetucamon
@medinamanu

29. Librería de Javascript para interactuar con nuestra web con
gestos como tab, double tap, pinch, spread, drag….
#responsivetucamon
@medinamanu

30. Themes para Wordpress
THEMETRUST
THEMEFOREST
THEMIFY
STUDIOPRESS
#responsivetucamon
@medinamanu

31. ¡Recom
en
pacom dado
por
ontes.n
et
!
Themes para Drupal*
OMEGA
FUSION
ZEN
#responsivetucamon
@medinamanu

32. RESPONSIVE…
EJEMPLOS
#responsivetucamon
@medinamanu

33. Uhhh…
si
Mic
es
que ros
va
en
ov
lo
uOliza
serio,
o
Ejemplos…
no?
Móvil
portrait
Tablet
portrait
Tablet
landscape
y
pcs
320x480
768x1024
1024x
768
hyp://www.microsom.com/en-­‐us/preview/
#responsivetucamon
@medinamanu

34. ¡Ojo
al
menú
cómo
l
principal
o
ocult
a!
Ejemplos…
Móvil
portrait
Tablet
portrait
Tablet
landscape
y
pcs
320x480
768x1024
1024x
768
hyp://2012.dconstruct.org/
#responsivetucamon
@medinamanu

35. Cambi
os
en
e
l
princip
menú
al
Ejemplos…
Móvil
portrait
Tablet
landscape
Portá6les
y
Pcs
320x480
1024x768
1280x
1024
hyp://thinkvitamin.com
#responsivetucamon
@medinamanu

36. Cambi
buscad o
de
fo
or
lo
p oter,
e
one
de l
conten bajo
de
ido
l
Ejemplos…
Móvil
portrait
Tablet
portrait
Tablet
landscape
y
pcs
320x480
768x1024
1024x
768
hyp://css-­‐tricks.com/
#responsivetucamon
@medinamanu

37. Uso
de
“
visuali Select
“
para
zación
de
mó
vil
Ejemplos…
Móvil
portrait
Tablet
portrait
Portá6les
y
pcs
320x480
768x1024
1280x1024
hyp://www.smashingmagazine.com/
#responsivetucamon
@medinamanu

38. FIN
¡GRACIAS!
#responsivetucamon
@medinamanu