Responsive design

Het internet is constant in beweging. Een ontwikkeling die zeker niet gemist kan en mag worden, is de opkomst van smartphone en tablet en de bijbehorende responsive mogelijkheden. Lange tijd werden smartphones en tablets als het ‘derde scherm’ beschouwd, na de televisie en de desktopcomputer, maar inmiddels is de smartphone hard op weg het nieuwe ‘eerste scherm’ te worden: Halverwege 2012 bezat meer dan 60% van de Nederlanders een smartphone, en het aantal tabletgebruikers nadert inmiddels de 30% (bron: emerce.nl). Hoog tijd dus om uw website mobile ready te maken. Het is tijd geworden voor: Responsive Design!

Uit recent onderzoek van TNS Nipo blijkt dat ruim 45% van de smartphone-bezitters regelmatig online producten zoekt, maar slechts en 10% ook daadwerkelijk wat koopt. Het gebrek aan responsive design is hier wellicht een substantieel deel van het probleem.

Door deze ontwikkelingen is het niet langer te ontkennen dat een gedegen mobiele ervaring voor uw onderneming van levensbelang is. Een goede mobiele beleving kan worden bereikt door het bouwen van een separate mobiele website, maar beter nog door het bouwen van een responsive website.

Wat is een responsive website?

Een responsive design past zich aan aan de schermafmetingen waarop hij getoond wordt. Zie bijvoorbeeld de verschillen in weergave van de site 2012.inspireconf.com. Links de weergave op volledige schermbreedte, rechts de weergave in een smalle browser of mobiel apparaat:

Website op een groot scherm   website op een smal scherm

Op deze manier kan op elk willekeurig apparaat de website in de meest optimale vorm worden weergegeven. Beter nog dan met een separate mobiele site mogelijk is, omdat die vaak voor een specifieke schermafmeting is gebouwd. Bekijk bijvoorbeeld m.wehkamp.nl (de mobiele website bestaat inmiddels niet meer) maar eens in je desktopbrowser om te zien wat er gebeurt als je een mobiele site op je pc opent. Responsive websites lijken hierdoor de toekomst te zijn.

Daarnaast kan een losse mobiele website problemen opleveren met links en bookmarks uitwisselen tussen verschillende typen apparaten. Stel dat je in de trein op je smartphone een paar leuke handschoenen hebt gevonden op de mobiele site van Wehkamp. Je mailt de link van de pagina naar jezelf om 's avonds op je pc de daadwerkelijke bestelling te doen. Als je deze link op je computer opent kom je vervolgens op de mobiele site terecht in plaats van op de desktop versie. Het gebruiken van responsive design repareert deze onhandigheidjes.

Van Photoshop naar ontwerpen in de browser

Het ontwerpen van een responsive website op dezelfde manier als voorheen sites werden ontworpen, is een vrij tijdrovende bezigheid. Je moet immers voor iedere weergave een apart design definiëren. Daarom is Insyde begonnen met het toepassen van een volledige nieuwe aanpak voor het ontwerpen van responsive sites.

Al vele jaren worden websites ontworpen in Photoshop, Fireworks, of Illustrator. Voor standaard websites, met standaard afmetingen, zijn dat prima tools: er kan vrij snel een plaatje worden neergezet van hoe de site eruit moet komen te zien. Maar voor het ontwerpen van een responsive website, is Photoshop niet echt geschikt. Bij veel verschillende schermafmetingen kost het minder tijd (lees: wordt het goedkoper) om direct in de browser een prototype van de site te designen. Dit is een interactief ontwerp van de pagina's, knoppen en animaties, maar vooral: het responsive gedrag. Door het browservenster te resizen kan de ontwerper, maar ook de klant, direct zien hoe de website zich op verschillende apparaten zal gaan gedragen. Wanneer klant en ontwerper tevreden zijn, kan de website echt worden gebouwd.

Responsive Design Strategy: Mobile First

Naast de voordelen die responsive design heeft voor mobiele gebruikers, verlegt het responsive design proces ook de focus van een ‘pixel-perfect’ ontwerp naar de content. En dat is uiteindelijk waar uw website om draait: de boodschap die u wilt overbrengen. Deze aanpak, ook wel ‘mobile-first’ genoemd, zorgt ervoor dat uw boodschap het middelpunt van het ontwerpproces wordt. In tegenstelling tot het klassieke ontwerpdenken, waarbij het uiterlijk op elk platform en device hetzelfde moest zijn, laat responsive design de layout juist los, zodat de content optimaal uit kan komen op elk denkbaar apparaat, maar wel met behoud van identiteit en uitstraling. Door de verbeterde informatiestructuur wordt uw website beter leesbaar voor gebruikers en zoekmachines!

Wanneer responsive design vanaf het begin van de ontwikkeling van uw site wordt toegepast, scheelt dit veel tijd ten opzichte van het responsive maken van een reeds opgeleverde website. Uit onderzoek blijkt dat 61% van de consumenten aangeeft verder te surfen naar andere sites als een website niet correct functioneert op hun smartphone. Daar wilt u toch wel op reageren?

Geschreven door Maarten van Spil

Front-End Developer & UX Designer

Blijf up-to-date en ontvang updates in je mailbox

Lees ook deze interessante blogs

Kiezen van een webdesignbureau: waar moet je op letten?

Je wilt een nieuwe website en bent op zoek naar een goed webdesignbureau. In Nederland zijn er zeker honderd webdesignbureaus en een groot aantal ZZP’ers die websites maken. Allemaal pretenderen ze goed te zijn. Maar hoe scheid je het kaf van het koren en kies je een bureau die bij jouw organisatie past? Wij zetten 14 punten op een rij waar op je moet letten bij de keuze van een webdesignbureau.

Watervalmethode vs Scrum

Scrum is geliefd bij veel software-ontwikkelaars. Zo ook bij ons; wij houden echt van scrummen. Maar soms – heel soms – werken wij nog volgens de watervalmethode. Dit doen wij vooral bij projecten waarbij de projectleider aan de klantzijde geen beslissingsbevoegdheid heeft en elk stap aan een leidinggevende, het management of een stuurgroep moet worden verantwoord. Soms is de watervalmethode ook meer geschikt voor website waarop content centraal staat en al in een vroeg stadium...

Totaalpakket: grondig renoveren website, inclusief teksten en beelden

Het besluit is genomen: je wilt een nieuwe website voor je bedrijf. Dit besluit is meteen de startpunt van een reeks volgende beslissingen. Wat te doen met de content – foto’s en teksten – op de huidige site? Passen deze nog bij de nieuwe weg die je in wilt slaan? Of doen deze juist afbreuk aan de nieuwe website en de communicatieboodschap die je wilt uitdragen? En wat als nieuwe teksten nodig zijn: zelf schrijven of iemand anders? En zo ja, wie dan? Oftewel: keuzes,...