Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design for Beginners

Sayanee
June 12, 2012

Responsive Web Design for Beginners

CSS3 Media Queries, Fluid Web Design

Sayanee

June 12, 2012
Tweet

More Decks by Sayanee

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Too many
    sizes
    Wednesday, June 13, 12

    View full-size slide

  4. get inspired
    Wednesday, June 13, 12

    View full-size slide

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

    View full-size slide


  6. Wednesday, June 13, 12

    View full-size slide

  7. in *.html file:

    Wednesday, June 13, 12

    View full-size slide

  8. in *.html file:

    View full-size slide

  9. %
    Wednesday, June 13, 12

    View full-size slide

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

    View full-size slide

  11. media
    queries
    Wednesday, June 13, 12

    View full-size 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 full-size slide

  13. float
    Wednesday, June 13, 12

    View full-size 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 full-size slide

  15. display
    Wednesday, June 13, 12

    View full-size 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 full-size slide

  17. img
    Wednesday, June 13, 12

    View full-size slide

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

    View full-size 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 full-size slide