Minnie Ongsricharoenporn

Hoe je het meeste haalt uit de responsive design mogelijkheden van Foleon

door Minnie Ongsricharoenporn

Introductie

Hoe vaak gebeurt het dat je op een website komt die er geweldig gelikt uitziet op desktop, maar vreselijk op mobiel?

Zelfs vandaag de dag is de meeste content die voor het web is gemaakt, ontworpen met het oog op desktop schermen, ondanks het feit dat naar schatting 85% van het internetverkeer nu kleinere schermen gebruikt. Als je geen rekening houdt met mobiele apparaten, hebben je bezoekers een heel andere ervaring dan jij in gedachten had.

Het werken met professionele designers om al je content responsive te maken, kan echter een prijzig en tijdrovend proces zijn. Als je ervoor kiest om met Foleon het designwerk in eigen handen te nemen, hebben we tal van opties en features om tijd te besparen terwijl jij prachtig responsive content maakt.

 

Haal het meeste uit de responsive design mogelijkheden van Foleon

Aanpassingsvermogen, typografie, witruimte en afbeeldingsgrootte zijn allemaal kritische factoren om in ogenschouw te nemen als het gaat om responsive design. Hier zijn enkele tips over hoe je kunt profiteren van de features van Foleon om jouw publicaties mobielvriendelijk te maken.

1. Design voor verschillende apparaten

Over het algemeen zijn er drie apparaat lay-outs waar je aan moet denken: desktop, mobiel en tablet. Met een gewone website bepaalt de browser van de lezer automatisch hoe de pagina's het best worden weergegeven op basis van CSS media queries - dit zijn instructies in de code van browsers die vervolgens vertellen hoe de content wordt weergegeven, afhankelijk van de schermresolutie.

Omdat Foleon standaard is voorzien van ingebouwde weergavemodi waarmee je je design kunt afstemmen op specifieke apparaten, is het niet nodig om je zorgen te maken over het zelf toevoegen van aangepaste media queries.

In het midden bovenaan de editor zie je een knop waarmee je de grootte van jouw viewport kunt wijzigen van desktop naar mobiel of tablet.

image10

Je kunt schakelen tussen 3 weergaven om te zien hoe de lay-out verandert. Met elk venster kun je een voorbeeld bekijken en je ontwerp aanpassen binnen de grenzen van elk apparaattype.

Desktop weergave:

image6

 

Tablet weergave:

image9


Mobiele weergave:

image12

Hoewel al onze templates al zijn geoptimaliseerd voor elke schermgrootte is het mogelijk om extra content toe te voegen. Er zijn momenten waarop je fijne aanpassingen wilt aanbrengen, daarom is het handig om de viewport rechtstreeks in de editor te wijzigen.

Content die je toevoegt terwijl je in een viewport werkt, wordt ook toegevoegd aan de andere weergaven, dus het is niet nodig om voor elke weergave een nieuwe layout te ontwerpen. Foleon biedt je echter ook de mogelijkheid om enkele designaspecten op tablet en mobiel aan te passen zonder de andere weergaven te beïnvloeden. Hier komen we later in dit blog op terug.

2. Content weergeven of verbergen in verschillende weergavemodi

Een fout die veel beginnende designers maken is om een one-size-fits-all benadering aan te houden. Aangezien elk individueel element essentieel is voor de flow van je publicatie, is de drang om alles zichtbaar op je bureaubladweergave te behouden begrijpelijk. Het is echter niet altijd de beste oplossing om alles op een kleiner scherm te proppen.

Een voorbeeld hiervan is het weergeven van te veel afbeeldingen op mobiele apparaten. Dit is soms niet ideaal om specifieke redenen, zoals het verhogen van de laadtijd, waardoor de mobiele gegevens capaciteit van je lezer afneemt. Je kunt specifieke afbeeldingen (of elementen) gemakkelijk verbergen in de verschillende weergavemodi van Foleon.

De onderstaande pagina bevat 3 afbeeldingen op de desktop weergave. Elke afbeelding is ondergebracht in een eigen kolom.

image5

Maar op mobiele weergave, zijn deze afbeeldingen automatisch in een enkele kolom gestapeld.

image16

Deze stapel verhoogt onvermijdelijk je paginalengte op mobiel. Om te voorkomen dat je pagina ongewenst lang is, kun je elementen verbergen voor bepaalde weergavemodi.

In de desktopweergave zijn alle elementen standaard zichtbaar. Als je een specifiek element in deze weergavemodus wilt verbergen, moet je naar de bijbehorende instellingen navigeren. Plaats de cursor op het element - in dit geval de afbeelding - en klik op het tandwielpictogram in de rechterbovenhoek van het element. Dit opent de elementinstellingen.

image15

Klik in het instellingenpaneel van de afbeelding op visibility (zichtbaarheidsinstellingen).

image3

Binnen de zichtbaarheidsinstellingen zie je schakelknoppen om het element voor elke weergavemodus te verbergen. Selecteer de weergavemodus waarvoor je het element wil verbergen.

image14

Tijdens het werken in mobiele en tablet weergave is het nog eenvoudiger om specifieke elementen te verbergen. Je beweegt er gewoon overheen totdat je een oogvormig pictogram ziet in de rechterbovenhoek.

image13

Klik op het pictogram om het element te verbergen. Het element is nu grijs weergegeven en wordt niet weergegeven in je publicatie, wel is het nog steeds zichtbaar in andere weergaven.

Houd er rekening mee dat je ook de mogelijkheid hebt om kolommen te verbergen op mobiele en tablet weergave. Deze functie is niet beschikbaar in de desktop weergave omdat kolommen naast elkaar zijn gerangschikt.

3. Pas je typografie aan voor verschillende schermformaten

Als het gaat om responsive design, geven veel mensen onvoldoende aandacht aan typografische keuzes. Het is essentieel dat je tekst op elk schermformaat leesbaar is. Een goede vuistregel om de juiste lettertypegrootte voor elk apparaat te bepalen, is checken of je naar het scherm tuurt. Zolang je niet worstelt om de tekst te lezen, zit je goed.

Desktops hebben meer schermruimte voor landschap lay-outs en kunnen meer tekst bevatten. Mobiele apparaten daarentegen hebben meer smalle schermen die niet ideaal zijn voor indelingen met meerdere kolommen.

Als je meerdere tekstkolommen op het bureaublad hebt, zal Foleon ze automatisch verticaal stapelen in kleinere weergavemodi om zich aan te passen aan het smallere scherm.

Desktop weergave:

image7

 

Mobiele weergave:

image2

Het is belangrijk om te weten dat alleen bepaalde wijzigingen die je aanbrengt in jouw typografie automatisch van toepassing zijn op andere weergavemodi. Hier is hoe het werkt:

Letterbeelden

Als je het lettertype van een tekstblok wijzigt terwijl je in de desktop weergave bent, dan wijzigen zowel de tablet als mobiele weergaven. Als je het lettertype wijzigt terwijl je in de tablet weergave zit, wordt het echter alleen overgedragen naar de mobiele weergave. Het heeft dan geen invloed op de desktop weergave. Het lettertype verandert naar beneden toe, maar niet naar boven.

Lettertypegrootte

Foleon wijst automatisch lettergroottes toe die in lijn zijn met elke weergavemodus. Dit betekent dat de lettergrootte van je tekst standaard enigszins afwijkt van desktop, tablet en mobiele weergaven.

Net als bij lettertypen, worden wijzigingen doorgevoerd naar beneden. Aanpassingen van lettergrootte worden alleen overgedragen naar kleinere schermformaten, maar niet andersom.

Dit betekent dat het aanpassen van het lettertype in de mobiele weergave geen invloed heeft op de weergaven van tablets of desktops. In de weergaven voor tablets en mobiele apparaten zie je een bericht waarin staat dat de wijzigingen niet van toepassing zijn op de modus voor grotere weergaven.

Daar is een goede reden voor. Tekst die er op kleinere schermen goed uitziet, vertaalt zich niet automatisch goed door naar grotere schermen. De mogelijkheid om je tekst aan te passen op verschillende schermformaten zonder andere afmetingen aan te tasten, zorgt ervoor dat je de juiste uitstraling op elk apparaat krijgt.

4. Creëer witruimte met één eenvoudige beweging

Met Foleon kun je de opvulling rond elk van je elementen aanpassen, zodat je de witruimte rondom je content kunt wijzigen. Beweeg de cursor over de kolom die je wilt aanpassen totdat je een groene padding balk ziet.

image20

Je cursor verandert in pijlen die aangeven welke richting je op moet slepen. Pas de groene padding aan om de hoeveelheid padding die je wilt voor elke kolom te verbreden of smaller te maken. Je kunt dit aan alle vier de zijden van een kolom doen.

Hetzelfde kun je ook doen met de marges die rood worden als je eroverheen gaat met je muis.

image17

Deze feature is vooral handig voor het nauwkeurig afstemmen van de hoeveelheid witruimte die je in de publicatie wilt gebruiken. Witruimte kan worden gebruikt om informatie visueel te scheiden in secties met behoud van je lay-out. Door het maximale uit witruimte te halen, kun je blokken effectief verdelen zonder afhankelijk te zijn van randen en lijnen.

5. Snijd eenvoudig je afbeeldingen bij

Afbeeldingen en visuals maken een groot deel uit van wat publicaties aantrekkelijk maakt. Zorg er bij het selecteren van afbeeldingen voor dat ze het algehele ontwerp van je publicatie aanvullen.

Lees meer over afbeeldingen selecteren.

De mediabibliotheek heeft een ingebouwde bijsnijder, zodat je kan aanpassen hoe afbeeldingen op schermformaten worden weergegeven, zonder Photoshop te gebruiken. Welke oriëntatie ze ook hebben, je afbeeldingen passen precies in jouw content wanneer ze op verschillende apparaten worden bekeken.

Wanneer je een afbeelding toevoegt aan je publicatie, schaalt Foleon deze automatisch zodat deze in je kolom past. Als je bijvoorbeeld een portretafbeelding uploadt naar een brede kolom die beter past bij een liggende afbeelding, wordt de kolom automatisch verticaal uitgevouwen om de volledige portretafbeelding te kunnen weergeven. De afbeelding vult de volledige kolombreedte.

Klik op het witte vierkant en sleep het diagonaal tot je de gewenste grootte hebt.

image11

Als je een portretafbeelding hebt die is geschaald om in een groot gebied te passen, kun je deze opnieuw uitlijnen zodat de spaties rond jeafbeelding worden uitgebalanceerd.

image8

Op deze foto is de afbeelding aan de rechterkant geschaald om de kolom waarin deze is geplaatst, te vullen. Standaard lijnt dit de afbeelding links van de kolom uit. Om de ruimte rond de afbeelding in evenwicht te brengen, kun je de afbeelding opnieuw uitlijnen via de instellingen.

Plaats de cursor op de afbeelding en klik op het tandwielpictogram in de rechterbovenhoek van de afbeelding om toegang te krijgen tot de instellingen.

Klik vervolgens op Alignment (uitlijning). Er volgt een vervolgkeuzemenu waarin je kunt selecteren hoe je de afbeelding wil uitlijnen.

image19

In dit voorbeeld zetten we de afbeelding in het midden.

image18

Je afbeelding is nu uitgelijnd in het midden van de kolom.

Conclusie

Het is een feit dat schermen tegenwoordig in veel verschillende grootten voorkomen. Of je lezers nu loyale iPhone gebruikers of Android-fans zijn, ze bekijken jouw content op allerlei verschillende apparaten. Met toenemende verwachtingen voor betere mobiele ervaringen, kan het belang van responsive content niet langer worden onderschat.

Gelukkig was het nooit eenvoudiger om content te maken die zich aanpast aan elk apparaat. Met behulp van een contencreatieplatform, zoals Foleon, kun je op consistente wijze interactief communicatiemateriaal produceren die op elk mogelijk scherm de aandacht van de lezer trekt.

 

Op zoek naar meer hulp? Bekijk onze help center waar je een uitgebreide verzameling artikelen vindt over design, instellingen en nog veel meer.

Minnie Ongsricharoenporn
Minnie Ongsricharoenporn is a content marketer at Foleon. She pens the ready-to-share pieces that inspire our customers to create even better content for themselves.



Blijf op de hoogte

Laat je inspireren over de toekomst van interactieve webcontent door je aan te melden voor product- en blogupdates.




Get social

Volg ons voor toffe content, tips & tricks en mooie voorbeelden.

Ga verder naar:

Creëer content met maximale impact

Probeer 7 dagen gratis