Build Responsively: Columbus: Day 2

MIDWEST TOUR SPONSORED BY

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

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

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

Join In the Twitters #brworkshop

THANKS TO OUR MIDWEST TOUR SPONSORS

Session Five EMERGING PATTERNS 9:30-10:45

EMERGING PATTERNS navigation

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/

EMERGING PATTERNS tables

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

EMERGING PATTERNS images

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

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.”

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

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

RESPONSIVE TECHNIQUES IN NON-RESPONSIVE ORGANIZATIONS

RESPONSIVE RETROFITTING SOMETHING IS BETTER THAN NOTHING

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

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

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

RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED <html class=”no-js no-mediaquery”> <head>
<script src=”/js/modernizr.js”></script> <script> if ( Modernizr.mq('(min-width: 0px)') ) { $( "html" ).removeClass( "no-mediaquery" ); $( "html" ).addClass( "mediaquery" ); } </script> <link rel="stylesheet" href="/css/base.css"> </head>

/* 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"; } }

/* 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 */ } }

RESPONSIVE RETROFITTING TABLE EXAMPLE

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

Session Seven RESPONSIVE JAVASCRIPT 1:15-3:00

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

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

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

RESPONSIVE JAVASCRIPT fittext.js

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

RESPONSIVE JAVASCRIPT fittext.js

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

RESPONSIVE JAVASCRIPT labtext.js

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

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

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

RESPONSIVE JAVASCRIPT tructuring your code

Extra Stuff!

RESPONSIVE RETROFITTING SMALL RESOLUTION FIRST, CAPPED <link rel="stylesheet" href="stylesheets/base.css">

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

THE RESPONSIVE DIP

THE DIP

Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence STAGES OF
COMPETENCE

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

THE RESPONSIVE MINDSET

“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/

MOVE BEYOND THE TECHNIQUES

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

PUSH THROUGH

Build Responsively: Columbus: Day 2

Build Responsively: Columbus: Day 2

More Decks by Ben Callahan

Other Decks in Design

Featured

Transcript