Site voor smartphones en tablets (responsive design)

InSite-en OutSites-sites passen zich automatisch aan de afmetingen van een browserscherm aan ('responsive design'). Veel onderdelen van de site schalen automatisch mee met de afmetingen van het beeldscherm. Hierdoor kan een site ook op bijvoorbeeld een tablet goed worden getoond.

Een normale website - gemaakt voor een beeldscherm - is minder geschikt voor een smartphone. Daarom kun je een site geschikt maken voor smartphones (mobiele site). Als de site op een smartphone geopend wordt, wordt de mobiele site getoond in plaats van de standaardsite.

• De mobiele site heeft een indeling die goed werkt op een smartphone: elementen worden op een logische volgorde onder elkaar gezet.
• Marges worden niet toegepast, waardoor de ruimte op het scherm optimaal wordt benut.
• Je gebruikt op de mobiele site pagina's die hiervoor geschikt zijn. Dit kunnen pagina's zijn die ook op de standaardsite getoond worden. Je kunt echter ook pagina's toevoegen die uitsluitend op de mobiele site gebruikt worden, of juist pagina's uitsluiten voor mobiel gebruik.

Video

Beschrijving

De standaardsite (voor normale beeldschermen) en de mobiele site hebben dezelfde URL, bijvoorbeeld https://12345.afasonline.nl. Als je een mobiele site gebruikt, past de site zich vanzelf aan het type device aan. De toepassing is als volgt:

• Desktop (standaardsite)

  De standaardsite geldt voor pc's en tablets in de landscape-stand (liggend).

• Mobiel

  De mobiele site geldt voor smartphones en tablets in de portrait-stand (staand).

Als je de mobiele site niet gebruikt, dan geldt altijd de standaardsite. Je bepaalt dit in de instellingen.

Presentatie van de mobiele site

Een mobiele site benut altijd de breedte van het mobiele scherm. De maximumbreedte van de site als geheel geldt alleen voor de standaardsite, niet voor mobiele sites.

Marges - op welk niveau dan ook - gelden niet voor de mobiele site:

• De marge (links/rechts) van de site geldt alleen voor de standaardsite.
• De marges (links/rechts/boven/onder) van specifieke onderdelen, zoals banners, groeperingen, en overzichten, gelden alleen voor de standaardsite.

De achtergrondafbeelding van de standaardsite wordt niet gebruikt voor de mobiele site.

Indeling van de mobiele site

De startpagina (home page) van de standaardsite is ook de startpagina van de mobiele site. Andere menu-items van het hoofdmenu zijn bereikbaar via het 'hamburger-menu' (linksboven). Als het hamburgermenu geopend is, kan een gebruiker zijn persoonlijke instellingen bereiken via het tandwiel.

Je kunt paginaonderdelen maken die alleen bestemd zijn voor gebruik op de mobiele site en je kunt bepalen dat pagina's en paginaonderdelen juist niet bestemd zijn voor de mobiele site.

Als je niet bent ingelogd, zie je in het 'hamburger-menu' een knop met een hangslot. Klik op deze knop om in te loggen.

Site instellen voor mobiele toepassingen

Je bepaalt in de instellingen of de site zich mag aanpassen aan mobiele schermen. Selecteer een achtergrondkleur en een logo.

Je kunt de kleur van de navigatiebalk van de mobiele site instellen via het thema.

Site instellen voor mobiele toepassingen:

1. Gebruik een PC.
2. Open de site.
3. Log in met de gebruikersnaam en wachtwoord.
4. Klik op: Sitebeheer.

   

5. Ga naar het tabblad: Site. Klik op: Eigenschappen.
6. Ga naar het tabblad: Algemeen.

   De titel wordt gebruikt op de standaardsite en de mobiele site. Op de standaardsite staat de titel op het tabblad van de browser, op de mobiele site staat de titel bovenaan de site.

   In het onderstaande voorbeeld is de titel InSite.

   

7. Vink Automatische presentatie voor mobiel aan, als je de mobiele site daadwerkelijk gaat gebruiken. Als deze instelling aangevinkt is, zal de mobiele site automatisch toegepast worden op mobiele devices.

   Zo niet, dan gebruik je de mobiele site niet en wordt de standaardsite op alle soorten devices getoond.

   Dit veld is standaard aangevinkt. Vink dit veld uit als je de site aan het bouwen bent en je niet wilt dat deze al op mobiele devices te zien is.

8. Ga naar het tabblad: Achtergrond.

   Stel de achtergrondkleur in van de mobiele site. Gebruik een kleur die goed afsteekt tegen de letterkleur van de teksten (gebruik bijvoorbeeld een witte achtergrond en blauwe teksten).

   Je kunt ook een achtergrondafbeelding selecteren.

9. Ga naar het tabblad: Logo.

   Selecteer eventueel een mobiel logo. Zo niet, dan wordt het standaardlogo gebruikt.

Thema instellen:

1. Ga naar het tabblad: Thema.
2. Selecteer het thema.

   

3. Klik op: Overige / Mobiele weergave.

   

4. Stel de tekstkleur en achtergrondkleur in.

Mobiele site testen

Je kunt de mobiele site en de desktop altijd testen in sitebeheer. Houdt er rekening mee dat de mobiele site alleen getoond zal worden op smartphones als dit is aangegeven in de instellingen.

Gebruik de knoppen (rechtsboven) om te schakelen tussen de sites:

• Desktop
• Mobiel

  

  Bij de mobiele site wordt de muis getoond als een bol, omdat een smartphone doorgaans met een vingertop of pen (stylus) bediend wordt.

Paginaonderdelen voor mobiele site vastleggen

De mobiele site heeft dezelfde menustructuur en portalpagina's als de standaardsite. Je kunt de portalpagina's optimaliseren voor de mobiele site, door ongewenste onderdelen uit te schakelen (deze onderdelen worden dan alleen op de standaardsite getoond). Je kunt onderdelen toevoegen die alleen op de mobiele site worden getoond.

Dit geldt onder andere voor banners, overzichten, tekstblokken, plug-ins, etc.

Voorbeeld:

De banner op startpagina van de standaardsite heeft 20 knoppen. Voor de mobiele site is dit teveel.

• Open de eigenschappen van deze banner en vink het veld Verbergen bij mobiele presentatie aan. Hierdoor wordt deze pagina niet op de mobiele site getoond, maar wel op de standaardsite. Bezoekers van de standaardsite kunnen de knoppen nog steeds gebruiken.
• Voeg een banner toe voor de mobiele site. In de eigenschappen van deze banner vink je Alleen tonen bij mobiele presentatie aan. Hierdoor wordt deze pagina wel op de mobiele site getoond, maar niet op de standaardsite. In deze banner plaats je de belangrijkste vier knoppen, zodat mobiele gebruikers deze op hun smartphone kunnen gebruiken.

Paginaonderdelen instellen:

1. Je bent ingelogd als sitebeheerder.
2. Open de pagina met het te wijzigen pagina-onderdeel.
3. Ga naar het tabblad: Pagina. Klik op: Bewerken.

   

4. Klik op: Indeling.
5. Klik op het onderdeel.
6. Open de eigenschappen van het onderdeel.
7. Bepaal het gebruik van het paginaonderdeel met de velden Verbergen bij mobiele presentatie en Alleen tonen bij mobiele presentatie. Je kunt één van beide velden aanvinken.

   Als beide velden niet aangevinkt zijn, wordt het paginaonderdeel zowel op de standaardsite als de mobiele site getoond.

   De marges worden niet gebruikt op de mobiele site.

8. Klik op: Concept publiceren.

Overzichten instellen:

Overzichten worden altijd getoond als lijstoverzicht. Hierbij staan de belangrijkste gegevens onder elkaar. Om de ruimte op de smartphone optimaal te benutten, gebruik je de instelling Volledige inhoud. Als het zoeken in het overzicht is ingeschakeld, is op de smartphone een zoekveld beschikbaar.

Het lijstoverzicht toont altijd de eerste drie velden. In een reguliere site zullen alle velden getoond worden, maar de mobiele site toont alleen de eerste drie velden. Als de juiste velden niet getoond worden op de mobiele site, moet je het overzicht aanpassen en zorgen dat de belangrijkste drie velden bovenaan staan.