MOBILE MANIA Een drieluik over bewegende bladspiegels, vette vingers en responsive ratio
MOBILE MANIA
Een drieluik over bewegende bladspiegels, vette vingers en responsive ratio De afgelopen jaren heeft er zich in communicatieland een grote ontwikkeling voorgedaan. Mensen en bedrijven zijn door nieuwe technische mogelijkheden in staat gesteld om op een andere manier met elkaar te communiceren. De laatste tijd staat onder andere communicatie middels mobiele devices erg in de belangstelling. Woningcorporatie proberen de aansluiting te maken naar de mobiele gebruiker. Maar dit terrein is zo snel in ontwikkeling dat het moeilijk kan zijn om de juiste keuzes te maken. In dit drieluik over mobile mania neem ik u mee in de snelle ontwikkelingen en de keuzes waar woningcorporaties voor staan. In deel 1 kijken we naar de historische ontwikkeling van geschreven communicatie en stille revolutie van de bewegende bladspiegel. In het tweede deel staan we stil bij verschillende mobiele oplossingsrichtingen en de belangrijkste overwegingen die meespelen in het kiezen hiertussen. Welke oplossing past het best bij uw case? Het derde en laatste deel richt zich op vijf veelgestelde vragen over responsive webdesign; het meest hotte topic van dit moment. Om het een beetje dicht bij huis te houden gebruik ik waar mogelijk voorbeelden uit de woningcorporatiebranche.
Deel 1: Deel 2: Deel 3:
De revolutie van de bewegende bladspiegel Wat moet ik kiezen? De weg door het woud van de mobiele web-wildernis Vijf vragen over Responsive Webdesign
Over de auteur Henk Schaap is Design Director en is binnen Zig Websoftware verantwoordelijk voor design en usability en productontwikkeling. Als Ir. industreel ontwerpen weet hij hoe belangrijk gebruiksvriendelijkheid is voor succesvolle producten en diensten. Stuur een e-mail
- DEEL 1 -
DE REVOLUTIE VAN DE BEWEGENDE BLADSPIEGEL
Dat er de afgelopen tien jaar veel veranderd is in de geschreven communicatie is een inkoppertje. Papieren informatie wordt meer en meer verdreven door online informatievoorziening, door interactieve websites, apps en social media platforms als Facebook en Twitter. De online informatievoorziening verspreidt zich bovendien over een range van apparaten, van zo groot als een multimedia-TV tot zo klein als een horloge of mini-schermpje in de Google Glass. Internet functioneert niet meer alleen als medium voor eigen inhoud (websites) maar ook als transportmiddel voor andere 'media'. Zo kan informatie van radio en tv of gedrukte media via internet een nieuw bereik krijgen. Maar binnen deze verschuiving van apparaten en de manier waarop mensen geschreven informatie verspreiden en tot zich nemen, speelde zich een stille revolutie af die een achteloze gebruiker onbewust al snel kan missen: de Revolutie van de Bewegende Bladspiegel. Geschiedenis van de geschreven communicatie Schrijven om informatie over te brengen van de ene naar de andere persoon doen mensen al sinds de oudheid. Denk aan spijkerschrift, hiërogliefen en boekrollen. Monniken waren soms jaren bezig met het schrijven en overschrijven van boeken. Creëren van meerdere exemplaren van een geschrift was monnikenwerk; boeken waren letterlijk handschriften. Oplages waren daarom laag.
Met de introductie van de mechanische drukkunst werden oplages al snel vergroot tot enkele duizenden exemplaren. Aanvankelijk werden pagina’s uitgesneden uit houten blokken. Later kwam men op het idee om losse loden letters te maken waarmee een pagina opgemaakt kon worden. De loden letters waren minder slijtage-gevoelig en bovendien herbruikbaar voor andere drukwerken. Hiermee werd de verspreiding van kennis en nieuwe inzichten geweldig versneld. Sinds de zeventiende eeuw bestaan er al dag- en weekbladen en breed verspreide pamfletten. Tot het eind van de 19e eeuw bleef het direct gesproken, geschreven of gedrukte woord het voornaamste communicatiemiddel. Maar in de loop van de negentiende eeuw kwamen daar de fotografie, de telegrafie, de telefoon, de film, en in de twintigste eeuw de radio, de televisie bij.
De bladspiegel als basis voor geschreven communicatie In de jaren negentig van de twintigste eeuw ontstond een massaal gebruik van internet, toegankelijk gemaakt door browsers op het world wide web. Met letterlijk een druk op de knop kon de informatie binnen no-time beschikbaar gesteld worden aan elke computer die verbonden was aan het web. Stille revolutie – bladspiegel ondergeschikt aan de inhoud van de boodschap In de geschiedenis van de geschreven communicatie hebben mensen altijd gewerkt met een vaste bladspiegel. De monniken werkten manuscripten uit op een vel perkament en het eerste gedrukte boek hield rekening met de beschikbare afmetingen van de pagina. En tot voor kort gold deze gouden regel nog steeds, ook in de digitale wereld: websites werden ontworpen op een vast beeldschermoppervlak van 1024x768 pixels, zodat de pagina keurig te zien was op een destijds gangbare desktopmonitor. In de afgelopen jaren zijn er grote ontwikkelingen geweest op het gebied van devices en communicatiekanalen. In korte tijd explodeerde de opkomst en het gebruik van tablets, smartphones, multimedia-tv’s en inmiddels ook de wearables. Platforms als Facebook en Twitter schoten als paddestoelen uit de grond. Mensen en organisaties worden door nieuwe technische mogelijkheden in staat gesteld om één en dezelfde boodschap met zeer weinig moeite op allerlei manieren te communiceren. De beeldschermen die we hiervoor gebruiken zijn in deze korte tijd zowel kleiner (tablet, smartphone, horloge) als groter (tv) geworden. Zo werd het ineens mogelijk om één enkele boodschap, bij voorkeur beheerd vanuit één bron, te verspreiden naar allerlei verschillende apparaten en kanalen, met elk een eigen presentatievorm. Verkapt in het multimedia geweld van nieuwe apparaten en nieuwe communicatiekanalen zit dus een belangrijke paradigma-shift die allerlei nieuwe vormen van communicatie mogelijk maakt: voor het eerst in de geschiedenis van de geschreven online communicatie is de bladspiegel laat de content zich niet meer beperken door een vaste bladspiegel, maar kan allerlei vormen en maten aannemen. Een kleine revolutie!
Praktijkcase NU.nl – Een scala aan schermen De bekende Nederlandse nieuwsdienst NU.nl heeft een website, een mobiele website, en zowel smartphone als tablet-apps voor verschillende besturingssystemen. Daarnaast communiceren ze hun nieuwsberichten via Facebook, Twitter, Spotify, Google Glass en smartwatches. En alsof dat niet genoeg is; ook in narrowcasting schermen, zoals in de bus of in wachtkamers zijn regelmatig nieuws-berichten van NU te lezen.
De nieuwsberichten worden centraal geschreven en op verschillende manieren de wereld in gestuurd. Voor alle verschillende apparaten en communicatie-technieken worden schermpresentaties op maat gemaakt. Zo heeft de NU.nl-app voor Windows tablets een andere interface dan die voor Apple tablets, en weer anders dan de smartphone en narrowcasting interface. Per device en context wordt de gebruiksbeleving van het tot je nemen van nieuwsberichten geoptimaliseerd. Kort en krachtig als koppen in de bus; uitgebreid en ondersteund met filmpjes op de tablet. En geoptimaliseerd voor touch-gebruik, klik-gebruik en/of kijkgebruik. Een overzicht van de verschillende verschijningsvormen en kanalen is te vinden op http://www.nu.nl/socialtools.html#mobiel.
Mobiele oplossingen voor woningcorporaties Met een grote doelgroep en een commerciële insteek (net als kranten is het business model van NU gebaseerd op het verkopen en tonen van advertenties) is zo’n scala-aan-schermen aanpak (blijkbaar) een haalbare kaart voor NU.nl. Maar als woningcorporatie zit u hoogstwaarschijnlijk in een heel andere situatie. Een situatie waarin de doelgroep veel specifieker is, bijvoorbeeld beperkt tot een specifiek geografisch gebied en/of een bepaalde sociale klasse. Daarnaast zal uw doelgroep waarschijnlijk niet zo vaak terugkeren naar uw online informatie en interactie-voorzieningen als de doelgroep van een populaire nieuwswebsite. Er is dus veel minder sprake van de kracht van de massa. Dit vraag om slimme keuzes, die passen bij uw specifieke business case: uw situatie, budget en communicatie- of interactiedoel. TV, desktop, laptop, tablet, smartphone, smartwatch, Google Glass; allemaal apparaten met compleet verschillende schermafmetingen en een heel verschillende bedieningswijze (met de muis, vinger, stem, of afstandsbediening). Hoe mooi zou het zijn als een website zich automatisch kan aanpassen aan de afmetingen van een beeldscherm en de manier waarop mensen de website bedienen? Inmiddels is de techniek al een aardig stukje op weg. --> Hierover meer in Deel 2 en 3 van dit drieluik.
DEEL 2
WAT MOET IK KIEZEN? DE WEG DOOR HET WOUD VAN DE MOBIELE WEB-WILDERNIS De komst van nieuwe devices en nieuwe technieken heeft geresulteerd in een revolutie in de geschreven communicatie. Nu grote delen van de Nederlandse bevolking altijd en overal online zijn, is het logisch dat bezoekers van uw website niet altijd meer met een desktop-apparaat uw website bezoeken. Het gebruik van smartphones en tablets om te surfen op het internet is in de afgelopen jaren sterk gestegen. Apps schoten overal als paddestoelen uit de grond. Door de eindeloze stroom aan nieuwe apparaten, met allerlei features, specificaties en wisselende afmetingen is er in het internetlandschap in een periode van slechts enkele jaren een enorme groei ontstaan aan nieuwe technologieën en toepassingen die uw communicatie steeds dichter bij de doelgroep brengen. Tot letterlijk in hun broekzak!
In deel 2 van dit drieluik over mobile mania ga ik in op de verschillende oplossingen die er zijn voor communicatie op mobiele apparaten. Mobiele websites, apps, mobiele skins, responsive webdesign; ziet u door de bomen het bos nog? Ik help u graag op weg door het woud van de mobiele web-wildernis. Voortdurend aanpassen Door de snelle ontwikkelingen worden webbouwers continu uitgedaagd om grenzen te verleggen en mee te gaan met de trends in nieuwe media. Zo ook Zig. Woningcorporaties zien dat veel meer klanten mobiele apparaten gebruiken om via de digitale snelweg contact te hebben met de corporatie. Bij het uitdenken en ontwikkelen van nieuwe interactieve media zoals websites, webportalen en apps worden woningcorporaties geconfronteerd met keuzes die ze tot enkele jaren geleden nog niet hoefden te maken. Dat resulteert soms in wensen als ‘We willen een app’. Maar waar is die wens op gebaseerd en is het een logische keuze? Wat te doen met mobiele bezoekers? Dat is momenteel een hot topic. Wat moet je weten om hierin gefundeerde keuzes te maken?
Een scala aan mobiele oplossingen In alle nieuwe websites die wij ontwikkelen voor onze klanten houden we rekening met de mobiele gebruiker; we kunnen inmiddels niet meer om deze doelgroep heen. Er zijn verschillende oplossingen mogelijk. De keuze hangt af van de business case: uw online doelen, de gebruikscontext en uw budget. FFF: Rekening houden met de menselijke maat en touch interacties FFF staat voor Fat Finger Friendly. Smartphones en tablets worden niet met een muis bediend, zoals de meeste laptops en desktop computers, maar met de vinger. Deze andere manier van bedienen stelt nieuwe eisen aan een ontwerp. Vaak zit ‘m dat in kleine dingen. Zo bestaat er bij een touch interface bijvoorbeeld geen mouse-over status meer, want tikken staat gelijk aan klikken. De belangrijkste factor is echter de menselijke maat. Met de muis klik je met gemak op een klein (i) icoontje die een uitleg weergeeft bij een veld in een webformulier; de muis wijst daarbij precies één pixel aan. De menselijke vinger is echter een stuk dikker dan de punt van de cursor van de muis. In feite wijs je met je vinger dus een hele groep pixels aan van ruwweg een centimeter bij een centimeter. Staan er in een websiteontwerp twee klikbare onderdelen te dicht naast elkaar, dan bestaat dus de mogelijkheid dat onbedoeld de verkeerde link gevolgd wordt en dat gebruikers hierdoor op het verkeerde pad gezet worden. Rekening houden met de menselijke maat is daarom een essentiële eerste stap bij het ontwerpen en ontwikkelen van websites voor touch-interfaces. Praktisch gezien betekent dit dat er in de ontwerpen van websites en applicaties veel meer witruimte wordt toegepast. Less is more; flat design is hot. Pagina’s worden teruggebracht tot hun essentie. Dat levert rustige en overzichtelijke schermen op, waarbij scrollen inmiddels geen beperking meer is. Voordeel van deze oplossing is dat het in feite geen geld kost wanneer FFF-principes direct in de ontwerpfase van een nieuwe website of applicatie worden meegenomen. Nadeel is echter dat de oplossing uitgaat van één standaard-breedte. De gebruiker moet bij het inladen van een nieuwe pagina daarom steeds pinchen (inzoomen) om teksten goed te kunnen lezen. Dit speelt met name voor sterk verkleinde weergaves, zoals op smartphones. Smartphone-specifieke oplossingen Er zijn verschillende oplossingen denkbaar die zich specifiek richten op smartphones, omdat daar het zoomprobleem het meeste speelt. ‘Desktop-websites’ zijn op een tablet, ondanks het feit dat ze kleiner geschaald worden, meestal nog redelijk goed te lezen. Dit komt onder andere doordat de beeldresolutie van mobiele apparaten vele malen hoger is dan die van de meeste computer-monitoren en de kleinere afstand tussen oog en beeldscherm. Ofwel: de mobiele devices leveren een scherper beeld, waardoor ook kleinere lettertjes voor de meeste mensen nog goed leesbaar blijven. Bij smartphone-formaat wordt de website echter zo ver verkleind dat lezen echt problematisch wordt. Voor het schaal-probleem op smartphones zijn verschillende oplossingen denkbaar:
Mobiele website Veel organisaties probeerden het schaal-probleem op smartphones aanvankelijk op te lossen door een mobiele website te laten ontwikkelen. In feite is dat een op zichzelf staande website die volledig geoptimaliseerd is voor smartphone gebruikers. Niet alleen qua vormgeving en interactie, maar ook qua inhoud. Een goede stap richting de websitegebruiker, maar tegelijkertijd een extra webomgeving om te onderhouden. Het losse beheer is dan ook het grootste (praktische) nadeel aan de mobiele website en reden voor veel organisaties om van deze oplossing af te stappen. Voordeel kan wel zijn dat je de mobiele gebruiker heel gerichte informatie kunt aanbieden (als dit wenselijk is). Inmiddels zijn er ook andere alternatieven, zoals een mobiele skin of responsive webdesign. Hierover later meer. App Een andere oplossing is het lanceren van een app. Een app is een klein programmaatje dat je installeert op je telefoon. Het programma neemt een stukje schijfruimte in en toont een app-icoontje tussen alle andere apps. Een app kan ook je inloggegevens onthouden, zodat je telkens wanneer je de app opent direct ingelogd bent. Dat scheelt niet alleen een inlog-actie, maar meestal ook het invullen van algemene gedeeltes van formulieren met betrekking tot je NAW-gegevens. Handig dus. Apps zijn voornamelijk geschikt voor acties die je verschillende keren doet: het nieuws of je mail checken, een spel doen, navigeren, etc. De kracht van de app zit hem daarom met name in de herhaling. Een tweede voordeel is dat een app slim gebruik zou kunnen maken van de features van een telefoon, zoals de locatie of de camera. Maar met HTML5 websites is dit laatste inmiddels ook mogelijk. Is een app dé oplossing is voor mobiele apparaten? Dat hangt af van uw business case. Verwacht u veel herhalingsbezoeken? Kunt u gebruikers verleiden om een programma te downloaden? In het geval van een woonruimteverdeel-website is dit denkbaar, omdat gebruikers dagelijks of wekelijk terugkeren om op woningen te reageren en hun positie te bekijken. Maar bij een corporate website, waar mensen vaak met een specifieke aanleiding en vraag naartoe gaan, is dit veel minder waarschijnlijk. Daarnaast speelt als belangrijke factor een kostenoverweging mee. Zogenaamde native apps zijn toegespitst op een bepaald besturingssysteem (Android, iOS, Windows Phone). Wijzigingen moeten dus per platform-app doorgevoerd worden en bovendien moeten gebruikers de nieuwe versie (willen) downloaden. Voorwaarde is ook dat de app goedgekeurd wordt voor distributie in de App Store.
Praktijkcase: De Woningopname app Zig ontwikkelde een iPad woningopname-app om het werk van opzichters van woningopnames gemakkelijker te maken. Het inspecteren van een woning is de dagelijkse praktijk van een woninginspecteur. Tot voor kort vulde een woninginspecteur tijdens een inspectie heel wat papierwerk in, dat later op kantoor weer geadministreerd moest worden. Met de Woningopname-app is het mogelijk om via een gestroomlijnd proces eenvoudig al het administreren al tijdens de inspectie uit te voeren. Dat bespaart een hoop tijd. Waarom een app? Het installeren van een app is in deze context geen probleem. o De app biedt veel voordelen ten opzichte van de oude situatie o De app wordt veelvuldig (herhaaldelijk) gebruikt door de gebruiker De app heeft de mogelijkheid om gebruik te maken van features van het apparaat: o De GPS (locatie van de woning) o De camera (om foto’s te maken van de situatie ter plekke) Doordat de app als een los programmaatje draait is het niet nodig om altijd internetontvangst te hebben om de software te kunnen gebruiken. Als er in een woning of een bepaalde ruimte in een woning geen bereik is, is dit dus geen probleem. Proces-gericht Herhaaldelijk gebruik Gebruik van device-features Offline gebruik Meer weten over de woningopname-app? Kijk op http://www.zigwebsoftware.nl/opname/.
Daarnaast zijn er ook verschillende mengvormen van apps. Een webappp is in basis een mobiele website die speciaal wordt vormgegeven voor de grootte van het scherm van een mobiele telefoon of tablet. Daarbij wordt gebruik gemaakt van HTML, Javascript en platform afhankelijke functionaliteit. Per platform (Apple iOS, Android, Windows Phone) kan er (beperkt) gebruik worden gemaakt van specifieke functionaliteit van dat systeem. Voordelen van een webapp-oplossing is dat de applicatie min of meer ontwikkeld en beheerd kan worden als een website. Dus ook met responsive technieken, zodat er slechts één omgeving nodig is om allerlei apparaten te bedienen. De inhoud is altijd upto-date zonder releases. Nadeel is dat een webapp niet offline kan werken en dat de oplossing ten opzichte van native apps beperkter is door de web-technologieën. Een hybride app is in basis opgebouwd als een native app, maar een deel van de inhoud wordt gevuld door een website. Dit geeft vrijheid en flexibiliteit van een webapp en de kracht en het gemak van de plaatsing in een store. Er moeten echter wel twee omgevingen worden beheerd en hybride apps worden eerder geweigerd in de store. Cruciale vraag bij elke vorm van apps blijft echter: wil de beoogde gebruiker een programmaatje installeren? De verwachte gebruiksfrequentie en de toegevoegde waarde van dit kanaal ten opzichte van andere contactvormen moet heel duidelijk zijn om mensen hiertoe aan te zetten.
Mobiele skin Als je verwacht dat een gebruiker niet zo snel een app zal installeren, dan kan een mobiele skin van de website een passende oplossing zijn. In deze oplossing wordt een nieuwe, extra presentatie-laag van de website ontwikkeld die geoptimaliseerd is voor touch-gebruik op smartphones. Dit resulteert bijvoorbeeld in een aangepast menu en in een herindeling van de content. Als de website met een smartphone benaderd wordt, krijgt de gebruiker direct de mobiele skin te zien. Het verschil met de mobiele website is echter dat de informatie van de desktop-website en de mobiele skin beide uit één bron, één contentmanagementsysteem, afkomstig is. Dit maakt het beheer van de website een stuk eenvoudiger! De mobiele skin is een financieel aantrekkelijke oplossing voor corporaties die net dat stapje extra willen zetten voor mobiele gebruikers.
Praktijkcase: Parteon website De oplossing van Parteon bestaat uit een desktop website (links) en een mobiele skin (inzet rechtsonder). Van beide presentatievormen ziet u het menu. De weergave van dit interactieve element is volledig toegespitst op eenvoudig gebruik met het gebruikte apparaat.
Ervaar het zelf: bezoek parteon.nl met een desktop/laptop/tablet en een smartphone en zoek de verschillen!
Volledig responsive De term responsive webdesign is bedacht in 2010 door Ethan Marcotte op de weblog A List Apart. Marcotte merkte destijds op dat steeds meer bedrijven investeerden in een mobiele website om hun klanten ook mobiel een optimale ervaring te bieden. Maar door het groeiende aantal apparaten, met allen hun eigen resolutie en afmetingen, bleek één mobiele website geen optimale oplossing. Een responsive website past zichzelf aan de omgeving aan waarin deze getoond wordt.
Eén bron, meerdere voorkomens. Probeer het zelf op DUWO.nl! Bij responsive webdesign maken we één website die zich aanpast aan de breedte van het device van de gebruiker. Op elk apparaat is in principe alle content beschikbaar, alleen de presentatie en bediening kan verschillen. Voordelen van responsive Voordelen van responsive design zijn onder andere: Alle content is op één plek te beheren vanuit één CMS (in tegenstelling tot mobiele websites). Inhoudelijk complete informatie, onafhankelijk van gebruikte apparaat. Gebruikers bereiken gelijke pagina’s via dezelfde URL’s, in een format dat past bij het apparaat waarmee ze de website bekijken. Leesbaar en bruikbaar zonder zoomen. Door de dynamische opzet zal de responsive website beter klaar zijn voor de toekomst (met nog meer verschillende schermformaten) dan een website die niet responsive is opgebouwd. Nadelen van responsive design Er zijn ook een aantal nadelen te noemen: Nadeel van responsive ten opzichte van een mobiel geoptimaliseerde website is dat je geen specifieke mobiele content toont. Kosten: de ontwikkeling van responsive websites is complexer en kost daarom meer tijd. De keuze is reuze! Er is dus heel wat te kiezen als het gaat om mobiele oplossingen. In een afweging voor een beste oplossing spelen heel wat factoren mee. Zig adviseert u graag bij het maken van de beste keuze in uw situatie.
DEEL 3
VIJF VRAGEN OVER RESPONSIVE DESIGN Zig levert oplossingen voor Online Communicatie, Woonruimteverdeling en Klantcontact. Responsive design is voor veel van onze klanten een aantrekkelijke oplossing, omdat via één medium naar verschillende devices gecommuniceerd kan worden. En in veel gevallen gaat het om informatie- en interactiesystemen waarvoor huurders, woningzoekenden en stakeholders niet snel bereid zullen zijn een app te downloaden. Responsive webdesign is voor veel woningcorporaties dan ook in de aandacht. In het laatste deel van dit drieluik ga ik in op vijf vragen die in uw organisatie kunnen spelen rondom het responsive webdesign vraagstuk. 1. 2. 3. 4. 5.
Wat is het verschil tussen responsive design en adaptive design? Wat betekent responsive voor het ontwerp- en ontwikkelproces van een website / webportal? Hoe zit het met de kosten van responsive design? Hoe zit het met zoekmachines en responsive design? Responsive webdesign; what’s next?!
1. Wat is het verschil tussen responsive design, adaptive design en fluid design? Deze termen worden nogal eens doorelkaar gehaald, op één hoop gegooid en/of verschillend geïnterpreteerd. In het kort komt het hierop neer: fluid design evolueerde naar responsive design met behulp van media queries. Het volgende overzicht geeft meer inzicht:
Fixed Width Design (vaste breedte) Hierbij wordt geen rekening gehouden met schaalbaarheid. Is je beeldscherm kleiner dan de breedte van het ontwerp, dan moet je óf inzoomen óf je ziet slechts een gedeelte van de pagina (afhankelijk van de instellingen van je browser). Fixed Width Design geeft de ontwerper een grote mate van controle over de lay-out, typografie en andere grafische elementen, vergelijkbaar met het opmaken van een papieren magazine. Fluid Design Fluid Design was al mogelijk lang voor Responsive Design. HTML tekst op het web (zonder CSS) is van nature al fluid: de tekst loopt over de volledige breedte van het element. Als je de browser kleiner maakt, past ook de tekst zich aan. Een tijd lang, al voor de opkomst van tablets en smartphones, was er in de webcommunity een debat tussen voor- en tegenstanders van Fluid Design. Fixed Width geeft de ontwerper een hoge mate van controle over de weergave van de pagina, maar flexibele teksten zouden beter zijn voor de gebruiksbeleving in verschillende browsergroottes. Adaptive design Adaptive design maakt het mogelijk om met zogenaamde media queries te herkennen op welk apparaat de website getoond wordt. Hierdoor is niet alleen duidelijk wat de afmetingen van het ontwerp zijn, maar ook welke andere mogelijkheden het apparaat biedt. Denk aan de geopositie en de camera op een apparaat. Deze extra informatie/mogelijkheden kunnen gebruikt worden om de gebruiksbeleving van pagina’s nog extra af te stemmen op de mogelijkheden van het apparaat. Denk bijvoorbeeld aan Google die wanneer je zoekt naar “restaurant” de zoekresultaten sorteert op basis van afstand tot jouw geografische positie op dat moment. Of aan een website die op een smartphone een lang formulier terugbrengt tot enkele velden. Adaptive design schotelt een vast ontwerp voor aan de browser, vaak geënt op veelgebruikte schermresoluties zoals die voor de iPad of smartphone. Adaptive design is dus niet fluid, het maakt gebruik van verschillende vaste lay-outs en op basis van de media query wordt één van deze lay-outs getoond. Responsive design Responsive design combineert het beste van alle werelden: Responsive design = fluid grids + fluid images + media queries. Het voordeel hiervan is dat er optimaal gebruik kan worden gemaakt van de verschillende schermoppervlaktes, zeker met het steeds groter wordende scala aan mobiele devices.
2. Wat betekent responsive voor het ontwerp- en ontwikkelproces van een website / webportal? Veranderingen in vormgeving Door het wegvallen van de bladspiegel worden ontwerpers uitgedaagd om na te denken over schaalbaarheid van hun ontwerpen. De extra vrijheid vraagt om slimme keuzes in het ontwerp. Het is dan ook niet voor niets dat flat design momenteel ‘hot’ is: moeilijk te schalen vormonderdelen van weleer zoals textuur, schaduwen, en andere materiaaluitdrukkingen worden steeds meer vervangen door minimalistische ontwerpen met grote vlakken, veel witruimte, meer uitgesproken typografie en eenvoudige iconen.
Evolutie van het Safari icoon: van skeuomophfism (met veel detail en materiaaluitdrukkingen) naar flat design
Complexere ontwerpfase De content-choreografie die nodig is voor responsive websites vraagt om extra werkzaamheden in het grafisch/interactie-ontwerp, de ontwikkeling en het testen van de website. De meeste woningcorporatie-websites hebben een hoge informatiedichtheid: er moet veel informatie getoond worden op de website. Dit vereist in de meeste gevallen een relatief complexe paginaonderverdeling (sitemap) en navigatiestructuur. Hoe uitgebreider de menustructuren, hoe groter de uitdaging wordt om deze op kleinere beeldschermen te presenteren. Daarnaast bevatten veel woningcorporatie-websites uitgebreide functionaliteiten. Waar het relatief eenvoudig is om een tekstkolom smaller te schalen (dus: minder woorden per regel, de kolom wordt langer), is het veel ingewikkelder om functionele onderdelen (lijstweergaves, kaarten, formulieren e.d.) zomaar kleiner te schalen zonder in te boeten op gebruiksvriendelijkheid. Kortom: Het presenteren van de website op een kleiner formaat resulteert in een hoop nieuwe ontwerpoverwegingen die stuk voor stuk uitgewerkt moeten worden in een range van ontwerpen. Complexere ontwikkel- en testfase Niet alleen het ontwerp, maar ook de ontwikkeling van responsive websites is complexer dan niet-responsive websites. De breakpoints moeten geprogrammeerd worden en de alternatieve ontwerpen moeten geïmplementeerd worden. In feite komt het erop neer dat een bepaalde functionaliteit (bijvoorbeeld een woningadvertentie) meerdere malen opgemaakt moet worden. Tijdens het ontwikkelen zullen ook kleinere of grotere ontwerpproblemen die opduiken opgelost moeten worden.
De responsive website moet, eenmaal ontwikkeld, ook op allerlei beeldschermen getest worden. Een extra complicerende factor hierbij is dat apparaten allemaal hun eigen manieren van data interpreteren hebben. Variabelen die invloed hebben op de weergave zijn onder andere de pixeldichtheid van het device, het Operating System en de browser die gebruikt wordt. Daarnaast kunnen gebruikers zelf allerlei browserinstellingen configureren die ook invloed hebben op de weergave. Al met al maakt dit het testen van responsive websites ingewikkelder.
3. Hoe zit het met de kosten van Responsive Webdesign? Hoewel de naam doet vermoeden dat responsive design vooral om het ontwerp gaat, gaan de kosten voornamelijk zitten in de ontwikkeling en het testen & stabiliseren van de website. De figuur hieronder geeft een indicatie van de verhoudingen tussen werkzaamheden.
De kosten voor het implementeren van een responsive website hangen samen met:
De range waarvoor ontworpen wordt Door grenzen aan te geven voor welke schermbreedtes de website schaalbaar (responsive) is, kan de variëteit van de te implementeren functionaliteit verminderd worden. Zo is het vrij gebruikelijk om voor schermen van 1024px en breder de inhoud van de pagina niet meer groter te schalen, maar bijvoorbeeld gebruik te maken van een achtergrondfoto die schaalt, of een ‘behang’ dat zich repeteert op de achtergrond.
De diversiteit in functionaliteit Een website met voornamelijk tekst is eenvoudiger en goedkoper responsive te maken dan een website met een groot aantal functionaliteiten.
De complexiteit van de functionaliteit Binnen de verschillende functionaliteiten is ook een gradatie aan te brengen hoe complex deze zijn en hoe ‘mooi’ de functionaliteiten in de kleinere weergaves gepresenteerd worden. Moet in de mobiele weergave van de website op alle onderdelen de huisstijl toegepast worden of kunnen functionaliteiten vervangen worden door standaard interface-componenten zoals dropdownlijstjes
Onderstaande figuur maakt het verband zichtbaar. De drie factoren Range, Functionaliteit en Complexiteit zijn de drie ‘knoppen’ die de kosten voor responsive design bepalen. Complexiteit hangt sterk samen het aantal aanwezige functionaliteiten. Het aantal functionaliteiten is sterk afhankelijk van de informatie en interactiebehoefte van de woningcorporatie. Uiteindelijk resulteren de range, functionaliteit en complexiteit in het aantal templates (verschillende weergaves) dat ontworpen, ontwikkeld en getest moet worden.
4. Hoe zit het met zoekmachines en responsive design? Google wil zijn bezoekers de best mogelijk oplossing bieden wanneer zij een zoekopdracht uitvoeren. Google kan aan websites zien of ze responsive zijn. En aangezien er steeds meer mensen via een mobiel apparaat googelen zullen deze websites beter scoren. Een artikel op Jaap Jacobs op Marketingfacts.nl geeft dit goed weer: … Responsive design is ook voor SEO een goede uitkomst. Er is immers maar één website en geen duplicate content. Google waardeert het dat gebruikers via één URL de website kunnen bezoeken. Daarnaast is het een plus om de site goed te indexeren. Google zegt daarover: This also makes it easier for Google as they only need to crawl one URL opposed to multiple URLs with content on them. Furthermore, from an external linking and social media sharing perspective, users will only have one URL to link to, opposed to multiple URLs. For those of you who don’t know it was previously a common practice to have mobile sites on a subdomain or another domain. This made it very confusing when considering what information to serve to Google Bot and Google Bot Mobile. De bovenstaande quote behoeft een extra toelichting. Google werkt met meerdere soorten crawlers. Een crawler, ook wel spider of robot, wordt gebruikt om websites te vinden en indexeren. Er is een algemene crawler voor Google zoeken, maar ook een specifieke mobiele crawler. Dat betekent echter niet dat je een mobiele website nodig hebt om tussen de mobiele zoekresultaten te staan. Veel van de websites worden geïndexeerd door de standaard Googlebot. Deze sites, mobiel of niet, responsive of niet, worden ook in de resultaten op m.google.nl geplaatst. Het grootste nadeel van responsive ten opzichte van een mobiel geoptimaliseerde website is dat je geen specifieke mobiele content toont. Zodoende zijn er bijvoorbeeld geen geoptimaliseerde titles en descriptions voor mobiele gebruikers. En dat is handig wanneer er middels kortere of andere zoekopdrachten wordt gezocht. Een aparte mobiele website, met eigen URL’s, is minder sterk als je kijkt naar de linkpopulariteit.
5. Responsive webdesign; what’s next?! Responsive webdesign is momenteel ‘hot’. Maar voor hoelang? Er gaan al stemmen op om responsive webdesign te verrijken met nog extra informatie zoals informatie over het gedrag van de gebruiker of de omgeving waar de persoon zich op dat moment bevindt. Mogelijk heb je achter je bureau een heel andere informatiebehoefte dan wanneer je in de file staat. Ric van Westhreenen schets in zijn blog op FrankWatching een toekomst van wat hij ‘situationeel webdesign’ noemt: “We stevenen heel hard af op een situatie waarbij niet meer gesproken kan worden over enkele apparaten waarmee we het internet op gaan. We creëren situaties waarbij het internet een onderdeel is van het dagelijks leven. Websites zullen daar automatisch op moeten afstemmen door met de juiste boodschap tijdens de juiste situatie te komen. Responsive webdesign was een leuke oplossing, maar is als basis geen sluitende oplossing meer die daarop in kan spelen. Met de kennis opgedaan dankzij responsive webdesign moet de volgende fase worden ingegaan, die van situationeel webdesign. […] Het gaat dan in feite om adaptief webdesign, gecombineerd met kennis over het gedrag van de gebruiker. Gedrag + functie + vorm = situationeel webdesign. Situationeel webdesign is het maken van web interfaces die zich aanpassen aan de situatie van de gebruiker, zowel in vorm als in functie en die realtime mogelijk zijn. Met andere woorden: door de specifieke situatie van de gebruiker zijn de mogelijkheden van het apparaat dat de gebruiker gebruikt, wellicht beperkter dan in de meest ideale situatie.
Situationeel webdesign maakt gebruik van realtime signalen, afkomstig van het gebruik van een website – zoals bezoekersgedrag, schermgrootte, locatie, laadsnelheid of omgevingsdata – met een zo optimaal mogelijke gebruikerservaring als doel. Daarnaast gaat het ook uit van de mogelijke situatie van de gebruiker.
Woningcorporatieland Voorlopig zal woningcorporatieland nog haar handen vol hebben aan responsive design en het afstemmen van klantinteractie-processen op zowel online gebruikers als backoffices. Organisaties zoals DUWO lopen hierbij voorop. Zig Websoftware realiseerde voor hen een responsive website en klantenportaal. De huurders kunnen allerlei zaken online afhandelen; van het online tekenen van het huurcontract tot het doorverhuizen van kamer binnen de woongroep. Hiermee werd de ambitie van DUWO werkelijkheid: ze wilden huurders in staat stellen om midden in de nacht vanuit de kroeg hun huurzaken te regelen met hun eigen device. “Op onze website kun je vanuit je luie stoel, op elk device, thuis zaken regelen met DUWO. We wilden heel graag responsive design voor onze jonge doelgroep die cutting-edge is. Het voordeel voor iedereen die de website bezoekt is dat het gewoon altijd goed oogt. Ook op de kleinste mobiel ziet het er heel overzichtelijk uit. Je scrollt makkelijk door de tekst heen zonder dat het een onleesbaar geheel is. Studenten kunnen bijvoorbeeld vanaf hun mobiel tijdens een college hun rekening betalen.” – aldus Jesper Moonen, communicatiemedewerker DUWO.
