Hoe website responsive maken voor mobiel?

Steeds meer mensen bezoeken websites via hun mobiele apparaten. Denk hierbij aan telefoons, tablets en andere draagbare apparaten. Omdat deze groep explosief is gegroeid de laatste aantal jaren, is het van belang om jouw website ook geschikt te maken voor al deze apparaten. Je wilt immers wel dat jouw potentiële klanten jouw website goed kunnen bekijken.

Nog meer redenen

Hierboven staat al een hele goede reden waarom je je website ook geschikt zou moeten maken voor mobiele apparaten. Nog een goede reden is Google. Google neemt tegenwoordig in hun algoritme mee of jouw website wel geoptimaliseerd is voor mobiele apparaten. Is jouw website dus goed te bekijken op een mobiel apparaat, dan kun jij hoger scoren in Google.

Hoe maak je een website geschikt voor mobiele apparaten?
Allereerst is het handig om te weten hoe we deze websites tegenwoordig noemen. Wat op dit moment dé trend is, is het "responsive" maken van je website. Dit houdt in dat jouw website zich aanpast aan de grootte van het scherm van de bezoeker.

Zijn er alternatieven?
Maar natuurlijk! Je kunt ook een aparte template laten ontwikkelen voor alleen de mobiele apparaten. Het nadeel hier van is dat apparaten verschillende resoluties en schermgroottes hebben. Je moet in zo een geval rekening houden met honderden verschillende afmetingen. Iets wat niet erg praktisch is dus.

Hoe maak ik mijn website responsive?
Responsive webdesign is een andere manier van het benaderen van je website. Zoals eerder al vermeld past de website zich aan aan de grootte van het scherm van de gebruiker. 

Een responsive website maakt gebruik van verschillende technieken. Bijvoorbeeld flexibele grids, flexibele afbeeldingen en CSS3 media queries.

Flexibele grids zijn vlakken waarvan de afmetingen niet vast staan, we werken in dit geval dus niet met een vast aantal pixels, maar een percentage van het totaal.

Met media queries kun je aangeven welk deel van CSS je gebruikt, zo kun je voor verschillende afmetingen een verschillende waarde toekennen aan elementen binnen HTML en CSS. Normaliter word de breedte van een scherm als uitgangspunt genomen.

Het opbouwen van een pagina is tegenwoordig anders dan vroeger. Vroeger ging men er vanuit dat de gebruiker via een PC of laptop de website zou bezoeken. De website werd dan ook ontworpen voor, in eerste instantie, gebruikers die de website bezoeken via een PC of laptop.

Tegenwoordig is het gebruikelijk als de webdesigner het eerst de website optimaliseert voor een mobiel of tablet en daarna pas gaat kijken naar het grotere geheel voor PC's en laptops.

Het testen van een website neemt uiteraard veel meer tijd in beslag dan vroeger, men moet nu alle mogelijke afmetingen proberen te testen voor een optimaal resultaat.

Uiteraard zijn er veel frameworks die je goed uit de voeten helpen als je net begint met responsive webdesign. Een aantal voorbeelden hiervan zijn Semantic Grid System, LessFramework4, Bootstrap en Gridless. Er zijn uiteraard nog veel meer van dit soort systemen.

Ga je nu nog vertellen hoe het precies moet?

Het is per design anders, geen enkel responsive webdesign is hetzelfde. Het is om deze reden ook niet te doen om alle mogelijke situaties te schetsen in één artikel.

Via video bekijken hoe je wel een Website volledig responsive maakt

Mits er genoeg animo is zouden er wel artikelen kunnen worden geschreven over de verschillende grids en frameworks. Ook kan er één design worden "gesliced" als een responsive design, mits er genoeg animo voor is. of stel je vragen in ons computer forum.