JacobSurber
Wednesday, March 14, 12
Jacob SurberProduct Manager HTML Design
@jacobsurber
Wednesday, March 14, 12
History of the PageWednesday, March 14, 12
Source: www://historyo!nformation.com Wednesday, March 14, 12
Source: www://historyo!nformation.com
Early MesopotamiaStamping
~2275 BC
Wednesday, March 14, 12
Source: www://historyo!nformation.com
Early MesopotamiaStamping
~2275 BC~1700 BC
Cylinder Seals
Wednesday, March 14, 12
Source: www://historyo!nformation.com
Early MesopotamiaStamping
~2275 BC~1700 BC
Cylinder Seals
Made in China
~625 AD
Movable type is invented
Wednesday, March 14, 12
Source
1439
Johannes Gutenberg
Wednesday, March 14, 12
PROTESTS!
Wednesday, March 14, 12
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
Wednesday, March 14, 12
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
“strangers who print volumes” Wednesday, March 14, 12
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
“strangers who print volumes” Wednesday, March 14, 12
1755Information Overload
Denis Diderot
It will be almost as convenient to search for some bit of truth concealed in nature as it will be to !nd it hidden away in an immense multitude of bound volumes."
Wednesday, March 14, 12
Wednesday, March 14, 12
Thomas JeffersonFeb 1791
". . . let us save what remains: not by vaults and locks which fence them from the public eye and use in consigning them to the waste of time, but by such a multiplication of copies, as shall place them beyond the reach of accident."
Wednesday, March 14, 12
April 1811
Wednesday, March 14, 12
Wednesday, March 14, 12
1932
Wednesday, March 14, 12
1932
1955
Wednesday, March 14, 12
1932
19571955
Wednesday, March 14, 12
1984Apple introduces the Mac
Wednesday, March 14, 12
Rise of the
MACHINE
Wednesday, March 14, 12
Wednesday, March 14, 12
1982
Wednesday, March 14, 12
19821991
Wednesday, March 14, 12
<HTML>December 1997HTML 4.0 was published as a W3C Recommendation
Wednesday, March 14, 12
Source: h"p://news.cnet.com/8301-1023_3-10425965-93.html
People
use the
Internet
Wednesday, March 14, 12
Source: conmoz.org
Mobile device
explosion
Wednesday, March 14, 12
Source: Morgan Stanley
Consuming data at an
unprecedented rate
Wednesday, March 14, 12
Source: www.seesparkbox.com
So many screen so li"le time
Wednesday, March 14, 12
Option 1
Wednesday, March 14, 12
Option 1m.website.comipad.website.com
Wednesday, March 14, 12
Option 1m.website.comipad.website.comipad.landscape.website.com
Wednesday, March 14, 12
Option 1m.website.comipad.website.comipad.landscape.website.comiphone.4s.website.com
Wednesday, March 14, 12
I’m a lazy panda
Wednesday, March 14, 12
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2
Wednesday, March 14, 12
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2
Wednesday, March 14, 12
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2Build a responsive site
Wednesday, March 14, 12
m.youDomain.com
Wednesday, March 14, 12
Wednesday, March 14, 12
Source: h"p://www.#ickr.com/photos/zeldman/4009817823/Wednesday, March 14, 12
Responsive Web Designdefines control differently
Wednesday, March 14, 12
Responsive Web Designdefines control differently
AikidoDe!nes a !rm center and a so$, adaptable periphery
Wednesday, March 14, 12
Source: www.bostonglobe.comWednesday, March 14, 12
Source: www.bostonglobe.comWednesday, March 14, 12
SourceWednesday, March 14, 12
SourceWednesday, March 14, 12
SourceWednesday, March 14, 12
SourceWednesday, March 14, 12
Source: h"p://www.#ickr.com/photos/superpope/4835938176/
EthanMarco"e
Wednesday, March 14, 12
Wednesday, March 14, 12
May 2010
Wednesday, March 14, 12
May 2010
June 2011
Wednesday, March 14, 12
Wednesday, March 14, 12
h!p://upstatement.com/blog/2012/01/how-to-approach-a-
responsive-design/
Wednesday, March 14, 12
Wednesday, March 14, 12
Flexible or !uid grid
Wednesday, March 14, 12
Flexible or !uid grid
Flexible images & media
Wednesday, March 14, 12
Flexible or !uid grid
Flexible images & media
Media queries
Wednesday, March 14, 12
Source: www.bostonglobe.comWednesday, March 14, 12
Source: h"p://www.#ickr.com/photos/threedots/115805043/
How do you build a modern
news paper?
One piece of type at a time
Wednesday, March 14, 12
Flexible GridWednesday, March 14, 12
GoldenGrid
FixedGrid
vs vsFluidGrid
Wednesday, March 14, 12
Source: www.pelican#y.co.uk/
FixedGrid
Wednesday, March 14, 12
SourceWednesday, March 14, 12
SourceWednesday, March 14, 12
FluidGrid
target / context = result
Wednesday, March 14, 12
target / context = result
Wednesday, March 14, 12
target / context = result
Wednesday, March 14, 12
target / context = result
Wednesday, March 14, 12
%
target / context = result
Wednesday, March 14, 12
1024 px
Wednesday, March 14, 12
960 px
Wednesday, March 14, 12
12 columns60 px
Wednesday, March 14, 12
472 px230 px 230 px
Wednesday, March 14, 12
target / context = result
target / context = resulttarget / context = result
Wednesday, March 14, 12
472 / 960 = 49.16666%
230 / 960 = 23.95833%
230 / 960 = 23.95833%
Wednesday, March 14, 12
49.16666%23
.958
33%
23.9
5833
%
Wednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.html
388
804
Wednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.html
31.875%
65.9375%
Wednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
GoldenGrid
1:1.61803399
Wednesday, March 14, 12
Wednesday, March 14, 12
Wednesday, March 14, 12
h"p://www.anderssonwise.com/Wednesday, March 14, 12
h"p://www.anderssonwise.com/Wednesday, March 14, 12
]
Layout is an enhancement
Wednesday, March 14, 12
Media Query Specwidth
height
device width
device height
orientation
aspect-ratio
device aspect ratio
color
color-index
monochrome
resolution
scan
grid
Wednesday, March 14, 12
Media Query Specwidth
height
device width
device height
orientation
aspect-ratio
device aspect ratio
color
color-index
monochrome
resolution
scan
grid
width
Wednesday, March 14, 12
Media Query Specwidth
height
device width
device height
orientation
aspect-ratio
device aspect ratio
color
color-index
monochrome
resolution
scan
grid
widthorientation
Wednesday, March 14, 12
Media Query Specwidth
height
device width
device height
orientation
aspect-ratio
device aspect ratio
color
color-index
monochrome
resolution
scan
grid
-webkit-device-pixel-ratio
widthorientation
Wednesday, March 14, 12
Media Queries
[ Defaults, your most common styles de!ne !rst ]
@media screen (min-width: 1024px) and (max-width: 1220px) { ... }@media screen (min-width: 768px) and (max-width: 1023px) { ... }@media screen (min-width: 480px) and (max-width: 767px) { ... }@media screen (min-width: 320px) and (max-width: 479px) { ... }
Wednesday, March 14, 12
Know your audience
Wednesday, March 14, 12
Source: www.apple.com
“the iPad”
2048 x 1536 px
9.7 inches
265 PPIWednesday, March 14, 12
from pixels
Wednesday, March 14, 12
"If we use these techniques right [HTML and CSS3], we can get rid of half of the images on the web, because they're used for styling." -- Håkon Wium Lie, Opera
Wednesday, March 14, 12
“Best practices”
Wednesday, March 14, 12
“Best practices”Start with low res graphics !rst
Wednesday, March 14, 12
“Best practices”Start with low res graphics !rst
Be resolution independent• CSS• SVG• @font-face
Wednesday, March 14, 12
Source: h"p://menacingcloud.com/
Edward Cant@OpticSwerve
Wednesday, March 14, 12
Hierarchy
Wednesday, March 14, 12
HierarchyHow you convey importance
Wednesday, March 14, 12
Hierarchy
How you structure your DOM
How you convey importance
Wednesday, March 14, 12
Hierarchy
How you structure your DOM
How you convey importance
It’s important
Wednesday, March 14, 12
Don’t die by the grid
Wednesday, March 14, 12
Don’t die by the grid
%ink about“modules”of information
Wednesday, March 14, 12
Source: www.bostonglobe.comWednesday, March 14, 12
Wednesday, March 14, 12
Source: www.seesparkbox.com
DOM order
Wednesday, March 14, 12
Source: www.seesparkbox.com
DOM order
Wednesday, March 14, 12
Source: us.illyissimo.com/
Interaction on mobile
screens• Different kinds of menu options
• optimize for touch
Wednesday, March 14, 12
Source: us.illyissimo.com/Wednesday, March 14, 12
Source: us.illyissimo.com/
Be task oriented
Wednesday, March 14, 12
Source: us.illyissimo.com/
Be task oriented
What do you hope your use to do?
Wednesday, March 14, 12
Source: us.illyissimo.com/
Be task oriented
What do you hope your use to do?
How long will users spend?
Wednesday, March 14, 12
Source: us.illyissimo.com/
Be task oriented
What do you hope your use to do?
How long will users spend?
Where are they going to be?
Wednesday, March 14, 12
Source: h"p://stephencaver.com/Wednesday, March 14, 12
Source: h"p://stephencaver.com/Wednesday, March 14, 12
Source: h"p://stephencaver.com/Wednesday, March 14, 12
Flexible images and content
Wednesday, March 14, 12
Flexible images and content
img { max-width: 100%;}
Wednesday, March 14, 12
Flexible images and content
img { max-width: 100%;}
h!ps://github.com/"lamentgroup/Responsive-Images
Wednesday, March 14, 12
Flexible images and content
img { max-width: 100%;}
h!ps://github.com/"lamentgroup/Responsive-Images
h!p://www.w3.org/community/respimg/
Wednesday, March 14, 12
CSS Regions and Exclusions
Demo
Wednesday, March 14, 12
Source: h"p://www.html5rocks.com/en/tutorials/#exbox/quick/
%e Flexible Box Modelbox-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
Wednesday, March 14, 12
Source: h"p://www.html5rocks.com/en/tutorials/#exbox/quick/
%e Flexible Box Modelbox-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
Wednesday, March 14, 12
Source: h"p://www.html5rocks.com/en/tutorials/#exbox/quick/
%e Flexible Box Modelbox-orient
box-pack
box-align
box-flex
box-flex-group
box-ordinal-group
box-direction
box-lines
Wednesday, March 14, 12
Source: h"ps://github.com/stubbornella/oocss/wiki
Object oriented CSS
Wednesday, March 14, 12
Next15
MinutesWednesday, March 14, 12
Frameworks
• HTML5 Boilerplate
• Skeleton Grid
• Bootstrap
Wednesday, March 14, 12
Stuff to read
• Responsive Web Design - Ethan Marco"e
• h"p://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
• www.alistapart.com
• h"p://www.stuffandnonsense.co.uk/
Wednesday, March 14, 12
Wednesday, March 14, 12
jacobsurber.com@jacobsurber
Wednesday, March 14, 12