• Like
  • Save
A Future Friendly Web
Upcoming SlideShare
Loading in...5
×
 

A Future Friendly Web

on

  • 628 views

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

Statistics

Views

Total Views
628
Views on SlideShare
530
Embed Views
98

Actions

Likes
2
Downloads
2
Comments
0

1 Embed 98

https://twitter.com 98

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A Future Friendly Web A Future Friendly Web Presentation Transcript

    • 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.mongoosemetrics.com/research)
    • 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.PROBLEM 1
    • The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PROBLEM 110%90%
    • The increasing diversity of devices reveals how unflexibleour traditional fixed-width, desktop-centric approach has been.PROBLEM 110%90%
    • 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 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 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 platforms - Evolution of market share (in percent)
    • 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
    •   &
    •   STRUCTUREFORMATTING
    •   &
    •   DESIGNUI
    •   &
    •   INTERACTIVITY
    • HTMLCSSJSCONTENT
    •   &
    •   STRUCTUREFORMATTING
    •   &
    •   DESIGNUI
    •   &
    •   INTERACTIVITY
    • HTMLCSSJSCONTENT
    •   &
    •   STRUCTUREFORMATTING
    •   &
    •   DESIGNUI
    •   &
    •   INTERACTIVITY
    • HTMLCSSJSCONTENT
    •   &
    •   STRUCTUREFORMATTING
    •   &
    •   DESIGNUI
    •   &
    •   INTERACTIVITY
    • MobileFirstProgressiveEnhancementResponsiveWeb Design
    • FLUID LAYOUTS FLEXIBLE IMAGES MEDIA QUERIES
    • ProgressiveEnhancementResponsiveWeb DesignMobileFirst
    • min-width: 20em
    • min-width: 42emmin-width: 20em
    • min-width: 42emmin-width: 20em
    • Robust, backwards-compatible websitesExperiences that won‘t breakSupport future standards
    • Are today‘s websitesgoing to work ontomorrow‘s devices ?
    • 3D INTERFACES & GESTURES AUGMENTED REALITYEYE-TRACKING TECHNOLOGY BRAIN-TRACKING TECHNOLOGY
    • Evolving paradigmsthat might solve tomorrow‘s problems
    • COPEBeyond MobileOrbitalContent
    • COPEBeyond MobileOrbitalContent
    • Get
    •   your
    •   content
    •   ready
    •   to
    •   go
    •   anywhere
    •   because
    •   it’s
    •   going
    •   to
    •   go
    •   everywhere„“Brad Frost
    • COPECMSAPI LAYERSeparate content from displayMake Content portableNo Markup No FormattingCreate OncePublish EverywhereAccess content everywhere
    • Are the CMSsyou have workedwith ready forthis evolution?
    • <client
    •   will
    •   find
    •   a
    •   way
    •   to
    •   screw
    •   it
    •   up>Try to get past WYSIWYG editors
    • THE
    •   EXAMPLARY
    •   CASE
    •   OFTHE
    •   NPR
    •   API
    •   PROVIDES
    •   AN
    •   OPEN
    •   AND
    •   EXTENSIVE
    •   WAY
    •   FOR
    •   USERS
    •   TO
    •   SHARE
    •   AND
    •   MASH-UP
    •   THE
    •   RADIO
    •   STATIONS
    •   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.
    • COPEBeyond MobileOrbitalContent
    • What
    •   is
    •   your
    •   content
    •   made
    •   from,
    •   not
    •   what
    •   your
    •   content
    •   is.
    •   An
    •   important
    •   distinction.„“Mark Boulton
    • INSTAPAPER POCKET READABILITYTHESE
    •   APPS
    •   ARE
    •   POINTING
    •   US
    •   TOWARD
    •   A
    •   FUTURE
    •   IN
    •   WHICH
    •   CONTENT
    •   IS
    •   NO
    •   LONGER
    •   ENTRENCHED
    •   IN
    •   WEBSITESTHIS
    •   TRANSFORMATION
    •   WILL
    •   FORCE
    •   US
    •   TO
    •   RETHINK
    •   EXISTING
    •   REPUTATION,
    •   DISTRIBUTION,
    •   AND
    •   MONETIZATION
    •   MODELS
    • navigatepersonalizeprioritizeSemantic navigationContent relationshipsLow granularity
    • The morestructureyou put intoyour content,WebsiteMobileWebMobileAppsTabletAppsPrintE-MailIntranetBlogsMicrositesSocialMediaContentthe freer itbecomes ineach 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>
    • COPEBeyond MobileOrbitalContent
    • Control
    •   is
    •   an
    •   illusion,
    •   because
    •   there
    •   is
    •   too
    •   much
    •   diversityBryan Rieger„“
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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.
    • 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
    •   HOW
    •   I
    •   EXPECTTO
    •   BE
    •   TREATED
    • Future ready contentDevice IndependenceGolden 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.lyA
    •   FUTURE
    •   FRIENDLY
    •   WEBHelp
    •   others
    •   to
    •   do
    •   the
    •   same