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
col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col1 col2
col2
col2
col2
col2
col2
col3
col3
col3
col3
col4
col4
col4
col5
col5
col2
col6
col6
col7
col5
col8
col4
col9
col3
col10
col2
col11 col12
col1
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.
