Responsive WordPress Website Ruyghe Venne

Responsive WordPress Website Ruyghe Venne

Ook in de toeristische sector weten De Noormannen de juiste koers te varen. Voor Hotel Restaurant Ruyghe Venne te Westerbork gingen wij aan de slag met een nieuw ontwerp en een nieuwe indeling voor hun website. Uiteraard is deze nieuwe website responsive, dus op elk scherm goed te bekijken. Bekijk de site online http://www.ruyghevenne.nl/

Structuur & Vormgeving: De Noormannen Marketing & Communicatie

Technische Realisatie: Sabos Websdesign

Responsive Webdesign

Responsive Webdesign

 

Tablets en smartphones zijn bezig aan een onstuitbare opmars. Op grote Nederlandse sites mat Fabrique begin 2012 al zo’n 7,5% bezoek met tablets. Smartphones waren goed voor zo’n 3,5%. Samen 10% van alle bezoekers, mensen die je site bezoeken en daar iets willen vinden, doen of kopen. En het groeit alleen maar door, met intussen meer verkochte smartphones dan computers in Nederland, en de komst van de smart TV. De meeste sites zijn echter niet ontworpen voor kleinere, draaibare schermen en bediening met vingers in plaats van een muis. Wat te doen?

Grofweg zijn er drie opties om mobiele bezoekers te bedienen:

Native mobiele applicaties zijn snel en gebruiksvriendelijk en kunnen features gebruiken zoals camera, adressenboek en alerts. Tegenover deze voordelen staat dat je voor ieder platform (iOS, Android, Blackberry, Windows Phone) apart moet ontwikkelen, in steeds een andere programmeertaal. Bovendien is de inhoud van een app niet vindbaar: iemand heeft pas iets eraan als hij het geïnstalleerd heeft. Niet iedereen wil dat. Een app ontwikkelen is dan ook alleen zinvol als je veel gebruikers hebt per platform en hen iets biedt dat mensen regelmatig gebruiken.

Fabrique maakt mobiele applicaties die snel en gebruiksvriendelijk zijn en alle features van een telefoon kunnen gebruiken. Tegenover deze voordelen staat dat je voor iOS (iPhone, iPad) en Android in een andere programmeertaal moet ontwikkelen. Idem voor Blackberry en Windows Phone. Bovendien is de inhoud van een app niet vindbaar: iemand heeft pas iets eraan als hij het geïnstalleerd heeft. Niet iedereen wil dat. De ervaring leert dat mensen vooral app’s installeren van merken en praktische zaken die ze regelmatig gebruiken.

De Uit-app voor het Amsterdams UitBuro en Schooltas, de iPad app voor educatie uitgeverij Thieme Meulenhoff bieden de gebruiker dagelijks nut.

Een mobiele site voor de smartphone en een tablet site voor de iPad naast de klassieke ‘desktop’ website is minder werk dan apps ontwikkelen. Per soort apparaat volstaat één website. Bovendien is HTML makkelijker aanpasbaar dan custom code. Wel moet je nog steeds meerdere sites maken en naast elkaar onderhouden.

De sites kunnen ook inhoudelijk specifiek worden, met bijvoorbeeld op de tablet versie meer inspiratie met een magazine en op de smartphone de vijf meestgebruikte functies snel en supersimpel. Al kan een bezoeker dan via Google op de iPhone op een pagina komen die alleen geoptimaliseerd is voor iPad. Leesbaarheid en user experience zijn dan niet ideaal. Apparaatspecifieke websites maken is daarmee vooral nuttig als je snel een mobiele site wilt zonder je reguliere site aan te passen of als bezoekers op een smartphone of ipad maar een deel van je diensten vragen.

m.9292.nl en m.d-reizen.nl bieden bezoekers op alle types smartphones de belangrijkste functionaliteit van de regulier website op zakformaat.

Bij responsive webdesign – ook wel adaptive webdesign, schaalbare of fluid websites genoemd – maken we één website die zich aanpast aan het apparaat en het gedrag van de gebruiker. De bezoeker krijgt dus altijd dezelfde content, alleen de presentatie en bediening kan verschillen. Tot een jaar terug was dit vrij complex programmeerwerk, met veel javascript, zodat we dit alleen hebben toegepast op sites voor Albert Heijn en de Koninklijke Bibliotheek.

Bij het redesign van AH.nl in 2007 was schaalbaarheid al een van de uitgangspunten

Sinds alle recente browsers de nieuwe technische standaarden (voor de kenners: HTML5 en CSS3) ondersteunen, is responsive design echter een stuk eenvoudiger. En een stuk minder werk dan het programmeren van allemaal losse apparaatspecifieke websites, laat staan van native mobiele applicaties. Bovendien heb je daarna slechts één site te onderhouden. Een voordeel tenslotte is dat op welke pagina een bezoeker je ook vindt via Google, deze altijd optimaal getoond wordt.

Deze voordelen zijn de redenen waarom we responsive design tot standaard hebben verheven bij een aantal klanten. Bijvoorbeeld voor alle nieuwe intranet- en internetprojecten voor de Tweede Kamer.

Door middel van responsive design houden we natuurlijk rekening met grootte en oriëntatie van het scherm van een apparaat. In het geval van het SNS online jaarverslag doen we dat bijvoorbeeld door:

  • Kolommen te versmallen of onder elkaar te zetten op een staande iPad of smartphone.
  • Op een smartphone een brede menubalk te vervangen door een compacte uitklapper.

De inhoud van de homepage van het SNS jaarverslag is op alle laptop, iPad en iPhone gelijk, maar wordt anders getoond.

Maar er zijn meer verschillen tussen apparaten dan alleen het formaat.

  • Touchscreens bedien je met vingers. Die zijn groter en minder precies dan een cursor, dus maken we links en buttons groter en zorgen we voor meer ruimte eromheen. Met vingers kan je wel weer lekker slepen.
  • iPad en iPhone ondersteunen geen flash. Daarom maken we animaties (denk aan homepage carrousels en grafieken) met HTML5. Ook voor online video passen we een HTML5-videoplayer toe of openen we de video in de YouTube app op de iPhone.
  • Mobiele apparaten hebben vaak tragere verbindingen, dus laten we grote achtergrondafbeeldingen weg en tonen kleinere afbeeldingen in de inhoud.
  • Altijd gedoe, typen op een klein scherm. Dat maken we makkelijker door op smartphones het juiste toetsenbord op te roepen voor e-mailadressen en telefoonnummers.

De formulieren op luckyday.nl zijn lekker te bedienen met vingers: zo kies je een aantal trekkingen met een slider. Een erboven uitstekende tooltip zorgt ervoor dat je vinger niet je keuze afdekt.

Bij responsive design kijken we kritisch naar welke informatie en functionaliteit we aanbieden. Dit doen we vaak door uit te gaan van wat op een smartphone scherm past: mobile first. Een positief bijeffect van deze benadering is dat het dwingt tot focus. Is alles wat op een groot scherm past ook wel nodig? Regelmatig leidt dit tot sites met een betere user experience én een hogere conversie. Ook op de deskop dus!

Voor Lucky day ontwierpen we eerst de mobiele interface en daarna de grotere schermen. Het resultaat van deze mobile first aanpak is een doelgerichte site.

Bij Fabrique hebben we responsive websites ontworpen voor Madurodam, Operadagen Rotterdam, de Tweede Kamer en zoals genoemd voor Albert Heijn, Koninklijke Bibliotheek en SNS. We hebben geleerd dat je mobiel en tablet vanaf het begin in je project mee moet nemen en dat het echt aandacht vraagt. Je kan het moeilijk achteraf toevoegen en je kan het er zeker niet ‘even bijdoen’. Een responsive website kost dus minder tijd dan losse sites maar meer tijd dan alleen een desktop website. Hoeveel meer tijd is afhankelijk van het soort website en de mate van responsive design. Zo is alleen optimalisatie voor touch minder werk dan een iPad specifieke interface.

De belangrijkste les is echter dat responsive design vraagt om teamwork. Onze webontwikkelaars denken vanaf dag 1 mee over het ontwerp. Snel prototypes maken helpt meer dan alle schermen precies uittekenen. En ontwerpers sturen bij de realisatie nog bij. Wij doen dat graag in scrum maar een andere projectaanpak kan ook. Hoe dan ook maakt responsive design dat je doelgroep jouw website op ieder apparaat optimaal kan gebruiken en vinden.