A Future Friendly Web

79
A Future-friendly web How to build websites that work today and in the future

description

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

Transcript of A Future Friendly Web

Page 1: A Future Friendly Web

A Future-friendly webHow to build websites that work today and in the future

Page 2: A Future Friendly Web

MARCEL����������� ������������������  KALVERAMWeb����������� ������������������  developer����������� ������������������  from����������� ������������������  Germany@marcelkalveram

Page 3: A Future Friendly Web

MARCEL����������� ������������������  KALVERAMWeb����������� ������������������  developer����������� ������������������  from����������� ������������������  Germany

VALENCIA

KOLN

:

@marcelkalveram

Page 4: A Future Friendly Web

MARCEL����������� ������������������  KALVERAMWeb����������� ������������������  developer����������� ������������������  from����������� ������������������  Germany

VALENCIA

KOLN

:

@marcelkalveram

Page 5: A Future Friendly Web

MARCEL����������� ������������������  KALVERAMWeb����������� ������������������  developer����������� ������������������  from����������� ������������������  Germany

VALENCIA

KOLN

:

@marcelkalveram

Page 6: A Future Friendly Web

A Future-friendly webHow to build websites that work today and in the future

Page 7: A Future Friendly Web
Page 8: A Future Friendly Web

The web‘s major strength is its ubiquity!

Page 9: A Future Friendly Web
Page 10: A Future Friendly Web

But does the everywhere web work on

every device?

Page 11: A Future Friendly Web

In 2012, lessthan 10% of the web wasMobile Ready90%

10%

Mongoose Metrics Data Series 2012 - Mobile Readyness Study (http://www.mongoosemetrics.com/research)

Page 12: A Future Friendly Web

Habemus problemaMobile confronts us with a lot of new challenges

Page 13: A Future Friendly Web

The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.

PROBLEM 1

Page 14: A Future Friendly Web

The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.

PROBLEM 1

10%

90%

Page 15: A Future Friendly Web

The increasing diversity of devices reveals how unflexible our traditional fixed-width, desktop-centric approach has been.

PROBLEM 1

10%

90%

Page 16: A Future Friendly Web

Lack of time

Bad connectivity

Lack of interest

Insufficient memory

Distractions / interruptions

Low battery

PROBLEM 2

Page 17: A Future Friendly Web

By relying on and optimizing for proprietary solutions or specific technologies, we lock out millions of users.

PROBLEM 3

Page 18: A Future Friendly Web

By relying on and optimizing for proprietary solutions or specific technologies, we lock out millions of users.

PROBLEM 3

Page 19: A Future Friendly Web

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%

Page 20: A Future Friendly Web

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

Page 21: A Future Friendly Web

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)

Page 22: A Future Friendly Web

2014

2015

2016

2017

Android iOS Others Web Based

Mobile platforms - Evolution of market share (in percent) - The Future?

2013

Page 23: A Future Friendly Web

Embracing the unpredictable A short journey through today‘s device landscape

Page 24: A Future Friendly Web
Page 25: A Future Friendly Web

OLD & REUSED DEVICES

Page 26: A Future Friendly Web

DIFFERENT OPERATING SYSTEMS

Page 27: A Future Friendly Web

VARYING SCREEN SIZES

Page 28: A Future Friendly Web

GAME CONSOLE BROWSERS

Page 29: A Future Friendly Web

NEW DEVICE CAPABILITIES

Page 30: A Future Friendly Web

OPEN����������� ������������������  DEVICE����������� ������������������  LABSAccess����������� ������������������  a����������� ������������������  variety����������� ������������������  of����������� ������������������  devices.����������� ������������������  worldwide.����������� ������������������  for����������� ������������������  free.

Page 31: A Future Friendly Web

Existing paradigmsthat solve today‘s problems

Page 32: A Future Friendly Web

ResponsiveWeb Design

ProgressiveEnhancement

MobileFirst

Page 33: A Future Friendly Web

ResponsiveWeb Design

MobileFirst

ProgressiveEnhancement

Page 34: A Future Friendly Web

HTML

CSS

JS

CONTENT����������� ������������������  &����������� ������������������  STRUCTURE

FORMATTING����������� ������������������  &����������� ������������������  DESIGN

UI����������� ������������������  &����������� ������������������  INTERACTIVITY

Page 35: A Future Friendly Web

HTML

CSS

JS

CONTENT����������� ������������������  &����������� ������������������  STRUCTURE

FORMATTING����������� ������������������  &����������� ������������������  DESIGN

UI����������� ������������������  &����������� ������������������  INTERACTIVITY

Page 36: A Future Friendly Web

HTML

CSS

JS

CONTENT����������� ������������������  &����������� ������������������  STRUCTURE

FORMATTING����������� ������������������  &����������� ������������������  DESIGN

UI����������� ������������������  &����������� ������������������  INTERACTIVITY

Page 37: A Future Friendly Web

HTML

CSS

JS

CONTENT����������� ������������������  &����������� ������������������  STRUCTURE

FORMATTING����������� ������������������  &����������� ������������������  DESIGN

UI����������� ������������������  &����������� ������������������  INTERACTIVITY

Page 38: A Future Friendly Web

MobileFirst

ProgressiveEnhancement

ResponsiveWeb Design

Page 39: A Future Friendly Web

FLUID LAYOUTS FLEXIBLE IMAGES MEDIA QUERIES

Page 40: A Future Friendly Web

ProgressiveEnhancement

ResponsiveWeb Design

MobileFirst

Page 41: A Future Friendly Web

min-width: 20em

Page 42: A Future Friendly Web

min-width: 42emmin-width: 20em

Page 43: A Future Friendly Web

min-width: 42emmin-width: 20em

Page 44: A Future Friendly Web

Robust, backwards-compatible websites

Experiences that won‘t break

Support future standards

Page 45: A Future Friendly Web

Are today‘s websites going to work on

tomorrow‘s devices ?

Page 46: A Future Friendly Web

3D INTERFACES & GESTURES AUGMENTED REALITY

EYE-TRACKING TECHNOLOGY BRAIN-TRACKING TECHNOLOGY

Page 47: A Future Friendly Web

Evolving paradigmsthat might solve tomorrow‘s problems

Page 48: A Future Friendly Web

COPE

Beyond Mobile

OrbitalContent

Page 49: A Future Friendly Web

COPE

Beyond Mobile

OrbitalContent

Page 50: A Future Friendly Web

Get����������� ������������������  your����������� ������������������  content����������� ������������������  ready����������� ������������������  to����������� ������������������  go����������� ������������������  anywhere����������� ������������������  because����������� ������������������  it’s����������� ������������������  going����������� ������������������  to����������� ������������������  go����������� ������������������  everywhere

„“

Brad Frost

Page 51: A Future Friendly Web

COPE

CMS

API LAYER

Separate content from display

Make Content portable

No Markup No Formatting

Create OncePublish Everywhere

Access content everywhere

Page 52: A Future Friendly Web

Are the CMSs you have worked

with ready for this evolution?

Page 53: A Future Friendly Web

<client����������� ������������������  will����������� ������������������  find����������� ������������������  a����������� ������������������  way����������� ������������������  to����������� ������������������  screw����������� ������������������  it����������� ������������������  up>

Try to get past WYSIWYG editors

Page 54: A Future Friendly Web

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.

Page 55: A Future Friendly Web
Page 56: A Future Friendly Web
Page 57: A Future Friendly Web

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.

Page 58: A Future Friendly Web

COPE

Beyond Mobile

OrbitalContent

Page 59: A Future Friendly Web

What����������� ������������������  is����������� ������������������  your����������� ������������������  content����������� ������������������  made����������� ������������������  from,����������� ������������������  not����������� ������������������  what����������� ������������������  your����������� ������������������  content����������� ������������������  is.����������� ������������������  An����������� ������������������  important����������� ������������������  distinction.

„“

Mark Boulton

Page 60: A Future Friendly Web

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

Page 61: A Future Friendly Web

navigatepersonalizeprioritize

Semantic navigation

Content relationships

Low granularity

Page 62: A Future Friendly Web

The more structure you put into your content,

Website

MobileWeb

MobileApps

TabletApps

Print

E-Mail

Intranet

Blogs

Microsites

SocialMedia

Content

the freer it becomes in each context.

Page 63: A Future Friendly Web

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>

Page 64: A Future Friendly Web

<span property="food"> Pink Cupcake</span>

<span property="ingredients"> Flour, Sugar, ...</span>

<span property="location"> Pink Cupcake</span>

Page 65: A Future Friendly Web

<span property="food"> Pink Cupcake</span>

<span property="ingredients"> Flour, Sugar, ...</span>

<span property="location"> Pink Cupcake</span>

Page 66: A Future Friendly Web

<span property="food"> Pink Cupcake</span>

<span property="ingredients"> Flour, Sugar, ...</span>

<span property="location"> Pink Cupcake</span>

Page 67: A Future Friendly Web

COPE

Beyond Mobile

OrbitalContent

Page 68: A Future Friendly Web

Control����������� ������������������  is����������� ������������������  an����������� ������������������  illusion,����������� ������������������  because����������� ������������������  there����������� ������������������  is����������� ������������������  too����������� ������������������  much����������� ������������������  diversity

Bryan Rieger

„“

Page 69: A Future Friendly Web

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

Page 70: A Future Friendly Web

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

Page 71: A Future Friendly Web

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

Page 72: A Future Friendly Web

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

Page 73: A Future Friendly Web

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

Page 74: A Future Friendly Web

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.

Page 75: A Future Friendly Web

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

Page 76: A Future Friendly Web

Future ready content

Device Independence

Golden User Experiences

Page 77: A Future Friendly Web

This����������� ������������������  job����������� ������������������  takes����������� ������������������  editorial,����������� ������������������  architectural,����������� ������������������  and����������� ������������������  technical����������� ������������������  knowledge.����������� ������������������  It����������� ������������������  is����������� ������������������  a����������� ������������������  project����������� ������������������  for����������� ������������������  all����������� ������������������  of����������� ������������������  us.

SARA WACHTER-BOETTCHER

„“

Page 78: A Future Friendly Web

Thank you!Now it‘s time for some questions...

Page 79: A Future Friendly Web

MARCEL����������� ������������������  KALVERAMWeb����������� ������������������  Developer����������� ������������������  from����������� ������������������  Germany

@marcelkalveramspecrunner.net

#fflywww.future-friend.ly

A����������� ������������������  FUTURE����������� ������������������  FRIENDLY����������� ������������������  WEBHelp����������� ������������������  others����������� ������������������  to����������� ������������������  do����������� ������������������  the����������� ������������������  same