Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders

Maat: px

Weergave met pagina beginnen:

Download "Responsive Design. Werkwijze en aanlevering Responsive Design. Mach3Builders"

Gabriël de Jong
8 jaren geleden
Aantal bezoeken:

1 Responsive Design Werkwijze en aanlevering Responsive Design Mach3Builders

2 Introductie Door de explosieve stijging van het aantal soorten devices waarop websites bekeken kan worden, is het ontwerpen van een website er niet eenvoudiger op geworden. Er is een technische oplossing bedacht, waarmee een website op mobiele telefoons, tablets, en desktop computers, altijd goed getoond kan worden: Responsive desigen. Voor welk schermformaat ontwerp je een website? Dit is een vraag die veel wordt gesteld aan Mach3Builders. Het antwoord hierop is eenvoudig: Er is niet meer één vast schermformaat waarop je het ontwerp van een website afstemt, er dient rekening gehouden te worden met een grote hoeveelheid aan verschillende schermformaten. In dit document wordt uitgelegd hoe je een ontwerp kunt maken waarbij rekening is gehouden met de 3 belangrijkste platformen waarop een website bekeken kan worden, dat wil zeggen: telefoons, tablets, en desktop computers de enorme range van schermformaten welke van toepassing zijn bij de populaire devices zoals desktop computers, tablets en smartphones. Toepassing van een grid in plaats van een canvas Traditioneel werd een website ontwerp gemaakt op basis van een vooraf vastgesteld canvas. Dit canvas heeft een vaste breedte en een vaste hoogte, uitgedrukt in pixels. Dit concept is bij Responsive Webdesign niet meer van toepassing. Bij Responsive Webdesign wordt gewerkt met een grid waarbij de breedte wordt uitgedrukt in het aantal kolommen. Mach3Builders werkt op basis van een 12- koloms grid dat afgeleid is van Twitter Bootstrap. Er zijn vele verschijningsvormen en varianten, echter Mach3Builders heeft gekozen voor de 12-koloms opzet. Dit schept duidelijkheid in de samenwerking met onze partners en intern weten programmeurs waar zij rekening meer dienen te houden.

Voor welk schermformaat ontwerp je een website? Dit is een vraag die veel wordt gesteld aan Mach3Builders.

3 Breakpoints Als je een responsive website wilt, dan veranderd de lay-out van de website bij vooraf ingestelde breedtes. Dit worden de breakpoints genoemd. De breakpoints zijn voor de meest voorkomende breedtes van smartphones, tablets en computerschermen gekozen. Hieronder vind u een overzicht van onze breakpoints: Schermbreedte Device XS pixels Smartphone (staand) SM pixels Smartphone (liggend) MD pixels Tablet (staand) LG pixels Tablet (liggend) XL 1280 en groter Desktop De schermbreedte (resolutie) is leidend voor de breakpoint, niet het type apparaat. Het kan dus voorkomen dat je met een 7 (inch) tablet de liggende smartphone versie van de website te zien krijgt. Of dat je met een luxe smartphone de staande tablet versie ziet.

Hieronder vind u een overzicht van onze breakpoints: Schermbreedte Device XS 320-479 pixels Smartphone (staand) SM 480-767 pixels Smartphone (liggend) MD 768-1023 pixels Tablet (staand) LG

4 Ontwerp Om het ontwerp snel om te zetten naar een responsive website moet het ontwerp voldoen aan het Mach3Grid. Kolommen Zoals gezegd werken we met een 12-koloms grid. Hieronder vind je verschillende variaties van kolom indelingen welke mogelijk zijn. Het Mach3Grid maakt het mogelijk om kolommen als tussenruimte te zetten. Je kunt dus beginnen met een lege kolom en vervolgens een kolom van 11 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 1 col 2 col 2 col 2 col 2 col 2 col 2 col 3 col 3 col 3 col 3 col 4 col 4 col 4 col 5 col 5 col 2 col 6 col 6 col 7 col 5 col 8 col 4 col 9 col 3 col 10 col 2 col 11 col 1 col 12

Het Mach3Grid maakt het mogelijk om kolommen als tussenruimte te zetten.

Gutter De gutter is de marge welke aan de zijkant van de kolommen zit. Heb je een gutter van 10 pixels dan zit er aan weerszijde van de kolommen een ruimte van 5 pixels.

5 Gutter De gutter is de marge welke aan de zijkant van de kolommen zit. Heb je een gutter van 10 pixels dan zit er aan weerszijde van de kolommen een ruimte van 5 pixels. Bij een gutter van 20 pixels is dit dus 10 pixels. Binnen de gutter is het niet mogelijk om elementen te plaatsen. Alle content moet aan de binnenkant van de kolom vallen. In onderstaande afbeelding zie je een aantal goede indelingen (groen) en een aantal foute indelingen (rood). De grijze balken vormen de binnenkant van de kolom en de witte tussenruimtes zijn de gutters. Het is mogelijk om de gutter per breakpoint aan te passen. Heb je op de MD - XL varianten een gutter van 40 pixels dan kun je op de XS - SM varianten een gutter van 10 pixels hebben. Hieronder vind u een overzicht van de formaten per breakpoint per gutter 10 pixel gutter Container 100% 446 px 734 px 986 px 1250 px Kolom (inner) 8.33% - 10px 28 px 54 px 73 px 95 px

In onderstaande afbeelding zie je een aantal goede indelingen (groen) en een aantal foute indelingen (rood).

6 20 pixel gutter Container 100% 436 px 724 px 976 px 1240 px Kolom (inner) 8.33% - 20px 18 px 44 px 63 px 85 px 30 pixel gutter Container 100% 426 px 714 px 966 px 1230 px Kolom (inner) - 8 px 34 px 53 px 75 px 40 pixel gutter Container 100% 416 px 704 px 956 px 1220 px Kolom (inner) px 43 px 65 px Op Mach3Grids is er een mogelijkheid om PSD bestanden te downloaden per gutter. In deze download zijn 5 PSD bestanden te vinden waar het grid is ingesteld (1 per breakpoint), een uitleg en een voorbeeld html bestand.

px 40 pixel gutter Container 100% 416 px 704 px 956 px 1220 px Kolom (inner) - - 24 px 43 px 65 px Op Mach3Grids is er een

7 Voorbeeld grids Mach3Builders heeft een aantal voorbeeld grids geplaatst op Mach3Grids.com. Deze grids kunnen als basis worden gebruikt voor het ontwerpen van een website. Tevens dienen de grids als voorbeeld van hetgeen boven wordt uitgelegd. Ga naar: mach3grids.com Is hetgeen beschreven in dit document nog niet geheel duidelijk of wil je een ontwerp laten toetsen door Mach3Builders vraag het ons gerust, we zijn bereikbaar op en u kunt vragen naar Guido den Hartog of Robin van der Put. Zij kunnen u helpen met uw vragen, en samen komen we dan tot een mooi resultaat. Tevens is het mogelijk een sessie over Responsive Design aan te vragen op ons kantoor aan de straatweg 20 te Rotterdam. We zorgen dan voor koffie en een degelijke uitleg van Responsive Design.

com Is hetgeen beschreven in dit document nog niet geheel duidelijk of wil je een ontwerp laten toetsen door Mach3Builders vraag het ons gerust, we zijn bereikbaar op 010-8208890 en u kunt

Vergelijkbare documenten

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES WHITEPAPER RESPONSIVE WEBSITES Wat is een Responsive website? Voordelen van een Responsive website? Hoe start je met een Responsive website? INTRODUCTIE Met het downloaden van deze whitepaper kunnen we