Publicatie op mobiel

De Maglr templates zijn allemaal responsive (elastisch) opgezet. We hebben rekening gehouden met grotere desktop schermen, liggende tablets en mobiele telefoons. Het idee achter responsive is dat de content op ieder soort scherm, op een passende manier in beeld komt. Met onze templates kiezen wij ervoor om pagina’s beeldvullend te maken met grote fotografie.

Responsive heeft ook een nadeel. De vormgeving leeft en kan op verschillende beeldschermformaten anders uit de verf komen. Een marge of afmeting op een groot desktopscherm is niet hetzelfde als op een mobiele telefoon. Dit dient men ook te realiseren bij het opmaken van een pagina. 


Nu bevatten de templates veel vrije invulvlakken waar blokken aan toegevoegd kunnen worden. Door deze vrije invulling kunnen we nooit met 100% zekerheid zeggen, of een pagina die je opmaakt op een groter desktop scherm, er goed uit ziet op mobiel. Dit laatste dien je zelf te controleren.

Waarschuwingsfunctie

Om het controleren makkelijker te maken, hebben we een waarschuwingsfunctie in de templates ingebouwd. Zodra een vrij invulvlak teveel informatie bevat, komt er een rode rand in beeld. Er zit op dat moment meer informatie in een kader, dan dat onze ontwerper dit had bedoeld. 


Dit betekent dat dit onderdeel op tablet-formaat een scrollbalk krijgt. In de preview vanuit de editor kan je het resultaat direct controleren en eventueel aanpassen. Een scrollbalk is niet erg, maar ziet er soms slordig uit.
Waarbij we in veel templates op desktop en tablet formaat alles fullscreen in beeld willen laten zien, plaatsen we de informatie op mobiel onder elkaar. Een waarschuwing met een rode rand heeft dus niet direct invloed op de mobiele versie. 

Pop-ups

Pop-ups in de desktopversie laten we niet altijd in de mobiele variant zien. Om de leesbaarheid te vergroten zetten we deze al vaak open en onder elkaar. We openen een pop-up alleen als deze een functionele toevoeging binnen de template heeft.

Fullscreen afbeeldingen op mobiel

Een afbeelding die in een desktop template fullscreen op de achtergrond staat met daaroverheen tekst, laten we op mobiel, in 100% breedte, als heading zien. De tekst die er normaal overheen staat zetten we voor de leesbaarheid eronder. De achtergrond kleur (wat normaal een afbeelding is op desktop) vervangen we hier met de alternatieve achtergrondkleur van stijl1.

Mocht de standaard kleur uit stijl 1 niet wenselijk zijn voor een specifieke pagina, kan je de achtergrond kleur via bovenstaande settings altijd wijzigigen. Laat de kleur wel op 0% transparantie staan zodat die enkel op mobiel verschijnt. Voor de mobiele versie worden afbeeldingen automatisch verkleint. Hier hoef je zelf geen rekening mee te houden.

Uitlijnen afbeeldingen

Vanuit de blokken kunnen meerdere soorten afbeeldingen worden toegevoegd. Een ‘inline image’ of een ‘achtergrond afbeelding’. Een inline image plaatst zichzelf altijd op 100% breedte en blijft in verhouding van de afbeelding zelf.


Een achtergrond afbeelding kan specifiek worden uitgelijnd zodat er op desktop een uitsnede kan worden gekozen. Doordat de verhouding van de afbeelding op mobiel geheel anders kan zijn, wordt de afbeelding niet uitgelijnd maar uitgevuld in het midden gepositioneerd.

Autoplay video

Een video kan niet automatisch afspelen op een tablet of mobiel. Dit wordt door iOs en Android geweigerd. In deze gevallen verschijnt er een playbutton zodat de gebruiker de video handmatig kan starten. 


Indien een video als ‘background video’ is gemarkeerd wordt op mobiel enkel de screenshot van de video weergegeven met daaroverheen de eventuele content. Een background video wordt op dekstop als 'aankleding' gebruikt. De video staat in veel gevallen achter de content. Door dit element als background te markeren wordt de video altijd schermvullend in het kader gezet, speelt deze automatisch in een 'loop' en is het geluid uitgeschakeld.

Marges tussen elementen

Vanuit de editor is het mogelijk om de verticale ruimte tussen elementen te veranderen, zodat elementen niet te dicht op elkaar staan. Let erop dat deze marges worden meegenomen naar mobiel, zo ook de aangepaste hoogte van een achtergrondafbeelding.

Teksten

Een tekst kan je op twee manieren van formaat veranderen. Dit kan met een preset (h1 t/m h6) of door met +/- zelf te verkleinen. We adviseren om de presets te gebruiken. Dit werkt niet alleen sneller, we passen dit formaat ook automatisch aan voor mobiel. Stel dat je een grote H1 titel hebt geplaatst, maken wij dit voor mobiel automatisch iets kleiner zodat het goed past. Teksten die handmatig zijn vergroot of verkleint, behouden op mobiel hetzelfde formaat.