Download - Designing an Adaptable Web
![Page 1: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/1.jpg)
DESIGNING AN
ADAPTABLEWEB
Thursday, February 17, 2011
![Page 2: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/2.jpg)
WWW:H MARIBORPRODUCTION
Thursday, February 17, 2011
![Page 3: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/3.jpg)
NATAN NIKOLI!TALK
@natannikolic - natannikolic.com/particles
Thursday, February 17, 2011
![Page 4: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/4.jpg)
Thursday, February 17, 2011
![Page 5: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/5.jpg)
““Two decades after its birth, the World Wide Web is in decline, as simpler, sleeker services — think apps — are less about the searching and more about the getting.
Thursday, February 17, 2011
![Page 6: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/6.jpg)
Thursday, February 17, 2011
![Page 7: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/7.jpg)
0%
10%
20%
30%
40%
50%
60%
70%
broadbanddial-up
http://www.websiteoptimization.com/bw/1008/
Thursday, February 17, 2011
![Page 8: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/8.jpg)
2005 2007 2009
mobile broadbandfixed broadband
http://viodi.com/2009/07/28/mobile-broadband/
Thursday, February 17, 2011
![Page 9: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/9.jpg)
Thursday, February 17, 2011
![Page 10: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/10.jpg)
WEB
ALL TRAFFIC
Size of web comparing to all internet tra!c back in 2000
Thursday, February 17, 2011
![Page 11: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/11.jpg)
WEB
ALL TRAFFIC
Size of web tra!c comparing to all internet tra!c today
Thursday, February 17, 2011
![Page 12: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/12.jpg)
YOUR OPPINION
MAN
YEAH, BUT THAT’S LIKE
Thursday, February 17, 2011
![Page 13: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/13.jpg)
“In fact, between 1995 and 2006, the total amount of web tra!c went from about 10 terabytes a month to 1,000,000 terabytes (1 exabyte) ... 1 exabyte to 7 exabytes between 2005 and 2010.
Thursday, February 17, 2011
![Page 14: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/14.jpg)
Thursday, February 17, 2011
![Page 15: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/15.jpg)
KILLED BYDIVER-GENCE
Thursday, February 17, 2011
![Page 16: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/16.jpg)
DESKTOP
1024x768
800x600
Thursday, February 17, 2011
![Page 17: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/17.jpg)
MOBILE
1024x768
800x600
320x240
220x176
160x120
Thursday, February 17, 2011
![Page 18: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/18.jpg)
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile > Desktop
Internet Trends (87 pages) - Morgan Stanley Internet Trends
Thursday, February 17, 2011
![Page 19: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/19.jpg)
MOBILE?
1024x768
800x600
320x240
220x176
160x120
480x320
640x480
Thursday, February 17, 2011
![Page 20: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/20.jpg)
“If you think this is hard to develop for, wait and see what lies ahead of us in the future!
Thursday, February 17, 2011
![Page 21: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/21.jpg)
“The future is already here – it's just unevenly distributed.— William Gibson
Thursday, February 17, 2011
![Page 22: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/22.jpg)
“... As much as we love the open, unfettered Web, we’re abandoning it for simpler, sleeker services that just work ...
Thursday, February 17, 2011
![Page 23: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/23.jpg)
“This is the natural path of industrialization: invention, propagation, adoption, control.
Thursday, February 17, 2011
![Page 24: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/24.jpg)
THERE’SSOMETHINGABOUTAPPS
Thursday, February 17, 2011
![Page 25: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/25.jpg)
“Delo for iOS
Thursday, February 17, 2011
![Page 26: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/26.jpg)
“Delo for Android
Thursday, February 17, 2011
![Page 27: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/27.jpg)
“Delo for WP7
Thursday, February 17, 2011
![Page 28: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/28.jpg)
“Delo for WebOS
Thursday, February 17, 2011
![Page 29: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/29.jpg)
“Delo for BlackBerry
Thursday, February 17, 2011
![Page 30: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/30.jpg)
GOING AFTER
APPLI-CANTS
Thursday, February 17, 2011
![Page 31: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/31.jpg)
“New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). —Steve Jobs
Thursday, February 17, 2011
![Page 32: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/32.jpg)
“Using Qt, you can write web-enabled applications once and deploy them across desktop, mobile and embedded operating systems without rewriting the source code.
Thursday, February 17, 2011
![Page 33: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/33.jpg)
“Quickly create native smartphone apps with the award-winning Rhodes (Ruby-based) framework. Build online without installing SDKs locally.
Thursday, February 17, 2011
![Page 34: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/34.jpg)
“Open source, cross platform mobile development Java ME, Symbian, Windows Mobile, iOS, Android
Thursday, February 17, 2011
![Page 35: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/35.jpg)
“A free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences with Javascript, HTML, CSS, Python, Ruby, and PHP.
Thursday, February 17, 2011
![Page 36: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/36.jpg)
“Build apps in HTML and JavaScript and still take advantage of core features in iPhone/iPod touch, iPad, Google Android, Palm, Symbian and Blackberry SDKs
Thursday, February 17, 2011
![Page 37: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/37.jpg)
REDPILL
BLUEPILL
VS
Thursday, February 17, 2011
![Page 38: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/38.jpg)
REDOPEN
BLUEOLIGOPOLY
VS
Thursday, February 17, 2011
![Page 39: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/39.jpg)
“Where you innovate, how you innovate, and what you innovate are design problems. —Tim Brown (CEO IDEO)
Thursday, February 17, 2011
![Page 40: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/40.jpg)
““ The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must ‘accept the ebb and flow of things’.— John Allsopp, “A Dao of Web Design” (2000)
Thursday, February 17, 2011
![Page 41: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/41.jpg)
“We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them.—Ethan Marcotte, “Responsive Web Design” (2010)
Thursday, February 17, 2011
![Page 42: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/42.jpg)
RESPONSIVEARCHITECTURE
Thursday, February 17, 2011
![Page 43: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/43.jpg)
RESPONSIVEMATERIALS
Thursday, February 17, 2011
![Page 44: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/44.jpg)
RESPONSIVEMATERIALS
Thursday, February 17, 2011
![Page 45: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/45.jpg)
RESPONSIVEOBJECTS
Thursday, February 17, 2011
![Page 46: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/46.jpg)
THERE IS NO
FIXEDWIDTH
Thursday, February 17, 2011
![Page 47: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/47.jpg)
Fluid layoutDisplayed at 1440px
Thursday, February 17, 2011
![Page 48: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/48.jpg)
Fluid layoutDisplayed at cca. 1000px
Thursday, February 17, 2011
![Page 49: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/49.jpg)
Fluid layoutDisplayed at cca. 500px
Thursday, February 17, 2011
![Page 50: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/50.jpg)
Responsive layouthttp://colly.com displayed at 1440px
Thursday, February 17, 2011
![Page 51: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/51.jpg)
Responsive layouthttp://colly.com displayed at cca. 1000px
Thursday, February 17, 2011
![Page 52: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/52.jpg)
Responsive layouthttp://colly.com displayed at cca. 400px
Thursday, February 17, 2011
![Page 54: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/54.jpg)
Responsive layout/* Smartphones (portrait and landscape) ------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
Thursday, February 17, 2011
![Page 55: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/55.jpg)
Responsive layout/* iPads (portrait and landscape) ---------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
Thursday, February 17, 2011
![Page 56: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/56.jpg)
Responsive layout/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }
Thursday, February 17, 2011
![Page 57: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/57.jpg)
Responsive layout/* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
Thursday, February 17, 2011
![Page 58: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/58.jpg)
Responsive layoutaspect-ratio, device-aspect-ratio, color, color-index, device-height, device-width, grid, height, monochrome, orientation, resolution, scan, width
Thursday, February 17, 2011
![Page 59: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/59.jpg)
HARDBOILED
Thursday, February 17, 2011
![Page 62: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/62.jpg)
“Why are we once again writing for only one browser? Is Webkit the new Internet Explorer?— Brian Rieger
Thursday, February 17, 2011
![Page 63: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/63.jpg)
BROWSERWARS
Thursday, February 17, 2011
![Page 64: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/64.jpg)
35%
21%9%3%
3%3%3%
24%
NokiaSamsungLGBlackBerrySony EricssonMotorolaAppleOthers
Market shareWorldwide Mobile Terminal Sales in 1Q10
http://www.gartner.com/it/page.jsp?id=1372013
Thursday, February 17, 2011
![Page 65: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/65.jpg)
33%
31%
16%
14%3%3%Android
SymbianAppleRIMWindows MobileOther
Market shareWorldwide Smartphone Sales by OS in 4Q10
http://en.wikipedia.org/wiki/Smartphone
Thursday, February 17, 2011
![Page 66: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/66.jpg)
Thursday, February 17, 2011
![Page 67: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/67.jpg)
Traditional approachFull desktop website
Thursday, February 17, 2011
![Page 68: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/68.jpg)
Traditional approachFull desktop website + @media-queries
Thursday, February 17, 2011
![Page 71: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/71.jpg)
SLIGHTLYUPSIDEDOWNDON’T YOU THINK?
Thursday, February 17, 2011
![Page 72: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/72.jpg)
“Web products should be designed for mobile first. (Even if no mobile version is planned.)— Luke Wroblewski
Thursday, February 17, 2011
![Page 74: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/74.jpg)
Di!erent approach= mobile website + @media-queries
Thursday, February 17, 2011
![Page 75: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/75.jpg)
Di!erent approach= Full desktop website
Thursday, February 17, 2011
![Page 77: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/77.jpg)
DEALING WITH THEUSUALSIESPECT
Thursday, February 17, 2011
![Page 78: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/78.jpg)
IE JavaScript fallbacksRespond.js
Thursday, February 17, 2011
![Page 79: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/79.jpg)
IE JavaScript fallbacksCSS3-MediaQueries-JS
Thursday, February 17, 2011
![Page 80: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/80.jpg)
Less Frameworklessframework.com
Thursday, February 17, 2011
![Page 81: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/81.jpg)
IT’S NOT AFEATURE(EVEN IF IT GOES UP TO ELEVEN)
Thursday, February 17, 2011
![Page 82: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/82.jpg)
CAPTAIN,BUT WHAT ABOUT THEHARDWARE
Thursday, February 17, 2011
![Page 83: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/83.jpg)
Touchscreen184 million touchscreens devices in 2009estimated 96.8% increase at 362 million in 2010
Thursday, February 17, 2011
![Page 84: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/84.jpg)
Touch target sizesMake it cosy for our fat thumbs to use!
Thursday, February 17, 2011
![Page 85: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/85.jpg)
Don’t count on hoversThere is no hover when you are using your fingers!
Thursday, February 17, 2011
![Page 86: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/86.jpg)
Touch gesturesSame, same but di"erent!
Thursday, February 17, 2011
![Page 87: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/87.jpg)
Touch gesturesEven inside the browser!
Thursday, February 17, 2011
![Page 88: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/88.jpg)
Gestures as input
Thursday, February 17, 2011
![Page 89: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/89.jpg)
Device orientation*Hint* remember @media-queries?
Thursday, February 17, 2011
![Page 90: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/90.jpg)
Accelerometer & gyroscope
Thursday, February 17, 2011
![Page 91: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/91.jpg)
Orientation as inputEven inside the browser!
Thursday, February 17, 2011
![Page 92: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/92.jpg)
Location as inputEven inside the browser!
Thursday, February 17, 2011
![Page 93: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/93.jpg)
Voice as inputSiri - personal ass-in-an-instant
Thursday, February 17, 2011
![Page 94: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/94.jpg)
Video & location & orientation as inputAugmented Reality
Thursday, February 17, 2011
![Page 95: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/95.jpg)
Desktop shortcutsSame, same but di"erent!
Thursday, February 17, 2011
![Page 96: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/96.jpg)
REDOPEN
BLUEOLIGOPOLY
VS
Thursday, February 17, 2011
![Page 97: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/97.jpg)
“What telecoms firms want is the right for companies to pay a premium to have their content delivered faster than rival content, or to establish new layer of faster internet on which to to serve paying, premium services.
Thursday, February 17, 2011
![Page 98: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/98.jpg)
“A free and open internet is the single greatest technology of our culture, and control should not be at the mercy of corporations.—www.theopeninter.net
Thursday, February 17, 2011
![Page 99: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/99.jpg)
FINSPECIAL THANKS TO
Thursday, February 17, 2011
![Page 100: Designing an Adaptable Web](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555cf4b4d8b42a08668b4df1/html5/thumbnails/100.jpg)
LUKE WROBLEWSKIETHAN MARCOTTE
BRYAN RIEGERANDY CLARKEJEREMY KEITH
TERMINATORPULP
THE BIGSE7EN
THERE’S SOMETHINGBLADE
THEANGEL
STAR2001 A SPACE
THE USUALTHIS IS
STAR
MOBILE FIRST!RESPONSIVE WEB DESIGNRETHINKING THE MOBILE WEBHARD BOILED WEBDESIGNPARANORMAL INTERACTIVITY
IIFICTIONLEBOWSKI
ABOUT MARRYRUNNERMATRIXHEARTWARSODYSSEYSUSPECTSSPINAL TAP!TREK
Thursday, February 17, 2011