The page is dead - SXSWi 2012

Jacob SurberWednesday, March 14, 12

Jacob Surber Product Manager HTML Design @jacobsurberWednesday, March 14, 12

History of the PageWednesday, March 14, 12

Source: www://historyofinformation.comWednesday, March 14, 12

Early Mesopotamia Stamping ~2275 BC Source: www://historyofinformation.comWednesday, March 14, 12

Early Mesopotamia Stamping Cylinder Seals ~1700 BC ~2275 BC Source: www://historyofinformation.comWednesday, March 14, 12

Early Mesopotamia Made in China Stamping Cylinder Seals Movable type is invented ~1700 BC ~625 AD ~2275 BC Source: www://historyofinformation.comWednesday, March 14, 12

Johannes Gutenberg 1439 SourceWednesday, March 14, 12

PROTESTS!Wednesday, March 14, 12

PROTESTS! May 1472: Scribes in Italy attempt to block competitionWednesday, March 14, 12

PROTESTS! May 1472: Scribes in Italy attempt to block competition “strangers who print volumes”Wednesday, March 14, 12

Information Overload 1755 It will be almost as convenient to search for some bit of truth concealed in nature as it will be to find it hidden away in an immense multitude of bound volumes." Denis DiderotWednesday, March 14, 12

Wednesday, March 14, 12

". . . 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 Thomas Jefferson reach of accident." Feb 1791Wednesday, March 14, 12

April 1811Wednesday, March 14, 12

1932Wednesday, March 14, 12

1932 1955Wednesday, March 14, 12

1932 1957 1955Wednesday, March 14, 12

1984 Apple introduces the MacWednesday, March 14, 12

Rise of the MACHINEWednesday, March 14, 12

1982Wednesday, March 14, 12

1982 1991Wednesday, March 14, 12

<HTML> December 1997 HTML 4.0 was published as a W3C RecommendationWednesday, March 14, 12

People use the Internet Source: http://news.cnet.com/8301-1023_3-10425965-93.htmlWednesday, March 14, 12

Mobile device explosion Source: conmoz.orgWednesday, March 14, 12

Consuming data at an unprecedented rate Source: Morgan StanleyWednesday, March 14, 12

So many screen so little time Source: www.seesparkbox.comWednesday, March 14, 12

Option 1Wednesday, March 14, 12

Option 1 m.website.comWednesday, March 14, 12

Option 1 m.website.com ipad.website.comWednesday, March 14, 12

Option 1 m.website.com ipad.website.com ipad.landscape.website.comWednesday, March 14, 12

Option 1 m.website.com ipad.website.com ipad.landscape.website.com iphone.4s.website.comWednesday, March 14, 12

I’m a lazy pandaWednesday, March 14, 12

Option 2 Source: vi3x.deviantart.com/art/One-Ring-v3-53651274Wednesday, March 14, 12

Option 2 Build a responsive site Source: vi3x.deviantart.com/art/One-Ring-v3-53651274Wednesday, March 14, 12

m.youDomain.comWednesday, March 14, 12

Source: http://www.flickr.com/photos/zeldman/4009817823/Wednesday, March 14, 12

Responsive Web Design deﬁnes control differentlyWednesday, March 14, 12

Responsive Web Design deﬁnes control differently Aikido Defines a firm center and a soft, adaptable peripheryWednesday, March 14, 12

Source: www.nytimes.comWednesday, March 14, 12

Source: www.bostonglobe.comWednesday, March 14, 12

SourceWednesday, March 14, 12

Ethan Marcotte Source: http://www.flickr.com/photos/superpope/4835938176/Wednesday, March 14, 12

May 2010Wednesday, March 14, 12

May 2010 June 2011Wednesday, March 14, 12

http://upstatement.com/blog/ 2012/01/how-to-approach-a- responsive-design/Wednesday, March 14, 12

Flexible or fluid gridWednesday, March 14, 12

Flexible images & media Flexible or fluid gridWednesday, March 14, 12

Media queries Flexible images & media Flexible or fluid gridWednesday, March 14, 12

How do you build a modern news paper? One piece of type at a time Source: http://www.flickr.com/photos/threedots/115805043/Wednesday, March 14, 12

Flexible GridWednesday, March 14, 12

Fixed Fluid Golden vs vs Grid Grid GridWednesday, March 14, 12

Fixed Grid Source: www.pelicanfly.co.uk/Wednesday, March 14, 12

SourceWednesday, March 14, 12

Fluid Grid target / context = resultWednesday, March 14, 12

target / context = resultWednesday, March 14, 12

target / context = result %Wednesday, March 14, 12

1024 pxWednesday, March 14, 12

960 pxWednesday, March 14, 12

12 columns 60 pxWednesday, March 14, 12

230 px 472 px 230 pxWednesday, March 14, 12

target / context = result target / context = result target / context = resultWednesday, March 14, 12

230 / 960 = 23.95833% 472 / 960 = 49.16666% 230 / 960 = 23.95833%Wednesday, March 14, 12

23.95833% 23.95833% 49.16666%Wednesday, March 14, 12

Source: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlWednesday, March 14, 12

804 388 Source: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlWednesday, March 14, 12

65.9375% 31.875% Source: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlWednesday, March 14, 12

Source: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-flexible.htmlWednesday, March 14, 12

1:1.61803399 Golden GridWednesday, March 14, 12

http://www.anderssonwise.com/Wednesday, March 14, 12

Layout is an enhancement ]Wednesday, March 14, 12

width height device width Media Query Spec device height orientation aspect-ratio device aspect ratio color color-index monochrome resolution scan gridWednesday, March 14, 12

width height device width Media Query Spec device height orientation aspect-ratio device aspect ratio color width color-index monochrome resolution scan gridWednesday, March 14, 12

width height device width Media Query Spec device height orientation aspect-ratio device aspect ratio color width color-index monochrome orientation resolution scan gridWednesday, March 14, 12

width height device width Media Query Spec device height orientation aspect-ratio device aspect ratio color width color-index monochrome orientation resolution -webkit-device-pixel-ratio scan gridWednesday, March 14, 12

Media Queries [ Defaults, your most common styles define first ] @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 audienceWednesday, March 14, 12

“the iPad” 2048 x 1536 px 9.7 inches 265 PPI Source: www.apple.comWednesday, March 14, 12

f r o m p ix e lsWednesday, 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 theyre used for styling." -- Håkon Wium Lie, OperaWednesday, March 14, 12

“Best practices”Wednesday, March 14, 12

“Best practices” Start with low res graphics firstWednesday, March 14, 12

“Best practices” Start with low res graphics first Be resolution independent • CSS • SVG • @font-faceWednesday, March 14, 12

Edward Cant @OpticSwerve Source: http://menacingcloud.com/Wednesday, March 14, 12

HierarchyWednesday, March 14, 12

Hierarchy How you convey importanceWednesday, March 14, 12

Hierarchy How you convey importance How you structure your DOMWednesday, March 14, 12

Hierarchy How you convey importance How you structure your DOM It’s importantWednesday, March 14, 12

Source: www.nytimes.comWednesday, March 14, 12

FAIL Source: www.nytimes.comWednesday, March 14, 12

Don’t die by the gridWednesday, March 14, 12

Don’t die by the grid Think about “modules” of informationWednesday, March 14, 12

DOM order Source: www.seesparkbox.comWednesday, March 14, 12

Interaction on mobile screens • Different kinds of menu options • optimize for touch Source: us.illyissimo.com/Wednesday, March 14, 12

Source: us.illyissimo.com/Wednesday, March 14, 12

Be task oriented Source: us.illyissimo.com/Wednesday, March 14, 12

Be task oriented What do you hope your use to do? Source: us.illyissimo.com/Wednesday, March 14, 12

Be task oriented What do you hope your use to do? How long will users spend? Source: us.illyissimo.com/Wednesday, March 14, 12

Be task oriented What do you hope your use to do? How long will users spend? Where are they going to be? Source: us.illyissimo.com/Wednesday, March 14, 12

Source: http://stephencaver.com/Wednesday, March 14, 12

Flexible images and contentWednesday, March 14, 12

Flexible images and content img { max-width: 100%; }Wednesday, March 14, 12

Flexible images and content img { max-width: 100%; } https://github.com/filamentgroup/Responsive-ImagesWednesday, March 14, 12

Flexible images and content img { max-width: 100%; } https://github.com/filamentgroup/Responsive-Images http://www.w3.org/community/respimg/Wednesday, March 14, 12

CSS Regions and Exclusions DemoWednesday, March 14, 12

box-orient The Flexible Box Model box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines Source: http://www.html5rocks.com/en/tutorials/flexbox/quick/Wednesday, March 14, 12

Object oriented CSS Source: https://github.com/stubbornella/oocss/wikiWednesday, March 14, 12

Next 15 MinutesWednesday, March 14, 12

Frameworks • HTML5 Boilerplate • Skeleton Grid • BootstrapWednesday, March 14, 12

Stuﬀ to read • Responsive Web Design - Ethan Marcotte • http://coding.smashingmagazine.com/2011/01/12/ guidelines-for-responsive-web-design/ • www.alistapart.com • http://www.stuﬀandnonsense.co.uk/Wednesday, March 14, 12

jacobsurber.com @jacobsurberWednesday, March 14, 12

http://lanyrd.com	47
http://storify.com	28
http://richv2.tumblr.com	10
http://www.linkedin.com	4
http://us-w1.rockmelt.com	2

The page is dead - SXSWi 2012

by Jacob Surber on Mar 14, 2012

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 91

Statistics

The page is dead - SXSWi 2012 Presentation Transcript