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