Responsive Web Design for Beginners

CSS3 Media Queries, Fluid Web Design

Transcript

1. Responsive
   web design
   get started right now!
   Wednesday, June 13, 12
   

   View Slide

2. www.sayan.ee
   coder
   explorer
   speaker
   Wednesday, June 13, 12
   

   View Slide

3. Too many
   sizes
   Wednesday, June 13, 12
   

   View Slide

4. get inspired
   Wednesday, June 13, 12
   

   View Slide

5. many one
   devices
   layouts
   stylesheet
   code base
   Wednesday, June 13, 12
   

   View Slide

6. 
   Wednesday, June 13, 12
   

   View Slide

7. in *.html file:
   
   Wednesday, June 13, 12
   

   View Slide

8. in *.html file:
   

   View Slide

9. %
   Wednesday, June 13, 12
   

   View Slide

10. target 480px
    context 960px
    target /context = result %
    480px / 960px = 50%
    Wednesday, June 13, 12
    

    View Slide

11. media
    queries
    Wednesday, June 13, 12
    

    View Slide

12. in *.css file:
    /* Desktop */
    @media (max-width: 1200px) {
    }
    /* iPad Landscape */
    @media (max-width: 1024px) {
    }
    /* iPad portrait */
    @media (max-width: 760px) {
    }
    /* iPhones */
    @media (max-width: 600px) {
    }
    Wednesday, June 13, 12
    

    View Slide

13. float
    Wednesday, June 13, 12
    

    View Slide

14. article, aside{
    float: left;
    }
    article{
    width: 72.5%;
    margin: 0 2.5% 10px 0;
    }
    aside{
    width: 25%;
    margin: 0 0 10px 0;
    }
    @media (max-width: 760px) {
    article, aside{
    float: none;
    width: 100%;
    }
    }
    Wednesday, June 13, 12
    

    View Slide

15. display
    Wednesday, June 13, 12
    

    View Slide

16. in *.css file:
    /* Desktop */
    footer{
    display: block;
    }
    @media (max-width: 1200px) {
    .footer-mobile{
    display: none;
    }
    }
    in *.css file:
    /* iPad portrait */
    @media (max-width: 760px) {
    .footer-mobile{
    display: block;
    }
    footer{
    display: none;
    }
    }
    Wednesday, June 13, 12
    

    View Slide

17. img
    Wednesday, June 13, 12
    

    View Slide

18. in *.css file:
    img{
    max-width: 100%;
    }
    Wednesday, June 13, 12
    

    View Slide

19. resources
    50 fantastic tools responsive web design [netmagazine]
    8 tools and scripts for responsive web design [webdesignledger]
    10 excellent tools for responsive web design [sixrevisions]
    responsive web design techniques tools and strategies [smashing magazine]
    Responsive Web Design by Ethan Marcotte
    [Article in A List Apart, 25 May 2010]
    [Book in A Book Apart]
    www. mediaqueri.es
    Wednesday, June 13, 12
    

    View Slide