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