Responsive templates voor je Drupal Site

Nu mobiel op stormachtige wijze het internet heeft veroverd, zou je misschien denken dat iedere website al geoptimaliseerd is voor smartphones en tablets. Dat is niet het geval.

Voor nieuwe sites is het natuurlijk logisch om vanaf scratch een zogeheten responsive design toe te passen, maar juist bij bestaande sites ligt nog veel achterstallig onderhoud op het gebied van ‘smartphone readiness’. Als de vorige website upgrade al weer enkele jaren terug is – net voor de mobiele doorbraak dus – ben je nu wellicht toe aan een redesign en moet er ook een nieuwe template worden gekozen.

Wat is een responsive webdesign eigenlijk?

Na de introductie van mobiel internet is er een aantal stappen doorlopen om internet content ook goed via smartphones of tablets toegankelijk te maken. De eerste stap was het ontwikkelen van specifieke mobiele sites (vaak herkenbaar aan adressen als ‘m.domein.nl’ etc.). Verre van handig, want eigenlijk beheer je parallel twee websites. Waarvan de mobiele variant bovendien gericht was op een standaard mobiel schermformaat, terwijl de variatie in displays door de jaren heen alleen maar toenam.

Vervolgens kwamen er websites die een aantal verschillende ‘viewports’ – schermformaten – kunnen ondersteunen, afhankelijk van het apparaat waarmee de site wordt bezocht. Dat is iets effectiever maar nog steeds niet ideaal. De echte oplossing kwam daarna in de vorm van het responsive webdesign dat zich vloeiend aanpast aan het daadwerkelijke schermformaat.

De belangrijkste kenmerken van een responsive design

De techniek om een website automatisch aan te passen aan de schermgrootte is gebaseerd op een aantal zaken, waarvan dit de twee belangrijkste zijn:

Vloeiend design. Afmetingen van website onderdelen en afbeeldingen worden niet langer in pixels aangegeven, maar als percentages van het geheel. Daarmee wordt de weergave van de content naadloos aangepast aan ieder formaat scherm.
Breakpoints. Er zijn overgangspunten gedefinieerd tussen verschillende schermgroottes, waarbij wordt overgeschakeld naar een andere schermlayout. Zo kan een layout met een navigatiebar aan de zijkant als het scherm te klein is overschakelen naar een layout waarin de navigatie naar een blok onder de core content is verplaatst.

Mooie responsive templates voor je Drupal site

Bij het ontwikkelen van een website is responsiveness dus een harde eis in 2016. Gelukkig hoef je je als website eigenaar niet in detail te verdiepen in de responsive design oplossingen. Je kunt je richten op de keuze van een goede responsive template en experimenteren met de mogelijkheden ervan. Laat dus de template ontwerper het werk doen zodat je jezelf op de content kunt richten. Er is bovendien een groot aantal standaard responsive templates beschikbaar voor het Drupal CMS. Ik noem hier drie mooie voorbeelden:

Illusion is een voorbeeld van een responsive template voor verschillende soorten sites, maar die ook specifiek is voorbereid voor het gebruik met Drupal commerce.
Vecas is een volledig responsive design gericht op moderne blogs, nieuwssites en magazines. Je kunt hier vrijuit spelen met de indeling en presentatie van de artikelen.
Stability is een mooie strakke responsive template die geschikt is voor zakelijke websites, maar bijvoorbeeld ook voor portfolio presentaties.

Hoe ga je verder met je responsive template

Natuurlijk ben je er niet met de keuze voor een template. Ook met een standaard template moet je blijven nadenken over hoe je bezoekers de site gebruiken en keuzes maken over het gebruik en de instellingen voor jouw specifieke website. Een belangrijk uitgangspunt is vaak dat het ontwerp zodanig moet zijn dat alle essentiële content en functies op het apparaat met de minste mogelijkheden – meestal de smartphone – toegankelijk moeten zijn. Sowieso wordt steeds vaker de Mobile First aanpak gehanteerd. Daarbij wordt de website eerst ontwikkeld om hem geschikt te maken voor mobiele apparaten, om pas daarna te kijken hoe de weergave voor grotere schermen kan worden geoptimaliseerd. Ik wens je veel succes met je responsive website.