Bij het ontwerpen van een responsive site kom je er snel achter dat het verder gaat dan alleen het aanpassen van layout aan de breedte van het device. In deze workshop delen we onze learnings met responsive sites als ontwerpers.

1. angi studio
Workshop kennissessie
Responsive design
beyond layout
•
20-03-2014
angi studio
@angistudio #responsive
Foto: www.flickr.com/photos/timo/11153618374/

2. angi studio
angi studio
Ontwerpt graag sites die gebruikt worden

3. angi studio
Strategie en
Concept
Interactie-
ontwerp
Visueel
ontwerp
Front end
HTML, CSS, js

4. angi studio

5. 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

6. angi studio
Mobiel natuurlijk

7. angi studioBron: 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

8. angi studio
Mobile devices gebruik Nederland
+8,5 mln +7 mln
http://www.slideshare.net/richardotto/mobile-loyalty-ddma

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

10. 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/

11. angi studio

12. angi studio
Cross platform use
http://new.mobileweb.co.uk/archives/3420#

13. angi studio
Stelling
Wat op de desktop site staat is niet altijd
relevant op een mobiel of tablet.

14. angi studio
Mobile users will do
anything and
everything desktop
users will do
-Brad Frost

15. angi studio
Er is geen mobiel web

16. angi studio
Op welke wijze mobiel?
1. App
2. Mobiele website
3. Responsive website

17. angi studio
App

18. angi studio
App
Peek agenda

19. angi studio
App

20. 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

21. 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

22. angi studio
Mobiele site
• Aparte mobiele template/ aparte HTML
• Vaak aparte URL
• Aparte extra content bron

23. angi studio
Mobiele website

24. angi studio
35% van
Google search
clicks via mobiel
http://www.slideshare.net/richardotto/mobile-loyalty-ddma

25. angi studio
Mobiele website

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

27. angi studio
Foutgevoelig: Shoppen op desktop 15% goedkoper bij Bol.com?
Mobiele website

28. angi studio
51%
e-mails
mobiel
gelezen
http://www.slideshare.net/richardotto/mobile-loyalty-ddma

29. 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

30. angi studio
Niet optimaal deelbaar: URL doorgestuurd via mobiel, geopend op
desktop.
Mobiele website

31. angi studio
Onvolledig: Bekijk desktop versie link stuurt naar home.
Mobiele website

32. angi studio
SEO probleem: Gegoogled op ‘duurzaam sparen’, SNS campagne
Mobiele website

33. angi studio
Als bezoeker naar SNSbank.nl gaat mobiel…
Mobiele website

34. 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

35. 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.

36. 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

37. angi studio
Grote merken responsive

38. angi studio
Responsive site

39. angi studio
Responsive site

40. angi studio
Responsive site

41. angi studio
Responsive site

42. angi studio
Vraag
Wat betekent responsive voor het CMS van
de site?
A) Niks
B) Uitbreiding van bestaande functionaliteit
C) Een nieuw CMS

43. angi studio
Twee manieren om je website
responsive te maken
• Korte termijn: Huidige desktop website naar mobiel
• Lange termijn: Redesign (mobile first responsive)

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

45. angi studio
Case: Triodos.nl

46. 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

47. angi studio
Kale content, zonder stylesheetMet stylesheet

48. 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

49. 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

50. angi studio
Jouw content
En nu mobiel
• De lengte
• De volgorde
• De contenttypen

51. angi studio
Content: de lengte

52. angi studio
Content: de volgorde
De HTML is een blokkendoos

53. angi studio
Content: de volgorde
Responsive maakt je extra bewust van de structuur.

54. angi studio
Content: de volgorde
32 4 5
6
1
3
2
4
5
6
1
Mobiel dwingt je de volgorde te bepalen

55. angi studio
Content uitdagingen
• Tabellen
• Banners
• Infographics

56. angi studio
Contenttype: tabellen
Tabellen
Responsive tabellen met JS:
• Scrollbalk toevoegen demo
• Een deel van kolommen verbergen demo
in %

57. angi studio
Contenttype: banners
Banners als afbeeldingen?
946px verkleinen naar 320px
Onleesbaar

58. 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

59. angi studio
Oplossing
Tekst gestijld + afbeelding!
Contentype: banners

60. angi studio
Interactieve infographics
Contenttype: Infographics

61. angi studio
Oplossing!
• Leun niet alleen op mouseovers
• Denk aan touch target size
• Structureer items als lijst, infographic opknippen
Contenttype: Infographics

62. angi studio
Navigatie
Vertalen naar mobiel
• Gouden regel: Content first
• Wanneer welke patronen te gebruiken

63. angi studio
Navigatie: patterns
Mobile is
Content first

64. angi studio
Navigatie: patterns
Niet met de
navigatie
beginnen

65. angi studio
Navigatie: patterns
Maar met
content
beginnen

66. angi studio
Navigatie: patterns
Desktop menu naar mobiel?

67. angi studio
Navigatie: patterns
Side
menu
Geeft ruimte
voor veel
items

68. angi studio
Navigatie: patterns
Overlay en
side menu
Overlay menu
voor hoofd-
navigatie
Side menu voor
content feed

69. angi studio
Navigatie: patterns
Top menu
Creëert focus, voelt
eenvoudig aan bij
weinig items

70. angi studio
Navigatie: patterns
Top menu

71. angi studio
Navigatie: patterns
Top
Menu
Met twee
niveaus en
in- en uitklap

72. angi studio
Navigatie: patterns
Overlay
menu
Goed voor
uitgebreide
navigatie met
content feeds

73. angi studio
Navigatie: patterns
Tabs vs accordeon

74. angi studio
Navigatie: patterns
Mobile tabs
• Opties direct in beeld
• Goed te gebruiken bij
weinig items

75. angi studio
Navigatie: patterns
Accordeon
• Goed bij lange labels
• Veel items

76. angi studio
Navigatie: patterns
Waarom content
verbergen?

77. 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

78. angi studio
Navigatie: patterns
Infinite
scrolling
• Swish is makkelijker
• Je bekijkt veel meer

79. angi studio
Navigatie: patterns
Pagination
• Gebruiker is in
controle en kan
makkelijker terug
• Bekijkt als regel
minder pagina’s

80. angi studio
Beeld en assets
Wat betekent het voor mobiel?
• Responsive afbeelding: grootte en verhouding
• Iconen: touch size

81. angi studio
Beeld en assets
Nu 290 px breed
Iphone 5 is
640 px breed

82. angi studioBron: Theehan lax
Beeld en assets

83. angi studioBron: Teehan + Lax Density converter
Beeld en assets

84. angi studio
Beeld en assets
Één afbeelding
in één formaat
Origineel:
1900 × 974 px
Responsive beeld

85. angi studio
Beeld en assets

86. angi studio
Beeld en assets
Iconen
Desktop 16 x16px

87. angi studio
Beeld en assets
Touch target
Fysieke grootte 7 tot 9 mm
http://www.lukew.com/ff/entry.asp?1085

88. angi studio
Beeld en assets
2 sprites
Lage voor
desktops,
non-retina,
MPDPI
Hoge
resolutie
voor Retina
en XHDPI

89. angi studio
Responsive web typografie
Leesbare tekst op elk device
• Fysieke grootte
• Verhouding koppen en tekst
• Webfonts en rendering
• Lijstjes en links -> touch target

90. angi studio
Web Design is
95% Typography
- Oliver Reichenstein
Typografie

91. angi studio
Responsive
Typography is a
Physical Discipline,
But Your Computer
Doesn’t Know It (Yet)
- Nick Sherman
Typografie

92. angi studio
Wat is de optimale…
• Lettergrootte
• Regellengte
• Regelhoogte
Typografie

93. angi studio
One size doesn’t fit all
Fysieke grootte is afhankelijk van:
• Lettertype
• Leesafstand
• Schermresolutie en density
Typografie

94. 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.

95. angi studio
Typografie
40 - 70 cm
Leesafstand

96. angi studio
Typografie
Bed -> dichtbij
Knie -> zittend in trein,
medium asftand
Ontbijt -> device op
tafel, ver weg
Leesafstand?

97. angi studio
Typografie
48 px
24 px
Fontgrootte kan niet
gelijk zijn
30 px
18 px

98. angi studio
Typografie
Leesbaar font?
Hetzelfde font is niet gelijk. Test het!

99. 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

100. angi studio
Kleur en contrast
• Context: ‘s nacht in bed lezen vs. In Felle zonnelicht
• Verschillende devices: Helderheid en contrast

101. angi studio
Voldoende kleurcontrast is essentieel !
• Contrast ratio calculator
• Check HTML met WCAG contrast
checker add-on
Kleur en contrast
Test het!

102. angi studio
Kleur en contrast

103. angi studio
Responsive Design
Won’t Fix Your Content
Problem
- Karen McGrane

104. angi studio
Responsive is een stap in
de goede richting
Volledige content toegankelijk,
SEO vriendelijk
deelbaar
beheersbaar

105. angi studio
Wat als je écht responsive gaat
en het structureel aanpakt

106. angi studio
Redesign
mobile first responsive

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

108. angi studio

109. angi studio
Goals
User & Organization
Information needs
& Content
Angi Studio’s approach
Mobile 1st Design
Focus

110. 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

111. angi studio
Learnings

112. 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

113. 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