An Introduction to Responsive & Adaptive Web Design

Hands-On Responsive & Adaptive Web Design https://github.com/sparkbox/CodeMash-RWD 1 Monday, January
16, 2012

Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com https://github.com/sparkbox/CodeMash-RWD 2 Monday,
January 16, 2012

The web is not fixed-width. 3 Monday, January 16, 2012

This is a paradigm shift. “...scientific advancement is not evolutionary,
but rather is a series of peaceful interludes punctuated by intellectually violent revolutions, and in those revolutions one conceptual world is replaced by another...” Thomas Kuhn 4 Monday, January 16, 2012

This is a paradigm shift. ENIAC, 1946 5 Monday, January
16, 2012

This is a paradigm shift. Micral, 1972 6 Monday, January
16, 2012

This is a paradigm shift. Ericsson R380, 2000 7 Monday,
January 16, 2012

This is a paradigm shift. Over 60% of new handset
sales are smartphones. 8 Monday, January 16, 2012

This is a paradigm shift. Apple sold around 13 million
iPads in Q4 of 2011. 9 Monday, January 16, 2012

This is a paradigm shift. Amazon sold over 4 million
Kindle Fires in December of 2011. 10 Monday, January 16, 2012

Flexibility is the new norm. 11 Monday, January 16, 2012

Flexibility is the new norm. Mobile internet usage is predicted
to overtake desktop in the next two years. 12 Monday, January 16, 2012

Flexibility is the new norm. People are trying to browse
your websites on these devices, today. 13 Monday, January 16, 2012

Responsive Web Design Ethan Marcotte • article on alistapart.com •
book via A Book Apart 14 Monday, January 16, 2012

Responsive Web Design Ethan Marcotte • stickler on definitions 15
Monday, January 16, 2012

Responsive Web Design • A flexible foundation (fluid grid) •
Flexible content (images, video, etc.) • Media queries https://github.com/sparkbox/CodeMash-RWD 16 Monday, January 16, 2012

A Flexible Foundation 17 Monday, January 16, 2012

A Flexible Foundation <div class=”span-1”>  </div>
<div class=”span-2”>  </div> <div class=”span-3”>  </div> 18 Monday, January 16, 2012

A Flexible Foundation Open up cm-1.html The CSS is all
in the <head> of the example files. 19 Monday, January 16, 2012

A Flexible Foundation .span-1, .span-2, .span-3 { margin-right: 10px; }
.span-1, .span-2, .span-3 { margin-right: /* ??% */ } Fixed-Width Fluid 20 Monday, January 16, 2012

.span-1, .span-2, .span-3 { margin-right: 3.33333%; } Fixed-Width Fluid 10 / 300 = .0333 21 Monday, January 16, 2012

A Flexible Foundation Turn the 300px 3-column grid into a
fluid grid. cm-1.html 22 Monday, January 16, 2012

.span-1, .span-2, .span-3 { margin-right: 3%; } Fixed-Width Fluid 9 / 300 = .03 23 Monday, January 16, 2012

A Flexible Foundation www.semantic.gs with LESS or SASS 24 Monday,
January 16, 2012

A Flexible Foundation There are links to more resources on
this in the readme file. 25 Monday, January 16, 2012

Flexible Content 26 Monday, January 16, 2012

Flexible Content img { float: right; max-width: 100%; } 27
Monday, January 16, 2012

Flexible Content 28 Monday, January 16, 2012

Flexible Content http://www.netmagazine.com/tutorials/create-ﬂuid-width-videos • set width to 100%, remove height
• add a wrapper to maintain aspect ratio • use JS to detect and maintain size 29 Monday, January 16, 2012

Media Queries • width, height • device-width, device-height • orientation
• aspect ratio • several others http://www.w3.org/TR/css3-mediaqueries/ 30 Monday, January 16, 2012

Media Queries @media only screen and (min-width: 600px) { /*
styles for 600px and up here */ } @media only screen and (max-width: 600px) { /* styles for 600px and down here */ } 31 Monday, January 16, 2012

Media Queries /* Large Resolution First CSS File Structure */
/* large resolution layouts here */ @media only screen and (max-width: 850px) { /* styles for 850px and down here */ } @media only screen and (max-width: 450px) { /* styles for 450px and down here */ } 32 Monday, January 16, 2012

Media Queries /* Small Resolution First CSS File Structure */
/* smallest resolution layouts here */ @media only screen and (min-width: 450px) { /* styles for 450px and up here */ } @media only screen and (min-width: 850px) { /* styles for 850px and up here */ } 33 Monday, January 16, 2012

Media Queries Large Resolution First PRO: IE support by default
CON: Smallest devices load all assets Small Resolution First PRO: More logical (build up vs tear down) CON: IE support is tricky 34 Monday, January 16, 2012

Media Queries Large Resolution First PRO: IE support by default
CON: Smallest devices load all assets Small Resolution First PRO: More logical (build up vs tear down) CON: IE support is tricky 35 Monday, January 16, 2012

How We Do It Use a fluid grid. Keep your
eye on the image issue. Mobile first CSS. Test on actual devices. 36 Monday, January 16, 2012

Major Challenges • Images • Ads • Big Tables •
Complex Navigation • Process 37 Monday, January 16, 2012

Challenge: Images It’s irresponsible to serve large images to small
screens. 38 Monday, January 16, 2012

Challenge: Images JavaScript Device Detection Resize Service Headers New <img>
tag New format There are quite a few potential solutions 39 Monday, January 16, 2012

Challenge: Images JavaScript Device Detection Resize Service Headers New <img>
tag New format <img src="tiny.jpg"> <source src="bigger.jpg" media="min-width:600px"> <source src="biggest.jpg" media="min-width:900px"> </img> 40 Monday, January 16, 2012

Challenge: Images Join in the conversation: @grigs, @scottjehl, @beep, @yoavweiss,
@robertnyman, @necolas http://cloudfour.com/responsive-imgs/ 41 Monday, January 16, 2012

Challenge: Ads Ads are sold based on size and position,
which is dynamic in responsive web design. 42 Monday, January 16, 2012

Challenge: Ads Boston Globe Mark Boulton • Use JavaScript to
reposition • Fixed-width and centered • Clipped at some resolutions 43 Monday, January 16, 2012

Challenge: Ads Boston Globe Mark Boulton Mark wrote a solid
summary of the major issues he’s facing while working on this. (Google “responsive advertising”) 44 Monday, January 16, 2012

Challenge: Big Tables Tables with large amounts of data become
unmanageable at smaller resolutions. 45 Monday, January 16, 2012

Challenge: Big Tables Switch Orientation Hide Columns Visualize Chris Coyer
originally suggested that we use some CSS to change the orientation. 46 Monday, January 16, 2012

Challenge: Big Tables Switch Orientation Hide Columns Visualize Use CSS
to hide specific columns at certain resolutions. 47 Monday, January 16, 2012

Challenge: Big Tables Switch Orientation Hide Columns Visualize We could
replace the table of data with a chart that provides a summary. 48 Monday, January 16, 2012

Challenge: Complex Navigation Large navigations are challenging to build and
use on small and mid- sized devices. 49 Monday, January 16, 2012

Challenge: Process Design deliverables become very difficult to define when
so many resolutions are supported. 50 Monday, January 16, 2012

Resources The readme.md file is a list of resources. Check
it out. 51 Monday, January 16, 2012

Thanks. Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com I’ll be
publishing this presentation soon. Follow me on Twitter for more info. 52 Monday, January 16, 2012

And, finally... Ben Callahan President of Sparkbox @bencallahan http://seesparkbox.com Responsive
web design is always the right decision, but it’s not always the only decision. (a bit of controversy to discuss instead of questions...) 53 Monday, January 16, 2012

An Introduction to Responsive & Adaptive Web De...

An Introduction to Responsive & Adaptive Web Design

More Decks by Ben Callahan

Other Decks in Design

Featured

Transcript