G
Grids(raster) zijn al enige tijd bekend in de drukwereld, ook wel stramien genoemd. Een grafisch ontwerper gebruikt hulplijnen en/of een grid voor het creëren van een ontwerp. Door zich consequent te houden aan het grid, zal het ontwerp er clean uitzien. Een eenvoudig voorbeeld is een krant, met gebruik van een grid worden de teksten geplaatst in een krant. Er is een duidelijke structuur te zien door verschillende kolommen tekst. Doordat er een grid is neergezet voor een krant is het gemakkelijk voor andere ontwerpers of DTP-ers teksten te plaatsen en zich te houden aan het stramien.
Wat is een grid?
Een grid bestaat uit (denkbeeldige) horizontale en verticale lijnen of kolommen, hier tussen zit een witruimte (margin of gutter) welke kolom na kolom hetzelfde is. Wanneer er gewerkt word met een grid zal het resultaat rustiger en gestructureerder ogen. Belangrijk is dat elk kolom dezelfde breedte heeft. Dit geld ook voor de margin tussen de kolommen.
Een grid brengt structuur en rust
Grids in websites
Belangrijke methode om structuur aan te brengen in een website is met behulp van een grid. Wanneer er gewerkt gaat worden aan een nieuwe website, is het verstandig om in de schetsen en het wireframe al rekening te houden met het grid.
Responsive grids
Door gebruik van verschillende formaten beeldschermen, denk hierbij ook aan tablet en mobiel, kan het voorkomen dat de website anders getoond word dan de bedoeling is. Denk bijvoorbeeld aan een website die volledig getoond wordt op je mobiel, hartstikke irritant! Er dient eerst fink ingezoomd te worden om überhaupt iets te kunnen lezen en om niet te spreken over linkjes. Dit is vrijwel onmogelijk om (de juiste) aan te tikken. Herkenbaar? Zorg dat een website mooi responsive werkt op tablet en mobiel. Aan de developer is het de taak om te zorgen dat een website goed weergegeven wordt. Wanneer het browserscherm kleiner is kunnen er dingen weggelaten worden of anders gepositioneerd.
Door het gebruik van een Fluid Grid kan dit ‘probleem’ opgelost worden. Echter vergt dit veel tijd om zelf te bouwen. Daarom is het verstandig om een bestaande CSS Grid Framework of Grid Generator als basis voor een lay-out ontwerp te kiezen. Er zijn aantal gratis CSS systemen en generatoren, Bootstrap past dit bijvoorbeeld eenvoudig toe. Andere open source (CSS) frameworks met een grid systeem zijn: Foundation, Gumby, purecss.io