responsive design beyond layout
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.TRANSCRIPT
![Page 1: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/1.jpg)
angi studio
Workshop kennissessie
Responsive design beyond layout
• 20-03-2014
angi studio @angistudio #responsive Foto: www.flickr.com/photos/timo/11153618374/
![Page 2: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/2.jpg)
angi studio
angi studio Ontwerpt graag sites die gebruikt worden
![Page 3: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/3.jpg)
angi studio
Strategie en Concept
Interactie-ontwerp
Visueel ontwerp
Front end HTML, CSS, js
![Page 4: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/4.jpg)
angi studio
![Page 5: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/5.jpg)
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
![Page 6: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/6.jpg)
angi studio
Mobiel natuurlijk
![Page 7: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/7.jpg)
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
![Page 8: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/8.jpg)
angi studio
Mobile devices gebruik Nederland
+8,5 mln +7 mln
http://www.slideshare.net/richardotto/mobile-loyalty-ddma
![Page 9: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/9.jpg)
angi studio Bron: http://gennovacap.blogspot.nl/2013/02/quality-ui-design-in-mobile-devices-why.html
![Page 10: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/10.jpg)
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/
![Page 11: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/11.jpg)
angi studio
![Page 12: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/12.jpg)
angi studio
Cross platform use
http://new.mobileweb.co.uk/archives/3420#
![Page 13: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/13.jpg)
angi studio
Stelling
Wat op de desktop site staat is niet altijd relevant op een mobiel of tablet.
![Page 14: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/14.jpg)
angi studio
Mobile users will do anything and everything desktop users will do
-Brad Frost
![Page 15: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/15.jpg)
angi studio
Er is geen mobiel web
![Page 16: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/16.jpg)
angi studio
Op welke wijze mobiel?
1. App
2. Mobiele website
3. Responsive website
![Page 17: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/17.jpg)
angi studio
App
![Page 18: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/18.jpg)
angi studio
App
Peek agenda
![Page 19: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/19.jpg)
angi studio
App
![Page 20: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/20.jpg)
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
![Page 21: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/22.jpg)
angi studio
Mobiele site
• Aparte mobiele template/ aparte HTML
• Vaak aparte URL
• Aparte extra content bron
![Page 23: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/23.jpg)
angi studio
Mobiele website
![Page 24: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/24.jpg)
angi studio
35% van Google search clicks via mobiel
http://www.slideshare.net/richardotto/mobile-loyalty-ddma
![Page 25: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/25.jpg)
angi studio
Mobiele website
![Page 26: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/26.jpg)
angi studio
Geen toegang: op m.ing.nl niets over sparen… Mobiele website
![Page 27: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/27.jpg)
angi studio
Foutgevoelig: Shoppen op desktop 15% goedkoper bij Bol.com?
Mobiele website
![Page 28: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/28.jpg)
angi studio
51% e-mails mobiel gelezen
http://www.slideshare.net/richardotto/mobile-loyalty-ddma
![Page 29: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/29.jpg)
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
![Page 30: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/30.jpg)
angi studio
Niet optimaal deelbaar: URL doorgestuurd via mobiel, geopend op desktop.
Mobiele website
![Page 31: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/31.jpg)
angi studio
Onvolledig: Bekijk desktop versie link stuurt naar home.
Mobiele website
![Page 32: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/32.jpg)
angi studio
SEO probleem: Gegoogled op ‘duurzaam sparen’, SNS campagne
Mobiele website
![Page 33: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/33.jpg)
angi studio
Als bezoeker naar SNSbank.nl gaat mobiel…
Mobiele website
![Page 34: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/34.jpg)
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
![Page 35: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/35.jpg)
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.
![Page 36: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/36.jpg)
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
![Page 37: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/37.jpg)
angi studio
Grote merken responsive
![Page 38: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/38.jpg)
angi studio
Responsive site
![Page 39: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/39.jpg)
angi studio
Responsive site
![Page 40: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/40.jpg)
angi studio
Responsive site
![Page 41: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/41.jpg)
angi studio
Responsive site
![Page 42: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/42.jpg)
angi studio
Vraag
Wat betekent responsive voor het CMS van de site?
A) Niks
B) Uitbreiding van bestaande functionaliteit
C) Een nieuw CMS
![Page 43: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/43.jpg)
angi studio
Twee manieren om je website responsive te maken • Korte termijn: Huidige desktop website naar mobiel
• Lange termijn: Redesign (mobile first responsive)
![Page 44: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/44.jpg)
angi studio
Wat als je nu responsive gaat? met je bestaande desktop site van 1000 pagina’s
![Page 45: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/45.jpg)
angi studio
Case: Triodos.nl
![Page 46: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/46.jpg)
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
![Page 47: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/47.jpg)
angi studio
Kale content, zonder stylesheet Met stylesheet
![Page 48: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/48.jpg)
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
![Page 49: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/49.jpg)
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
![Page 50: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/50.jpg)
angi studio
Jouw content En nu mobiel
• De lengte
• De volgorde
• De contenttypen
![Page 51: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/51.jpg)
angi studio
Content: de lengte
![Page 52: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/52.jpg)
angi studio
Content: de volgorde
De HTML is een blokkendoos
![Page 53: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/53.jpg)
angi studio
Content: de volgorde
Responsive maakt je extra bewust van de structuur.
![Page 54: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/54.jpg)
angi studio
Content: de volgorde
32 4 56
1
3
2
4
5
6
1
Mobiel dwingt je de volgorde te bepalen
![Page 55: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/55.jpg)
angi studio
Content uitdagingen
• Tabellen
• Banners
• Infographics
![Page 56: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/56.jpg)
angi studio
Contenttype: tabellen
Tabellen
Responsive tabellen met JS: • Scrollbalk toevoegen demo • Een deel van kolommen verbergen demo
in %
![Page 57: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/57.jpg)
angi studio
Contenttype: banners
Banners als afbeeldingen?
946px verkleinen naar 320px
Onleesbaar
![Page 58: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/58.jpg)
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
![Page 59: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/59.jpg)
angi studio
Oplossing Tekst gestijld + afbeelding!
Contentype: banners
![Page 60: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/60.jpg)
angi studio
Interactieve infographics
Contenttype: Infographics
![Page 61: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/61.jpg)
angi studio
Oplossing!
• Leun niet alleen op mouseovers
• Denk aan touch target size
• Structureer items als lijst, infographic opknippen
Contenttype: Infographics
![Page 62: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/62.jpg)
angi studio
Navigatie Vertalen naar mobiel
• Gouden regel: Content first
• Wanneer welke patronen te gebruiken
![Page 63: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/63.jpg)
angi studio
Navigatie: patterns
Mobile is Content first
![Page 64: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/64.jpg)
angi studio
Navigatie: patterns
Niet met de navigatie beginnen
![Page 65: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/65.jpg)
angi studio
Navigatie: patterns
Maar met content beginnen
![Page 66: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/66.jpg)
angi studio
Navigatie: patterns
Desktop menu naar mobiel?
![Page 67: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/67.jpg)
angi studio
Navigatie: patterns
Side menu Geeft ruimte voor veel items
![Page 68: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/68.jpg)
angi studio
Navigatie: patterns
Overlay en side menu Overlay menu voor hoofd-navigatie
Side menu voor content feed
![Page 69: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/69.jpg)
angi studio
Navigatie: patterns
Top menu Creëert focus, voelt eenvoudig aan bij weinig items
![Page 70: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/70.jpg)
angi studio
Navigatie: patterns
Top menu
![Page 71: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/71.jpg)
angi studio
Navigatie: patterns
Top Menu Met twee niveaus en in- en uitklap
![Page 72: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/72.jpg)
angi studio
Navigatie: patterns
Overlay menu Goed voor uitgebreide navigatie met content feeds
![Page 73: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/73.jpg)
angi studio
Navigatie: patterns
Tabs vs accordeon
![Page 74: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/74.jpg)
angi studio
Navigatie: patterns
Mobile tabs • Opties direct in beeld
• Goed te gebruiken bij weinig items
![Page 75: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/75.jpg)
angi studio
Navigatie: patterns
Accordeon • Goed bij lange labels
• Veel items
![Page 76: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/76.jpg)
angi studio
Navigatie: patterns
Waarom content verbergen?
![Page 77: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/77.jpg)
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
![Page 78: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/78.jpg)
angi studio
Navigatie: patterns
Infinite scrolling • Swish is makkelijker
• Je bekijkt veel meer
![Page 79: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/79.jpg)
angi studio
Navigatie: patterns
Pagination • Gebruiker is in
controle en kan makkelijker terug
• Bekijkt als regel minder pagina’s
![Page 80: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/80.jpg)
angi studio
Beeld en assets Wat betekent het voor mobiel?
• Responsive afbeelding: grootte en verhouding
• Iconen: touch size
![Page 81: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/81.jpg)
angi studio
Beeld en assets
Nu 290 px breed
Iphone 5 is 640 px breed
![Page 82: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/82.jpg)
angi studio Bron: Theehan lax
Beeld en assets
![Page 83: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/83.jpg)
angi studio Bron: Teehan + Lax Density converter
Beeld en assets
![Page 84: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/84.jpg)
angi studio
Beeld en assets
Één afbeelding in één formaat Origineel: 1900 × 974 px
Responsive beeld
![Page 85: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/85.jpg)
angi studio
Beeld en assets
![Page 86: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/86.jpg)
angi studio
Beeld en assets
Iconen Desktop 16 x16px
![Page 87: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/87.jpg)
angi studio
Beeld en assets
Touch target Fysieke grootte 7 tot 9 mm
http://www.lukew.com/ff/entry.asp?1085
![Page 88: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/88.jpg)
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
![Page 89: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/89.jpg)
angi studio
Responsive web typografie Leesbare tekst op elk device
• Fysieke grootte
• Verhouding koppen en tekst
• Webfonts en rendering
• Lijstjes en links -> touch target
![Page 90: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/90.jpg)
angi studio
Web Design is 95% Typography
- Oliver Reichenstein
Typografie
![Page 91: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/91.jpg)
angi studio
Responsive Typography is a Physical Discipline, But Your Computer Doesn’t Know It (Yet)
- Nick Sherman
Typografie
![Page 92: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/92.jpg)
angi studio
Wat is de optimale… • Lettergrootte
• Regellengte
• Regelhoogte
Typografie
![Page 93: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/93.jpg)
angi studio
One size doesn’t fit all Fysieke grootte is afhankelijk van:
• Lettertype
• Leesafstand
• Schermresolutie en density
Typografie
![Page 94: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/94.jpg)
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.
![Page 95: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/95.jpg)
angi studio
Typografie
40 - 70 cm
Leesafstand
![Page 96: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/96.jpg)
angi studio
Typografie
Bed -> dichtbij Knie -> zittend in trein, medium asftand Ontbijt -> device op tafel, ver weg
Leesafstand?
![Page 97: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/97.jpg)
angi studio
Typografie
48 px
24 px
Fontgrootte kan niet gelijk zijn
30 px
18 px
![Page 98: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/98.jpg)
angi studio
Typografie
Leesbaar font? Hetzelfde font is niet gelijk. Test het!
![Page 99: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/99.jpg)
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
![Page 100: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/100.jpg)
angi studio
Kleur en contrast
• Context: ‘s nacht in bed lezen vs. In Felle zonnelicht
• Verschillende devices: Helderheid en contrast
![Page 101: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/101.jpg)
angi studio
Voldoende kleurcontrast is essentieel !
• Contrast ratio calculator
• Check HTML met WCAG contrast checker add-on
Kleur en contrast
Test het!
![Page 102: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/102.jpg)
angi studio
Kleur en contrast
![Page 103: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/103.jpg)
angi studio
Responsive Design Won’t Fix Your Content Problem
- Karen McGrane
![Page 104: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/104.jpg)
angi studio
Responsive is een stap in de goede richting
Volledige content toegankelijk, SEO vriendelijk deelbaar beheersbaar
![Page 105: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/105.jpg)
angi studio
Wat als je écht responsive gaat en het structureel aanpakt
![Page 106: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/106.jpg)
angi studio
Redesign mobile first responsive
![Page 107: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/107.jpg)
angi studio
Triodos.nl mobile first schets Content & propositie Focus Brand experience Bruibaarheid Conversie
![Page 108: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/108.jpg)
angi studio
![Page 109: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/109.jpg)
angi studio
Goals User & Organization
Information needs & Content
Angi Studio’s approach
Mobile 1st Design
Focus
![Page 110: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/110.jpg)
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
![Page 111: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/111.jpg)
angi studio
Learnings
![Page 112: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/112.jpg)
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
![Page 113: Responsive Design beyond layout](https://reader033.vdocuments.net/reader033/viewer/2022052507/55813f79d8b42a9b098b4cd6/html5/thumbnails/113.jpg)
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