Let op: sinds we in 2013 met PLint-sites zijn gestart, heeft onze website vele transformaties doorgemaakt. Dit artikel heeft dan ook geen betrekking op de huidige vorm van de website! In 2015 hebben we een eerste redesign van de website gedaan waar we ook over geschreven hebben.
Gisteravond was best wel een memorabel moment. Na een aantal weken van hard werken heb ik de laatste hand gelegd aan de website van mijn bedrijf PLint-sites. Je kunt die website natuurlijk terug vinden via www.plint-sites.nl. Ik wil nu eens een tipje van de sluier oplichten over het proces van het ontwerpen van deze website, te beginnen met het menu.
Het begon met een idee. Eigenlijk start het altijd met een idee. Sommige zijn goed, andere slecht, maar uiteindelijk is het eerste idee vaak het beste en hoe langer je erover nadenkt, hoe beter het wordt. In mijn geval was het idee Circustent. Hoe kom je daar nou weer bij? Ik hoor het je vragen. Ik had net het boek “water voor de olifanten” gelezen van Sarah Gruen (het was echt fantastisch goed vond ik). Dat boek ging over een circus. Zo’n circustent, stel ik mij voor, bestaat in feite uit allerlei driehoeken met een terugkerend kleurenpatroon. Dat wilde ik dus vertalen naar de website.
Na wat proberen had ik een eerste versie af, ik wilde de circustent gebruiken voor de navigatie, dus elke driehoek is eigenlijk een link naar een andere pagina op de site. Met behulp van een gave plugin kwam ik een heel eind. Het enige dat ik toen nog moest bedenken was hoe je het actieve menu element eruit laat springen. Het is een lichte grijs-witte overlay geworden. Een kleine impressie zie je hiernaast.
Responsive design
In de huidige tijd (2013), 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 met 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.
De content van je website moet zich schikken naar de grootte van het scherm waarop de website bekeken wordt. Dit wordt responsive design genoemd: het design van de website past zich aan aan de grootte van het scherm.
Toen ik begon met PLint-sites werd responsive design één 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, moeten we er ook rekening mee houden dat je zo’n apparaat niet met een muis bedient maar met je vingers. 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 eroverheen gaat met de muis) afwezig op een mobiel apparaat. Foto’s en afbeeldingen moeten we optimaliseren voor zowel grote als kleine apparaten en dat geldt natuurlijk ook voor de tekstgrootte. Kortom, een heleboel mooie uitdagingen voor ons als webdesigners!
