Responsive

Dingen die je moet weten

Afbeeldingen

Responsive fotografie

In de visual rechts kun je zien hoe de afbeelding eruit ziet op verschillende devices. Wanneer je een horizontale afbeelding gebruikt op een toestel wat je doorgaans verticaal gebruikt, zoals bijvoorbeeld een mobiele telefoon, dan worden de zijkanten van de afbeelding afgesneden. Wanneer je een verticale afbeelding zou gebruiken op een toestel wat juist gebruik maakt van horizontale beelden (zoals bijvoorbeeld een computer) worden de boven- en onderkant van de afbeelding afgesneden.


Zorg ervoor dat je altijd twee varianten hebt van elke achtergrond afbeelding: een horizontale en een verticale variant. Wanneer je werkt met een fotograaf, dan kun je deze instrueren om beide opties te fotograferen. Wanneer je geen fotograaf tot je beschikking hebt, kies dan zelf twee verschillende afbeeldingen. Of kies ervoor om de horizontale afbeelding bij te snijden, zodat er een mobiel vriendelijke (dus verticale) afbeelding ontstaat. Het bijsnijden van de afbeelding doe je in de editor, door gebruik te maken van de cropping tool in je mediabibliotheek.

Focus

Jij kunt zelf de focus bepalen van je afbeelding, door gebruik te maken van ‘the focus grid’. Deze optie kun je vinden in de desktop view: ga naar Block Settings > Achtergrond > Achtergrond Focus.

Creëren

Margins and paddings

Aan de slag met het creëren van je publicatie! Je start altijd met de desktop view. Hierbij kun je de ‘Column Alignment optie’ gebruiken om je tekst en afbeeldingen te positioneren (zowel horizontaal als verticaal) en ze vervolgens finetunen met margins en paddings. Gebruik deze opties puur om te finetunen!

Columns

Op een ‘portret toestel’ (verticaal) zoals een iPad of mobiel telefoon, zullen de columns onder elkaar worden weergegeven. Houd hier dus rekening mee! Je kunt deze columns gemakkelijk rangschikken op mobiel/tablet om onderstaande situatie te voorkomen (tekst - afbeelding - afbeelding - tekst):

Hotspots

Dit kan voelen als een uitdaging! Gelukkig kun je op mobiel/tablet een andere afbeelding uploaden en de hotspots apart van elkaar positioneren.

Zichtbaarheid (blocks, afbeeldingen en buttons)

Als er een block, afbeelding of button is die je niet wil laten zien op een specifiek device, dan kun je de visibility optie gebruiken om deze te verbergen.

Fullscreen Achtergrond Video

Je kunt twee soorten video gebruiken in je publicatie:

  • Een Video Element dat pas afspeelt wanneer je op de play button drukt
  • Een Fullscreen Achtergrond Video dat automatisch afspeelt zodra je de pagina opent

De Fullscreen Achtergrond Video werkt niet op mobiel (omdat mobiele providers dit blokkeren) of op iPads (iPad ondersteunt flash niet, iets wat nodig is voor het automatisch afspelen).


Dus: wanneer je gebruik maakt van een Fullscreen Achtergrond Video, moet je gebruik maken van een overlay. In deze overlay kun je dezelfde video gebruiken, maar dan als element. Gebruik een duidelijke call to action op de button, zoals bijvoorbeeld Bekijk de video en verberg het op de desktop view met de Visibility optie die we eerder hebben besproken/benoemd.

Tablet en mobile (portret) view in de editor

Je kunt je publicatie finetunen door op het Desktop icoon bovenaan in het midden van je editor scherm te klikken en hier Tablet en Mobiele view te selecteren.

Finetune margins en paddings

Zet de puntjes op de i door het toevoegen van margins en paddings. Hiermee kun je je content naar boven brengen, of naar beneden, naar rechts of naar links. Bijvoorbeeld zodat je achtergrondafbeelding precies op de juiste plek zichtbaar is en je tekst niet over belangrijke delen van de afbeelding valt.


Door het toevoegen van padding aan de bovenkant van je pagina kun je voorkomen dat je paginatitel overlapt wordt door de navigatiebalk. Om deze padding gemakkelijker te kunnen veranderen kun je het beste de navigatiebalk verbergen (Desktop icoon > show navigation: off).


Wanneer je een block gebruikt met hierin alleen een achtergrondafbeelding (dus zonder tekst), kan het zijn dat deze afbeelding erg klein naar voren komt op mobiel en tablet - dit komt omdat er geen andere content in het block aanwezig is. Sleep padding in dat block om de hoogte te vergroten en zodat de afbeelding volledig zichtbaar wordt.

Het optimaliseren van je lettertype grootte

Je kunt de grootte van je lettertype aanpassen, zodat je titels op elk device passen - zelfs op de meest kleine! Dit kun je doen door een tekstveld aan te klikken en de grootte aan te passen in de (styling) balk aan de bovenkant van de pagina. Het is ook mogelijk om je lettertype een andere kleur te geven - dit heeft geen effect op de styling die je hebt gecreëerd op de andere twee device mogelijkheden.


De mobiele weergave is een algemene grootte. Het is verstandig om je publicatie ook op je eigen (echte!) telefoon te controleren. Een iPhone 5 is het kleinste apparaat dat je moet controleren. Woorden met veel tekens passen soms niet op dat apparaat, dus je kunt de lettergrootte voor mobiel verlagen. De desktop- en tablet versies behouden hun oorspronkelijke lettergrootte.


Je kan het thema voor elk venster bewerken door het thema in dat venster te openen.

Vervang afbeeldingen

Door naar de tablet / mobiele weergave te gaan, kun je ook de achtergrondafbeelding van een block vervangen.


Dit kan handig zijn als je een afbeelding hebt met, bijvoorbeeld, een persoon aan de linkerkant en een persoon aan de rechterkant. Slechts één persoon past op staande modus. Daarom heb je een afbeelding nodig waarin de twee mensen dichter bij elkaar staan. Zoals eerder vermeld, moet je ervoor zorgen dat je twee fotografie-opties hebt (liggend en staand), zodat je een alternatief hebt voor zowel mobiel als tablet.