Slide 1
Slide 1 text
Hands-On Responsive &
Adaptive Web Design
https://github.com/sparkbox/CodeMash-RWD
1
Monday, January 16, 2012
Slide 2
Slide 2 text
Ben Callahan
President of Sparkbox
@bencallahan
http://seesparkbox.com
https://github.com/sparkbox/CodeMash-RWD
2
Monday, January 16, 2012
Slide 3
Slide 3 text
The web is not fixed-width.
3
Monday, January 16, 2012
Slide 4
Slide 4 text
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
Slide 5
Slide 5 text
This is a paradigm shift.
ENIAC, 1946
5
Monday, January 16, 2012
Slide 6
Slide 6 text
This is a paradigm shift.
Micral, 1972
6
Monday, January 16, 2012
Slide 7
Slide 7 text
This is a paradigm shift.
Ericsson R380, 2000
7
Monday, January 16, 2012
Slide 8
Slide 8 text
This is a paradigm shift.
Over 60% of new handset sales are smartphones.
8
Monday, January 16, 2012
Slide 9
Slide 9 text
This is a paradigm shift.
Apple sold around
13 million iPads in
Q4 of 2011.
9
Monday, January 16, 2012
Slide 10
Slide 10 text
This is a paradigm shift.
Amazon sold over
4 million Kindle Fires
in December of 2011.
10
Monday, January 16, 2012
Slide 11
Slide 11 text
Flexibility is the new norm.
11
Monday, January 16, 2012
Slide 12
Slide 12 text
Flexibility is the new norm.
Mobile internet
usage is predicted to
overtake desktop in
the next two years.
12
Monday, January 16, 2012
Slide 13
Slide 13 text
Flexibility is the new norm.
People are trying to browse your
websites on these devices, today.
13
Monday, January 16, 2012
Slide 14
Slide 14 text
Responsive Web Design
Ethan Marcotte
• article on alistapart.com
• book via A Book Apart
14
Monday, January 16, 2012
Slide 15
Slide 15 text
Responsive Web Design
Ethan Marcotte
• stickler on definitions
15
Monday, January 16, 2012
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
A Flexible Foundation
17
Monday, January 16, 2012
Slide 18
Slide 18 text
A Flexible Foundation
18
Monday, January 16, 2012
Slide 19
Slide 19 text
A Flexible Foundation
Open up cm-1.html
The CSS is all in the of the
example files.
19
Monday, January 16, 2012
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
A Flexible Foundation
.span-1, .span-2, .span-3 {
margin-right: 10px;
}
.span-1, .span-2, .span-3 {
margin-right: 3.33333%;
}
Fixed-Width
Fluid
10 / 300 = .0333
21
Monday, January 16, 2012
Slide 22
Slide 22 text
A Flexible Foundation
Turn the 300px 3-column grid into
a fluid grid.
cm-1.html
22
Monday, January 16, 2012
Slide 23
Slide 23 text
A Flexible Foundation
.span-1, .span-2, .span-3 {
margin-right: 10px;
}
.span-1, .span-2, .span-3 {
margin-right: 3%;
}
Fixed-Width
Fluid
9 / 300 = .03
23
Monday, January 16, 2012
Slide 24
Slide 24 text
A Flexible Foundation
www.semantic.gs
with
LESS or SASS
24
Monday, January 16, 2012
Slide 25
Slide 25 text
A Flexible Foundation
There are links to more resources on
this in the readme file.
25
Monday, January 16, 2012
Slide 26
Slide 26 text
Flexible Content
26
Monday, January 16, 2012
Slide 27
Slide 27 text
Flexible Content
img {
float: right;
max-width: 100%;
}
27
Monday, January 16, 2012
Slide 28
Slide 28 text
Flexible Content
28
Monday, January 16, 2012
Slide 29
Slide 29 text
Flexible Content
http://www.netmagazine.com/tutorials/create-fluid-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
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
Major Challenges
• Images
• Ads
• Big Tables
• Complex Navigation
• Process
37
Monday, January 16, 2012
Slide 38
Slide 38 text
Challenge: Images
It’s irresponsible to serve large
images to small screens.
38
Monday, January 16, 2012
Slide 39
Slide 39 text
Challenge: Images
JavaScript
Device Detection
Resize Service
Headers
New ![]()
tag
New format
There are quite a few
potential solutions
39
Monday, January 16, 2012
Slide 40
Slide 40 text
Challenge: Images
JavaScript
Device Detection
Resize Service
Headers
New ![]()
tag
New format
40
Monday, January 16, 2012
40
Monday, January 16, 2012
Slide 41
Slide 41 text
Challenge: Images
Join in the conversation:
@grigs, @scottjehl, @beep, @yoavweiss,
@robertnyman, @necolas
http://cloudfour.com/responsive-imgs/
41
Monday, January 16, 2012
Slide 42
Slide 42 text
Challenge: Ads
Ads are sold based on size and
position, which is dynamic in
responsive web design.
42
Monday, January 16, 2012
Slide 43
Slide 43 text
Challenge: Ads
Boston Globe
Mark Boulton • Use JavaScript to reposition
• Fixed-width and centered
• Clipped at some resolutions
43
Monday, January 16, 2012
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
Challenge: Big Tables
Tables with large amounts of data
become unmanageable at smaller
resolutions.
45
Monday, January 16, 2012
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
Challenge: Big Tables
Switch Orientation
Hide Columns
Visualize
Use CSS to hide specific
columns at certain
resolutions.
47
Monday, January 16, 2012
Slide 48
Slide 48 text
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
Slide 49
Slide 49 text
Challenge: Complex Navigation
Large navigations are challenging
to build and use on small and mid-
sized devices.
49
Monday, January 16, 2012
Slide 50
Slide 50 text
Challenge: Process
Design deliverables become very
difficult to define when so many
resolutions are supported.
50
Monday, January 16, 2012
Slide 51
Slide 51 text
Resources
The readme.md file is a list of resources.
Check it out.
51
Monday, January 16, 2012
Slide 52
Slide 52 text
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
Slide 53
Slide 53 text
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