Responsive webdesign: optimaliseer jouw site!

Het gebruik van smartphones en tablets is de afgelopen jaren explosief gestegen. Steeds meer websites worden vanaf deze apparaten bekeken en daarom is het jouw ook vast al een keer overkomen. Tijdens het mobiel browsen kom je op een site die op een klein scherm vrijwel onleesbaar is. Daar komt responsive webdesign om de hoek kijken!

De gehele website staat weliswaar op het scherm, maar de letters, afbeeldingen en menu’s zijn zo klein dat het eigenlijk onbegonnen werk is om de informatie tot je te nemen. Met duim en wijsvinger kun je wel inzoomen op bepaalde gedeelten van een pagina, maar een echt prettige ervaring is dit niet. De meeste bezoekers gaan direct weg.

Wie een eigen site heeft, wil natuurlijk zoveel mogelijk bezoekers vasthouden.

Responsive webdesign voor beter navigeren op mobiel

In deze tijd is het daarom belangrijk dat een website ook op een mobiel apparaat goed wordt weergegeven. Gelukkig zijn er steeds meer websites die wel zijn geoptimaliseerd voor weergave op kleine schermen. Deze sites zijn ‘responsive’ en passen zich aan naar kleine schermen, waardoor alles goed leesbaar blijft.

De menu’s zijn uitrolbaar en de teksten staan in leesbare grootte op het kleine scherm. Responsive webdesign zorgt ervoor dat een website op elk type scherm (desktop, tablet, smartphone) goed uit de verf komt.

Wat is responsive design

Een responsive site ontstaat natuurlijk niet vanzelf. In essentie bestaat een responsive site uit blokken die, afhankelijk van het type scherm, naast of onder elkaar kunnen staan. Een blok kan een stuk tekst, een foto of een ander onderdeel van een site zijn.

Hoe groter en breder het scherm, hoe meer blokken naast elkaar kunnen staan. Is het scherm kleiner en smaller dan worden automatisch meer blokken onder elkaar gezet, zodat elk onderdeel van een site goed leesbaar blijft.

De mobiele website van Gadgetdealer

De site gadgetdealer.nl is geheel responsive en dat betekent dat de berichten ook op een smartphone prima leesbaar zijn.

Bekijk je een responsive website op je smartphone, dan zie je dat alle content keurig onder elkaar staat. Eigenlijk wordt in dat geval alle content in stukken verdeeld en in één kolom onder elkaar op het scherm gepresenteerd. Het maken van een responsive site betekent doorgaans meer programmeerwerk.

Direct op alle platforms beschikbaar

Toch zijn de inspanningen de moeite waard. Wie beschikt over een goed functionerende responsive site, zal geen aparte apps voor iOS, Windows en Android hoeven maken. Het ontwikkelen van een app voor een bepaald platform is doorgaans een kostbare aangelegenheid. Daarnaast moet de app ook technisch worden onderhouden.

Een responsive site is niet afhankelijk van het achterliggende mobiele besturingssysteem en kan prima worden bekeken op tablets en smartphones waarop iOS, Windows of Android draait. Vandaag de dag zien we dat steeds meer bedrijven hun mobiele app inruilen voor een responsive website. Een voorbeeld hiervan is de technologiesite Tweakers.net die straks alleen nog maar via een responsive website is te bezoeken.

States, breakpoints en media queries

Met betrekking tot responsive webdesign zijn een aantal begrippen van belang, zoals ‘states’ en ‘breakpoints’. Een state is een bepaalde indeling van de site, die specifiek is afgestemd op het schermformaat waarop de eindgebruiker de website bekijkt.

Een responsive website heeft daarom minimaal drie states voor respectievelijk een smartphone, een tablet en een desktop computer. In werkelijk zijn er nog meer states, want ook de schermstand (landscape of portrait) en de resolutie van het beeldschermen stellen specifieke eisen met betrekking tot de manier waarop je een site kunt presenteren.

Gebruik stylesheets voor responsive webdesign

Moderne websites maken gebruik van stylesheets, ook wel bekend als Cascading Style Sheets (CSS), om de opmaak van een site te realiseren. Je kunt hierbij denken aan het gebruik van kleuren, lettertypes en marges om zo de site de gewenste vormgeving te geven.

CSS3 is de laatste versie en wordt gebruikt in combinatie met HTLM5. In deze context kunnen ook media queries worden ingezet. Afhankelijk van de schermafmeting bepalen media queries welk stylesheet wordt gebruikt om de website op te bouwen.

Bootstrap; bouwpakket voor mobiel ontwerp

Als je relatief snel een responsive site in elkaar wilt zetten, kun je ook Bootstrap gebruiken. Bootstrap is eigenlijk een soort bouwpakket voor webdevelopers en is bedacht door Mark Otto en Jacob Thornton, twee ontwikkelaars van Twitter.

Eind 2011 werd het project ‘Bootstrap’ geplaatst op open source site GitHub en zo werd de code toegankelijk voor ontwikkelaars uit de gehele wereld. Binnen een half jaar was Bootstrap enorm populair en inmiddels wordt het gebruikt door ontwikkelaars, die er al vele sites mee hebben gebouwd. Bootstrap bestaat grotendeels uit HTML, CSS en JavaScript.

Bootstrap voor een Responsive Website

Met het gratis ontwikkelaarspakket Bootstrap kun je relatief snel een responsive website in elkaar zetten.

Uitgangspunt voor Bootstrap is mobile first en dat betekent dat de weergave van een site op een mobiel apparaat centraal staat. Het grid, dat is de ruimte waarbinnen de website wordt gebouwd, omvat maximaal 12 kolommen.

Kolommen vormen basis van Bootstrap

Door het aantal kolommen te variëren kan een site worden aangepast voor het scherm dat wordt gebruikt door de bezoeker. Bootstrap bevat een aantal gratis tools om websites en webapplicaties maken, zoals design templates, formulieren, knoppen en navigatiebalken.

Bootstrap biedt ook de mogelijk om bepaalde content alleen voor bepaalde schermafmetingen weer te geven. In de praktijk blijkt dat iemand op een mobiel niet altijd in staat blijkt om lange lappen tekst te lezen. Via Bootstrap kun je ervoor kiezen om een verkorte variant van een tekst op het scherm van een smartphone te laten zien.

Kant-en-klare responsive site

Ben je geen webdeveloper maar wil je wel een responsive site? Op het internet kun je gratis en tegen betaling kant-en-klare HTML-templates downloaden, die al responsive zijn. Natuurlijk ben je gehouden aan het ontwerp van zo’n template, maar het is relatief eenvoudig om je eigen teksten en afbeeldingen toe te voegen.

Responsive Webdesign verkrijgbaar bij Themeforest

Op de site ThemeForest kun je tegen betaling templates en themes aanschaffen die geheel responsive webdesign zijn.

Maak je gebruik van een CMS-systeem, zoals WordPress of Joomla, dan kun ook gratis en tegen betaling themes downloaden die al voor mobiel gebruik zijn geoptimaliseerd. Overigens blijken deze themes niet altijd op alle mobiele apparaten even goed te werken, maar als je een responsive thema hebt gekocht, heb je ook recht op support.

Als je contact opneemt met de ontwikkelaars van zo’n responsive thema en je meldt de bug, dan zul je zien dat bij een volgende release van dit thema de bug is verholpen.