Device-weergaven en het grid
Ontwerp je offerte apart voor Desktop, Mobiel en PDF, elk met een eigen breedte, hoogte en grid.
± 8 min lezen
Een offerte wordt op heel verschillende manieren bekeken: op een breed scherm, op een telefoon, en als pdf-download. Daarom werk je in de editor met drie device-weergaven: Desktop, Mobiel en PDF. Elk device heeft een eigen breedte en hoogte, een eigen grid en een eigen zichtbaarheid, zodat je voor elk medium iets maakt dat goed valt.
Het grid is je hulplijn-systeem. Per device stel je het aantal Kolommen in, de Gutter (de ruimte tussen kolommen) en de Marge (de ruimte langs de randen). Lijn je elementen daarop uit, dan oogt je offerte strak en evenwichtig, ook als de inhoud per pagina verschilt.
De grid-intensiteit-slider regelt hoe nadrukkelijk je het grid ziet tijdens het werken; op het eindresultaat is het grid uiteraard onzichtbaar. Deze gids laat zien hoe je per device instelt, hoe je het grid gebruikt om uit te lijnen, en hoe je controleert dat alles op elk medium klopt.
Wat kun je hiermee
- Per device (Desktop, Mobiel, PDF) een eigen breedte en hoogte instellen
- Per device een grid instellen met Kolommen, Gutter en Marge
- De zichtbaarheid van een device aan- of uitzetten
- De grid-intensiteit regelen om strakker of zachter uit te lijnen
- Schakelen tussen de weergaven om te zien hoe je offerte op elk medium valt
Voor je begint
- Je hebt een offerte met wat elementen in de editor staan
- Je weet ruwweg hoe je offerte op scherm én in print bekeken zal worden
- 1
Schakel tussen de devices
In het paneel rechts staan Desktop, Mobiel en PDF onder elkaar; klik er een aan om die weergave te bewerken.
Elke device heeft een eigen Breedte en Hoogte. In het voorbeeld is Desktop bijvoorbeeld 1366 breed en Mobiel 390 breed met een veel grotere hoogte, omdat een telefoon-pagina langer doorscrolt.
Met het oog-icoon bij een device regel je de zichtbaarheid. Zo kun je tijdens het werken focussen op één medium.
Desktop, Mobiel en PDF, elk met een eigen breedte en hoogte - 2
Stel het grid in: kolommen, gutter en marge
Geef per device het aantal Kolommen, de Gutter en de Marge op om een net uitlijn-raster te krijgen.
Kolommen bepalen in hoeveel verticale banen je pagina wordt verdeeld (bijvoorbeeld 12 op Desktop, 4 op Mobiel). De Gutter is de ruimte tussen die banen, de Marge de ruimte langs de randen.
Een doordacht grid is het geheim achter een strakke offerte: elementen die op dezelfde kolomlijnen beginnen en eindigen, ogen vanzelf rustig en verzorgd.
- Kies een device in het paneel rechts
- Zet het aantal Kolommen, de Gutter en de Marge
- Lijn je elementen uit op de gridlijnen
Op mobiel werkt een smaller grid (bijvoorbeeld 4 kolommen) beter dan 12; dan vallen je elementen niet in te dunne stroken.
- 3
Regel de grid-intensiteit
Gebruik de Intensiteit-slider om het grid duidelijker of juist subtieler te tonen tijdens het werken.
Tijdens het uitlijnen wil je het grid soms goed zien; daarna leidt het af. De slider regelt alleen hoe nadrukkelijk de lijnen op je scherm staan, niet het grid zelf.
Op het eindresultaat, in de voorvertoning en de pdf, is het grid altijd onzichtbaar. Het is puur een hulpmiddel voor jou.
- 4
Controleer elk medium
Loop na het ontwerpen Desktop, Mobiel en PDF langs en verschuif waar nodig per device.
Wat op Desktop mooi naast elkaar staat, wil je op Mobiel soms onder elkaar. Omdat elke weergave los staat, pas je dat aan zonder je andere devices te raken.
Schakel ook naar PDF en check waar de pagina’s afbreken, zodat een titel niet net onderaan een pagina valt. Pas daarna de hoogte of de positie aan.
Begin met Desktop helemaal af, en gebruik die als basis. Mobiel en PDF zijn dan vooral verschuiven en bijstellen, niet opnieuw opbouwen.
Veelvoorkomende vragen
De mobiel-breedte is veel smaller dan desktop. Schakel naar Mobiel en maak de elementen daar smaller of zet ze onder elkaar; je verandert daarmee je Desktop-weergave niet.
Schakel naar PDF en controleer de hoogte en de positie van je elementen. Verschuif een titel of blok zodat ’ie niet net op de paginarand valt.
Zet de grid-intensiteit hoger en sleep de elementen tot ze op de kolom- en gutterlijnen vallen. Controleer of je het juiste device bewerkt.
Hierna
Kom je er niet uit? Neem contact op, we helpen je graag verder.