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

Responsive Web Design for Beginners

83f7b66c4dee7effbb3717027f99282b?s=47 Sayanee
June 12, 2012

Responsive Web Design for Beginners

CSS3 Media Queries, Fluid Web Design

83f7b66c4dee7effbb3717027f99282b?s=128

Sayanee

June 12, 2012
Tweet

Transcript

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

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

  3. Too many sizes Wednesday, June 13, 12

  4. get inspired Wednesday, June 13, 12

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

    12
  6. <meta> Wednesday, June 13, 12

  7. in *.html file: <meta name="viewport" content="width=1024" /> Wednesday, June 13,

    12
  8. in *.html file: <meta name="viewport" content="width=device-width”> Wednesday, June 13, 12

  9. % Wednesday, June 13, 12

  10. target 480px context 960px target /context = result % 480px

    / 960px = 50% Wednesday, June 13, 12
  11. media queries Wednesday, June 13, 12

  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
  13. float Wednesday, June 13, 12

  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
  15. display Wednesday, June 13, 12

  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
  17. img Wednesday, June 13, 12

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

    12
  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