Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Responsive web design - frontenders Valencia

Responsive web design - frontenders Valencia

Herunterladen, um offline zu lesen

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/


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/


Weitere Verwandte Inhalte

Responsive web design - frontenders Valencia

  1. 1. RESPONSIVE WEB DESIGN <frontenders/> VALENCIA Javier Arques 11 abril 2013
  2. 2. artvisual http://www.artvisual.net/ twitter @javiarques ejemplo https://github.com/frontenders/responsive-talk presentación http://www.slideshare.net/ JavierArquesHernndez
  3. 3. TIPOS DE WEB MÓVIL DEDICADA RDW RESS
  4. 4. 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
  5. 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 Google ❤ RWD Un sitio para todo, sin redirecciones Peor optimizadas Peor UI/UX URL y HTML propio misma URL y HTML
  6. 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 misma URL HTML&CSS propio Igual que DEDICADA Más código Detección del dispositivo 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 MARCOTTE http://unstoppablerobotninja.com/entry/on-being-responsive/ 1 FLEXIBLE LAYOUT 2 FLEXIBLE MEDIA 3 MEDIA QUERIES
  10. 10. 1 FLEXIBLE LAYOUT
  11. 11. 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+)
  12. 12. 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
  13. 13. TIPOGRAFÍA Usar em, rem, % body{ font-size: 100%} // 16px em = tamaño en px / 16px 24px / 16px = 1.5em
  14. 14. servidordeprueba.net/webs/responsive-talk/v1/
  15. 15. 960px 465px 300px 217px 30px 300px 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. 2 FLEXIBLE MEDIA
  19. 19. FLEXIBLE IMAGES CSS Imagen se ajusta al ancho del contendor img, embed, object, video { max-width: 100%; overflow: hidden; height: auto; }
  20. 20. http://servidordeprueba.net/webs/responsive-talk/v3/
  21. 21. JS RESPONSIVE IMAGES picturefill.js https://github.com/scottjehl/picturefill
  22. 22. 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/
  23. 23. RESPONSIVE VIDEO https://github.com/davatron5000/FitVids.js Plugin de jQuery que adapta el tamaño de los embeds deYoutube, Vimeo, Blip.tv, ..
  24. 24. 3 MEDIA QUERIES
  25. 25. 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">
  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 FEATURES all braille embossed handheld print projection screen speech tty tv
  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. RESOLUCIONES 320 < 480 < 720 < 768 < 900 < 1024 < 1200
  29. 29. MEDIA QUERY SUPPORT IE >= 9 SOPORTADO POR TODOS LOS NAVEGADORES MÓVILES respond.js https://github.com/scottjehl/Respond
  30. 30. NUESTRO EJEMPLO CON 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 COSAS RECURSOS Y OTRAS MOVIDAS
  37. 37. VIEWPORT <meta name="viewport" content="width=device-width, initial-scale=1"> los navegadores de los smartphone emulan la resolución del escritorio (800-980px)
  38. 38. MOBILE FIRST
  39. 39. http://mobitest.akamai.com/
  40. 40. BRAD FROST http://bradfrost.github.io/this-is-responsive/
  41. 41. http://jasonweaver.name/lab/flexiblenavigation/
  42. 42. “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/
  43. 43. 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

×