Embed Size (px)
DESCRIPTION
In august 2010 the Wired magazine published an article titled “The Web is Dead. Long Live the Internet.” which discusses the transition of digital content from open web to semi-closed platforms and applications. This talk presents the other side of the story, arguing the web’s well being and it’s enormous potential to catch up on the mobile world. But in order to exploit open standards in their full potential, we must firstly change the way we perceive the design process, rethink our methods and use slightly different set of tools.
Citation preview
DESIGNING AN
ADAPTABLEWEB
Thursday, February 17, 2011
WWW:H MARIBORPRODUCTION
Thursday, February 17, 2011
NATAN NIKOLI!TALK
@natannikolic - natannikolic.com/particles
Thursday, February 17, 2011
Thursday, February 17, 2011
““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
Thursday, February 17, 2011
0%
10%
20%
30%
40%
50%
60%
70%
broadbanddial-up
http://www.websiteoptimization.com/bw/1008/
Thursday, February 17, 2011
2005 2007 2009
mobile broadbandfixed broadband
http://viodi.com/2009/07/28/mobile-broadband/
Thursday, February 17, 2011
Thursday, February 17, 2011
WEB
ALL TRAFFIC
Size of web comparing to all internet tra!c back in 2000
Thursday, February 17, 2011
WEB
ALL TRAFFIC
Size of web tra!c comparing to all internet tra!c today
Thursday, February 17, 2011
YOUR OPPINION
MAN
YEAH, BUT THAT’S LIKE
Thursday, February 17, 2011
“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
Thursday, February 17, 2011
KILLED BYDIVER-GENCE
Thursday, February 17, 2011
DESKTOP
1024x768
800x600
Thursday, February 17, 2011
MOBILE
1024x768
800x600
320x240
220x176
160x120
Thursday, February 17, 2011
2007 2008 2009 2010 2011 2012 2013 2014 2015
Mobile > Desktop
Internet Trends (87 pages) - Morgan Stanley Internet Trends
Thursday, February 17, 2011
MOBILE?
1024x768
800x600
320x240
220x176
160x120
480x320
640x480
Thursday, February 17, 2011
“If you think this is hard to develop for, wait and see what lies ahead of us in the future!
Thursday, February 17, 2011
“The future is already here – it's just unevenly distributed.— William Gibson
Thursday, February 17, 2011
“... As much as we love the open, unfettered Web, we’re abandoning it for simpler, sleeker services that just work ...
Thursday, February 17, 2011
“This is the natural path of industrialization: invention, propagation, adoption, control.
Thursday, February 17, 2011
THERE’SSOMETHINGABOUTAPPS
Thursday, February 17, 2011
“Delo for iOS
Thursday, February 17, 2011
“Delo for Android
Thursday, February 17, 2011
“Delo for WP7
Thursday, February 17, 2011
“Delo for WebOS
Thursday, February 17, 2011
“Delo for BlackBerry
Thursday, February 17, 2011
GOING AFTER
APPLI-CANTS
Thursday, February 17, 2011
“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
“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
“Quickly create native smartphone apps with the award-winning Rhodes (Ruby-based) framework. Build online without installing SDKs locally.
Thursday, February 17, 2011
“Open source, cross platform mobile development Java ME, Symbian, Windows Mobile, iOS, Android
Thursday, February 17, 2011
“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
“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
REDPILL
BLUEPILL
VS
Thursday, February 17, 2011
REDOPEN
BLUEOLIGOPOLY
VS
Thursday, February 17, 2011
“Where you innovate, how you innovate, and what you innovate are design problems. —Tim Brown (CEO IDEO)
Thursday, February 17, 2011
““ 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
“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
RESPONSIVEARCHITECTURE
Thursday, February 17, 2011
RESPONSIVEMATERIALS
Thursday, February 17, 2011
RESPONSIVEMATERIALS
Thursday, February 17, 2011
RESPONSIVEOBJECTS
Thursday, February 17, 2011
THERE IS NO
FIXEDWIDTH
Thursday, February 17, 2011
Fluid layoutDisplayed at 1440px
Thursday, February 17, 2011
Fluid layoutDisplayed at cca. 1000px
Thursday, February 17, 2011
Fluid layoutDisplayed at cca. 500px
Thursday, February 17, 2011
Responsive layouthttp://colly.com displayed at 1440px
Thursday, February 17, 2011
Responsive layouthttp://colly.com displayed at cca. 1000px
Thursday, February 17, 2011
Responsive layouthttp://colly.com displayed at cca. 400px
Thursday, February 17, 2011
Responsive layout/* Smartphones (portrait and landscape) ------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
Thursday, February 17, 2011
Responsive layout/* iPads (portrait and landscape) ---------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
Thursday, February 17, 2011
Responsive layout/* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }
Thursday, February 17, 2011
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
Responsive layoutaspect-ratio, device-aspect-ratio, color, color-index, device-height, device-width, grid, height, monochrome, orientation, resolution, scan, width
Thursday, February 17, 2011
HARDBOILED
Thursday, February 17, 2011
“Why are we once again writing for only one browser? Is Webkit the new Internet Explorer?— Brian Rieger
Thursday, February 17, 2011
BROWSERWARS
Thursday, February 17, 2011
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
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
Thursday, February 17, 2011
Traditional approachFull desktop website
Thursday, February 17, 2011
Traditional approachFull desktop website + @media-queries
Thursday, February 17, 2011
SLIGHTLYUPSIDEDOWNDON’T YOU THINK?
Thursday, February 17, 2011
“Web products should be designed for mobile first. (Even if no mobile version is planned.)— Luke Wroblewski
Thursday, February 17, 2011
Di!erent approach= mobile website + @media-queries
Thursday, February 17, 2011
Di!erent approach= Full desktop website
Thursday, February 17, 2011
DEALING WITH THEUSUALSIESPECT
Thursday, February 17, 2011
IE JavaScript fallbacksRespond.js
Thursday, February 17, 2011
IE JavaScript fallbacksCSS3-MediaQueries-JS
Thursday, February 17, 2011
Less Frameworklessframework.com
Thursday, February 17, 2011
IT’S NOT AFEATURE(EVEN IF IT GOES UP TO ELEVEN)
Thursday, February 17, 2011
CAPTAIN,BUT WHAT ABOUT THEHARDWARE
Thursday, February 17, 2011
Touchscreen184 million touchscreens devices in 2009estimated 96.8% increase at 362 million in 2010
Thursday, February 17, 2011
Touch target sizesMake it cosy for our fat thumbs to use!
Thursday, February 17, 2011
Don’t count on hoversThere is no hover when you are using your fingers!
Thursday, February 17, 2011
Touch gesturesSame, same but di"erent!
Thursday, February 17, 2011
Touch gesturesEven inside the browser!
Thursday, February 17, 2011
Gestures as input
Thursday, February 17, 2011
Device orientation*Hint* remember @media-queries?
Thursday, February 17, 2011
Accelerometer & gyroscope
Thursday, February 17, 2011
Orientation as inputEven inside the browser!
Thursday, February 17, 2011
Location as inputEven inside the browser!
Thursday, February 17, 2011
Voice as inputSiri - personal ass-in-an-instant
Thursday, February 17, 2011
Video & location & orientation as inputAugmented Reality
Thursday, February 17, 2011
Desktop shortcutsSame, same but di"erent!
Thursday, February 17, 2011
REDOPEN
BLUEOLIGOPOLY
VS
Thursday, February 17, 2011
“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
“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
FINSPECIAL THANKS TO
Thursday, February 17, 2011
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
