Responsive webdesign met Foundation

Tablets en smartphones zijn niet meer weg te denken uit ons leven. Steeds meer mensen bezitten er eentje en surfen er regelmatig mee op het internet. Dit heeft ervoor gezorgd dat de manier waarop websites worden ontwikkeld aangepast moest worden aan deze nieuwe situatie. Immers waren websites, die niet voor mobiele apparaten zijn ontwikkeld, niet goed zichtbaar of werkten ze soms helemaal niet op een tablet of smartphone. Dit is waar Responsive Webdesign om de hoek komt kijken.

Wat is Responsive Webdesign eigenlijk precies?

Met Responsive Webdesign past de lay-out van een website zich aan aan de grootte van het scherm waarop deze bekeken wordt. Zo kunnen onderdelen op een telefoon anders worden weergegeven dan op een desktop om zo de gebruiksvriendelijkheid van de website op alle schermformaten zo goed mogelijk te houden.

Hoe gaat het in zijn werk?

Een responsive website maken begint bij het grafische ontwerp. De designer dient bij het ontwerpen van de website al rekening te houden met de lay-out op mobiele apparaten. Dit gebeurt bij ons aan de hand van een 12 koloms grid. Dit is een soort skelet dat uit 12 even brede kolommen bestaat. Hieruit kan je afleiden hoe breed een bepaald element moet zijn in vergelijking met de maximale breedte van je website. Zie de afbeelding hieronder (gebaseerd op een site van maximaal 960 pixels breed).

12 koloms grid

Het is van belang dat het ontwerp duidelijk laat zien wat er met de verschillende elementen moet gebeuren als de site op een kleiner scherm wordt bekeken.

Als het grafische ontwerp klaar is, moet er een werkende website van worden gemaakt. Er zijn verschillende front end frameworks om dit voor elkaar te krijgen, zoals Twitter Bootstrap en Foundation. Laatstgenoemde is het framework dat wij bij Insyde gebruiken. Hier ga ik verderop in dit artikel meer over vertellen.

Waar moet je op letten bij responsive webdesign?

  • Laadtijd
    Omdat internet op de smartphone of tablet via een 3G of 4G verbinding gaat, is het belangrijk dat de laadtijd van de site goed is. Maak dus geen gebruik van onnodig grote afbeeldingen en laad alleen dingen in die echt nodig zijn.
  • Kwaliteit van afbeeldingen
    Steeds meer telefoons zijn uitgerust met retina schermen. Let er dus goed op dat alle afbeeldingen scherp blijven. Foundation heeft een handige functionaliteit hiervoor, waar ik later meer over zal vertellen.
  • Leesbaarheid van content
    Een lettergrootte voor headings van bijvoorbeeld 32 pixels en voor tekst van 15 pixels is goed voor op de desktop, maar op de telefoon wordt dit wel erg groot. Houd er dus rekening mee dat de lettergrootte zich ook moet aanpassen op kleinere schermen.
  • Volgorde van content
    Gebruikers hebben over het algemeen weinig zin om eerst te moeten scrollen voordat ze bij de belangrijke content komen. Zorg er dus voor dat de (belangrijkste) content bovenaan wordt getoond en daarna pas eventuele afbeeldingen en/of subnavigatie.
  • Navigatie
    Op de smartphone verandert de manier van navigeren op de site omdat er meestal geen ruimte is voor een volledig zichtbaar hoofdmenu zoals op de desktop. Zorg er dus voor dat er gebruik wordt gemaakt van een uitklap- of een inschuif menu met een duidelijke structuur zodat gebruikers ook op mobiele apparaten makkelijk door je website kunnen navigeren.

Het framework: Foundation

Zoals ik al eerder in dit artikel heb vermeld, gebruiken wij bij Insyde Foundation als framework waarin we responsive websites ontwikkelen. Dit framework werkt met een 12 koloms grid en bevat tal van standaard elementen en functionaliteiten voor responsive webdesign.

Het gebruik van Foundation is redelijk simpel. In 1 stylesheet kan je alles instellen wat Foundation biedt: kleuren, maximale breedte van je website, de typografie, marges, etc. Ook heeft Foundation een aantal classes die je kan gebruiken om verschillende elementen te implementeren, zoals inline lijsten, lijsten zonder bullets, een topbar met een responsive uitklapmenu of een inschuif menu (off canvas) en nog veel meer.

Naast het stylen met de stylesheet van Foundation is het ook mogelijk om de elementen eigen custom styling te geven door middel van een zelfgemaakte stylesheet. Deze overschrijft dan de standaard styles van het framework.

Omdat Foundation gebruik maakt van een responsive 12 koloms grid, kan je zelf bepalen hoe dat de elementen op je website worden geplaatst. Je kan er bijvoorbeeld voor kiezen dat je op de desktop 4 afbeeldingen naast elkaar wil hebben door elk element 3 kolommen breed te maken en op de smartphone 2 afbeeldingen naast elkaar door elk element 6 kolommen breed te maken. Foundation zorgt er dan voor dat als het scherm een bepaald (zelf in te stellen) breekpunt bereikt, de elementen onder elkaar gaan staan. De klassenamen die hiervoor gebruikt worden hebben de volgende structuur: {vanaf breekpunt}-{aantal kolommen} column. De class die wordt gebruikt voor het bovenstaande voorbeeld zal dan small-6 medium-3 column zijn.

Ook een heel handige functie van Foundation, is het zogenaamde Interchange Responsive Content. Dit zorgt ervoor dat er voor verschillende schermformaten verschillende formaten afbeeldingen worden ingeladen. Dit is goed voor de laadtijd van de website, omdat je ervoor kan kiezen om voor de mobiele schermen een afbeelding in te laden die minder zwaar is dan een afbeelding die je op de desktop laat zien.

Zo zijn er nog veel meer leuke en handige functies waarover ik kan vertellen. Maar om te voorkomen dat dit blog lang en saai wordt, raad ik aan om eens een kijkje te nemen op http://foundation.zurb.com/docs/ voor een volledig overzicht van alles wat Foundation te bieden heeft.

Kortom, responsive webdesign is de nieuwe manier van website ontwikkeling. Wil je, als bedrijf zijnde of als particulier, je website zo gebruiksvriendelijk en toegankelijk mogelijk maken? Responsive is het antwoord!

Geschreven door Dennis Graumans

Front-end Developer

Blijf up-to-date en ontvang updates in je mailbox

Lees ook deze interessante blogs

Kiezen van een webdesignbureau: waar moet je op letten?

Je wilt een nieuwe website en bent op zoek naar een goed webdesignbureau. In Nederland zijn er zeker honderd webdesignbureaus en een groot aantal ZZP’ers die websites maken. Allemaal pretenderen ze goed te zijn. Maar hoe scheid je het kaf van het koren en kies je een bureau die bij jouw organisatie past? Wij zetten 14 punten op een rij waar op je moet letten bij de keuze van een webdesignbureau.

Watervalmethode vs Scrum

Scrum is geliefd bij veel software-ontwikkelaars. Zo ook bij ons; wij houden echt van scrummen. Maar soms – heel soms – werken wij nog volgens de watervalmethode. Dit doen wij vooral bij projecten waarbij de projectleider aan de klantzijde geen beslissingsbevoegdheid heeft en elk stap aan een leidinggevende, het management of een stuurgroep moet worden verantwoord. Soms is de watervalmethode ook meer geschikt voor website waarop content centraal staat en al in een vroeg stadium...

Totaalpakket: grondig renoveren website, inclusief teksten en beelden

Het besluit is genomen: je wilt een nieuwe website voor je bedrijf. Dit besluit is meteen de startpunt van een reeks volgende beslissingen. Wat te doen met de content – foto’s en teksten – op de huidige site? Passen deze nog bij de nieuwe weg die je in wilt slaan? Of doen deze juist afbreuk aan de nieuwe website en de communicatieboodschap die je wilt uitdragen? En wat als nieuwe teksten nodig zijn: zelf schrijven of iemand anders? En zo ja, wie dan? Oftewel: keuzes,...