Your SlideShare is downloading. ×
0
A Future-friendly webHow to build websites that work today and in the future
MARCEL
 KALVERAMWeb
 developer
 from
 Germany@marcelkalveram
MARCEL
 KALVERAMWeb
 developer
 from
 GermanyVALENCIAKOLN:@marcelkalveram
MARCEL
 KALVERAMWeb
 developer
 from
 GermanyVALENCIAKOLN:@marcelkalveram
MARCEL
 KALVERAMWeb
 developer
 from
 GermanyVALENCIAKOLN:@marcelkalveram
A Future-friendly webHow to build websites that work today and in the future
The web‘s majorstrength is its ubiquity!
But does theeverywhereweb work onevery device?
In 2012, lessthan 10% ofthe web wasMobile Ready90%10%Mongoose Metrics Data Series 2012 - Mobile Readyness Study(http://www...
Habemus problemaMobile confronts us with a lot of new challenges
The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PRO...
The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PRO...
The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PRO...
Lack of timeBad connectivityLack of interestInsufficient memoryDistractions / interruptionsLow batteryPROBLEM 2
By relying on and optimizing for proprietary solutionsor specific technologies, we lock out millions of users.PROBLEM 3
By relying on and optimizing for proprietary solutionsor specific technologies, we lock out millions of users.PROBLEM 3
28%33%27%82%55%45%Mobile Broadband Subscriptions - PenetrationICT Facts and Figures 2013(UN agency for information and com...
Part
 of
 the
 problem
 is
 the
 closed
 development
 ecosystemsof
 iOS
 and
 Android;Gary Kovacs, CEO of MozillaWith
 Web-based
 Firefox
 mobile
 OS,Mozilla
 hopes
 to
 open
 the
 ecosystemand
 spark
 innovation„“
017,53552,57020092010201120122013Android iOS OthersGlobal Statscounter(Top 9 mobile browsers from 2009 to 2013)Mobile plat...
2014201520162017Android iOS Others Web BasedMobile platforms - Evolution of market share (in percent) - The Future?2013
Embracing the unpredictableA short journey through today‘s device landscape
OLD  REUSED DEVICES
DIFFERENTOPERATING SYSTEMS
VARYING SCREEN SIZES
GAME CONSOLEBROWSERS
NEW DEVICECAPABILITIES
OPEN
 DEVICE
 LABSAccess
 a
 variety
 of
 devices.
 worldwide.
 for
 free.
Existing paradigmsthat solve today‘s problems
ResponsiveWeb DesignProgressiveEnhancementMobileFirst
ResponsiveWeb DesignMobileFirstProgressiveEnhancement
HTMLCSSJSCONTENT
 
Upcoming SlideShare
Loading in...5
×

A Future Friendly Web

591

Published on

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
591
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "A Future Friendly Web"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×