Skip to content

Mobiele weergave van websites

Het is tegenwoordig een eis dat websites mobiel goed te gebruiken zijn. Er zijn verschillende opties.

Responsive design

Responsive design is inmiddels een zeer gebruikelijk techniek om web content op juiste manier weer te geven op mobiele apparaten (smartphones en tablets). De ontwerper van het thema bepaalt in basis de volgorde waarop de header, menu, body, sidebars met widgets en footer worden weergegeven.

De basis van die weergave wordt doorgaand bepaald binnen de style.css file van het thema. Dat gebeurt door middel van de @media ‘instructie’. Onderstaand een voorbeeld:

@media only screen and (min-width: 560px) and (max-device-width: 1136px) {

/* iPhone 5 CSS */

}

Alles wat wordt beschreven onder /* iPhone 5 CSS */ geldt alleen als een weergave plaatsvindt op een iPhone 5.

Dergelijke technieken vereisen kennis en kunde rondom CSS3 en kan worden geleerd via W3schools.

De term responsive design is inmiddels ‘vervangen’ door ‘mobile first’. Verreweg de meeste content management systemen hanteren dit uitgangspunt bij het maken van vormgevingstemplates

WPTouch

Een tweede mogelijkheid (veelal webapp genoemd) kan worden gerealiseerd met de WPTouch plugin.

WPTouch is een plugin in combinatie met mobiele thema’s voor smartphones en tablets. De plugin biedt meer mogelijkheden om inhoud en vorm te ‘besturen’ in vergelijking tot responsive design.

Een webapp wordt dus niet gedownload vanuit een appstore, maar wordt gevonden door gewoon de URL in een mobiele browser in te voeren. WPTouch vraagt dan of een ‘alias’ op de desktop van smartphone of tablet geplaatst mag worden. Daarmee wordt de suggestie van een app gesuggereerd, terwijl het icoon een ‘snelkoppeling’ is naar de website.

Native Apps

Native apps staan in de respectievelijke appstores van Apple, Google en Microsoft. Het is mogelijk een WordPress website native te maken via vele zogenaamde ‘app generator tools’. Er is echter geen garantie dat de verschillende appstores ‘omgezette’ WordPress webites zondermer accepteren. Ze zijn namelijk van mening dat de toegevoegde waarde ten opzichte van de ‘gewone’ website vaak te gering is. Het maken van apps is een geheel andere discipline. Koppelingen met websites (hybride apps) zijn wel degelijk mogelijk (ook met WordPress), maar de ‘extra’s’ moeten echt komen uit native app development, zoals push notifications.

Native apps zijn te verkrijgen via de gebruikelijke appstores. De behandeling van de werking van native apps valt buiten de doelstellingen van deze training.

mijnnieuwsmarkt.nl omvat de opleidingsactiviteiten van LUIT.nl

Scroll To Top