RESPONSIVE WEB DESIGN<frontenders/> VALENCIAJavier Arques11 abril 2013
artvisual http://www.artvisual.net/twitter @javiarquesejemplo https://github.com/frontenders/responsive-talkpresentación h...
TIPOS DE WEB MÓVILDEDICADA RDW RESS
TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIURL...
TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIGoo...
TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIGoo...
*imagen: http://bradfrostweb.com/blog/post/this-is-the-web/RESPONSIVE WEB DESIGN
http://alistapart.com/article/responsive-web-design
ETHAN MARCOTTEhttp://unstoppablerobotninja.com/entry/on-being-responsive/1FLEXIBLE LAYOUT2FLEXIBLE MEDIA3MEDIA QUERIES
1FLEXIBLE LAYOUT
FLEXIBILIZA TU LAYOUTContenido fluido (%)Tamaño en porcentaje = tamaño/total x 100300px / 960px x 100 = 31.25%box-sizing: b...
RESPONSIVE FRAMEWORKSFoundation http://foundation.zurb.com/Bootstrap http://twitter.github.io/bootstrap/Skeleton http://ww...
TIPOGRAFÍAUsar em, rem, %body{ font-size: 100%} // 16pxem = tamaño en px / 16px24px / 16px = 1.5em
servidordeprueba.net/webs/responsive-talk/v1/
960px465px300px217px30px300px 660px
48.4375%31.25%22.60%3.125%31.25% 68.75%.wrapper{! max-width: 960px;! width: 90%;}
http://servidordeprueba.net/webs/responsive-talk/v2/
2FLEXIBLE MEDIA
FLEXIBLE IMAGES CSSImagen se ajusta al ancho del contendorimg, embed, object, video {max-width: 100%;overflow: hidden;heig...
http://servidordeprueba.net/webs/responsive-talk/v3/
JS RESPONSIVE IMAGESpicturefill.jshttps://github.com/scottjehl/picturefill
SERVER RESPONSIVE IMAGES.htaccesspara redireccionar todas lasimágenes a adaptive-images.phpadaptive-images.phpcreará las i...
RESPONSIVE VIDEOhttps://github.com/davatron5000/FitVids.jsPlugin de jQuery que adapta el tamaño de losembeds deYoutube, Vi...
3MEDIA QUERIES
MEDIA QUERIESCSS 2.1@media {media type: screen, handheld, print, all,tv, ...} {media features: width, orientation, ...}@me...
width (permite min,max)@media screen and (min-width: 400px)and (max-width: 700px) { … }device width (permite min,max)@medi...
TAMAÑOS BÁSICOS/* Landscape phones and down */@media (max-width: 480px) { ... }/* Landscape phone to portrait tablet */@me...
RESOLUCIONES320 < 480 < 720 < 768 < 900 < 1024 < 1200
MEDIA QUERY SUPPORTIE >= 9SOPORTADO PORTODOS LOSNAVEGADORESMÓVILESrespond.jshttps://github.com/scottjehl/Respond
NUESTRO EJEMPLOCON MEDIA QUERIES
HTTP://SERVIDORDEPRUEBA.NET/WEBS/RESPONSIVE-TALK/V4/
TABLET PORTRAIT (MAX-WIDTH: 768)
SMARTPHONE (MAX-WIDTH: 480)
HEADER (MAX-WIDTH: 480)
GRID (MAX-WIDTH: 480PX)
MÁS COSASRECURSOS Y OTRAS MOVIDAS
VIEWPORT<meta name="viewport" content="width=device-width, initial-scale=1">los navegadores de los smartphone emulan la re...
MOBILE FIRST
http://mobitest.akamai.com/
BRAD FROSThttp://bradfrost.github.io/this-is-responsive/
http://jasonweaver.name/lab/flexiblenavigation/
“INSPIRACIÓN”Awwwards www.awwwards.com/Mediaqueri.esSpeckyboy speckyboy.com/Hongkiat www.hongkiat.com/blog/Codrops ympanus...
Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-designSIXREVISIONS: A comparison of ...
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
Responsive web design - frontenders Valencia
Upcoming SlideShare
Loading in …5
×

Responsive web design - frontenders Valencia

2,811 views

Published on

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 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total views
2,811
On SlideShare
0
From Embeds
0
Number of Embeds
541
Actions
Shares
0
Downloads
53
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Responsive web design - frontenders Valencia

  1. 1. RESPONSIVE WEB DESIGN<frontenders/> VALENCIAJavier Arques11 abril 2013
  2. 2. artvisual http://www.artvisual.net/twitter @javiarquesejemplo https://github.com/frontenders/responsive-talkpresentación http://www.slideshare.net/JavierArquesHernndez
  3. 3. TIPOS DE WEB MÓVILDEDICADA RDW RESS
  4. 4. TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIURL y HTML propio
  5. 5. TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIGoogle ❤ RWDUn sitio para todo, sinredireccionesPeor optimizadasPeor UI/UXURL y HTML propio misma URL y HTML
  6. 6. TIPOS DE WEB MÓVILDEDICADA RDW RESSMás rápidasMejor UX/UIMúltiples URL’sRedireccionesContenido duplicadoDiferente UX/UIGoogle ❤ RWDUn sitio para todo, sinredireccionesPeor optimizadasPeor UI/UXURL y HTML propio misma URL y HTML misma URLHTML&CSS propioIgual que DEDICADAMás códigoDetección deldispositivo en el servidor
  7. 7. *imagen: http://bradfrostweb.com/blog/post/this-is-the-web/RESPONSIVE WEB DESIGN
  8. 8. http://alistapart.com/article/responsive-web-design
  9. 9. ETHAN MARCOTTEhttp://unstoppablerobotninja.com/entry/on-being-responsive/1FLEXIBLE LAYOUT2FLEXIBLE MEDIA3MEDIA QUERIES
  10. 10. 1FLEXIBLE LAYOUT
  11. 11. FLEXIBILIZA TU LAYOUTContenido fluido (%)Tamaño en porcentaje = tamaño/total x 100300px / 960px x 100 = 31.25%box-sizing: border-box. Incluye el padding y elborde en el ancho total (IE8+)
  12. 12. RESPONSIVE FRAMEWORKSFoundation 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
  13. 13. TIPOGRAFÍAUsar em, rem, %body{ font-size: 100%} // 16pxem = tamaño en px / 16px24px / 16px = 1.5em
  14. 14. servidordeprueba.net/webs/responsive-talk/v1/
  15. 15. 960px465px300px217px30px300px 660px
  16. 16. 48.4375%31.25%22.60%3.125%31.25% 68.75%.wrapper{! max-width: 960px;! width: 90%;}
  17. 17. http://servidordeprueba.net/webs/responsive-talk/v2/
  18. 18. 2FLEXIBLE MEDIA
  19. 19. FLEXIBLE IMAGES CSSImagen se ajusta al ancho del contendorimg, embed, object, video {max-width: 100%;overflow: hidden;height: auto;}
  20. 20. http://servidordeprueba.net/webs/responsive-talk/v3/
  21. 21. JS RESPONSIVE IMAGESpicturefill.jshttps://github.com/scottjehl/picturefill
  22. 22. SERVER RESPONSIVE IMAGES.htaccesspara redireccionar todas lasimágenes a adaptive-images.phpadaptive-images.phpcreará las imágenes y las cachearájavascriptcreará una cookie que guarde eltamaño de tu pantallahttp://adaptive-images.com/
  23. 23. RESPONSIVE VIDEOhttps://github.com/davatron5000/FitVids.jsPlugin de jQuery que adapta el tamaño de losembeds deYoutube, Vimeo, Blip.tv, ..
  24. 24. 3MEDIA QUERIES
  25. 25. MEDIA QUERIESCSS 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">
  26. 26. 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 FEATURESallbrailleembossedhandheldprintprojectionscreenspeechttytv
  27. 27. 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) { ... }
  28. 28. RESOLUCIONES320 < 480 < 720 < 768 < 900 < 1024 < 1200
  29. 29. MEDIA QUERY SUPPORTIE >= 9SOPORTADO PORTODOS LOSNAVEGADORESMÓVILESrespond.jshttps://github.com/scottjehl/Respond
  30. 30. NUESTRO EJEMPLOCON MEDIA QUERIES
  31. 31. HTTP://SERVIDORDEPRUEBA.NET/WEBS/RESPONSIVE-TALK/V4/
  32. 32. TABLET PORTRAIT (MAX-WIDTH: 768)
  33. 33. SMARTPHONE (MAX-WIDTH: 480)
  34. 34. HEADER (MAX-WIDTH: 480)
  35. 35. GRID (MAX-WIDTH: 480PX)
  36. 36. MÁS COSASRECURSOS Y OTRAS MOVIDAS
  37. 37. VIEWPORT<meta name="viewport" content="width=device-width, initial-scale=1">los navegadores de los smartphone emulan la resolucióndel escritorio (800-980px)
  38. 38. MOBILE FIRST
  39. 39. http://mobitest.akamai.com/
  40. 40. BRAD FROSThttp://bradfrost.github.io/this-is-responsive/
  41. 41. http://jasonweaver.name/lab/flexiblenavigation/
  42. 42. “INSPIRACIÓN”Awwwards www.awwwards.com/Mediaqueri.esSpeckyboy speckyboy.com/Hongkiat www.hongkiat.com/blog/Codrops ympanus.net/codrops/Smashing Magazinewww.smashingmagazine.com/Themeforest themeforest.net/
  43. 43. Responsive Web Design por Ethan Marcotte http://alistapart.com/article/responsive-web-designSIXREVISIONS: 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?1392RECURSOS

×