Your SlideShare is downloading. ×
0
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
A Future Friendly Web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

A Future Friendly Web

559

Published on

A presentation I held at "Betabeers Valencia" on 25th April 2013 at Workether. …

A presentation I held at "Betabeers Valencia" on 25th April 2013 at Workether.
(http://betabeers.com/event/betabeers-valencia-840/)

It's about the changing technology landscape and covers paradigms how we can better prepare our websites for the future.

I included much of the material that is listed on the website of the Future Friendly initiative: http://futurefriend.ly

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
559
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A Future-friendly webHow to build websites that work today and in the future
  • 2. MARCEL
  • 3.  KALVERAMWeb
  • 4.  developer
  • 5.  from
  • 6.  Germany@marcelkalveram
  • 7. MARCEL
  • 8.  KALVERAMWeb
  • 9.  developer
  • 10.  from
  • 11.  GermanyVALENCIAKOLN:@marcelkalveram
  • 12. MARCEL
  • 13.  KALVERAMWeb
  • 14.  developer
  • 15.  from
  • 16.  GermanyVALENCIAKOLN:@marcelkalveram
  • 17. MARCEL
  • 18.  KALVERAMWeb
  • 19.  developer
  • 20.  from
  • 21.  GermanyVALENCIAKOLN:@marcelkalveram
  • 22. A Future-friendly webHow to build websites that work today and in the future
  • 23. The web‘s majorstrength is its ubiquity!
  • 24. But does theeverywhereweb work onevery device?
  • 25. In 2012, lessthan 10% ofthe web wasMobile Ready90%10%Mongoose Metrics Data Series 2012 - Mobile Readyness Study(http://www.mongoosemetrics.com/research)
  • 26. Habemus problemaMobile confronts us with a lot of new challenges
  • 27. The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PROBLEM 1
  • 28. The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PROBLEM 110%90%
  • 29. The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PROBLEM 110%90%
  • 30. Lack of timeBad connectivityLack of interestInsufficient memoryDistractions / interruptionsLow batteryPROBLEM 2
  • 31. By relying on and optimizing for proprietary solutionsor specific technologies, we lock out millions of users.PROBLEM 3
  • 32. By relying on and optimizing for proprietary solutionsor specific technologies, we lock out millions of users.PROBLEM 3
  • 33. 28%33%27%82%55%45%Mobile Broadband Subscriptions - PenetrationICT Facts and Figures 2013(UN agency for information and communication technologies)Global mobile growth rates - CAGR (2010 - 2013)39%
  • 34. Part
  • 35.  of
  • 36.  the
  • 37.  problem
  • 38.  is
  • 39.  the
  • 40.  closed
  • 41.  development
  • 42.  ecosystemsof
  • 43.  iOS
  • 44.  and
  • 45.  Android;Gary Kovacs, CEO of MozillaWith
  • 46.  Web-based
  • 47.  Firefox
  • 48.  mobile
  • 49.  OS,Mozilla
  • 50.  hopes
  • 51.  to
  • 52.  open
  • 53.  the
  • 54.  ecosystemand
  • 55.  spark
  • 56.  innovation„“
  • 57. 017,53552,57020092010201120122013Android iOS OthersGlobal Statscounter(Top 9 mobile browsers from 2009 to 2013)Mobile platforms - Evolution of market share (in percent)
  • 58. 2014201520162017Android iOS Others Web BasedMobile platforms - Evolution of market share (in percent) - The Future?2013
  • 59. Embracing the unpredictableA short journey through today‘s device landscape
  • 60. OLD REUSED DEVICES
  • 61. DIFFERENTOPERATING SYSTEMS
  • 62. VARYING SCREEN SIZES
  • 63. GAME CONSOLEBROWSERS
  • 64. NEW DEVICECAPABILITIES
  • 65. OPEN
  • 66.  DEVICE
  • 67.  LABSAccess
  • 68.  a
  • 69.  variety
  • 70.  of
  • 71.  devices.
  • 72.  worldwide.
  • 73.  for
  • 74.  free.
  • 75. Existing paradigmsthat solve today‘s problems
  • 76. ResponsiveWeb DesignProgressiveEnhancementMobileFirst
  • 77. ResponsiveWeb DesignMobileFirstProgressiveEnhancement
  • 78. HTMLCSSJSCONTENT
  • 79.  
  • 80.  STRUCTUREFORMATTING
  • 81.  
  • 82.  DESIGNUI
  • 83.  
  • 84.  INTERACTIVITY
  • 85. HTMLCSSJSCONTENT
  • 86.  
  • 87.  STRUCTUREFORMATTING
  • 88.  
  • 89.  DESIGNUI
  • 90.  
  • 91.  INTERACTIVITY
  • 92. HTMLCSSJSCONTENT
  • 93.  
  • 94.  STRUCTUREFORMATTING
  • 95.  
  • 96.  DESIGNUI
  • 97.  
  • 98.  INTERACTIVITY
  • 99. HTMLCSSJSCONTENT
  • 100.  
  • 101.  STRUCTUREFORMATTING
  • 102.  
  • 103.  DESIGNUI
  • 104.  
  • 105.  INTERACTIVITY
  • 106. MobileFirstProgressiveEnhancementResponsiveWeb Design
  • 107. FLUID LAYOUTS FLEXIBLE IMAGES MEDIA QUERIES
  • 108. ProgressiveEnhancementResponsiveWeb DesignMobileFirst
  • 109. min-width: 20em
  • 110. min-width: 42emmin-width: 20em
  • 111. min-width: 42emmin-width: 20em
  • 112. Robust, backwards-compatible websitesExperiences that won‘t breakSupport future standards
  • 113. Are today‘s websitesgoing to work ontomorrow‘s devices ?
  • 114. 3D INTERFACES GESTURES AUGMENTED REALITYEYE-TRACKING TECHNOLOGY BRAIN-TRACKING TECHNOLOGY
  • 115. Evolving paradigmsthat might solve tomorrow‘s problems
  • 116. COPEBeyond MobileOrbitalContent
  • 117. COPEBeyond MobileOrbitalContent
  • 118. Get
  • 119.  your
  • 120.  content
  • 121.  ready
  • 122.  to
  • 123.  go
  • 124.  anywhere
  • 125.  because
  • 126.  it’s
  • 127.  going
  • 128.  to
  • 129.  go
  • 130.  everywhere„“Brad Frost
  • 131. COPECMSAPI LAYERSeparate content from displayMake Content portableNo Markup No FormattingCreate OncePublish EverywhereAccess content everywhere
  • 132. Are the CMSsyou have workedwith ready forthis evolution?
  • 133. client
  • 134.  will
  • 135.  find
  • 136.  a
  • 137.  way
  • 138.  to
  • 139.  screw
  • 140.  it
  • 141.  upTry to get past WYSIWYG editors
  • 142. THE
  • 143.  EXAMPLARY
  • 144.  CASE
  • 145.  OFTHE
  • 146.  NPR
  • 147.  API
  • 148.  PROVIDES
  • 149.  AN
  • 150.  OPEN
  • 151.  AND
  • 152.  EXTENSIVE
  • 153.  WAY
  • 154.  FOR
  • 155.  USERS
  • 156.  TO
  • 157.  SHARE
  • 158.  AND
  • 159.  MASH-UP
  • 160.  THE
  • 161.  RADIO
  • 162.  STATIONS
  • 163.  CONTENT.
  • 164. 10%20%30%40%50%60%70%80%90%100%80%Since
  • 165.  its
  • 166.  launch,
  • 167.  the
  • 168.  API
  • 169.  has
  • 170.  contributed
  • 171.  to
  • 172.  an
  • 173.  80
  • 174.  percent
  • 175.  increase
  • 176.  in
  • 177.  NPR.org’s
  • 178.  total
  • 179.  page
  • 180.  views.
  • 181. COPEBeyond MobileOrbitalContent
  • 182. What
  • 183.  is
  • 184.  your
  • 185.  content
  • 186.  made
  • 187.  from,
  • 188.  not
  • 189.  what
  • 190.  your
  • 191.  content
  • 192.  is.
  • 193.  An
  • 194.  important
  • 195.  distinction.„“Mark Boulton
  • 196. INSTAPAPER POCKET READABILITYTHESE
  • 197.  APPS
  • 198.  ARE
  • 199.  POINTING
  • 200.  US
  • 201.  TOWARD
  • 202.  A
  • 203.  FUTURE
  • 204.  IN
  • 205.  WHICH
  • 206.  CONTENT
  • 207.  IS
  • 208.  NO
  • 209.  LONGER
  • 210.  ENTRENCHED
  • 211.  IN
  • 212.  WEBSITESTHIS
  • 213.  TRANSFORMATION
  • 214.  WILL
  • 215.  FORCE
  • 216.  US
  • 217.  TO
  • 218.  RETHINK
  • 219.  EXISTING
  • 220.  REPUTATION,
  • 221.  DISTRIBUTION,
  • 222.  AND
  • 223.  MONETIZATION
  • 224.  MODELS
  • 225. navigatepersonalizeprioritizeSemantic navigationContent relationshipsLow granularity
  • 226. The morestructureyou put intoyour content,WebsiteMobileWebMobileAppsTabletAppsPrintE-MailIntranetBlogsMicrositesSocialMediaContentthe freer itbecomes ineach context.
  • 227. HTML5 SemanticsA W3C recommendation for semantic markuparticle...An Article.../articleRDFaschema.org, Facebook Open Graph, Twitter Cardsspan property=titleBeautiful Sunset/spanMicroformatsAn approach to publish structured data in HTMLdiv class=localityValencia, 46021/div
  • 228. span property=foodPink Cupcake/spanspan property=ingredientsFlour, Sugar, .../spanspan property=locationPink Cupcake/span
  • 229. span property=foodPink Cupcake/spanspan property=ingredientsFlour, Sugar, .../spanspan property=locationPink Cupcake/span
  • 230. span property=foodPink Cupcake/spanspan property=ingredientsFlour, Sugar, .../spanspan property=locationPink Cupcake/span
  • 231. COPEBeyond MobileOrbitalContent
  • 232. Control
  • 233.  is
  • 234.  an
  • 235.  illusion,
  • 236.  because
  • 237.  there
  • 238.  is
  • 239.  too
  • 240.  much
  • 241.  diversityBryan Rieger„“
  • 242. Start tweaking testingConstantly check your product against new technologiesSet a user experience base lineStart developing your product on the command lineChoose most important enhancementsConcentrate on those features that are a real benefit for the user
  • 243. Responsive Web Design on the serverHi server, here‘s my user agent string:Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26(KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25A random mobile device
  • 244. Thanks, let me seewhat you‘re capable ofResponsive Web Design on the serverHi server, here‘s my user agent string:Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26(KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25A random mobile device
  • 245. Thanks, let me seewhat you‘re capable ofResponsive Web Design on the serverHi server, here‘s my user agent string:Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26(KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25Found, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umtsA random mobile device
  • 246. Responsive Web Design on the serverFound, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umtsHere‘s what you asked for- Thanks, let me composesomething appropriate forthe user...A random mobile device
  • 247. Responsive Web Design on the serverFound, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umtsHere‘s what you asked for- Thanks, let me composesomething appropriate forthe user...A random mobile deviceHere‘s your code. I‘ve only includedfunctionality that you support.
  • 248. Responsive Web Design on the serverFound, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umtsHere‘s what you asked for- Thanks, let me composesomething appropriate forthe user...A random mobile deviceHere‘s your code. I‘ve only includedfunctionality that you support.AWESOME!THAT‘S
  • 249.  HOW
  • 250.  I
  • 251.  EXPECTTO
  • 252.  BE
  • 253.  TREATED
  • 254. Future ready contentDevice IndependenceGolden User Experiences
  • 255. This
  • 256.  job
  • 257.  takes
  • 258.  editorial,
  • 259.  architectural,
  • 260.  and
  • 261.  technical
  • 262.  knowledge.
  • 263.  It
  • 264.  is
  • 265.  a
  • 266.  project
  • 267.  for
  • 268.  all
  • 269.  of
  • 270.  us.SARA WACHTER-BOETTCHER„“
  • 271. Thank you!Now it‘s time for some questions...
  • 272. MARCEL
  • 273.  KALVERAMWeb
  • 274.  Developer
  • 275.  from
  • 276.  Germany@marcelkalveramspecrunner.net#fflywww.future-friend.lyA
  • 277.  FUTURE
  • 278.  FRIENDLY
  • 279.  WEBHelp
  • 280.  others
  • 281.  to
  • 282.  do
  • 283.  the
  • 284.  same

×