Website responsive maken voor Mobiel & Tablet

Duur: 5 minuten | Moeilijkheid: Gemakkelijk
Doel: Je website er mooi laten uit zien op alle apparaten en dus ook op mobiel/tablet
Pakket: Website met resultaat, Groei platform en Expert platform

Let op: wil je weten hoe je jouw header aanpast, zodat die op de mobiele telefoon goed wordt weergegeven? Bekijk dan hier de video.

Meer dan 50% van je bezoekers bekijkt je website op een mobiele telefoon of een tablet. Het is dus essentieel dat jouw website op een telefoon en tablet er goed uit ziet. SYSitor heeft hier een gemakkelijke manier voor gemaakt om per apparaat te kijken hoe de website eruit ziet en hoe je dit kunt aanpassen per apparaat.

In deze video vind je:

01:15 De reden waarom elementen niet mooi zijn
01:44 Mobiele/tablet weergave
02:17 Padding VS marge deel 1
04:43 Verschillende maten
09:50 Elementen wel of niet tonen
10:48 Kolommen omdraaien
11:14 Andere inhoud tonen
13:57 Padding VS marge deel 2
15:34 Mobiele weergave
16:49 Waarschuwing Safari
18:12 Samenvatting

In dit artikel vind je

Mobiele/Tablet weergave

Elementen verbergen op Mobiel/Tablet

Mobiele/Tablet weergave

1: Ga naar Content --> alle pagina's en zoek de pagina op die je wil bewerken (of blogbericht).
2: Klik op bewerk met SYSitor en klik linksonderaan op Responsive Modus, dat ziet eruit als een beeldscherm.
3: Vanaf hier kan je de verschillende weergaven bekijken van de Desktop, Tablet en Mobiel (deze opties komen bovenin beeld te staan); Om hierna een juist overzicht te hebben van de pagina & de responsiveness dien je de sidebar in te klappen met het < teken. Staat iets niet zoals je wilt op bijvoorbeeld Mobiele Weergaven? Gelukkig kan je dat aanpassen!
5: Klik op het element dat je wil aanpassen en ga naar de opties van dat element.

Achter de opties die je kan aanpassen voor specifieke weergaven staat een icoon. Klik op dit icoon, gevolgd door het Tablet of Mobiel icoon om de waardes voor die specifieke weergaven aan te passen.

Elementen verbergen op Mobiel/Tablet

1: Open SYSitor en selecteer het element wat je wilt verbergen
2: Klik vervolgens linksbovenaan op Geavanceerd
3: Klik nu op het tabje Responsive In dit tabje kan je nu verschillende weergave op zowel Desktop, Tablet of Mobiel verbergen