Vorige week trapten we de Mobile Monday-rubriek af met de belangrijkste trend op het mobiele web: Mobile First. In dat artikel lieten we vallen dat het Foundation framework van ZURB een mooie basis is voor een mobile first website met een volledig responsive opbouw. Vandaag leggen we op Mobile Monday uit wat de zeven grootste voordelen zijn van het gebruik van het Foundation 4 framework als fundament voor een mobile first opbouw van je website.
1. Mobile First
Oorspronkelijk was het Foundation framework bedoeld als blauwprint voor responsive design. Bij de ontwikkeling van de vierde versie van Foundation heeft men echter het mobile first principe van Luke Wroblewski als belangrijkste steunpilaar gebruikt. Hierdoor kan Foundation 4 ingezet worden als basis voor een website die compleet in het teken staat van deze nieuwe webdesign denkwijze.
2. Grids
Bijna iedere webdesigner is inmiddels overtuigd van de toegevoegde waarde van het ontwerpen op basis van een zogenaamd grid systeem. Voor de doorbraak van het responsive design was het 960 Grid System daarbij een van de meest populaire systemen. Foundation 4 maakt gebruik van een volledig responsive grid systeem waarbij iedere pagina ingedeeld kan worden in flexibele kolommen en rijen. Hierdoor zijn pagina’s voor de designer gemakkelijker in te delen en zal de content van de pagina’s altijd meeschalen met de grootte van de webbrowser.
3. Typografie
Typografie is een essentieel onderdeel van het ontwerp van een webpagina. De juiste keuze van lettertypes (fonts), -groottes en -kleuren kan een design maken of juist breken. Foundation is typografisch sterk opgezet: het komt met een automatische verhouding tussen koptekst (H1, H2 etc), paragrafen en andere elementen zoals code en blockquotes. Hierdoor lezen je pagina’s out-of-the-box al erg fijn zijn is er nauwelijks typografische aanpassingen nodig.
4. Formulieren en buttons
Formulieren zijn helaas vandaag de dag nog altijd een onderdeel van webdesign waarvan het belang enorm onderschat wordt. De vormgeving van een formulier dient aan te sluiten bij de rest van de website en daarom heeft ZURB er in Foundation voor gezorgd dat opmaak van formulieren en buttons op eenvoudige wijze toe te passen is. Met behulp van een set voorgedefinieerde CSS classes kun je binnen enkele seconden een saai formulier omtoveren tot een gebruiksvriendelijk en gelikt onderdeel van je pagina.
5. Navigatie
Vragen als ‘Hoe ga ik mijn sidebar inrichten?‘ en ‘Waar zag ik laatst dat mooie topmenu ook alweer?‘ behoren met Foundation 4 tot het verleden. Standaard komt het framework namelijk met prachtig vormgegeven navigatie-elemenenten (zie plaatje) als:
- Een top bar (hoofdmenu, eventueel gefixeerd bovenaan)
- Pagina navigatie
- Breadcrumbs (navigatie-pad)
- Subnavigatie (bijvoorbeeld ‘filters’)
- Sidebar
6. Componenten
Niet alleen formulieren en buttons zijn deel van het Foundation framework, ook aan andere veelgebruikte componenten is gedacht. In Foundation 4 zul je onder meer handige foefjes vinden om video’s en tabellen weer te geven. Alsof dat nog niet genoeg is, komt Foundation ook nog eens met een gratis slideshow en ondersteuning voor thumbnails. Wat wil je nog meer?
7. Javascript
Foundation 4 is volledig opgebouwd uit de combinatie van Javascript en CSS. Er komt geen regel php aan te pas en Flash zullen we hier natuurlijk al hemelaal niet in terugzien. Doordat Foundation Javascript-based is, is het een prachtig cross-browser framework geworden dat eenvoudig te begrijpen en toe te passen is voor iedere webdesigner en -developer.
Meer info
Het Foundation framework is door ons gebruikt als basis voor de esomnia website. Foundation 4 is daarmee de hoeksteen van ons WordPress thema geworden.
Voorbeelden van de mogelijkheden van Foundation 4 vind je in de Kitchen Sink.
Op de website van ZURB is tevens een zeer complete FAQ te vinden.
stuur een appje