Build Responsively: Columbus: Day 2

Slide 1

Slide 1 text

MIDWEST TOUR SPONSORED BY

Slide 2

Slide 2 text

Download the Repo http://bit.ly/LWLTEA

Slide 3

Slide 3 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 4

Slide 4 text

Want More? @brworkshop @hearsparkbox www.seesparkbox.com/foundry

Slide 5

Slide 5 text

Join In the Twitters #brworkshop

Slide 6

Slide 6 text

THANKS TO OUR MIDWEST TOUR SPONSORS

Slide 7

Slide 7 text

Session Five EMERGING PATTERNS 9:30-10:45

Slide 8

Slide 8 text

EMERGING PATTERNS navigation

Slide 9

Slide 9 text

Top Nav Bottom Nav Slide Down Nav Select Box Nav Menu Icon Nav Multi-Level EMERGING PATTERNS navigation http://riothq.com http://contentsmagazine.com http://2012.dconstruct.org http://fortysevenmedia.com http://twitter.github.com/bootstrap http://msj.edu/

Slide 10

Slide 10 text

EMERGING PATTERNS tables

Slide 11

Slide 11 text

Show the first column Turn the rows into blocks Just hide some of it Selective Display EMERGING PATTERNS tables http://www.zurb.com/playground/responsive-tables http://css-tricks.com/examples/ResponsiveTables/responsive.php http://elvery.net/demo/responsive-tables http://filamentgroup.com/examples/rwd-table-patterns

Slide 12

Slide 12 text

EMERGING PATTERNS images

Slide 13

Slide 13 text

Picturefill Sencha.io Adaptive Images EMERGING PATTERNS images http://scottjehl.github.com/picturefill http://docs.sencha.io http://adaptive-images.com and tons more...

Slide 14

Slide 14 text

http://tiny.cc/vr24gw EMERGING PATTERNS images ~K istofer Lanyon “...performance is important, but access is more important. Mobile later is better than mobile never.”

Slide 15

Slide 15 text

EMERGING PATTERNS other fun tuff http://bit.ly/LWLTEA

Slide 16

Slide 16 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 17

Slide 17 text

Session Six RESPONSIVE RETROFITTING 10:45-NOON http://bit.ly/Of6LoV

Slide 18

Slide 18 text

RESPONSIVE TECHNIQUES IN NON-RESPONSIVE ORGANIZATIONS

Slide 19

Slide 19 text

RESPONSIVE RETROFITTING SOMETHING IS BETTER THAN NOTHING

Slide 20

Slide 20 text

RESPONSIVE RETROFITTING • LARGE RESOLUTION FIRST • SMALL RESOLUTION FIRST, CAPPED • FUN WITH RETROFITTING

Slide 21

Slide 21 text

RESPONSIVE RETROFITTING LARGE RESOLUTION FIRST /* FILE: main.css */ /* all your original styles */ @media (max-width: 650px) { /* styles for 650px and lower */ }

Slide 22

Slide 22 text

RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED LET’S LOOK AT SOME CODE

Slide 23

Slide 23 text

RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED if ( Modernizr.mq('(min-width: 0px)') ) { $( "html" ).removeClass( "no-mediaquery" ); $( "html" ).addClass( "mediaquery" ); }

Slide 24

Slide 24 text

/* if JS disabled OR media queries aren't supported */ .no-mediaquery { @import "original"; } .mediaquery { @media (max-width: 660px) { @import "small"; } @media (min-width: 661px) and (max-width: 979px) { @import "small"; @import "medium"; } @media (min-width: 980px) { @import "original"; } }

Slide 25

Slide 25 text

/* translated to CSS as... */ .no-mediaquery li { /* original li styles */ } @media (max-width: 660px) { .mediaquery li { /* small li styles */ } } @media (min-width: 661px) and (max-width: 979px) { .mediaquery li { /* small li styles */ } .mediaquery li { /* medium li styles */ } } @media (min-width: 980px) { .mediaquery li { /* original li styles */ } }

Slide 26

Slide 26 text

RESPONSIVE RETROFITTING TABLE EXAMPLE

Slide 27

Slide 27 text

RESPONSIVE RETROFITTING TABLE EXAMPLE

Slide 28

Slide 28 text

RESPONSIVE RETROFITTING TABLE EXAMPLE

Slide 29

Slide 29 text

RESPONSIVE RETROFITTING AN EXPERIMENT http://bit.ly/Of6LoV

Slide 30

Slide 30 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 31

Slide 31 text

Session Seven RESPONSIVE JAVASCRIPT 1:15-3:00

Slide 32

Slide 32 text

RESPONSIVE JAVASCRIPT position: fixed http://caniuse.com/#search=fixed

Slide 33

Slide 33 text

RESPONSIVE JAVASCRIPT position: fixed http://scottjehl.github.com/fixed-fixed

Slide 34

Slide 34 text

http://github.com/scottjehl/Device-Bugs/issues/1 RESPONSIVE JAVASCRIPT position: fixed

Slide 35

Slide 35 text

RESPONSIVE JAVASCRIPT fittext.js

Slide 36

Slide 36 text

http://fittextjs.com RESPONSIVE JAVASCRIPT fittext.js http://bit.ly/LWLTEA /13-JS-1

Slide 37

Slide 37 text

RESPONSIVE JAVASCRIPT fittext.js

Slide 38

Slide 38 text

http://www.frequency-decoder.com/demo/slabText RESPONSIVE JAVASCRIPT labtext.js http://bit.ly/LWLTEA /15-JS-2

Slide 39

Slide 39 text

RESPONSIVE JAVASCRIPT labtext.js

Slide 40

Slide 40 text

RESPONSIVE JAVASCRIPT espond.js http://scottjehl.github.com/respond

Slide 41

Slide 41 text

RESPONSIVE JAVASCRIPT eCSSential http://github.com/scottjehl/eCSSential A better way to load CSS files? http://github.com/filamentgroup/quickconcat

Slide 42

Slide 42 text

RESPONSIVE JAVASCRIPT matchmedia http://github.com/paulirish/matchMedia.js

Slide 43

Slide 43 text

RESPONSIVE JAVASCRIPT tructuring your code

Slide 44

Slide 44 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens

Slide 45

Slide 45 text

B eak

Slide 46

Slide 46 text

Extra Stuff!

Slide 47

Slide 47 text

RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED

Slide 48

Slide 48 text

Session Eight WHAT’S NEXT 3:15-5:00

Slide 49

Slide 49 text

THE RESPONSIVE DIP

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

THE DIP

Slide 52

Slide 52 text

Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF COMPETENCE

Slide 53

Slide 53 text

THE RESPONSIVE DIP http://bit.ly/MasqBk

Slide 54

Slide 54 text

THE RESPONSIVE MINDSET

Slide 55

Slide 55 text

“The truly responsive design web designer wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” ANDY CLARKE http://the-pastry-box-project.net/andy-clarke/2012-april-8/

Slide 56

Slide 56 text

MOVE BEYOND THE TECHNIQUES

Slide 57

Slide 57 text

• MOBILE FIRST PROCESS • PERFORMANCE AS A FEATURE • THE SERVER IS OUR FRIEND • MODULAR CONTENT SYSTEMS MOVE BEYOND

Slide 58

Slide 58 text

PUSH THROUGH

Slide 59

Slide 59 text

P esenters BEN CALLAHAN MIDDLE-AGED GEEK @bencallahan ROB TARR BEARDED WONDER @robtarr DREW CLEMENS TELLS BAD JOKES @drewtclemens