Presentación de Javier Arques para el Frontenders Valencia del 11 de abril de 2013. Una introducción al Responsive Web Design con ejemplos prácticos. Web de ejemplo: http://servidordeprueba.net/webs/responsive-talk/ Ficheros de ejemplo: https://github.com/frontenders/responsive-talk Frontenders: http://valencia.frontenders.me/

1. RESPONSIVE WEB DESIGN
<frontenders/> VALENCIA
Javier Arques
11 abril 2013

2. artvisual http://www.artvisual.net/
twitter @javiarques
ejemplo https://github.com/frontenders/responsive-talk
presentación http://www.slideshare.net/
JavierArquesHernndez

4. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS

5. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
URL y HTML propio

6. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML

7. TIPOS DE WEB MÓVIL
DEDICADA RDW RESS
Más rápidas
Mejor UX/UI
Múltiples URL’s
Redirecciones
Contenido duplicado
Diferente UX/UI
Google ❤ RWD
Un sitio para todo, sin
redirecciones
Peor optimizadas
Peor UI/UX
URL y HTML propio misma URL y HTML misma URL
HTML&CSS propio
Igual que DEDICADA
Más código
Detección del
dispositivo en el servidor

8. *imagen: http://bradfrostweb.com/blog/post/this-is-the-web/
RESPONSIVE WEB DESIGN

11. http://alistapart.com/article/responsive-web-design

12. ETHAN MARCOTTE
http://unstoppablerobotninja.com/entry/on-being-responsive/
1
FLEXIBLE LAYOUT
2
FLEXIBLE MEDIA
3
MEDIA QUERIES

13. 1
FLEXIBLE LAYOUT

15. FLEXIBILIZA TU LAYOUT
Contenido fluido (%)
Tamaño en porcentaje = tamaño/total x 100
300px / 960px x 100 = 31.25%
box-sizing: border-box. Incluye el padding y el
borde en el ancho total (IE8+)

16. RESPONSIVE FRAMEWORKS
Foundation http://foundation.zurb.com/
Bootstrap http://twitter.github.io/bootstrap/
Skeleton http://www.getskeleton.com/
Gumby http://gumbyframework.com/
http://responsive.vermilion.com/compare.php

17. TIPOGRAFÍA
Usar em, rem, %
body{ font-size: 100%} // 16px
em = tamaño en px / 16px
24px / 16px = 1.5em

18. servidordeprueba.net/webs/responsive-talk/v1/

19. 960px
465px
300px
217px
30px
300px 660px

20. 48.4375%
31.25%
22.60%
3.125%
31.25% 68.75%
.wrapper{
! max-width: 960px;
! width: 90%;
}

21. http://servidordeprueba.net/webs/responsive-talk/v2/

22. 2
FLEXIBLE MEDIA

23. FLEXIBLE IMAGES CSS
Imagen se ajusta al ancho del contendor
img, embed, object, video {
max-width: 100%;
overflow: hidden;
height: auto;
}

24. http://servidordeprueba.net/webs/responsive-talk/v3/

25. JS RESPONSIVE IMAGES
picturefill.js
https://github.com/scottjehl/picturefill

26. SERVER RESPONSIVE IMAGES
.htaccess
para redireccionar todas las
imágenes a adaptive-images.php
adaptive-images.php
creará las imágenes y las cacheará
javascript
creará una cookie que guarde el
tamaño de tu pantalla
http://adaptive-images.com/

27. RESPONSIVE VIDEO
https://github.com/davatron5000/FitVids.js
Plugin de jQuery que adapta el tamaño de los
embeds deYoutube, Vimeo, Blip.tv, ..

28. 3
MEDIA QUERIES

29. MEDIA QUERIES
CSS 2.1
@media {media type: screen, handheld, print, all,
tv, ...} {media features: width, orientation, ...}
@media print { * { font-family: serif}}
HTML
<link rel="stylesheet" media="{media type}
{media features}" href="example.css" />
<link rel="stylesheet" type="text/css" media="print" href="serif.css">

30. width (permite min,max)
@media screen and (min-width: 400px)
and (max-width: 700px) { … }
device width (permite min,max)
@media screen and (device-width:
800px) { … }
orientation
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
MEDIA TYPES MEDIA FEATURES
all
braille
embossed
handheld
print
projection
screen
speech
tty
tv

31. TAMAÑOS BÁSICOS
/* Landscape phones and down */
@media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
@media (min-width: 1200px) { ... }

32. RESOLUCIONES
320 < 480 < 720 < 768 < 900 < 1024 < 1200

33. MEDIA QUERY SUPPORT
IE >= 9
SOPORTADO POR
TODOS LOS
NAVEGADORES
MÓVILES
respond.js
https://github.com/scottjehl/Respond

34. NUESTRO EJEMPLO
CON MEDIA QUERIES

35. HTTP://SERVIDORDEPRUEBA.NET/WEBS/RESPONSIVE-TALK/V4/

36. TABLET PORTRAIT (MAX-WIDTH: 768)

37. SMARTPHONE (MAX-WIDTH: 480)

38. HEADER (MAX-WIDTH: 480)

39. GRID (MAX-WIDTH: 480PX)

40. MÁS COSAS
RECURSOS Y OTRAS MOVIDAS

41. VIEWPORT
<meta name="viewport" content="width=device-width, initial-scale=1">
los navegadores de los smartphone emulan la resolución
del escritorio (800-980px)

42. MOBILE FIRST

43. http://mobitest.akamai.com/

44. BRAD FROST
http://bradfrost.github.io/this-is-responsive/

45. http://jasonweaver.name/lab/flexiblenavigation/

46. “INSPIRACIÓN”
Awwwards www.awwwards.com/
Mediaqueri.es
Speckyboy speckyboy.com/
Hongkiat www.hongkiat.com/blog/
Codrops ympanus.net/codrops/
Smashing Magazine
www.smashingmagazine.com/
Themeforest themeforest.net/

47. Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-
design
SIXREVISIONS: A comparison of Methods for Building Mobile-Opimized Websites http://
sixrevisions.com/mobile/methods-mobile-websites/
MASHABLE: 85 Top Responsive Web Design Tools de Mashable http://mashable.com/
2013/03/18/web-design-tools/
The Responsinator (testing): http://www.responsinator.com/
RESS: Responsive Design + Server Side Components http://www.lukew.com/ff/entry.asp?
1392
RECURSOS