Upload
angi-studio
View
499
Download
2
Embed Size (px)
DESCRIPTION
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.
Citation preview
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