Responsive Web Design

Esta presentación la preparamos para la charla que impartimos en el Centro de Formación Infinity (Jaén, España) el día 14 de Diciembre de 2012. En ella explicamos cuales son los ingredientes para realizar un diseño web adaptativo a todo tipo de dispositivos mediante la técnica del Responsive Web Design.

Transcript

1. Responsive Web Design Porque todos los dispositivos cuentan
2. @vlledo @skuark Hola, somos Construimos aplicaciones y sitios web atractivos e intuitivos que aportan valor a la presencia online de nuestros clientes.
3. Historia de la Web
4. La web es como un lienzo Imagen: canvasdigitalal.be
5. ¿Cuantos pixeles mide la web? Imagen: oficuo.com
6. ¿Qué es hoy día la web? Imagen: bradfrostweb.com
7. One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using. W3C / Mobile Web Best Practices 1.0 http://www.w3.org/TR/mobile-bp/#OneWeb
8. La web NO es como un lienzo Imagen: canvasdigitalal.be
9. Responsive Web Design
10. Algunos ejemplos de RWD ✓ gov.uk ✓ spotify.com ✓ smashingmagazine.com ✓ bostonglobe.com ✓ ladisparatadaboda.com ✓ deliriumcoder.com ✓ rosamarchal.es
11. Ethan Marcotte / Responsive Web Design / A Book Apart Los grids fluídos, las imágenes flexibles y las media queries son los tres ingredientes técnicos para el responsive web design, pero este también requiere una forma diferente de pensar.
12. Ethan Marcotte / Responsive Web Design / A Book Apart Los grids fluídos, las imágenes flexibles y las media queries son los tres ingredientes técnicos para el responsive web design, pero este también requiere una forma diferente de pensar.
13. goldengridsystem.com
14. 960.gs
15. lessframework.com
16. objetivo ÷ contexto = resultado 400 ÷ 1024 = 0.390625 width: 39.0625%;
17. objetivo ÷ contexto = resultado 24 ÷ 16 = 1.5 font-size: 1.5em;
18. Ethan Marcotte / Responsive Web Design / A Book Apart Los grids fluídos, las imágenes flexibles y las media queries son los tres ingredientes técnicos para el responsive web design, pero este también requiere una forma diferente de pensar.
19. img, video { max-width: 100%; }
20. Ethan Marcotte / Responsive Web Design / A Book Apart Los grids fluídos, las imágenes flexibles y las media queries son los tres ingredientes técnicos para el responsive web design, pero este también requiere una forma diferente de pensar.
21. @media only screen and (max-width: 479px) { ! h1 { ! ! font-size: 2em !important; ! } ! #presentacion .content { ! ! margin: 5% 0; ! } ! #presentacion .content h2 { ! ! font-size: 1em; ! } ! header p { ! ! font-size: 0.7em !important; ! } } @media only screen and (max-width: 1024px) and (orientation: landscape) { ! h1 { ! ! font-size: 4em !important; ! } ! #presentacion .content { ! ! margin: 10% 0; ! } ! #presentacion .content h2 { ! ! font-size: 1.5em; ! } }
22. Ethan Marcotte / Responsive Web Design / A Book Apart Los grids fluídos, las imágenes flexibles y las media queries son los tres ingredientes técnicos para el responsive web design, pero este también requiere una forma diferente de pensar.
23. Mobile First
25. Recursos
26. twitter.github.com/bootstrap
27. foundation.zurb.com
28. screenqueri.es
29. mediaqueri.es
30. github.com/scottjehl/Respond
31. flexslider.woothemes.com
32. Libros
36. Esto ha sido todo. ¡Gracias por venir!