Responsive Web Design Workflow

Slide 1

Slide 1 text

Responsive Web Design Workﬂow The state of RWD and a... JoomlaDay 2013

Slide 2

Slide 2 text

Deﬁnition

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Deﬁnition “The practice consists of a mix of ﬂexible grids and layouts, images and an intelligent use of CSS media queries.“ -bit.ly/m3ap1L

Slide 5

Slide 5 text

Where we are

Slide 6

Slide 6 text

Where we are 5,210,000 - June 2012

Slide 7

Slide 7 text

Where we are 46,610,000 - June 2013

Slide 8

Slide 8 text

Where we are

Slide 9

Slide 9 text

Where we are

Slide 10

Slide 10 text

Where we are

Slide 11

Slide 11 text

Where we are

Slide 12

Slide 12 text

Where we are

Slide 13

Slide 13 text

Where we are

Slide 14

Slide 14 text

Where we are

Slide 15

Slide 15 text

Where we are

Slide 16

Slide 16 text

Where we are

Slide 17

Slide 17 text

Where we are

Slide 18

Slide 18 text

Browser Support Where we are ~83% - June 2012 -bit.ly/GsHMm

Slide 19

Slide 19 text

Browser Support Where we are ~91% - June 2013 -bit.ly/GsHMm

Slide 20

Slide 20 text

7 8 (Far from) Browser Support Kill these agent(s) X Where we are

Slide 21

Slide 21 text

Where we are Don’t forget: + RWD = -bit.ly/LsYjA6

Slide 22

Slide 22 text

Workﬂow

Slide 23

Slide 23 text

Philosophy of breakpoints

Slide 24

Slide 24 text

Workﬂow > Philosophy of breakpoints Jeremy Keith “I don’t think it’s desirable to have a “standard” handful of screen widths, any more than it’s desirable to have a single rendering engine in every browser“ -bit.ly/IyLnvL

Slide 25

Slide 25 text

Workﬂow > Philosophy of breakpoints Stephen Hay “We do have to start somewhere“ -bit.ly/1aZVILN

Slide 26

Slide 26 text

Workﬂow > Philosophy of breakpoints -bit.ly/12BjSsO

Slide 27

Slide 27 text

SASS Syntactically Awesome Stylesheets .scss > .css -bit.ly/3wRpzR

Slide 28

Slide 28 text

Workﬂow > SASS $radius: 1px; $golden: 1.618rem; $shadow: 0 1px 12px rgba(0, 0, 0, 0.1); a.call { margin: $golden*2 auto; -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } Variables

Slide 29

Slide 29 text

Workﬂow > SASS Mixins @mixin rounded-shadowed{ -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; -webkit-box-shadow: $shadow; -moz-box-shadow: $shadow; box-shadow: $shadow; } body.work figure img{ margin: $golden auto; @include rounded-shadowed }

Slide 30

Slide 30 text

Workﬂow > SASS Nesting table.hl { margin: 2em 0; td.ln { text-align: right; } } li { font: { family: serif; weight: bold; size: 1.2em; } }

Slide 31

Slide 31 text

Zen Grids -bit.ly/AoG8vG

Slide 32

Slide 32 text

Workﬂow > Zen Grids

The main content. We like semantic HTML ordering. An aside. Another aside. A footer. Another footer.

Slide 33

Slide 33 text

Workﬂow > Zen Grids .container { @include zen-grid-container; $zen-column-count: 7; $zen-gutter-width: 10px; width: 80%; max-width: 1240px; } .aside1 { @include zen-grid-item(2, 1); } .content { @include zen-grid-item(4, 3); } .aside2 { @include zen-grid-item(1, 7); } .footer1 { @include zen-grid-item(3, 5); } .footer2 { @include zen-grid-item(4, 1); }

Slide 34

Slide 34 text

Workﬂow > Zen Grids @include zen-grid-item(2, 1) @include zen-grid-item(4, 3) @include zen-grid-item(1, 7) @include zen-grid-item(3, 5) @include zen-grid-item(4, 1)

Slide 35

Slide 35 text

Media

Slide 36

Slide 36 text

Workﬂow > Media img{ width:auto; */ IE8 and below */ max-width: 100%; height:auto; */ if you specify image width & height in your HTML */ }

Slide 37

Slide 37 text

-bit.ly/nid1yz Workﬂow > Media Chris Coyer & Paravel: FitVid.js

Slide 38

Slide 38 text

Workﬂow > Media Almost there...

Slide 39

Slide 39 text

-bit.ly/yvfcXm Workﬂow > Responsive Tables

Scott Jehl: picturefill.js

Slide 40

Slide 40 text

Responsive Typography

Slide 41

Slide 41 text

-bit.ly/ZzkdOZ Workﬂow > Responsive Typography

Slide 42

Slide 42 text

-bit.ly/ZCE2nh -Photo by Wilson Miner Workﬂow > Responsive Typography 100% is NOT big

Slide 43

Slide 43 text

Workﬂow > Responsive Typography html { font-size: 62.5%; */ 16px*0.625=10px=1em */ line-height: 1.5; } p{ font-size: 16px; */ IE8 and below */ font-size: 1.6rem; */ rem=RootEM - 1.6*10px=16px */ }

Slide 44

Slide 44 text

@media all and (max-width: 768px) { html { font-size: 58%; */ 16px*0.58=9px */ } } */ p{ font-size: 16px; font-size: 1.6rem; */ 9*1.6=14.4px */ } */ Workﬂow > Responsive Typography

Slide 45

Slide 45 text

-bit.ly/Vr0RbL Workﬂow > Responsive Typography

Slide 46

Slide 46 text

Responsive Navigation

Slide 47

Slide 47 text

-bit.ly/MSO7oL Workﬂow > Responsive Navigation >1024px <1024px

Slide 48

Slide 48 text

-bit.ly/MSO7oL Workﬂow > Responsive Navigation Jason Weaver: flexnav.js

Navigation

Slide 49

Slide 49 text

Responsive Tables

Slide 50

Slide 50 text

Workﬂow > Responsive Tables /* Attach the Table CSS and Javascript */ ... ... ... <table class=”responsive”> <tr>... ZURB: responsive-tables.js

Slide 51

Slide 51 text

Workﬂow > Responsive Tables

Slide 52

Slide 52 text

Workﬂow -Philosophy of breakpoints -SASS -Zen Grids -Media (images & video) -Responsive Typography -Navigation -Tables