angi studio

Workshop kennissessie

Responsive design beyond layout

•  20-03-2014

angi studio @angistudio #responsive Foto: www.flickr.com/photos/timo/11153618374/

angi studio

angi studio Ontwerpt graag sites die gebruikt worden

angi studio

Strategie en Concept

Interactie-ontwerp

Visueel ontwerp

Front end HTML, CSS, js

angi studio

angi studio

Programma 1.  Mobiel natuurlijk

2.  Op welke wijze mobiel?

3.  Twee manierne om responsive te gaan

4.  Korte termijn: Wat als je nu responsive gaat?

5.  Wat asl je écht responsive gaat? Mobile 1st Responsive Design.

6.  Onze aanpak

7.  Afsluiting en borrel

angi studio

Mobiel natuurlijk

angi studio Bron: http://www.gfk.com/nl/news-and-events/press-room/press-releases/paginas/aantal-smartphones-hoger-dan-aantal-computers.aspx

Meer smartphones dan PC’s in Nederland

angi studio

Mobile devices gebruik Nederland

+8,5 mln +7 mln

http://www.slideshare.net/richardotto/mobile-loyalty-ddma

angi studio Bron: http://gennovacap.blogspot.nl/2013/02/quality-ui-design-in-mobile-devices-why.html

angi studio

I pinch and zoom and I try to use the page. But my tears are in the way. I give up.

- Avinash Kaushik

Bron: http://www.kaushik.net/avinash/mobile-marketing-customer-data-acquisition-behavior-targeting/

angi studio

angi studio

Cross platform use

http://new.mobileweb.co.uk/archives/3420#

angi studio

Stelling

Wat op de desktop site staat is niet altijd relevant op een mobiel of tablet.

angi studio

Mobile users will do anything and everything desktop users will do

-Brad Frost

angi studio

Er is geen mobiel web

angi studio

Op welke wijze mobiel?

1.  App

2.  Mobiele website

3.  Responsive website

angi studio

App

angi studio

App

Peek agenda

angi studio

App

angi studio

App

Hünkemöller App •  Loyalty card •  Location Based push

wanneer je in de buurt bent van vestiging

•  QR- voor scannen in winkel en catalogus

angi studio

App Voordelen: •  Gebruiksvriendelijk

•  Features van de telefoon benutten (zoals GPS en camera)

•  Versterkt merkbeleving

•  Met name waardevol bij regelmatig gebruik

•  Werkt off line

Nadelen: •  Voor elk platform apart

ontwikkelen en onderhouden (IOS, Android)

•  Goedkeuring derde partij: Apple, Google

•  Gebruiker moet updaten

•  Inhoud pas vindbaar na installatie/download

angi studio

Mobiele site

•  Aparte mobiele template/ aparte HTML

•  Vaak aparte URL

•  Aparte extra content bron

angi studio

Mobiele website

angi studio

35% van Google search clicks via mobiel

http://www.slideshare.net/richardotto/mobile-loyalty-ddma

angi studio

Mobiele website

angi studio

Geen toegang: op m.ing.nl niets over sparen… Mobiele website

angi studio

Foutgevoelig: Shoppen op desktop 15% goedkoper bij Bol.com?

Mobiele website

angi studio

51% e-mails mobiel gelezen

http://www.slideshare.net/richardotto/mobile-loyalty-ddma

angi studio

76% socialised via mobiel

Beeld: http://www.networkintellect.com/blog/facebook-twitter-boost-mobile-advertising-industry/ http://www.slideshare.net/richardotto/mobile-loyalty-ddma

angi studio

Niet optimaal deelbaar: URL doorgestuurd via mobiel, geopend op desktop.

Mobiele website

angi studio

Onvolledig: Bekijk desktop versie link stuurt naar home.

Mobiele website

angi studio

SEO probleem: Gegoogled op ‘duurzaam sparen’, SNS campagne

Mobiele website

angi studio

Als bezoeker naar SNSbank.nl gaat mobiel…

Mobiele website

angi studio

Mobiele website Voordelen:

•  Snelle laadtijd

•  Geoptimaliseerd voor kleine schermen

•  Direct toegankelijk (geen download)

•  Toegankelijk vanaf elk platform

Nadelen: •  Nieuw of extra ontwerp en

ontwikkeling van de mobiele versie van de site

•  Dubbele invoer en dus ook dubbel onderhoud-foutgevoelig

•  Dubbele content is minder gunstig voor SEO

•  Onvolledige inhoud / slechts een deel toegankelijk op mobiel

angi studio

Responsive website

•  Volledige content = naadloze ervaring

•  Eén site, dezelfde HTML = elk device

•  Eén URL = één SEO campagne Efficiënt voor Google om te crawlen, indexeren en organiseren van de content. Eenvoudiger voor de gebruiker om te delen, linken naar de content vanwege één URL.

angi studio

Responsive werkt

O’Neill Clothing store had a nearly 600% revenue increase from going responsive, and Skinny Ties saw a 377.6% increase in revenue for iPhones after going responsive as well.

Ook op desktop hogere conversie na responsive design

https://econsultancy.com/blog/62260-five-brands-that-reaped-rewards-after-adopting-responsive-design

angi studio

Grote merken responsive

angi studio

Responsive site

angi studio

Responsive site

angi studio

Responsive site

angi studio

Responsive site

angi studio

Vraag

Wat betekent responsive voor het CMS van de site?

A) Niks

B) Uitbreiding van bestaande functionaliteit

C) Een nieuw CMS

angi studio

Twee manieren om je website responsive te maken •  Korte termijn: Huidige desktop website naar mobiel

•  Lange termijn: Redesign (mobile first responsive)

angi studio

Wat als je nu responsive gaat? met je bestaande desktop site van 1000 pagina’s

angi studio

Case: Triodos.nl

angi studio

Elke desktop site kan responsive gemaakt worden*

Zonder wijzigingen in CMS, content of HTML Demo Triodos Bank Kinder Toekomst Plan

http://bit.ly/1g4jiNT

angi studio

Kale content, zonder stylesheet Met stylesheet

angi studio

Wanneer welke techniek? Media Queries voor o.a.:

•  Verbergen desktop menu

•  Blokken volle breedte en onder elkaar

•  Andere fontgrootte en regelhoogte

•  Icons vervangen

JavaScript voor o.a.:

•  Tabs vervangen door accordeon

•  Mobiele navigatie

•  Volle scherm afbeeldingen of specifieke resize

angi studio

De uitdagingen 1.  Jouw content mobiel

2.  Mobiele navigatie en interactie patronen

3.  Beeld en assets

4.  Responsive web typografie

5.  Kleur en contrast

angi studio

Jouw content En nu mobiel

•  De lengte

•  De volgorde

•  De contenttypen

angi studio

Content: de lengte

angi studio

Content: de volgorde

De HTML is een blokkendoos

angi studio

Content: de volgorde

Responsive maakt je extra bewust van de structuur.

angi studio

Content: de volgorde

32 4 56

1

3

2

4

5

6

1

Mobiel dwingt je de volgorde te bepalen

angi studio

Content uitdagingen

•  Tabellen

•  Banners

•  Infographics

angi studio

Contenttype: tabellen

Tabellen

Responsive tabellen met JS: •  Scrollbalk toevoegen demo •  Een deel van kolommen verbergen demo

in %

angi studio

Contenttype: banners

Banners als afbeeldingen?

946px verkleinen naar 320px

Onleesbaar

angi studio

Webrichtlijnen: Gebruik plaatjes nooit als vervanging van tekst!

•  Tekst kan vergroot of verkleind wordt zonder verlies van kwaliteit

•  Tekst is toegankelijk en wordt door screenreaders gelezen (ook door Google). Elke informatieve afbeelding moet daarom een tekstalternatief hebben.

Contenttype: banners

angi studio

Oplossing Tekst gestijld + afbeelding!

Contentype: banners

angi studio

Interactieve infographics

Contenttype: Infographics

angi studio

Oplossing!

•  Leun niet alleen op mouseovers

•  Denk aan touch target size

•  Structureer items als lijst, infographic opknippen

Contenttype: Infographics

angi studio

Navigatie Vertalen naar mobiel

•  Gouden regel: Content first

•  Wanneer welke patronen te gebruiken

angi studio

Navigatie: patterns

Mobile is Content first

angi studio

Navigatie: patterns

Niet met de navigatie beginnen

angi studio

Navigatie: patterns

Maar met content beginnen

angi studio

Navigatie: patterns

Desktop menu naar mobiel?

angi studio

Navigatie: patterns

Side menu Geeft ruimte voor veel items

angi studio

Navigatie: patterns

Overlay en side menu Overlay menu voor hoofd-navigatie

Side menu voor content feed

angi studio

Navigatie: patterns

Top menu Creëert focus, voelt eenvoudig aan bij weinig items

angi studio

Navigatie: patterns

Top menu

angi studio

Navigatie: patterns

Top Menu Met twee niveaus en in- en uitklap

angi studio

Navigatie: patterns

Overlay menu Goed voor uitgebreide navigatie met content feeds

angi studio

Navigatie: patterns

Tabs vs accordeon

angi studio

Navigatie: patterns

Mobile tabs •  Opties direct in beeld

•  Goed te gebruiken bij weinig items

angi studio

Navigatie: patterns

Accordeon •  Goed bij lange labels

•  Veel items

angi studio

Navigatie: patterns

Waarom content verbergen?

angi studio

On a touchscreen device, scrolling is much easier than paginating: a fluid swish of the thumb versus a carefully placed tap.”

- Karen McGrane

angi studio

Navigatie: patterns

Infinite scrolling •  Swish is makkelijker

•  Je bekijkt veel meer

angi studio

Navigatie: patterns

Pagination •  Gebruiker is in

controle en kan makkelijker terug

•  Bekijkt als regel minder pagina’s

angi studio

Beeld en assets Wat betekent het voor mobiel?

•  Responsive afbeelding: grootte en verhouding

•  Iconen: touch size

angi studio

Beeld en assets

Nu 290 px breed

Iphone 5 is 640 px breed

angi studio Bron: Theehan lax

Beeld en assets

angi studio Bron: Teehan + Lax Density converter

Beeld en assets

angi studio

Beeld en assets

Één afbeelding in één formaat Origineel: 1900 × 974 px

Responsive beeld

angi studio

Beeld en assets

angi studio

Beeld en assets

Iconen Desktop 16 x16px

angi studio

Beeld en assets

Touch target Fysieke grootte 7 tot 9 mm

http://www.lukew.com/ff/entry.asp?1085

angi studio

Beeld en assets

2 sprites

http://www.lukew.com/ff/entry.asp?1085

Lage voor desktops, non-retina, MPDPI

Hoge resolutie voor Retina en XHDPI

angi studio

Responsive web typografie Leesbare tekst op elk device

•  Fysieke grootte

•  Verhouding koppen en tekst

•  Webfonts en rendering

•  Lijstjes en links -> touch target

angi studio

Web Design is 95% Typography

- Oliver Reichenstein

Typografie

angi studio

Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)

- Nick Sherman

Typografie

angi studio

Wat is de optimale… •  Lettergrootte

•  Regellengte

•  Regelhoogte

Typografie

angi studio

One size doesn’t fit all Fysieke grootte is afhankelijk van:

•  Lettertype

•  Leesafstand

•  Schermresolutie en density

Typografie

angi studio

2 fonts in 18px zijn niet gelijk

Typografie

Verdana 18px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend placerat mauris, quis ornare libero vulputate sit amet. Phasellus vehicula non purus nec sodales. Maecenas varius luctus quam id cursus.

Baskerville 18px �Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend placerat mauris, quis ornare libero vulputate sit amet. Phasellus vehicula non purus nec sodales. Maecenas varius luctus quam id cursus.

angi studio

Typografie

40 - 70 cm

Leesafstand

angi studio

Typografie

Bed -> dichtbij Knie -> zittend in trein, medium asftand Ontbijt -> device op tafel, ver weg

Leesafstand?

angi studio

Typografie

48 px

24 px

Fontgrootte kan niet gelijk zijn

30 px

18 px

angi studio

Typografie

Leesbaar font? Hetzelfde font is niet gelijk. Test het!

angi studio

When people disagree about the size or spacing of type on a website, there’s a very good chance that they see different representation of the same font.

- Nick Sherman

Typografie

angi studio

Kleur en contrast

•  Context: ‘s nacht in bed lezen vs. In Felle zonnelicht

•  Verschillende devices: Helderheid en contrast

angi studio

Voldoende kleurcontrast is essentieel !

•  Contrast ratio calculator

•  Check HTML met WCAG contrast checker add-on

Kleur en contrast

Test het!

angi studio

Kleur en contrast

angi studio

Responsive Design Won’t Fix Your Content Problem

- Karen McGrane

angi studio

Responsive is een stap in de goede richting

Volledige content toegankelijk, SEO vriendelijk deelbaar beheersbaar

angi studio

Wat als je écht responsive gaat en het structureel aanpakt

angi studio

Redesign mobile first responsive

angi studio

Triodos.nl mobile first schets Content & propositie Focus Brand experience Bruibaarheid Conversie

angi studio

angi studio

Goals User & Organization

Information needs & Content

Angi Studio’s approach

Mobile 1st Design

Focus

angi studio

Mobile UX

Functional Maintainable

Usable Convenient Pleasurable Meaningful

Flexible Durable

Current site behaves responsive via necessary design & CSS/Js-code

Goals user & organization Needs & Content analyses Strategy Improve the site concept, brand identity, usability and content: redesign, rewrite & redevelop

Your site responsive

Mobile 1st redesign

Quick fix

© Angi Studio

angi studio

Learnings

angi studio

Take aways •  Responsive maakt je site beter toegankelijk

•  Responsive raakt altijd ontwerp

•  Responsive design alleen lost je content probleem niet op

•  Mobile helpt te focussen en haalt zaken boven water

•  Mobile first design zorgt er voor dat je site ook op desktop beter presteert

angi studio

Best practices: responsive •  Rijksmuseum •  De Correspondent

•  Fairtrade •  Linda

•  Nos.nl/os2014

•  ah.nl/allerhande/ •  A list apart

•  Mashable

•  Time

•  Microsoft

•  Starbuck

•  bostonglobe.com

•  adioso.com

•  Trello

•  greygoose.com