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
   

   View Slide

2. @vlledo @skuark
   Hola, somos
   Construimos aplicaciones y sitios web
   atractivos e intuitivos que aportan valor
   a la presencia online de nuestros clientes.
   

   View Slide

3. Historia de la Web
   

   View Slide

4. La web es como un lienzo
   Imagen: canvasdigitalal.be
   

   View Slide

5. ¿Cuantos pixeles mide la web?
   Imagen: oficuo.com
   

   View Slide

6. ¿Qué es hoy día la web?
   Imagen: bradfrostweb.com
   

   View Slide

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
   

   View Slide

8. La web NO es como un lienzo
   Imagen: canvasdigitalal.be
   

   View Slide

9. Responsive Web Design
   

   View Slide

10. Algunos ejemplos de RWD
    ✓ gov.uk
    ✓ spotify.com
    ✓ smashingmagazine.com
    ✓ bostonglobe.com
    ✓ ladisparatadaboda.com
    ✓ deliriumcoder.com
    ✓ rosamarchal.es
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

13. goldengridsystem.com
    

    View Slide

14. 960.gs
    

    View Slide

15. lessframework.com
    

    View Slide

16. objetivo ÷ contexto = resultado
    400 ÷ 1024 = 0.390625
    width: 39.0625%;
    

    View Slide

17. objetivo ÷ contexto = resultado
    24 ÷ 16 = 1.5
    font-size: 1.5em;
    

    View Slide

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.
    

    View Slide

19. img, video {
    max-width: 100%;
    }
    

    View Slide

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.
    

    View Slide

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;
    ! }
    }
    

    View Slide

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.
    

    View Slide

23. Mobile First
    

    View Slide

24. View Slide

25. Recursos
    

    View Slide

26. twitter.github.com/bootstrap
    

    View Slide

27. foundation.zurb.com
    

    View Slide

28. screenqueri.es
    

    View Slide

29. mediaqueri.es
    

    View Slide

30. github.com/scottjehl/Respond
    

    View Slide

31. flexslider.woothemes.com
    

    View Slide

32. Libros
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. Esto ha sido todo.
    ¡Gracias por venir!
    

    View Slide