A Future Friendly Web

  • 461 views
Uploaded 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

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
461
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
2

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.   up>Try 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 markup<article>...An Article...</article>RDFaschema.org, Facebook Open Graph, Twitter Cards<span property="title">Beautiful Sunset</span>MicroformatsAn approach to publish structured data in HTML<div class="locality">Valencia, 46021</div>
  • 228. <span property="food">Pink Cupcake</span><span property="ingredients">Flour, Sugar, ...</span><span property="location">Pink Cupcake</span>
  • 229. <span property="food">Pink Cupcake</span><span property="ingredients">Flour, Sugar, ...</span><span property="location">Pink Cupcake</span>
  • 230. <span property="food">Pink Cupcake</span><span property="ingredients">Flour, Sugar, ...</span><span property="location">Pink 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