6 key learnings for responsive webdesign

of 142 /142
What Marketing can learn from the Internet of Things. The Age of Context

description

Context is key. Our world is multi-screen. So you need responsive webdesign...

Transcript of 6 key learnings for responsive webdesign

Page 1: 6 key learnings for responsive webdesign

What Marketing can learn from the Internet of Things.

The Age of Context

Page 2: 6 key learnings for responsive webdesign

Good morning. My name is Bart.

Page 3: 6 key learnings for responsive webdesign

When I was a kid, I built imaginary worlds with Lego.

Page 4: 6 key learnings for responsive webdesign

I grew up deliberately watching commercials. I loved them.

Page 5: 6 key learnings for responsive webdesign

This is my daughter Merel. I have 3 kids.

Page 6: 6 key learnings for responsive webdesign

This is my daughter Merel. I have 3 kids.

They build imaginary worlds on their iPads. They fast forward commercials.

Page 7: 6 key learnings for responsive webdesign

I’m passionate about I live and work in Ghent.

Page 8: 6 key learnings for responsive webdesign

I work at digital agency Wijs.

Page 9: 6 key learnings for responsive webdesign

Part of Heaven Can Wait ecosystem.

Page 10: 6 key learnings for responsive webdesign

You can find me on Twitter: @netlash

Page 11: 6 key learnings for responsive webdesign

Welcome to the future KBC

Page 12: 6 key learnings for responsive webdesign

Digital rules

Page 13: 6 key learnings for responsive webdesign

‣ technology

‣ media (music, video, news)

‣ communications (chat, mail, skype, blog, twitter)

‣ …

!

„Software is eating the world.”

Massive shift from analog to digital

Page 14: 6 key learnings for responsive webdesign

When you say ‘camera’...

Page 15: 6 key learnings for responsive webdesign

... do you think ‘analog’ or ‘digital’ ?

Page 16: 6 key learnings for responsive webdesign

Digital communication is becoming the default. !

Page 17: 6 key learnings for responsive webdesign
Page 18: 6 key learnings for responsive webdesign

We’re discussing what got used most: facebook pages, URL’s or #hashtags.

Page 19: 6 key learnings for responsive webdesign

Digital communication is becoming the default. !

Offline marketing is becoming the trailer for an online experience.

Page 20: 6 key learnings for responsive webdesign

At the same time… !

When asked how much time a day they spend on the internet, youngsters say less hours than 5 years ago.

Page 21: 6 key learnings for responsive webdesign

At the same time… !

When asked how much time a day they spend on the internet, youngsters say less hours than 5 years ago.

They’re not.

Page 22: 6 key learnings for responsive webdesign

At the same time… !

When asked how much time a day they spend on the internet, youngsters say less hours than 5 years ago.

It just feels less - they don’t know they’re online anymore.

They’re not.

Page 23: 6 key learnings for responsive webdesign

In a few years time, saying „I’m going on the internet” will sound as silly as saying „I’m going to electricity”.

Page 24: 6 key learnings for responsive webdesign

Digital is creeping into the physical world.

The Internet of Things

Page 25: 6 key learnings for responsive webdesign

3 main battlefields: - quantified self - connected car - smart home

Page 26: 6 key learnings for responsive webdesign
Page 27: 6 key learnings for responsive webdesign

V2V technology.

Page 28: 6 key learnings for responsive webdesign
Page 29: 6 key learnings for responsive webdesign
Page 30: 6 key learnings for responsive webdesign

Build a mechanical car and insert electronics?

Or build software & electronics, and build a car around it?

Page 31: 6 key learnings for responsive webdesign
Page 32: 6 key learnings for responsive webdesign
Page 33: 6 key learnings for responsive webdesign
Page 34: 6 key learnings for responsive webdesign
Page 35: 6 key learnings for responsive webdesign

IF (temperature and light outside is low) THEN (switch on lights). !

!

IF (my mother-in-law is at the door) THEN (switch off lights and pretend we’re not home).

Page 36: 6 key learnings for responsive webdesign

„Small pieces loosely joined.”

Page 37: 6 key learnings for responsive webdesign

OM Signal

Page 38: 6 key learnings for responsive webdesign

Sensoria

Page 39: 6 key learnings for responsive webdesign

Proteus

Page 40: 6 key learnings for responsive webdesign

Needle-less blood monitor

Page 41: 6 key learnings for responsive webdesign

Vital Connect

Page 42: 6 key learnings for responsive webdesign
Page 43: 6 key learnings for responsive webdesign

Cool stuff, huh. !

Page 44: 6 key learnings for responsive webdesign

Cool stuff, huh. !

That’s why start-ups are hot. They build cool stuff. !

Page 45: 6 key learnings for responsive webdesign

Start-ups are the new rock bands. !

Everybody wants to be in a rock band. !

start-up

Page 46: 6 key learnings for responsive webdesign

Young talent doesn’t want to be in advertising anymore. !

Page 47: 6 key learnings for responsive webdesign

They grew up with Lego.

They want to build cool stuff.

Page 48: 6 key learnings for responsive webdesign

The age of context

Page 49: 6 key learnings for responsive webdesign

Data transforms into information or advertising, depending on the context of the consumer.

The age of context

Page 50: 6 key learnings for responsive webdesign

If I want to buy a car, and I find a bunch of paper advertising for diapers in my mailbox - they go straight into the bin.

!

If I want to buy a car, and I find a bunch of paper advertising for cars in my mailbox - I take them with me to the couch and read them all night.

The age of context

Page 51: 6 key learnings for responsive webdesign

Data transforms into information or advertising, depending on the context of the consumer.

The age of context

Page 52: 6 key learnings for responsive webdesign

The age of context

spam advertising info

less context more context

Page 53: 6 key learnings for responsive webdesign

‣ demographic (readership)

‣ search word

‣ location

‣ friends

‣ browser history

‣ activity (work, home, bar)

‣ …

The age of context

Page 54: 6 key learnings for responsive webdesign

You know, my kids have a disease.

Page 55: 6 key learnings for responsive webdesign

They watched too many ads.

They developed banner blindness.

Page 56: 6 key learnings for responsive webdesign

Context is the way to break through the banner blindness of our customers. !

Page 57: 6 key learnings for responsive webdesign

When

‣ I’m at home in my couch

‣ with low blood pressure

‣ playing sad music

‣ and it rains outside

show me how to book a holiday to the sun.

The age of context

Page 58: 6 key learnings for responsive webdesign

When

‣ I’m in my car on my way to work

‣ and I didn’t sleep well last night

‣ playing loud and pumping music

give me a voucher for a Red Bull at the next offroad.

The age of context

Page 59: 6 key learnings for responsive webdesign
Page 60: 6 key learnings for responsive webdesign
Page 61: 6 key learnings for responsive webdesign

Context changes advertising into information. !

Context is the way to break through the banner blindness of our customers. !

Page 62: 6 key learnings for responsive webdesign

Let’s move away from sci-fi.

Page 63: 6 key learnings for responsive webdesign

How can you ad context to your messages?

How can you change advertisement into information?

How can you break through the banner blindness?

Ask yourself:

Page 64: 6 key learnings for responsive webdesign

What context can KBC add right now?

Ask yourself:

Page 65: 6 key learnings for responsive webdesign

What context can KBC add right now?

!

SoLoMo

Ask yourself:

Page 66: 6 key learnings for responsive webdesign

What context can KBC add right now?

!

SoLoMo Social, Local, Mobile

Ask yourself:

Page 67: 6 key learnings for responsive webdesign
Page 68: 6 key learnings for responsive webdesign

34% Belgen gebruiken smartphones

"0$463+21(

#$%/(6

�(5.623�$3623

Source: Ipsos, 2013

Page 69: 6 key learnings for responsive webdesign

Bij -40jarigen ligt het aandeel veel hoger

"0$463+21(

#$%/(6

�(5.623�$3623

Source: Ipsos, 2013

Page 70: 6 key learnings for responsive webdesign

Bij -40jarige Nederlanders ligt het aandeel op 81%

Source: Consumer Barometer

('(4/$1'(45�(/*(1

Page 71: 6 key learnings for responsive webdesign

Demografische gegevens

Source: Our Mobile planet: Belgium

��%(82/.,1*

Page 72: 6 key learnings for responsive webdesign

Source: Think Finance with Google, April 2011

Page 73: 6 key learnings for responsive webdesign

Source: Think Finance with Google, April 2011

Page 74: 6 key learnings for responsive webdesign

Source: Think Finance with Google, April 2011

Page 75: 6 key learnings for responsive webdesign

A Wijs-example: paths to conversion

Page 76: 6 key learnings for responsive webdesign
Page 77: 6 key learnings for responsive webdesign
Page 78: 6 key learnings for responsive webdesign
Page 79: 6 key learnings for responsive webdesign
Page 80: 6 key learnings for responsive webdesign
Page 81: 6 key learnings for responsive webdesign
Page 82: 6 key learnings for responsive webdesign
Page 83: 6 key learnings for responsive webdesign

What context can KBC add right now?

!

Multi-screen

Ask yourself:

Page 84: 6 key learnings for responsive webdesign

So... responsive design?

Page 85: 6 key learnings for responsive webdesign

OMG! We’re still doubting this?

Page 86: 6 key learnings for responsive webdesign

‣ one back-end to update

‣ one development cost (higher?)

‣ future ready (throw them devices at me!)

‣ browser-based (serendipity)

‣ no install

‣ SEO! E-mail! Social!

‣ coolness...

Why responsive design?

Page 87: 6 key learnings for responsive webdesign

‣ daily appliciation

‣ device capabilities

‣ performance

!

Why not?

Page 88: 6 key learnings for responsive webdesign

We’re still learning…

Page 89: 6 key learnings for responsive webdesign

!

6 key learnings !

www.rockwerkchter.be www.deltalloydbank.be

Page 90: 6 key learnings for responsive webdesign
Page 91: 6 key learnings for responsive webdesign
Page 92: 6 key learnings for responsive webdesign

1. Think content first

Page 93: 6 key learnings for responsive webdesign

‣ photos of bands and artists are central

‣ we started with 1500px

‣ design is based on aspect ratio of photos

‣ content boxes are responsive in width and height

1. Think content first

Page 94: 6 key learnings for responsive webdesign
Page 95: 6 key learnings for responsive webdesign
Page 96: 6 key learnings for responsive webdesign
Page 97: 6 key learnings for responsive webdesign

content > design > technology

Page 98: 6 key learnings for responsive webdesign

‣ navigation: not the usual hierarchy

‣ fly-outs, hover: big no no!

‣ contextual navigation

‣ starts from content

1. Think content first

Page 99: 6 key learnings for responsive webdesign
Page 100: 6 key learnings for responsive webdesign
Page 101: 6 key learnings for responsive webdesign

‣ gather real content

‣ identify content types

‣ determine importance

‣ determine structure & pages

1. Think content first

Page 102: 6 key learnings for responsive webdesign

‣ responsive prototype

‣ focus on content

‣ lose unneccessary bits

1. Think content first

Page 103: 6 key learnings for responsive webdesign
Page 104: 6 key learnings for responsive webdesign

If you don’t need int on mobile, you probably don’t need it on desktop.

Page 105: 6 key learnings for responsive webdesign

‣ build real responsive layouts

‣ test where content breaks

‣ device agnostic

‣ test on real devices

Responsive prototype

Page 106: 6 key learnings for responsive webdesign
Page 107: 6 key learnings for responsive webdesign
Page 108: 6 key learnings for responsive webdesign
Page 109: 6 key learnings for responsive webdesign
Page 110: 6 key learnings for responsive webdesign

2. Think design first

Page 111: 6 key learnings for responsive webdesign

‣ breakpoints are essential

‣ you can’t build for all current and future devices

‣ test if design works, not if devices work

!

2. Think design first

Page 112: 6 key learnings for responsive webdesign

‣ 5 breakpoints: 480px, 600px, 770px, 980px, 1200px

‣ 480px, 770px, 980px: current popular devices

‣ 600px, 1200px: make it future proof

!

Breakpoints

Page 113: 6 key learnings for responsive webdesign

‣ if possible: move away from rough breakpoints

‣ gradual shifts

‣ make it future proof

!

Breakpoints

Page 114: 6 key learnings for responsive webdesign

design testing > device testing

Page 115: 6 key learnings for responsive webdesign

‣ style tiles

‣ interface elements

‣ overall mood of website

‣ focus on typography

‣ focus on readability

‣ design for touch

!

2. Think design first

Page 116: 6 key learnings for responsive webdesign
Page 117: 6 key learnings for responsive webdesign
Page 118: 6 key learnings for responsive webdesign
Page 119: 6 key learnings for responsive webdesign
Page 120: 6 key learnings for responsive webdesign
Page 121: 6 key learnings for responsive webdesign
Page 122: 6 key learnings for responsive webdesign

3. Think mobile first

Page 123: 6 key learnings for responsive webdesign
Page 124: 6 key learnings for responsive webdesign

‣ start with touch

‣ navigation and interaction is designed for touch first

‣ information architecture is designed for mobile first

‣ build up to tablet and to desktop

‣ big typography and buttons, made for thumbs

!

3. Think mobile first

Page 125: 6 key learnings for responsive webdesign
Page 126: 6 key learnings for responsive webdesign

‣ avoid typing where possible

‣ think touch first

!

3. Think mobile first

Page 127: 6 key learnings for responsive webdesign
Page 128: 6 key learnings for responsive webdesign
Page 129: 6 key learnings for responsive webdesign
Page 130: 6 key learnings for responsive webdesign
Page 131: 6 key learnings for responsive webdesign

4. Think conversion first

Page 132: 6 key learnings for responsive webdesign

‣ bottom line: sell tickets...

‣ typography is responsive: font size changes with screen size

‣ ‘buy tickets’ button stays big

!

4. Think conversion first

Page 133: 6 key learnings for responsive webdesign
Page 134: 6 key learnings for responsive webdesign

‣ think thumbs

‣ what is the natural stance of your hands on smartphone/tablets?

!

4. Think conversion first

Page 135: 6 key learnings for responsive webdesign

5. Think retina first

Page 136: 6 key learnings for responsive webdesign

‣ build HD-ready (retina)

‣ all logos and icons are vector based

‣ scales beautifully on all resolutions

!

5. Think retina first

Page 137: 6 key learnings for responsive webdesign

6. Think back-end first

Page 138: 6 key learnings for responsive webdesign

‣ responsive images: different image size vs. screen size

‣ back-end: one interface

‣ images are scaled automatically

!

6. Think back-end first

Page 139: 6 key learnings for responsive webdesign

1. Think content first

2. Think design first

3. Think mobile first

4. Think conversion first

5. Think retina first

6. Think back-end first

!

6 key learnings

Page 140: 6 key learnings for responsive webdesign

Good luck!

Page 141: 6 key learnings for responsive webdesign

Questions?

Page 142: 6 key learnings for responsive webdesign

Wijs bvba

Voorhavenlaan 31/3 9000 GENT

09 335 22 8009 330 09 83

http://[email protected]

BE 0473.071.275