Code School: Journey Into Mobile

Slides for the free level of my Journey Into Mobile course for Code School. Play the first level for free

Transcript

2. - L E V E L 1 - Foundations For Mobile
3. Relative Font-Sizing Foundations for Mobile What is the Mobile Web? Course Overview Level 1
4. there is no mobile web Level 1
5. Level 1 Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
6. Level 1 Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
7. What is the Mobile web? Level 1 "The primary design principle underlying the Web's usefulness and growth is universality.” (Tim Berners-Lee)
8. Level 1 What is the Mobile web? • Must work with any form of information • Accessible from any device.
9. Level 1 Image Courtesy of Brad Frost http://bradfrostweb.com/blog/web/responsive-web-design-missing-the-point/
10. Mobile Design Adaptive Design Responsive Design Level 1 web design = What is the Mobile web?
11. Course Overview In this course, we’ll cover: 2. Adaptive Design 3. Responsive Design 1. Fluid Layouts Level 1
12. Fluid Layouts Level 1
13. Level 1 Fluid Layouts It is quite a three pipe problem. <a href="#">Please get me a pipe.</a> <h1> </h1>
14. h1 { font-size: 30px; font-weight: bold; } Fluid Layouts
15. pixels ems Fluid Layouts
16. Fluid Layouts html { font-size: 16px; } body { color: #352a25; font-family: Georgia, serif; font-size: 62.5%; /* 1em = 10px */ }
17. Level 1 target ÷ context = result target font size font size of containing element Fluid Layouts
18. Level 1 target ÷ context = result 30px ÷ 10px = 3em <h1> font size default browser font size Fluid Layouts
19. Level 1 Fluid Layouts h1 { font-size: 3em; /* 30px/10px */ font-weight: bold; }
20. Level 1 Fluid Layouts
21. Level 1 need to convert Fluid Layouts h1 a { font-size: 14px; text-transform: uppercase; text-decoration: none; color: #6C564B; }
22. Level 1 target ÷ context = result 14px ÷ 10px = 1.4em ? Fluid Layouts
23. Level 1 Fluid Layouts
24. Level 1 target ÷ context = result 14px ÷ 30px = 0.4666667em <h1> font size is the correct context Fluid Layouts
25. Level 1 Fluid Layouts h1 a { font-size: 0.46666667em; /* 14px/30px */ text-transform: uppercase; text-decoration: none; color: #6C564B; }
26. Level 1 Fluid Layouts
27. Level 1 target ÷ context = result 14px ÷ 30px = 0.4666667em Note: No need to round Fluid Layouts h1 a { font-size: 0.46666667em; /* 14px/30px */ text-transform: uppercase; text-decoration: none; color: #6C564B; }