2.

Future-friendly web

3.

the web

logo

banner

text

WEB

4.

the web

logo

banner

text

5.

6.

Image courtesy of Brad Frost

the real web

7.

reduce costs

ensure a “pixel-perfect” experience across users

covered 90% of web clients

8.

9.

the “classic” web, today...

10.

low usabilitysmall text, tiny targets, “desktop” UI

11.

slow...

12.

use of obsolete technologies

13.

ineffective use of space

14.

user interface

viewport

connection speed and bandwidth

technology support

context

15.

3high level strategies

16.

1. mobile website

2. responsive website

3. app

17.

1. mobile website

18.

www.uitinvlaanderen.be m.uitinvlaanderen.be

19.

back-end

front-endDB

raw content

“full” websiteHTML + CSS + Javascript

templates

logicmobile websiteHTML + CSS + Javascript

templates

20.

specific content and targeted UI

no changes to existing website

optimal experience for targeted device

device detection for auto-redirect

scalability

multiple information architectures

changes to CMS

SEO

mobile website

21.

2. responsive website

22.

www.barackobama.com www.barackobama.com

23.

responsive website

24.

HTML + CSS + Javascript

responsive design

back-end

front-endDB

raw content

logic

templates

25.

1. fluid grid + fluid images

26.

2. CSS3 Media Queries

27.

3. content like water

content’s going to take many forms and flow into many different containers.

28.

“Whatever the device you use for getting your information out, it should be the same information.”

Sir Tim Berners-Lee, 1999

29.

same content for all devicessolid content strategy is crucial!

organizing and prioritizing

30.

scalable

no changes CMS

SEO

1 single website

complex for existing websites

complex wireframing and design

responsive website

31.

3. app

32.

no standardization

33.

rich user interface

OS integration

high performance

app store monetization

time to update

app store approval and restrictions

development for each platform

apps

34.

the real-world

35.

mobile ≠ lite

36.

no clear “mobile use case” exists

phone/tablet as a primary device

mobile as an opportunity

37.

real-world difficultiesStakeholders have different mind-sets

Level of knowledge and experience

No room for mandatory content (*)(*) read “ads”

Fear of losing flexibiltyi.a. limited rich-text editor

TestingDevice labs are recommended

Short time-to-deliverNot much time for thorough content selection, modeling and structuring

38.

possible solutionBuild 2 separate websitesØ classic “desktop” website (www.example.com)

Ø separate “mobile” website (m.example.com)

Use the separate mobile website as a testbed for

new technologies (e.g. concepts like responsive

design) and new ways of representing content

Eventually, replace the classic “desktop” website

with the separate (responsive) website

39.

go mobile first

growth -> opportunity

constraints -> focus

capabilities -> innovation

40.

if you want an “app” feeling,

just build a native app.

41.

use web standards

42.

43.

44.

45.

it’s not only about technology...

content

design

structure

usability

accessibility

46.

Properly structured content

is portable to future

platforms.

Design from the content out,

not from the canvas in.

A flexible project workflow is

essential to cope with

changes.

47.

SEO

48.

mobile search≠

local search

49.

local search

50.

mobile searchcrawling

www.example.com/about-us m.example.com/about-us

CMScanonical

51.

mobile searchsearching

www.example.com/about-us m.example.com/about-us

device detection + redirect

52.

SEO?relevan

cy

53.

SEO: it is at it’s best if you do not really need it.

relevant content

high-quality markup

consistent access across devices

54.

analytics