Responsive Design beyond layout
0 likes856 views
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.
Responsive Design beyond layout
- 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
- 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
- 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
- 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
- 24. angi studio 35% van Google search clicks via mobiel http://www.slideshare.net/richardotto/mobile-loyalty-ddma
- 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
- 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
- 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
- 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
- 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