A Future Friendly Web
-
Upload
marcel-kalveram -
Category
Technology
-
view
477 -
download
1
description
Transcript of A Future Friendly Web
A Future-friendly webHow to build websites that work today and in the future
MARCEL����������� ������������������ KALVERAMWeb����������� ������������������ developer����������� ������������������ from����������� ������������������ Germany@marcelkalveram
MARCEL����������� ������������������ KALVERAMWeb����������� ������������������ developer����������� ������������������ from����������� ������������������ Germany
VALENCIA
KOLN
:
@marcelkalveram
MARCEL����������� ������������������ KALVERAMWeb����������� ������������������ developer����������� ������������������ from����������� ������������������ Germany
VALENCIA
KOLN
:
@marcelkalveram
MARCEL����������� ������������������ KALVERAMWeb����������� ������������������ developer����������� ������������������ from����������� ������������������ Germany
VALENCIA
KOLN
:
@marcelkalveram
A Future-friendly webHow to build websites that work today and in the future
The web‘s major strength is its ubiquity!
But does the everywhere web work on
every device?
In 2012, lessthan 10% of the web wasMobile Ready90%
10%
Mongoose Metrics Data Series 2012 - Mobile Readyness Study (http://www.mongoosemetrics.com/research)
Habemus problemaMobile confronts us with a lot of new challenges
The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.
PROBLEM 1
The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.
PROBLEM 1
10%
90%
The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.
PROBLEM 1
10%
90%
Lack of time
Bad connectivity
Lack of interest
Insufficient memory
Distractions / interruptions
Low battery
PROBLEM 2
By relying on and optimizing for proprietary solutions or specific technologies, we lock out millions of users.
PROBLEM 3
By relying on and optimizing for proprietary solutions or specific technologies, we lock out millions of users.
PROBLEM 3
28%33% 27%
82%55%
45%
Mobile Broadband Subscriptions - Penetration
ICT Facts and Figures 2013(UN agency for information and communication technologies)
Global mobile growth rates - CAGR (2010 - 2013)
39%
Part����������� ������������������ of����������� ������������������ the����������� ������������������ problem����������� ������������������ is����������� ������������������ the����������� ������������������ closed����������� ������������������ development����������� ������������������ ecosystemsof����������� ������������������ iOS����������� ������������������ and����������� ������������������ Android;
Gary Kovacs, CEO of Mozilla
With����������� ������������������ Web-based����������� ������������������ Firefox����������� ������������������ mobile����������� ������������������ OS,Mozilla����������� ������������������ hopes����������� ������������������ to����������� ������������������ open����������� ������������������ the����������� ������������������ ecosystemand����������� ������������������ spark����������� ������������������ innovation
„
“
0
17,5
35
52,5
7020
09
2010
2011
2012
2013
Android iOS Others
Global Statscounter(Top 9 mobile browsers from 2009 to 2013)
Mobile platforms - Evolution of market share (in percent)
2014
2015
2016
2017
Android iOS Others Web Based
Mobile platforms - Evolution of market share (in percent) - The Future?
2013
Embracing the unpredictable A short journey through today‘s device landscape
OLD & REUSED DEVICES
DIFFERENT OPERATING SYSTEMS
VARYING SCREEN SIZES
GAME CONSOLE BROWSERS
NEW DEVICE CAPABILITIES
OPEN����������� ������������������ DEVICE����������� ������������������ LABSAccess����������� ������������������ a����������� ������������������ variety����������� ������������������ of����������� ������������������ devices.����������� ������������������ worldwide.����������� ������������������ for����������� ������������������ free.
Existing paradigmsthat solve today‘s problems
ResponsiveWeb Design
ProgressiveEnhancement
MobileFirst
ResponsiveWeb Design
MobileFirst
ProgressiveEnhancement
HTML
CSS
JS
CONTENT����������� ������������������ &����������� ������������������ STRUCTURE
FORMATTING����������� ������������������ &����������� ������������������ DESIGN
UI����������� ������������������ &����������� ������������������ INTERACTIVITY
HTML
CSS
JS
CONTENT����������� ������������������ &����������� ������������������ STRUCTURE
FORMATTING����������� ������������������ &����������� ������������������ DESIGN
UI����������� ������������������ &����������� ������������������ INTERACTIVITY
HTML
CSS
JS
CONTENT����������� ������������������ &����������� ������������������ STRUCTURE
FORMATTING����������� ������������������ &����������� ������������������ DESIGN
UI����������� ������������������ &����������� ������������������ INTERACTIVITY
HTML
CSS
JS
CONTENT����������� ������������������ &����������� ������������������ STRUCTURE
FORMATTING����������� ������������������ &����������� ������������������ DESIGN
UI����������� ������������������ &����������� ������������������ INTERACTIVITY
MobileFirst
ProgressiveEnhancement
ResponsiveWeb Design
FLUID LAYOUTS FLEXIBLE IMAGES MEDIA QUERIES
ProgressiveEnhancement
ResponsiveWeb Design
MobileFirst
min-width: 20em
min-width: 42emmin-width: 20em
min-width: 42emmin-width: 20em
Robust, backwards-compatible websites
Experiences that won‘t break
Support future standards
Are today‘s websites going to work on
tomorrow‘s devices ?
3D INTERFACES & GESTURES AUGMENTED REALITY
EYE-TRACKING TECHNOLOGY BRAIN-TRACKING TECHNOLOGY
Evolving paradigmsthat might solve tomorrow‘s problems
COPE
Beyond Mobile
OrbitalContent
COPE
Beyond Mobile
OrbitalContent
Get����������� ������������������ your����������� ������������������ content����������� ������������������ ready����������� ������������������ to����������� ������������������ go����������� ������������������ anywhere����������� ������������������ because����������� ������������������ it’s����������� ������������������ going����������� ������������������ to����������� ������������������ go����������� ������������������ everywhere
„“
Brad Frost
COPE
CMS
API LAYER
Separate content from display
Make Content portable
No Markup No Formatting
Create OncePublish Everywhere
Access content everywhere
Are the CMSs you have worked
with ready for this evolution?
<client����������� ������������������ will����������� ������������������ find����������� ������������������ a����������� ������������������ way����������� ������������������ to����������� ������������������ screw����������� ������������������ it����������� ������������������ up>
Try to get past WYSIWYG editors
THE����������� ������������������ EXAMPLARY����������� ������������������ CASE����������� ������������������ OF
THE����������� ������������������ NPR����������� ������������������ API����������� ������������������ PROVIDES����������� ������������������ AN����������� ������������������ OPEN����������� ������������������ AND����������� ������������������ EXTENSIVE����������� ������������������ WAY����������� ������������������ FOR����������� ������������������ USERS����������� ������������������ TO����������� ������������������ SHARE����������� ������������������ AND����������� ������������������ MASH-UP����������� ������������������ THE����������� ������������������ RADIO����������� ������������������ STATION'S����������� ������������������ CONTENT.
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
80%
Since����������� ������������������ its����������� ������������������ launch,����������� ������������������ the����������� ������������������ API����������� ������������������ has����������� ������������������ contributed����������� ������������������ to����������� ������������������ an����������� ������������������
80����������� ������������������ percent����������� ������������������ increase����������� ������������������ in����������� ������������������ NPR.org’s����������� ������������������ total����������� ������������������ page����������� ������������������ views.
COPE
Beyond Mobile
OrbitalContent
What����������� ������������������ is����������� ������������������ your����������� ������������������ content����������� ������������������ made����������� ������������������ from,����������� ������������������ not����������� ������������������ what����������� ������������������ your����������� ������������������ content����������� ������������������ is.����������� ������������������ An����������� ������������������ important����������� ������������������ distinction.
„“
Mark Boulton
INSTAPAPER POCKET READABILITY
THESE����������� ������������������ APPS����������� ������������������ ARE����������� ������������������ POINTING����������� ������������������ US����������� ������������������ TOWARD����������� ������������������ A����������� ������������������ FUTURE����������� ������������������ IN����������� ������������������ WHICH����������� ������������������ CONTENT����������� ������������������ IS����������� ������������������ NO����������� ������������������ LONGER����������� ������������������ ENTRENCHED����������� ������������������ IN����������� ������������������ WEBSITES
THIS����������� ������������������ TRANSFORMATION����������� ������������������ WILL����������� ������������������ FORCE����������� ������������������ US����������� ������������������ TO����������� ������������������ RETHINK����������� ������������������ EXISTING����������� ������������������ REPUTATION,����������� ������������������ DISTRIBUTION,����������� ������������������ AND����������� ������������������ MONETIZATION����������� ������������������ MODELS
navigatepersonalizeprioritize
Semantic navigation
Content relationships
Low granularity
The more structure you put into your content,
Website
MobileWeb
MobileApps
TabletApps
Intranet
Blogs
Microsites
SocialMedia
Content
the freer it becomes in each context.
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>
<span property="food"> Pink Cupcake</span>
<span property="ingredients"> Flour, Sugar, ...</span>
<span property="location"> Pink Cupcake</span>
<span property="food"> Pink Cupcake</span>
<span property="ingredients"> Flour, Sugar, ...</span>
<span property="location"> Pink Cupcake</span>
<span property="food"> Pink Cupcake</span>
<span property="ingredients"> Flour, Sugar, ...</span>
<span property="location"> Pink Cupcake</span>
COPE
Beyond Mobile
OrbitalContent
Control����������� ������������������ is����������� ������������������ an����������� ������������������ illusion,����������� ������������������ because����������� ������������������ there����������� ������������������ is����������� ������������������ too����������� ������������������ much����������� ������������������ diversity
Bryan Rieger
„“
Start tweaking & testingConstantly check your product against new technologies
Set a user experience base lineStart developing your product on the command line
Choose most important enhancementsConcentrate on those features that are a real benefit for the user
Responsive Web Design on the server
Hi 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.25
A random mobile device
Thanks, let me see what you‘re capable of
Responsive Web Design on the server
Hi 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.25
A random mobile device
Thanks, let me see what you‘re capable of
Responsive Web Design on the server
Hi 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.25
Found, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umts
A random mobile device
Responsive Web Design on the server
Found, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umts
Here‘s what you asked for- Thanks, let me composesomething appropriate forthe user...
A random mobile device
Responsive Web Design on the server
Found, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umts
Here‘s what you asked for- Thanks, let me composesomething appropriate forthe user...
A random mobile device
Here‘s your code. I‘ve only includedfunctionality that you support.
Responsive Web Design on the server
Found, Here‘s what the device is (not) capable of:touch, geolocation, CSS animations flash, umts
Here‘s what you asked for- Thanks, let me composesomething appropriate forthe user...
A random mobile device
Here‘s your code. I‘ve only includedfunctionality that you support.
AWESOME!THAT‘S����������� ������������������ HOW����������� ������������������ I����������� ������������������ EXPECTTO����������� ������������������ BE����������� ������������������ TREATED
Future ready content
Device Independence
Golden User Experiences
This����������� ������������������ job����������� ������������������ takes����������� ������������������ editorial,����������� ������������������ architectural,����������� ������������������ and����������� ������������������ technical����������� ������������������ knowledge.����������� ������������������ It����������� ������������������ is����������� ������������������ a����������� ������������������ project����������� ������������������ for����������� ������������������ all����������� ������������������ of����������� ������������������ us.
SARA WACHTER-BOETTCHER
„“
Thank you!Now it‘s time for some questions...
MARCEL����������� ������������������ KALVERAMWeb����������� ������������������ Developer����������� ������������������ from����������� ������������������ Germany
@marcelkalveramspecrunner.net
#fflywww.future-friend.ly
A����������� ������������������ FUTURE����������� ������������������ FRIENDLY����������� ������������������ WEBHelp����������� ������������������ others����������� ������������������ to����������� ������������������ do����������� ������������������ the����������� ������������������ same