Responsive Web Design for Beginners

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