Share
Embed

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; }