November 3, 2011 – Microsoft Web & Phone UX Tour Belgium

RESPONSIVE WEB DESIGN

Bram

@bram_

Information architect

You may remember us from such clients as:

netlash.com/blog

3. Technical challenges

2. Design responsive design

1. Why you should use responsive design

Why responsive design?

1. How not to approach mobile web

2. Why responsive design is key

3. Think mobile first

4. It starts with IA

No stats and numbers.You’re here so you know

mobile is big.

HOW NOT TO APPROACH MOBILE WEB

Imagine: a mobile operator in 2006

Mark ObistarCEO at random mobile operator

We need a mobile website!

m.*mobile.*“Go to full website”

‣ What about tablet pc’s?

‣ What about new devices with unknown

display sizes?

A separate mobile website (1)

Raise your hand if you never used your smartphone laying in bed.

‣ Mobile users ≠ users on the road

‣ You probably need all your content

A separate mobile website (2)

“How should I configure my phone to use mobile internet?”

m.proximus.be

m.mobistar.be

m.base.be

m.mobilevikings.be

‣ You’ll have to manage all your

content twice

A separate mobile website (3)

‣ Users share links.

‣ Different users use different devices.

A separate mobile website (4)

‣ Only optimized for small screens

‣ Need to provide all content

‣ content has to be managed twice

‣ Issues when sharing content

‣ Pretty expensive for an unsatisfying result

A separate mobile website (conclusion)

Imagine: a newspaper company in 2010

P. VandermeerschCEO at a random newspaper

company

We need an app!

FAIL

Native apps (1)

Cfr. separate mobile website:

‣ What about tablet pc’s?

‣ Mobile users ≠ users on the road

‣ You’ll have to manage all your

content twice

‣ Which platforms will you support?

(iOS, Android, WindowsPhone)

‣ Each update:

- cost per platform

- might take time (approval)

Native apps (2)

‣ Store owners take a cut on in-app

purchases

Native apps (3)

‣ What about search engines?

‣ Your content won’t be indexed by them

Native apps (4)

‣ links to websites open in a new app (!)

‣ no native browser functions

(bookmarking!)

‣ non selectable text (no copy-paste)

‣ App’s often have their own interface

language

Native apps (5)

‣ issues with links to other websites

‣ no native browser functions like bookmarking

‣ non selectable text (no copy-paste)

‣ each interface is different

Remind you to something?

Please.Let’s not go there again.

‣ If you need hardware functions that

browsers don’t yet support (camera,

compass, gyroscope, gpu power, ...).

(of course native apps can be the best answer)

‣ Different platforms to support

‣ Cut on in-app-purchases

‣ Content has to be managed twice and won’t

be indexed by search engines

‣ Risk on usability issues

‣ Only if you need specific hardware functions

Native apps (conclusion)

In a lot of cases, neither separate mobile websites nor native apps provide an effective answer on todays needs.

RESPONSIVE IS KEY

‣ One website (content!)

‣ No issues with sharing or search engines

‣ One design

‣ Layout adapts to any screen size

Responsive web design:

handelsbeurs.be

HOW TO START?(This is how we do it)

1. Online strategy

2. Information architecture

3. Design

4. Front-end design

5. Development

Our proces

THINK MOBILE FIRST

What mobile first does not mean

‣ We should only focus on mobile from

now on

‣ Mobile is more important than

desktop

What mobile first does not mean:

‣ Mobile first

‣ Desktop first

Creating a website: 2 options

Mobile is harder to use

‣ Smaller screen

‣ Touch instead of keyboard and

mouse(pad)

‣ Slower internet connection

Why mobile first (1)

Mobile users have typically less

patience

‣ Because it’s harder to use

‣ Might be on the move

‣ Need that info to use it right now

Why mobile first (2)

Forces you to focus:

‣ No space for complexity

‣ No space for extra’s

‣ Focus on core features and simplicity

Why mobile first (3)

It’s easier to make a simple thing more complex than to make a complex thing more simple.

If you can support the mobile web, you can support anything.

1. Online strategy

2. Information architecture

3. Design

4. Front-end design

5. Development

Our proces

IA FOR MOBILE(actually it counts as much for desktop)

3 basics:

‣ Target audience

‣ Goal of the client

‣ USP of the client

Know the online strategy

‣ Top tasks (key services) in main menu

‣ Short and simple copy

‣ Throw away anything that isn’t needed

‣ White space is allowed

‣ Conclusion first, details later

KISS: Keep it simple and straightforward

‣ At any point it should be clear how to

get closer to the wanted answer

‣ Extra click is way better than complex

navigation

“Don’t make me think” (1)

‣ 2 types of page: choice page and

action page

‣ Homepage is a choice page

“Don’t make me think” (2)

CONCLUSION SO FAR

‣ For content-driven websites, responsive

web design is the future

‣ Think mobile first

‣ KISS, focus on core tasks (starts with IA)

Conclusion so far