De geboorte van PLint-sites (2): Responsive design

Een tijdje geleden schreef ik over de achtergrond van het menu van de website van PLint-sites. Vandaag dan eindelijk deel 2 over het ontwerpen van deze website.

In de huidige tijd, waarin meer en meer (consu)mensen websites bezoeken via een mobiel apparaat zoals een smartphone of tablet, kun je er als webdesigner niet meer vanuit gaan dat jouw website alleen bekeken wordt op een scherm van een vaste afmeting. Sterker nog, je zult een oplossing moeten bedenken om jouw website weer te geven op de kleinste smartphones, en op de grootste breedbeeld retina schermen.

Gelukkig hoef je dit niet helemaal zelf te bedenken. Er zijn meerdere paden die je kunt bewandelen. Een voorbeeld is het apart ontwerpen van een website speciaal voor de smartphone. Dit betekent echter dat je de ontwerp -en ontwikkelfase twee maal moet doorlopen. Dat kost extra tijd, en dus geld en dan praat ik nog niet eens over de onderhoudskosten of over het feit dat je ook een website zou willen hebben speciaal voor de tablet of super-breedbeeld schermen. Daarnaast is het maar de vraag hoe lang je van deze tweede website kunt genieten gezien het feit dat de schermresolutie van smartphones nogal eens veranderd door de opkomst van nieuwe technieken.

Maar er is licht. Dat schijnt al een tijdje en wat mij betreft sinds het baanbrekende artikel van Ethan Marcotte in A List Apart ergens halverwege 2010. Hij beschrijft daarin over architecten die ruimtes in een gebouw kunnen laten groeien en krimpen al naar gelang het aantal mensen dat er in wil. Inclusief bewegende muren enzo. Vervolgens wordt de analogie naar webdesign gelegd: De content van je website moet zich schikken naar de grootte van het scherm waarop de website bekeken wordt.

De term responsive design was geboren: het design antwoord aan de grootte van het scherm. Als we dus in staat zijn om de content van de website netjes te laten veranderen al naar gelang de schermgrootte, dan is het dus niet meer nodig een tweede, derde of vierde versie van je website te bouwen. Met een website bedien je gewoon alle schermformaten.

Toen ik begon met PLint-sites werd responsive design een van de speerpunten. Als je dit leest achter een desktop computer moet je het maar eens proberen: verander de grootte van je scherm en zie hoe de content zich aanpast. Dit hebben we ook toegepast op de PLint-sites website: het fancy menu is alleen zichtbaar als je scherm een breedte heeft van 760px of meer. Het breekpunt van 760px is niet helemaal willekeurig gekozen: dit is zo ongeveer de breedte van een ipad als je deze in portretstand houdt. Schermen die minder breed zijn (met name smartphones) krijgen dus een ander menu te zien.

Los van het formaat van het scherm op een mobiel apparaat, moet je er als webdesigner ook rekening mee houden dat je zo’n apparaat niet met een muis bedient maar met je vingers. Dit heeft twee directe gevolgen waarvan de ene heel duidelijk is, de tweede wat subtieler. Knoppen moeten groot zijn, zodat je ze goed kunt ‘indrukken’ met je vingers. Daarnaast is het bekende hover effect op de computer (namelijk dat er iets gebeurt met een link als je erover heen gaat met de muis) afwezig op een mobiel apparaat. Dit geeft heerlijke uitdagingen aan het leven van webdesigners.

Er zijn natuurlijk nog veel meer problemen die je tegenkomt bij het bouwen van een responsive website. Zo moet je goed nadenken over de grootte van je tekst. En wat te denken van afbeeldingen? Er zijn al boeken over volgeschreven hoe je afbeeldingen moet vertalen van het grote naar het kleine scherm. Dat bewaren we dus voor een andere keer.

Een laatste strohalm voor diegene die na dit verhaal door de bomen het bos niet meer ziet evenals diegene die er helemaal zin in heeft gekregen om een responsive website op te zetten. Je hoeft niet alles zelf te doen. Je kunt bijvoorbeeld gebruik maken van een framework. Het framework dat ik van harte aanraad is Groundwork. Dat is nog eens een kickstart van je nieuwe project!


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Laatste bericht
Sorting table dates in a Vue CLI project

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *