El documento presenta una discusión sobre el diseño web responsivo (RWD), enfatizando su importancia para mejorar la experiencia del usuario en diferentes dispositivos. Se detallan tipos de enfoques para RWD, como layouts flexibles, imágenes responsivas y queries de medios, junto con herramientas y recursos para implementar dichas técnicas. Además, se menciona la relevancia de utilizar frameworks como Bootstrap y Foundation para facilitar la creación de sitios adaptativos.

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