Responsive Web Design

Transcript

1. RESPONSIVE WEB DESIGN
   codes + slides
   Tuesday, May 15, 12
   

   View Slide

2. @sayanee_
   Tuesday, May 15, 12
   

   View Slide

3. RESPONSIVE WEB DESIGN
   Tuesday, May 15, 12
   

   View Slide

4. RESPONSIVE WEB DESIGN
   adaptive fluid flexible flowing
   Tuesday, May 15, 12
   

   View Slide

5. RESPONSIVE WEB DESIGN
   adaptive fluid flexible flowing
   device-agnostic optimised-viewing
   Tuesday, May 15, 12
   

   View Slide

6. EXAMPLES
   Media Queries
   Happy Cognition
   Simple Bits
   Responsive 2010 Duster Theme
   Shelf Foundry Theme Tileables
   Mr. Simon Colly
   Tuesday, May 15, 12
   

   View Slide

7. TOOLS
   Tuesday, May 15, 12
   

   View Slide

8. TOOLS
   Browser
   Tuesday, May 15, 12
   

   View Slide

9. TOOLS
   Browser
   Text Editor
   Tuesday, May 15, 12
   

   View Slide

10. TOOLS
    Browser
    Text Editor
    Simulator
    Tuesday, May 15, 12
    

    View Slide

11. TOOLS
    Browser
    Text Editor
    Simulator
    Tuesday, May 15, 12
    

    View Slide

12. TOOLS
    Browser
    Text Editor
    Simulator
    Coding
    Tuesday, May 15, 12
    

    View Slide

13. #1 fluid layout
    #2 media queries
    #3 flexible media
    Tuesday, May 15, 12
    

    View Slide

14. #1 fluid layout
    Tuesday, May 15, 12
    

    View Slide

15. #1 fluid layout
    1280px
    Tuesday, May 15, 12
    

    View Slide

16. #1 fluid layout
    1280px
    960px
    Hola! Travel with me
    devices
    footer
    Tuesday, May 15, 12
    

    View Slide

17. #1 fluid layout
    1280px
    960px
    Hola! Travel with me
    600px
    devices
    main
    footer
    Tuesday, May 15, 12
    

    View Slide

18. #1 fluid layout
    1280px
    960px
    Hola! Travel with me
    600px 300px
    devices
    main sidebar
    footer
    Tuesday, May 15, 12
    

    View Slide

19. #1 fluid layout
    think in pixels percentages
    target / context = result
    Tuesday, May 15, 12
    

    View Slide

20. #1 fluid layout
    1280px
    960px
    Hola! Travel with me
    600px 300px
    devices
    main sidebar
    footer
    Tuesday, May 15, 12
    

    View Slide

21. #1 fluid layout
    1280px
    960px
    Hola! Travel with me
    600px 300px
    devices
    main sidebar
    footer
    /1280px = 75%
    / 960px= 62.5% /960px = 31.25%
    960px / 960px = 100%
    960px / 960px = 100%
    Tuesday, May 15, 12
    

    View Slide

22. #2 media queries
    min-width landscape
    1024px
    portrait
    768px
    1280px landscape
    960px
    portrait
    640px
    four
    layouts
    1200px 1024px
    768px
    600px
    Tuesday, May 15, 12
    

    View Slide

23. #2 media queries
    1200px
    1024px
    768px
    600px
    Tuesday, May 15, 12
    

    View Slide

24. #2 media queries
    1200px
    1024px
    768px
    600px
    @media screen and (max-width: ){} /* desktop */
    in style.css :
    @media screen and (max-width: ){} /* iPad landscape */
    @media screen and (max-width: ){} /* iPad portrait */
    @media screen and (max-width: ){} /* iPhone */
    Tuesday, May 15, 12
    

    View Slide

25. #2 media queries
    1200px
    1024px
    768px
    600px
    @media screen and (max-width: ){} /* desktop */
    in style.css :
    @media screen and (max-width: ){} /* iPad landscape */
    @media screen and (max-width: ){} /* iPad portrait */
    @media screen and (max-width: ){} /* iPhone */
    in index.html, inside :
    
    Tuesday, May 15, 12
    

    View Slide

26. #3 flexible media
    img, embed, object, video {
    max-width:100%
    }
    Tuesday, May 15, 12
    

    View Slide

27. #3 flexible media
    flexible heading using fittext.js
    Tuesday, May 15, 12
    

    View Slide

28. OTHER RESOURCES
    Blog posts:
    1. Think Vitamin
    2. A-List Apart
    3. Smashing Magazine
    4. Fluid Images
    5. Web Designer Wall
    6. CSS Tricks
    7. Six Revisions
    8. fittext.js
    Books:
    1. by Ethan Marcotte
    Videos:
    1. Nettuts
    Tuesday, May 15, 12
    

    View Slide

29. codes + slides
    Tuesday, May 15, 12
    

    View Slide

30. @sayanee_
    Tuesday, May 15, 12
    

    View Slide