Responsive webdesign versus Adaptive webdesign

Mobile webdesign is absoluut noodzakelijk

Mobilegeddon ligt alweer een tijdje achter ons. Om juist te zijn sinds 21 april 2015. Ter herinnering : In die periode kondigde Google aan dat het websites die geschikt waren voor mobiele apparaten zoals smartphones en tablets positief ging discrimineren. Dat wil zeggen : hoger zetten in de zoekresultaten dan de niet mobiel geschikte websites.

Sindsdien is het erg belangrijk geworden dat je website geschikt is voor mobiele apparaten. Maar eigenlijk moet je dat niet enkel doen voor Google. Maar met percentages die variëren van 15% tot 55%, afhankelijk voornamelijk van het feit of je een btb of btc website hebt, is het gewoon ook een commerciële noodzaak geworden om de ervaring van gebruikers met mobiele apparaten te optimaliseren.

In deze context werd de laatste jaren vooral de term “responsive webdesign” gebruikt. Een term die eigenlijk al dateert van 2010 en uitgevonden werd door Ethan Marcotte in zijn beroemde artikel op alistapart. Ik heb er ook een artikel over geschreven.

Responsive versus adaptive webdesign

In essentie is responsive design een techniek waarbij reactief de presentatie van een website en de componenten van een webpagina veranderen van positie en grootte in functie van het apparaat dat de website bekijkt. Dus met andere woorden, de presentatie van een pagina is anders op een iphone dan op een tablet. Zo wordt er gevarieerd in het aantal kolommen , de fontgrootte en de breedte van foto’s. Ook het gebruik van het zogenaamde “hamburger menu” behoort tot het domein van de responsive design.

Een bestaande website responsive maken is dus een kwestie van een aantal technische maar ook esthetische ingrepen. Wat doe je immers met de 3 kolommen en de grote header foto van 3000 pixels op de home pagina. Maar het is doenbaar én betaalbaar om een bestaande website aan te passen.

Een andere term die in deze context vaak gebruikt wordt is “adaptive webdesign“. In essentie gaat het om dezelfde techniek maar in het geval van adaptive design gaat de ontwikkelaar nog een stapje verder. Er wordt (bijna) een aparte website gemaakt voor elke apparaat. Rekening houdend met de breedte en typische technische kenmerken van het desbetreffende apparaat.

adaptive webdesign Lufthansa

En in die optiek is AWD of adaptive webdesign meestal duurder dan een traditioneel RWD of responsive webdesign ontwerp. Er moeten immers meer templates en designs gemaakt worden, aangepast aan elk apparaat. Maar hierdoor is AWD vaak ook een stuk sneller. Immers de design is gebaseerd op wat effectief op een scherm getoond wordt en daardoor is het niet nodig alle elementen te downloaden die wel op een desktop design gebruikt worden. de designelementen zijn immers specifiek aan het apparaat.

De grote lijnen van responsive webdesign mogen dan al duidelijk zijn toch zijn er een aantal trends die je de volgende maanden zeker zal zien doorsijpelen.

  • Content first : De inhoud staat centraal en niet de presentatie. Alle andere elementen op de webpagina hebben een ondersteunende rol om de leesbaarheid van de inhoud te vergemakkelijken. Mooi in deze context is het volgende citaat : “Designing in the absence of content is decorating
  • Mobile first : Centraal bij deze trend is dat het visueel ontwerp van de website eerst gemaakt wordt voor mobiele apparaten en dan pas voor desktops of media met grotere schermresoluties.
  • Flat design en material design : de dagen van Flat Design zijn geteld. Meer en meer worden de guidelines van Material Design gevolgd.

Samenvattend kunnen we stellen dat responsive design de de facto standaard is geworden voor websites. In tegenstelling tot wat velen denken, is het ook niet zo moeilijk om een bestaande website om te vormen tot een responsive website.

Material Design thema’s in wordpress

Material design is een techniek om betekenisvolle webinterfaces aan te maken die zowel duidelijkheid verschaffen aan de gebruikers én die een webpagina beschouwen als een plaats waar verschillende elementen zich tot mekaar verhouden als materialen en als dusdanig een invloed hebben op mekaar. In die zin is het een uitbreiding van Responsive Design maar maakt het het ruimer gebruik van gestructureerde pagina-opmaken en diepte zichten.

Read moreMaterial Design thema’s in wordpress

UX of user experience

Ux of  “User Experience” is een nieuwe term die probeert te vatten wat de bezoeker van je website voelt en ervaart. Deze ervaringen worden centraal gesteld bij het ontwerp of aanpassing van je website. Nieuw is dat allemaal niet. Of toch ?

Egocentrisch webdesign : CX of client experience staat centraal

Het lijkt vanzelfsprekend dat het ontwerp van een website gebaseerd is op wat de gebruiker ervan vindt. Maar toch is dit in het verleden helemaal anders geweest. De traditionele manier van werken, en ik ben er zeker van dat velen dit zullen herkennen is de volgende.

use experience De webdesigner maakte meestal een ontwerp van een website dat mooi was en gebaseerd op zijn of haar ervaringen. In functie van bemerkingen van de klant, werd dan een tweede of zelfs derde versie gepresenteerd. Kortom, de eindklant, voor wie de website bedoeld is, kwam hierbij maar zijdelings aan te pas.

Vaak was een website een compromis, een match als het ware tussen de klant en de designer of grafist.

Bij UX staat de klant of degenen die de website gaat bezoeken centraal en niet de individuele voorkeuren van de eigenaar van het bedrijf of zelfs niet de grafist. Een perfect voorbeeld hiervan is de beslissing van google (zie : VIER super tips voor je website) om mobiele websites positief te discrimineren.

De gebruikerservaring staat immers centraal.

Veel zullen opwerpen dat dit toch maar een vaag concept is. Bovendien is het een vrij algemene term (we spreken immers over psychologie en individuele ervaringen) en lijkt de impact ervan moeilijk meetbaar. Toch lijkt het me een basisvereiste dat een website op de eerste plaats voor een gebruiker opgesteld wordt en dat daarbij zijn of haar ervaringen centraal staan.

User Experience Basistechnieken

Toch kunnen een aantal basistechnieken van UX of user experience toegepast worden zonder extra kosten en extra tijd. Hierbij een kleine opsomming :

  1. A/B testen : vergelijk de populariteit van 2 pagina’s met hetzelfde onderwerp en werk daarna verder op de meest populaire pagina. Testen is gewoon het beste recept voor een goede website. In mijn vorig artikel over adsense a/b testing wordt dit nog concreter uitgelegd voor SEA advertenties.
  2. user surveys : betrek klaneten en prospecten bij de creatie of aanpassing van je website
  3. gebruik prototypes en wireframes
  4. definieer use flows : wat zijn de trajecten die verschillend soorten bezoekers op je website moeten afleggen om tot een gewenst resultaat te komen
  5. storytelling : gebruik emotionele taal om je boodschap over te brengen. Dit zorgt immers voor een unieke ux !
  6. maak een lijst van content en bekijk wat elke van die elementen kunnen bijbrengen voor de verschillende doelgroepen
  7. gebruik “persona’s” : persona’s zijn een geheel van karakteristieken, behoeftes, motivaties en omgevingsfactoren van een stereotypische site-bezoeker. In dit artikel op uxmag.com staat dit nog wat beter en duidelijker uitgelegd.

Kortom, vooraleer te staren met de zoveelste “home-diensten en contact” website, is het beter even stil te staan aan wie de website gericht is en wat de ideale trajecten zijn die bezoekers van de website doorlopen. User experience is een methodologie die dit helpt te verwezelijken.

VIER super tips voor je website

In dit artikel probeer ik een aantal trends die belangrijk waren de voorbije maand samen te vatten in een aantal praktische tips. Zo wordt februari 2015 vooral gekenmerkt door een reeks aangekondigde wijzigingen van Google over de manier waarop ze het web gaan indexeren.

Tip 1 : Positieve discriminatie voor mobiele websites

In de aankondiging van 26 februari jl, laat Google er geen twijfel over bestaan : websites die geschikt zijn voor een mobiele weergave zullen positiever geranked worden dan gelijkaardige websites die niet responsive zijn.

Redenering hierachter is dat mensen, die meer en meer mobiele apparaten gebruiken om te zoeken op het web, verwachten dat de resultaten kwaliteitsvol zijn en dan heeft het weinig zin, met de iphone in de hand, dat Google je doorstuurt naar een website die je op je mobiel apparaat niet kan lezen.

Je kan op deze Google Webmaster pagina makkelijk testen of je website “responsive” (geschikt voor mobiele apparaten) is of niet.

Ik had het eigenlijk al gezegd maar soit.

En dat zijn niet de enige wijzigingen die Google op stapel heeft staan : ze gaan ook #tweets terug opnemen in de zoekresultaten én het algoritme voor de ranking van websites zal voortaan vooral letten op het waarheidsgehalte van je website. Met andere woorden : “content is king” wordt een realiteit. Maar dat is voer voor een ander artikel.

Tip 2 : gebruik foto’s en beelden op je website

Meer en meer studies besteden er aandacht aan : websites die veel gebruik maken van (functionele) beelden, hebben een loyaler publiek dat ook langer op de website aanwezig blijft. En dus wordt het gebruik van beelden volgens mij dé trend van 2015. How to Embed a Pinterest Board on Your Website [Quick Tip

Een toffe manier om foto’s op je website te integreren, is door gebruik te maken van een Pinterest account. Via deze tutorial kan je ook makkelijk een Pinterest widget op je website installeren.

 

Tip 3 : Zie wat er leeft op sociale media via BuzzSumo

Een van de tofste en meest praktische apps die ik de laatste tijd uitprobeerde, is BuzzSumo.  Via deze website kan je per zoekwoord zien wat populair is op de verschillende (sociale) media maar vooral ook wie het meeste “sociale credibiliteit” heeft over een bepaald onderwerp. Of misschien zelfs over je concurrent of je eigen bedrijf. De basisaccount is gratis. Voor extra functionaliteit moet je uiteraard bijbetalen. As usual.

buzzsumo

Tip 4 : vermijdt de zeven dodelijke zonden van online marketing

Af en toe vallen een aantal artikels op in de dagelijkse routine van newsitems die in mijn mailbox terecht komen. Niet zozeer om wille van de inhoud maar door de uitdagende titel : the seven deadly sins of online marketing is er daar één van.

Maar in tegenstelling wat vaak het geval is, is de inhoud er wel boenk op. En wat blijkt ? Stop met statische websites maar maak content gedreven websites die leven. Stop met “keyword stuffing” of het volzetten van je websites met kernwoorden die niks het het onderwerp te maken hebben of die vaak gewoon synoniemen zijn van mekaar. Creëer een Google MyBusiness Account en stop met copy-paste van content van andere websites. Google ziet het en hier vloekt men niet !

Wil je een duidelijk overzicht van wat je zelf kan doen ? Bekijk dan ons artikel over seo tips voor de KMO.

designtrends 2015 – scrolling

In het vorige artikel over dé designtrends voor 2015, kwam “responsive design” al aan bod. Deze vorm van webdesign heeft echter op meerdere manieren invloed op de manier een website wordt gebouwd. Een van de gevolgen hiervan, die we nu al regelmatig zien, is wat men mooi innhet Engels als volgt zegt : “More scrolling less clicking“.

langere pagina’s door betere scrolling

scrolling_vs_clickingDat wil zeggen dat de websites meer en meer in de lengte worden opgezet. Dat men niet meer bang is om letterlijk een “lange” pagina aan te maken. Waar men vroeger neigde naar het opsplisten van een lange pagina op verschillende pagina’s, kan dit nu onder mekaar gezet worden. De interactie met de pagina, via het hoofdmenu, gebeurt nu eerder met een techniek die we “parallax scrolling” noemen. Een mooi voorbeeld daarvan vinden we op Boy-Coy. Ook wel “single page scrolling” genoemd. Volgens vele bronnen ligt Twitter onbewust aan de basis van deze techniek om wille van scroll georiënteerde interfaces.

Aan de basis van deze nieuwe aanpak ligt niet enkel het succes van mobile, maar ook het paradigma van de “printed media“. Als je werkt met pagina’s die niet al te lang zijn, dan werk je eigenlijk zoals in een boek : de inhoud wordt over verschillende pagina’s verdeeld en kan maar zo lang zijn als een a4. Webdesign lijkt dus meer en meer los te komen van deze beperkingen die niets met medium zelf te maken hebben. Via scrolling zijn er immers geen beperkingen in de langte.

Er is echter niet enkel een “user experience” element dat aan de basis ligt van deze trend. Er is ook een marketing-technische reden waarom scrolling interessant zou kunnen zijn. Het idee is dat “klikken” een beslissing vraagt van de gebruiker terwijl “scrolling” een eerder intuitieve manier van interageren is met de bezochte website.

meer interactie door scrolling

Dat wil zeggen dat de argumentatie of de verkoopscriteria op een “softere” en meer naturlijke manier kunnen opgebouwd worden bij het bezoek van een website. Of met andere woorden, de “call-to-action” is geïntegreerd in de pagina zelf en vereist geen beslissing van de gebruiker om eerst te klikken naar een “contact” pagina. Dat lijkt op het eerste zicht een praktijk die overgenomen werd uit het gebruik van de zogenaamde “landingpages“.

In deze context zijn “micro-interactions” belangrijk. In plaats van de bezoeker een gigantisch grote beslissing te laten nemen (aankoop van je produkt ja of nee), worden een aantal micro-interacties voorgesteld : Facebook Like, schrijf je in voor de nieuwsbrief, enz. De theorie is dat de som van deze micro interacties leidt tot meer engagement naar het merk of product toe.

In onderstaande presentatie wordt dit allemaal nog meer in detail uit de doeken gedaan.

[slideshare id=380432&doc=microinteractions-1209522608046218-9]

mailpoet v 2.6

MailPoetDit is de laatste relaease van de bekende newsletter plugin voor wordpress. Ik hoop dat deze versie minder fouten heeft dan de beta die meer weg had van een alfa wat mij betreft.

De toegevoegde functies hebben vooral betrekking op het beheer van de groepen en het aanmaken van extra velden in de database als op het aanmaken van de nieuwsbrieven. De grote toegevoegde waarde blijft dezelfde : een all-in-one oplossing voor het beheer van nieuwsbrieven in wordpress.

 

2.6 heeft vele nieuwe functionaliteiten

Volgens de makers, is de upgrade de meest “juicy” van alle upgrades. Ten eerste is de “statistieken“-module grondig onderhanden genomen. Je krijgt mooie “pie-charts” die op een duidelijke manier de CTR en open rates vorstellen, per periode en per campagne.

Verborgen in het submenu-item “settings” onder de tab “forms”, kan je de database uitbreiden met dynamische velden. Deze velden kan je dan direct integreren in de op maat gemaakte forms.

Ook de editor voor de nieuwsbrieven is een stuk makkelijker en handiger om complexe nieuwsbrieven aan te maken : shortcodes met dynamische merge-velden,  mogelijkheid om meerdere post te selecteren en toe te voegen aan de nieuwsbrief en tientallen opties voor de weergave van de posts. Het is nu wel erg gemakkelijk om de inhoud van de nieuwsbrief te baseren op de content van je wordpress website.

maar het is nog geen “mailchimp” (yet)

Hét grote voordeel van mailchimp is de integratie met de posts van je website. Dat biedt concurrent mailchimp niet. Die laatstgenoemde blijft echter nog een aantal duidelijke voordelen te hebben.

Ten eerste : autoresponders. Mailpoet heeft wel een “automatic newsletter” maar de mogelijkheden van mailchimp zijn zoveel maar groter …

Ten tweede biedt mailchimp de mogelijkheid om “segmenten” te beheren : dit zijn subgroepen die kunnen angemaakt worden en beheer binnen hoofdgroepen. Een voorbeeld : je kan een segment aanmaken binnend e lijst van de “subscribers” die ofwel alle emails geopend hebben of op een link geklikt hebben. Dat zien we hieronder.

mailchimp segments
Mailpoet blijft in elk geval mijn favoriet plugin voor het beheer van mijn newsletters. Proost !

[su_button url=”/contact/” size=”7″ wide=”yes” center=”yes” icon=”icon: user”]Voor meer informatie, klik hier en contacteer mij ![/su_button]

de gulden snede in webdesign

De gulden snede is de verdeling van een lijnstuk in twee delen voor een speciale verhouding.

guldensnede

Bij de gulden snede verhoudt het grootste van de twee delen zich tot het kleinste, zoals het gehele lijnstuk zich verhoudt tot het grootste. Geven we het grootste deel aan met a en het kleinste deel met b, dan is de verhouding van beide zo dat a : b = (a+b) : a. Dit getal wordt ook wel phi genoemd ofwel 1,618.

Deze verhouding werd al vroeg ontdekt door de Italiaanse wiskundige Fibonacci en wordt door velen beschouwd als de formule die het dichtst bij de natuur en haar groei en ontwikkeling staat. Sommige geloven zelfs dat het een universele constante is voor ontwerpen, een soort hand van god. Van het parthenon, de Mona Lisa tot de Egyptische piramides. Allemaal refereren we wel naar phi.

Doorheen de eeuwen zijn deze verhoudingen gerespecteerd maar ook in modern design (kredietkaarten bijvoorbeeld dienog minder dan 1% afwijken van de gulden snede) heeft deze formule zijn plaats.

Twitter bijvoorbeeld (gebruik makend van het Bootstrap framework) respecteert scrupuleus de gulden snede bij de design van de interface. Maar ook in veel logo’s worden deze verhoudingen gerespecteerd.

Ook modern webdesign gebruikt vaak deze verhoudingen.