Transcript Handleiding (pdf)

Responsive Design
Werkwijze en aanlevering Responsive Design
Mach3Builders
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.
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
320 - 479 pixels
Smartphone (staand)
SM
480 - 767 pixels
Smartphone (liggend)
MD
768 - 1023 pixels
Tablet (staand)
LG
1024 - 1279 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. 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­12 col­1 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
XS
SM
MD
LG
XL
Schermgrootte
320 - 479 px
480 - 767 px
768 - 1023 px
1024 - 1279 px
1280+ px
Container
100%
446 px
734 px
986 px
1250 px
Kolom
8.33%
38 px
64 px
83 px
105 px
Kolom (inner)
8.33% - 10px
28 px
54 px
73 px
95 px
20 pixel gutter
XS
SM
MD
LG
XL
Schermgrootte
320 - 479 px
480 - 767 px
768 - 1023 px
1024 - 1279 px
1280+ px
Container
100%
436 px
724 px
976 px
1240 px
Kolom
8.33%
38 px
64 px
83 px
105 px
Kolom (inner)
8.33% - 20px
18 px
44 px
63 px
85 px
XS
SM
MD
LG
XL
Schermgrootte
320 - 479 px
480 - 767 px
768 - 1023 px
1024 - 1279 px
1280+ px
Container
100%
426 px
714 px
966 px
1230 px
Kolom
8.33%
38 px
64 px
83 px
105 px
Kolom (inner)
-
8 px
34 px
53 px
75 px
XS
SM
MD
LG
XL
Schermgrootte
320 - 479 px
480 - 767 px
768 - 1023 px
1024 - 1279 px
1280+ px
Container
100%
416 px
704 px
956 px
1220 px
Kolom
8.33%
38 px
64 px
83 px
105 px
Kolom (inner)
-
-
24 px
43 px
65 px
30 pixel gutter
40 pixel gutter
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.
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 010-8208890 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.