6 key learnings for responsive webdesign
Upcoming SlideShare
Loading in...5
×
 

6 key learnings for responsive webdesign

on

  • 3,864 views

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

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

Statistics

Views

Total Views
3,864
Views on SlideShare
3,647
Embed Views
217

Actions

Likes
65
Downloads
148
Comments
2

12 Embeds 217

http://www.conseilsmarketing.com 94
http://cathoutils.be 62
https://twitter.com 17
http://www.paperblog.fr 13
http://www.google.com 12
http://dev.localhost 7
http://virtualis.comunidadecotec.net 3
http://localhost 3
https://www.belstu.by 2
http://www.linkedin.com 2
http://mysite-qm2013.infineon.com 1
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • meta tagger for Online Global Solutions
    Are you sure you want to
    Your message goes here
    Processing…
  • great concept.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

6 key learnings for responsive webdesign 6 key learnings for responsive webdesign Presentation Transcript

  • 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.
  • I’m passionate about I live and work in Ghent.
  • I work at digital agency Wijs.
  • Part of Heaven Can Wait ecosystem.
  • You can find 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. !
  • We’re discussing what got used most: facebook pages, URL’s or #hashtags.
  • Digital communication is becoming the default. ! Offline 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. They’re 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 don’t know they’re online anymore. They’re not.
  • In a few years time, saying 
 „I’m going on the internet” 
 will sound as silly as saying 
 „I’m going to electricity”.
  • Digital is creeping into the physical world. The Internet of Things
  • 3 main battlefields: - quantified 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 off lights and pretend we’re not home).
  • „Small pieces loosely joined.”
  • OM Signal
  • Sensoria
  • Proteus
  • Needle-less blood monitor
  • Vital Connect
  • Cool stuff, huh. !
  • Cool stuff, huh. ! That’s why start-ups are hot.
 They build cool stuff. !
  • Start-ups are the new rock bands. ! Everybody wants to be in a rock band. ! start-up
  • Young talent doesn’t want to be in advertising anymore. !
  • They grew up with Lego. They want to build cool stuff.
  • 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 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
  • 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 ‣ 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
  • 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
  • Context changes advertising into information. ! Context is the way to break through the banner blindness of our customers. !
  • Let’s move away from sci-fi.
  • 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:
  • 34% Belgen gebruiken smartphones Source: Ipsos, 2013
  • Bij -40jarigen ligt het aandeel veel hoger Source: Ipsos, 2013
  • Bij -40jarige Nederlanders ligt het aandeel op 81% Source: Consumer Barometer
  • Demografische 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!We’re 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?
  • ‣ daily appliciation ‣ device capabilities ‣ performance ! Why not?
  • We’re still learning…
  • ! 6 key learnings ! www.rockwerkchter.be www.deltalloydbank.be
  • 1. Think content first
  • ‣ 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
  • content > design > technology
  • ‣ navigation: not the usual hierarchy ‣ fly-outs, hover: big no no! ‣ contextual navigation ‣ starts from content 1. Think content first
  • ‣ gather real content ‣ identify content types ‣ determine importance ‣ determine structure & pages 1. Think content first
  • ‣ responsive prototype ‣ focus on content ‣ lose unneccessary bits 1. Think content first
  • If you don’t need int on mobile, you probably don’t need it on desktop.
  • ‣ build real responsive layouts ‣ test where content breaks ‣ device agnostic ‣ test on real devices Responsive prototype
  • 2. Think design first
  • ‣ 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
  • ‣ 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 first
  • 3. Think mobile first
  • ‣ 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
  • ‣ avoid typing where possible ‣ think touch first ! 3. Think mobile first
  • 4. Think conversion first
  • ‣ bottom line: sell tickets... ‣ typography is responsive: font size changes with screen size ‣ ‘buy tickets’ button stays big ! 4. Think conversion first
  • ‣ think thumbs ‣ what is the natural stance of your hands on smartphone/tablets? ! 4. Think conversion first
  • 5. Think retina first
  • ‣ build HD-ready (retina) ‣ all logos and icons are vector based ‣ scales beautifully on all resolutions ! 5. Think retina first
  • 6. Think back-end first
  • ‣ responsive images: different image size vs. screen size ‣ back-end: one interface ‣ images are scaled automatically ! 6. Think back-end first
  • 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
  • Good luck!
  • Questions?
  • Wijs bvba Voorhavenlaan 31/3
 9000 GENT 09 335 22 80
 09 330 09 83 http://wijs.be
 info@wijs.be BE 0473.071.275