In de komende blogposts zal ik aandacht besteden aan responsiveness, en met name aan de toepassing van responsive design op SharePoint web sites. Allereerst zal ik ingaan op veelgebruikte terminologie en redenen waarom responsive design van belang is. Daarna op het ontwerpen en implementeren van responsive web sites en tenslotte op de manier waarom SharePoint websites responsive gemaakt kunnen worden.
Van oude wijn en nieuwe zakken?
Laat ik beginnen met te zeggen dat termen als "responsiveness" niet nieuw zijn. Als veel concepten in de ICT worden ze zo eens in de 10 jaar afgestoft en opnieuw gebruikt, maar dan onder een andere naam. Al in 1994 werkte ik aan programmatuur waarin rekening gehouden moest worden met schermgrootten en andere specifieke mogelijkheden van de apparatuur waar onze programmatuur op moest draaien (Windows, Mac, AS400, DOS). Naast grafische user interfaces moest ook rekening gehouden worden met character interfaces waarmee de eindgebruiker op een heel andere wijze de programmatuur bediende. En dat alles moest ondersteund worden met 1 broncode versie, hetgeen garant stond voor een flinke hoeveelheid kb's aan programmatuur.Er is dus niets nieuws onder de zon als we het hebben over moderne responsiveness... of toch wel?
Terminologie: alles op een rijtje
Laat ik beginnen met wat termen te noemen die ik in het kader van responsiveness vaak voorbij hoor komen:fixed -, fluid - en elastic design, skinny design, scaleable design, adaptive (web) design en responsive (web) design en hybride design.
In dit kader worden daarbij ook vaak de termen: personalisatie, customer journey, single channel, multi(ple) channel, cross channel en omni channel genoemd.
Genoeg reden voor wat uitleg...
Layout, content en functionaliteit van web pagina's: fixed -, fluid -, elastic -, skinny, scalable -, adaptive en responsive design, hybride design
In een vaste website layout (fixed design) worden alle onderdelen in de web site pagina's weergegeven binnen een gebied met een vaste hoogte en breedte, ongeacht de resolutie van het gebruikte apparaat (device, b.v. smartphone, laptop, tablet) of browser. De layout van de onderdelen in web pagina's blijft dezelfde; een onderdeel dat zich rechtsonder bevindt, blijft voor ieder apparaat of browser en bij elke resolutie rechtsonder.
Een speciale vorm van fixed design is skinny design. Hierbij ook een vaste schermgrootte, maar nu wordt uitgegaan van het apparaat of browser met de kleinste resolutie, bijvoorbeeld een telefoonscherm. Onnodig te zeggen dat dergelijke ontwerpen op schermen met hoge resoluties een hoop onbenutte lege ruimte overlaten.
Een speciale vorm van scalable design is elastic design. Hierbij worden eveneens verhoudingen gebruikt (uitgedrukt in "em"), maar deze verhoudingen zijn gerelateerd aan de standaard fontgrootte die voor het betreffende device of browser is gekozen. En omdat de standaard fontgrootte is afgestemd op wat voor de gebruiker goed leesbaar is, kunnen middels de "em" de layout van het scherm en schermonderdelen beter worden afgestemd op wat leesbaar is voor de gebruiker. Een "em" staat gelijk aan de grootte (in pixels) van het standaard font. Wanneer het standaard font bijvoorbeeld 12 pixels (px) of points (pt) is, dan is 1 em gedefinieerd als 12 px of 12 pt, en 2 em als 24 px of 24 pt.
Van web pagina's die volgens een adaptive design worden ontwerpen wordt de layout aangepast aan het schermformaat van het gebruikte device en browser. Voor een klein en smal scherm, bijvoorbeeld van een telefoon, kan de layout bijvoorbeeld zo veranderd worden dat de schermonderdelen onder elkaar in een kolom worden weergegeven. Deze designs kunnen zowel fixed als fluid/scalable zijn. In adaptive design wordt uitgegaan van een aantal vaste schermresolutie bandbreedten (b.v. 320px -480px, 480px - 620px) in tegenstelling tot fluid design, waarbij in principe iedere schermresolutie wordt ondersteund.
Van web pagina's die volgens responsive design principes worden ontwerpen wordt, net als in scalable design uitgegaan van percentages. Daarbij wordt, net als in adaptive design, de layout aangepast aan het schermformaat van het gebruikte device en browser. Dit gebeurt echter niet op basis van vaste schermresolutie bandbreedten, maar de user interface past zich aan aan elke mogelijke schermresolutie. Daarnaast kan in responsive design ook de content, functionaliteit en layout van de web onderdelen op de web pagina's worden afgestemd op de mogelijkheden van de gebruikte devices (desktop, smartphone, tablet, smart TV, et cetera) en browsers. Als voorbeeld van het laatste kan een telefoonnummer in een web pagina die wordt weergegeven in een mobiele telefoon worden weergegeven als een grote knop waarmee de gebruiker meteen het betreffende nummer kan bellen.
Bij een hybride (mixed) design wordt voor verschillende resolutie bandbreedten een andere aanpak gekozen:
- Fixed width voor grote en medium schermgrootten;
- Fluid width voor kleine schermen.
Channels
Was vroeger een eenvoudige web site voldoende om klanten van informatie te voorzien, tegenwoordig stellen klanten verregaande eisen aan de dienstverlening die via internet geboden worden. Klanten willen ook steeds meer zelfs kunnen regelen via internet (self service), waarbij ze in sterk toenemende mate gebruik maken van verschillende apparaten met een toenemend aantal functies. Zo kunnen middels een smartphone bijvoorbeeld schademeldingen worden gedaan bij een verzekeringsmaatschappij door foto's te maken van de schade en deze foto's met een speciale app te uploaden in het schademeldingssysteem van de verzekeraar. Dit vereenvoudigt en vergemakkelijkt zowel het melden van de schade voor de klant als de verwerking ervan door de verzekeraar. Daarnaast delen klanten steeds meer informatie (ervaringen) online in onafhankelijke communities als Facebook, Twitter, consumenten en gebruikersfora, et cetera. Integratie van social media is tegenwoordig gemeengoed.In het bovenstaande scenario worden verschillende kanalen (winkel, laptop, mobile, social media) gebruikt in de relatie tussen klanten en de leverancier. Dit in tegenstelling tot vroeger, toen je als klant alleen de winkel als "kanaal" had om met de leverancier te communiceren. Dit was single channel. In single channel scenario's ziet de klant 1 (verkoop)kanaal. Als het primaire kanaal een winkel of intermediair is, dan wordt de website vaak gebruikt als "brochure" of lead generator.
Channels: multi, cross en omni
Wanneer gebruik wordt gemaakt van meerdere kanalen, wordt gesproken van multi-, cross- of omni channel. In multi(ple) channel scenario's kan de klant kiezen tussen meerdere gescheiden kanalen, en ervaart hij geen consistentie tussen de verschillende kanalen. Er is hierbij nog weinig aandacht voor de customer journey over de kanalen heen. Wanneer de verschillende kanalen eenzelfde look and feel hebben, en de gebruiker een naadloze en consistente merkervaring krijgt over de verschillende kanalen heen, spreken we van cross channel. En wanneer de gebruiker zich niet meer realiseert dat hij met verschillende kanalen te maken heeft, spreken we van omni channel. De klant ervaart hierbij een merk en niet een kanaal dat een merk ondersteunt. De klant krijgt persoonlijke en relevante informatie aangeboden, en kan diensten afnemen, via alle beschikbare kanalen die naadloos op elkaar aansluiten.
Het moge duidelijk zijn dat een goed web design dat alle kanalen optimaal ondersteunt cruciaal is voor het succes van een multi -, cross - en omni channel aanpak. Dat ook de organisatie achter de web sites ook goed moet worden ongericht moge ook duidelijk zijn, maar dat valt buiten de scope van dit artikel. Laten we ons voor dit moment even concentreren op het "responsive" maken van web sites.
