Hoe werkt webXpress responsive

Met ingang van zomer 2015 is webXpress ook responsive zodat de weergave op PC, laptop, tablet en mobiel steeds optimaal is. Hiervoor is in webXpress specifieke "intelligentie" ingebouwd die het apparaat herkent en de weergave hierop aanpast. Door de aanpassingen zijn er ook nieuwe mogelijkheden aan webxpress toegevoegd. Op deze pagina willen we een toelichting geven en uitleggen hoe het werkt.

In het volgende stuk zal de werking van responsiveness worden uitgelicht. Deze toelichting zal bestaan uit drie gedeelten die samen onderdeel van resonsive uitmaken:

- Algemeen

- De template

- De paginatypen

ALGEMEEN

Om webXpress responsive te maken zijn alle templates herontworpen en technisch zo gemaakt dat ze op verschillende apparaten optimaal getoond worden. Hierbij herkent webXpress op welk type apparaat de website of webshop wordt weergegeven. Vervolgens past het zogenaamde raamwerk van de website zich automatisch aan aan de breedte van het scherm van het apparaat waarop de website getoond wordt. Binnen het raamwerk (de maximale breedte van het scherm) optimaal benut. Hierbij worden teksten aangepast (smaller en langer) en foto's automatisch herschaald zodat ze binnen het raamwerkpassen.

Responsive werking in het kort:

- Herkennen van het apparaat warop de website wordt weergegeven

- Aanpassen schermbreedte

- Content optimaliseren

DE TEMPLATE

De template bestaat uit de volgende onderdelen: achtergrond, logo, menu, body, disclaimer en colofon. Deze onderdelen zullen nu in detail worden toegelicht:

Achtergrond

De achtergrond wordt om de website getoond. Deze is meestal alleen zichtbaar op PC's, in het geval wanneer het scherm breder is dan de ingestelde maximale breedte van de website. Op tablets en mobiel wordt alleen de website weergegeven en niet de achtergrond.

Logo

Het logo is het kopgedeelte van de website, hier kan het logo van de website worden vormgegeven. Hiervan kan de achtergrondkleur, een achtergrondafbeelding en er kan een voorgrond tekst en afbeelding aan toegevoegd. Nieuw is dat nu ook de achtergrondkleur links en rechts van de website kan worden doorgetrokken door invulling van de zogenaamde wrapper kleur.

Het menu is een zeer belangrijk onderdeel van een website omdat het menu voor een goede navigatie moet zorgen. Afhankelijk van het apparaat zal het menu verschillend worden weergegeven. Op een mobiel apparaat wordt het menu zodanig vormgegeven dat deze altijd goed leesbaar en navigeerbaar is. Nieuw is dat nu ook de achtergrondkleur links en rechts van de website kan worden doorgetrokken door invulling van de zogenaamde wrapper kleur.

Body

De body is het gedeelte waar de pagina-inhoud wordt weergegeven. de manier waarop dit gebeurd is afhankelijk van het pagina type. Dit zal in het tweede gedeelte in detail per paginatype worden toegelicht.

Disclaimer

Dit is het voetgedeelte van een website. Hierin kan copyrightinformatie en algemene informatie over het bedrijf worden weergegeven. Van de disclaimer is de achtergrondkleur instelbaar. Nieuw is dat nu ook de achtergrondkleur links en rechts van de website kan worden doorgetrokken door invulling van de zogenaamde wrapper kleur.

Colofon

Dit is de onderste regel van de website met daarin de naamsvermelding van webXpress. Hiervan kunnen de kleuren ingesteld worden.

DE PAGINATYPEN

De paginatypen zullen in de volgende volgorde worden uitgelicht:

Website-pagina

Een pagina bestaat vaak uit tekst en afbeeldingen. Website pagina's worden in breedte aangepast zodat dit optimaal op het apparaat weergegeven kan worden.

Webshop

De webshop is uiteraard een complex onderdeel. Bij een webshop worodt het aantal kommomen aangepast aan de breedte van het scherm. Op een mobiel betekent dit dat de categorieën en de producten per (sub)categorie onder elkaar worden weergegeven. Bij de de weergave van een product wordt eerst de foto, dan de prijs vervolgens de bestelknop en als laatste de productinformatie weergegeven.

Contactformulier

Bij het contactformulier wordt de introductie-tekst gedeelte automatisch in de breedte aangepast, net als een webpagina. De formulier velden worden zo groot mogelijk getoond zodat deze goed leesbaar blijven en makkelijk ingevuld kunnen worden.

Fotoalbum

Bij een fotoalbum wordt de introductie-tekst automatisch in de breedte aangepast, net als bij een webpagina. Afhankelijk van de breedte wordt het aantal kolommen gereduceerd en de foto's zo breed mogelijk gepresenteerd.

Gastenboek

Bij een gastenboek wordt de introductie-tekst en de tekstberichten automatisch in de breedte aangepast, net als een webpagina.

Nieuwspagina

Bij een gastenboek wordt de introductie-tekst en de tekstberichten automatisch in de breedte aangepast, net als een webpagina.

Pagina terug