the page is dead - sxswi 2012
DESCRIPTION
Responsive web design is changing the definition of a "page," as it aims to address the growing variety of device form factors and locations where content is consumed. Additionally, as the web evolves, rules and limitations must be better understood in order to create truly unique content. This session will focus on design philosophy and development techniques to create and adapt your content for maximum impact, regardless of where and how it is consumed.TRANSCRIPT
![Page 1: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/1.jpg)
JacobSurber
Wednesday, March 14, 12
![Page 2: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/2.jpg)
Jacob SurberProduct Manager HTML Design
@jacobsurber
Wednesday, March 14, 12
![Page 3: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/3.jpg)
History of the PageWednesday, March 14, 12
![Page 4: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/4.jpg)
Source: www://historyo!nformation.com Wednesday, March 14, 12
![Page 5: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/5.jpg)
Source: www://historyo!nformation.com
Early MesopotamiaStamping
~2275 BC
Wednesday, March 14, 12
![Page 6: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/6.jpg)
Source: www://historyo!nformation.com
Early MesopotamiaStamping
~2275 BC~1700 BC
Cylinder Seals
Wednesday, March 14, 12
![Page 7: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/7.jpg)
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
![Page 8: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/8.jpg)
Source
1439
Johannes Gutenberg
Wednesday, March 14, 12
![Page 9: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/9.jpg)
PROTESTS!
Wednesday, March 14, 12
![Page 10: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/10.jpg)
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
Wednesday, March 14, 12
![Page 11: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/11.jpg)
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
“strangers who print volumes” Wednesday, March 14, 12
![Page 12: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/12.jpg)
PROTESTS!May 1472:Scribes in Italy a"empt to block competition
“strangers who print volumes” Wednesday, March 14, 12
![Page 13: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/13.jpg)
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
![Page 14: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/14.jpg)
Wednesday, March 14, 12
![Page 15: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/15.jpg)
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
![Page 16: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/16.jpg)
April 1811
Wednesday, March 14, 12
![Page 17: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/17.jpg)
Wednesday, March 14, 12
![Page 18: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/18.jpg)
1932
Wednesday, March 14, 12
![Page 19: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/19.jpg)
1932
1955
Wednesday, March 14, 12
![Page 20: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/20.jpg)
1932
19571955
Wednesday, March 14, 12
![Page 21: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/21.jpg)
1984Apple introduces the Mac
Wednesday, March 14, 12
![Page 22: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/22.jpg)
Rise of the
MACHINE
Wednesday, March 14, 12
![Page 23: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/23.jpg)
Wednesday, March 14, 12
![Page 24: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/24.jpg)
1982
Wednesday, March 14, 12
![Page 25: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/25.jpg)
19821991
Wednesday, March 14, 12
![Page 26: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/26.jpg)
<HTML>December 1997HTML 4.0 was published as a W3C Recommendation
Wednesday, March 14, 12
![Page 27: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/27.jpg)
Source: h"p://news.cnet.com/8301-1023_3-10425965-93.html
People
use the
Internet
Wednesday, March 14, 12
![Page 28: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/28.jpg)
Source: conmoz.org
Mobile device
explosion
Wednesday, March 14, 12
![Page 29: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/29.jpg)
Source: Morgan Stanley
Consuming data at an
unprecedented rate
Wednesday, March 14, 12
![Page 30: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/30.jpg)
Source: www.seesparkbox.com
So many screen so li"le time
Wednesday, March 14, 12
![Page 31: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/31.jpg)
Option 1
Wednesday, March 14, 12
![Page 33: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/33.jpg)
Option 1m.website.comipad.website.com
Wednesday, March 14, 12
![Page 34: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/34.jpg)
Option 1m.website.comipad.website.comipad.landscape.website.com
Wednesday, March 14, 12
![Page 35: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/35.jpg)
Option 1m.website.comipad.website.comipad.landscape.website.comiphone.4s.website.com
Wednesday, March 14, 12
![Page 36: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/36.jpg)
I’m a lazy panda
Wednesday, March 14, 12
![Page 37: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/37.jpg)
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2
Wednesday, March 14, 12
![Page 38: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/38.jpg)
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2
Wednesday, March 14, 12
![Page 39: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/39.jpg)
Source: vi3x.deviantart.com/art/One-Ring-v3-53651274
Option 2Build a responsive site
Wednesday, March 14, 12
![Page 40: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/40.jpg)
m.youDomain.com
Wednesday, March 14, 12
![Page 41: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/41.jpg)
Wednesday, March 14, 12
![Page 42: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/42.jpg)
Source: h"p://www.#ickr.com/photos/zeldman/4009817823/Wednesday, March 14, 12
![Page 43: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/43.jpg)
Responsive Web Designdefines control differently
Wednesday, March 14, 12
![Page 44: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/44.jpg)
Responsive Web Designdefines control differently
AikidoDe!nes a !rm center and a so$, adaptable periphery
Wednesday, March 14, 12
![Page 47: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/47.jpg)
Source: www.bostonglobe.comWednesday, March 14, 12
![Page 48: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/48.jpg)
Source: www.bostonglobe.comWednesday, March 14, 12
![Page 49: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/49.jpg)
SourceWednesday, March 14, 12
![Page 50: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/50.jpg)
SourceWednesday, March 14, 12
![Page 51: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/51.jpg)
SourceWednesday, March 14, 12
![Page 52: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/52.jpg)
SourceWednesday, March 14, 12
![Page 53: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/53.jpg)
Source: h"p://www.#ickr.com/photos/superpope/4835938176/
EthanMarco"e
Wednesday, March 14, 12
![Page 54: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/54.jpg)
Wednesday, March 14, 12
![Page 55: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/55.jpg)
May 2010
Wednesday, March 14, 12
![Page 56: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/56.jpg)
May 2010
June 2011
Wednesday, March 14, 12
![Page 57: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/57.jpg)
Wednesday, March 14, 12
![Page 58: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/58.jpg)
h!p://upstatement.com/blog/2012/01/how-to-approach-a-
responsive-design/
Wednesday, March 14, 12
![Page 59: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/59.jpg)
Wednesday, March 14, 12
![Page 60: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/60.jpg)
Flexible or !uid grid
Wednesday, March 14, 12
![Page 61: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/61.jpg)
Flexible or !uid grid
Flexible images & media
Wednesday, March 14, 12
![Page 62: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/62.jpg)
Flexible or !uid grid
Flexible images & media
Media queries
Wednesday, March 14, 12
![Page 63: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/63.jpg)
Source: www.bostonglobe.comWednesday, March 14, 12
![Page 64: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/64.jpg)
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
![Page 65: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/65.jpg)
Flexible GridWednesday, March 14, 12
![Page 66: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/66.jpg)
GoldenGrid
FixedGrid
vs vsFluidGrid
Wednesday, March 14, 12
![Page 67: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/67.jpg)
Source: www.pelican#y.co.uk/
FixedGrid
Wednesday, March 14, 12
![Page 68: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/68.jpg)
SourceWednesday, March 14, 12
![Page 69: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/69.jpg)
SourceWednesday, March 14, 12
![Page 70: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/70.jpg)
FluidGrid
target / context = result
Wednesday, March 14, 12
![Page 71: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/71.jpg)
target / context = result
Wednesday, March 14, 12
![Page 72: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/72.jpg)
target / context = result
Wednesday, March 14, 12
![Page 73: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/73.jpg)
target / context = result
Wednesday, March 14, 12
![Page 74: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/74.jpg)
%
target / context = result
Wednesday, March 14, 12
![Page 75: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/75.jpg)
1024 px
Wednesday, March 14, 12
![Page 76: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/76.jpg)
960 px
Wednesday, March 14, 12
![Page 77: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/77.jpg)
12 columns60 px
Wednesday, March 14, 12
![Page 78: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/78.jpg)
472 px230 px 230 px
Wednesday, March 14, 12
![Page 79: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/79.jpg)
target / context = result
target / context = resulttarget / context = result
Wednesday, March 14, 12
![Page 80: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/80.jpg)
472 / 960 = 49.16666%
230 / 960 = 23.95833%
230 / 960 = 23.95833%
Wednesday, March 14, 12
![Page 81: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/81.jpg)
49.16666%23
.958
33%
23.9
5833
%
Wednesday, March 14, 12
![Page 82: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/82.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
![Page 83: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/83.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
![Page 84: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/84.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
![Page 85: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/85.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.html
388
804
Wednesday, March 14, 12
![Page 86: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/86.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.html
31.875%
65.9375%
Wednesday, March 14, 12
![Page 87: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/87.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
![Page 88: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/88.jpg)
Source: h"p://www.alistapart.com/d/responsive-web-design/ex/ex-site-#exible.htmlWednesday, March 14, 12
![Page 89: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/89.jpg)
GoldenGrid
1:1.61803399
Wednesday, March 14, 12
![Page 90: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/90.jpg)
Wednesday, March 14, 12
![Page 91: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/91.jpg)
Wednesday, March 14, 12
![Page 92: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/92.jpg)
h"p://www.anderssonwise.com/Wednesday, March 14, 12
![Page 93: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/93.jpg)
h"p://www.anderssonwise.com/Wednesday, March 14, 12
![Page 94: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/94.jpg)
]
Layout is an enhancement
Wednesday, March 14, 12
![Page 95: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/95.jpg)
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
![Page 96: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/96.jpg)
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
![Page 97: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/97.jpg)
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
![Page 98: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/98.jpg)
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
![Page 99: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/99.jpg)
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
![Page 100: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/100.jpg)
Know your audience
Wednesday, March 14, 12
![Page 101: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/101.jpg)
Source: www.apple.com
“the iPad”
2048 x 1536 px
9.7 inches
265 PPIWednesday, March 14, 12
![Page 102: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/102.jpg)
from pixels
Wednesday, March 14, 12
![Page 103: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/103.jpg)
"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
![Page 104: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/104.jpg)
“Best practices”
Wednesday, March 14, 12
![Page 105: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/105.jpg)
“Best practices”Start with low res graphics !rst
Wednesday, March 14, 12
![Page 106: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/106.jpg)
“Best practices”Start with low res graphics !rst
Be resolution independent• CSS• SVG• @font-face
Wednesday, March 14, 12
![Page 107: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/107.jpg)
Source: h"p://menacingcloud.com/
Edward Cant@OpticSwerve
Wednesday, March 14, 12
![Page 108: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/108.jpg)
Hierarchy
Wednesday, March 14, 12
![Page 109: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/109.jpg)
HierarchyHow you convey importance
Wednesday, March 14, 12
![Page 110: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/110.jpg)
Hierarchy
How you structure your DOM
How you convey importance
Wednesday, March 14, 12
![Page 111: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/111.jpg)
Hierarchy
How you structure your DOM
How you convey importance
It’s important
Wednesday, March 14, 12
![Page 115: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/115.jpg)
Don’t die by the grid
Wednesday, March 14, 12
![Page 116: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/116.jpg)
Don’t die by the grid
%ink about“modules”of information
Wednesday, March 14, 12
![Page 117: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/117.jpg)
Source: www.bostonglobe.comWednesday, March 14, 12
![Page 118: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/118.jpg)
Wednesday, March 14, 12
![Page 119: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/119.jpg)
Source: www.seesparkbox.com
DOM order
Wednesday, March 14, 12
![Page 120: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/120.jpg)
Source: www.seesparkbox.com
DOM order
Wednesday, March 14, 12
![Page 121: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/121.jpg)
Source: us.illyissimo.com/
Interaction on mobile
screens• Different kinds of menu options
• optimize for touch
Wednesday, March 14, 12
![Page 122: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/122.jpg)
Source: us.illyissimo.com/Wednesday, March 14, 12
![Page 123: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/123.jpg)
Source: us.illyissimo.com/
Be task oriented
Wednesday, March 14, 12
![Page 124: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/124.jpg)
Source: us.illyissimo.com/
Be task oriented
What do you hope your use to do?
Wednesday, March 14, 12
![Page 125: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/125.jpg)
Source: us.illyissimo.com/
Be task oriented
What do you hope your use to do?
How long will users spend?
Wednesday, March 14, 12
![Page 126: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/126.jpg)
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
![Page 127: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/127.jpg)
Source: h"p://stephencaver.com/Wednesday, March 14, 12
![Page 128: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/128.jpg)
Source: h"p://stephencaver.com/Wednesday, March 14, 12
![Page 129: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/129.jpg)
Source: h"p://stephencaver.com/Wednesday, March 14, 12
![Page 130: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/130.jpg)
Flexible images and content
Wednesday, March 14, 12
![Page 131: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/131.jpg)
Flexible images and content
img { max-width: 100%;}
Wednesday, March 14, 12
![Page 132: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/132.jpg)
Flexible images and content
img { max-width: 100%;}
h!ps://github.com/"lamentgroup/Responsive-Images
Wednesday, March 14, 12
![Page 133: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/133.jpg)
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
![Page 134: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/134.jpg)
CSS Regions and Exclusions
Demo
Wednesday, March 14, 12
![Page 135: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/135.jpg)
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
![Page 136: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/136.jpg)
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
![Page 137: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/137.jpg)
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
![Page 138: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/138.jpg)
Source: h"ps://github.com/stubbornella/oocss/wiki
Object oriented CSS
Wednesday, March 14, 12
![Page 139: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/139.jpg)
Next15
MinutesWednesday, March 14, 12
![Page 140: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/140.jpg)
Frameworks
• HTML5 Boilerplate
• Skeleton Grid
• Bootstrap
Wednesday, March 14, 12
![Page 141: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/141.jpg)
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
![Page 142: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/142.jpg)
Wednesday, March 14, 12
![Page 143: The page is dead - SXSWi 2012](https://reader036.vdocuments.us/reader036/viewer/2022062617/54c783e74a7959a04b8b459c/html5/thumbnails/143.jpg)
jacobsurber.com@jacobsurber
Wednesday, March 14, 12