Context is key. Our world is multi-screen. So you need responsive webdesign...
Text of 6 key learnings for responsive webdesign
What Marketing can learn from the Internet of Things. The Age
of Context
Good morning. My name is Bart.
When I was a kid, I built imaginary worlds with Lego.
I grew up deliberately watching commercials. I loved them.
This is my daughter Merel. I have 3 kids.
This is my daughter Merel. I have 3 kids. They build imaginary
worlds on their iPads. They fast forward commercials.
Im passionate about I live and work in Ghent.
I work at digital agency Wijs.
Part of Heaven Can Wait ecosystem.
You can nd me on Twitter: @netlash
Welcome to the future KBC
Digital rules
technology media (music, video, news) communications (chat,
mail, skype, blog, twitter) ! Software is eating the world. Massive
shift from analog to digital
When you say camera...
... do you think analog or digital ?
Digital communication is becoming the default. !
Were discussing what got used most: facebook pages, URLs or
#hashtags.
Digital communication is becoming the default. ! Oine marketing
is becoming the trailer for an online experience.
At the same time ! When asked how much time a day they spend on
the internet, youngsters say less hours than 5 years ago.
At the same time ! When asked how much time a day they spend on
the internet, youngsters say less hours than 5 years ago. Theyre
not.
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 dont know theyre online anymore. Theyre not.
In a few years time, saying Im going on the internet will sound
as silly as saying Im going to electricity.
Digital is creeping into the physical world. The Internet of
Things
3 main battleelds: - quantied self - connected car - smart
home
V2V technology.
Build a mechanical car and insert electronics? Or build
software & electronics, and build a car around it?
IF (temperature and light outside is low) THEN (switch on
lights). ! ! IF (my mother-in-law is at the door) THEN (switch o
lights and pretend were not home).
Small pieces loosely joined.
OM Signal
Sensoria
Proteus
Needle-less blood monitor
Vital Connect
Cool stu, huh. !
Cool stu, huh. ! Thats why start-ups are hot. They build cool
stu. !
Start-ups are the new rock bands. ! Everybody wants to be in a
rock band. ! start-up
Young talent doesnt want to be in advertising anymore. !
They grew up with Lego. They want to build cool stu.
The age of context
Data transforms into information or advertising, depending on
the context of the consumer. The age of context
If I want to buy a car, and I nd 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 nd 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
Data transforms into information or advertising, depending on
the context of the consumer. The age of context
The age of context spam advertising info less context more
context
demographic (readership) search word location friends browser
history activity (work, home, bar) The age of context
You know, my kids have a disease.
They watched too many ads. They developed banner
blindness.
Context is the way to break through the banner blindness of our
customers. !
When Im 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
When Im in my car on my way to work and I didnt sleep well last
night playing loud and pumping music give me a voucher for a Red
Bull at the next oroad. The age of context
Context changes advertising into information. ! Context is the
way to break through the banner blindness of our customers. !
Lets move away from sci-.
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:
What context can KBC add right now? Ask yourself:
What context can KBC add right now? ! SoLoMo Ask yourself:
What context can KBC add right now? ! SoLoMo Social, Local,
Mobile Ask yourself:
Bij -40jarigen ligt het aandeel veel hoger Source: Ipsos,
2013
Bij -40jarige Nederlanders ligt het aandeel op 81% Source:
Consumer Barometer
Demograsche gegevens Source: Our Mobile planet: Belgium
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
Source: Think Finance with Google, April 2011
A Wijs-example: paths to conversion
What context can KBC add right now? ! Multi-screen Ask
yourself:
So... responsive design?
OMG!Were still doubting this?
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?
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 rst
content > design > technology
navigation: not the usual hierarchy y-outs, hover: big no no!
contextual navigation starts from content 1. Think content rst
If you dont need int on mobile, you probably dont need it on
desktop.
build real responsive layouts test where content breaks device
agnostic test on real devices Responsive prototype
2. Think design rst
breakpoints are essential you cant build for all current and
future devices test if design works, not if devices work ! 2. Think
design rst
5 breakpoints: 480px, 600px, 770px, 980px, 1200px 480px, 770px,
980px: current popular devices 600px, 1200px: make it future proof
! Breakpoints
if possible: move away from rough breakpoints gradual shifts
make it future proof ! Breakpoints
design testing > device testing
style tiles interface elements overall mood of website focus on
typography focus on readability design for touch ! 2. Think design
rst
3. Think mobile rst
start with touch navigation and interaction is designed for
touch rst information architecture is designed for mobile rst build
up to tablet and to desktop big typography and buttons, made for
thumbs ! 3. Think mobile rst
avoid typing where possible think touch rst ! 3. Think mobile
rst
4. Think conversion rst
bottom line: sell tickets... typography is responsive: font
size changes with screen size buy tickets button stays big ! 4.
Think conversion rst
think thumbs what is the natural stance of your hands on
smartphone/tablets? ! 4. Think conversion rst
5. Think retina rst
build HD-ready (retina) all logos and icons are vector based
scales beautifully on all resolutions ! 5. Think retina rst
6. Think back-end rst
responsive images: dierent image size vs. screen size back-end:
one interface images are scaled automatically ! 6. Think back-end
rst
