3 aug 2014
Een responsive website, die kun je het beste zelf coderen of laten coderen door een programmeur/vormgever.
Waarom geen gebruik maken van plugins?
Er zijn diverse plugins die van jouw WordPress website een mobiele variant maken, een website die zich aanpast aan het formaat van een tables, smartphone of aan een brede monitor.
Iedere plugin die je gebruikt is een potentieel lek in de beveiliging.
Als je een mobiele site met plugins maakt, waarbij je moet denken aan een scaling plugin, een responsive menu plugin, een widgets plugin, een image resize plugin.. dan zit je al snel op 3-4 plugins alleen maar om een mobiele versie te tonen aan je bezoekers.
De website wordt er tevens niet bepaald sneller en veiliger op, en de website krijgt vaak een heel ander uiterlijk waardoor de desktop bezoekers niet dezelfde gebruikerservaring met je site hebben zoals ze die kregen op de desktop.
De website responsive maken zonder plugins
Als programmeur kun je een mobiele site maken door de bestaande elementen van de site te gebruiken en te voorzien van aangepaste formaten op basis van schermbreedte. Door middel van een stylesheet (CSS) op maat.
Mocht je niet weten hoe je moet beginnen met het maken van een mobiele site, lees dan hieronder de tutorial: ,,Hoe je start met het coderen van een mobiele versie”
Als je geen programmeur bent kun je een programmeur inhuren die veel ervaring heeft met het omzetten van WordPress websites naar mobiele formaten.
Hoe je start met het coderen van een mobiele versie
De viewport
Gemakkelijk te vergeten, maar wel heel belangrijk! De viewport zorgt ervoor dat je media query de breedte van een scherm te weten komt.
<meta name="viewport" content="width=device-width, user-scalable=no">
Deze viewport metatag kan een apparaat/css ook aansturen op de grootte die weergeven moet worden voor het geheel.
We hebben de media query’s
Waarbij je op basis van de scherm grootte kunt aangeven wat te doen met de Div’s, titles, paragraphs.
@media screen and (min-width: 600px) and (max-width: 900px) {
/* Hier je css */
}
Alles wat je tussen die media query zet van 600 tot 900 pixels zal worden weergegeven bij dat scherm formaat.
Vergeet niet de query te sluiten!
Extra toelichting: Mocht je in je reguliere stylesheet al css code hebben met !important zul je deze moeten overschrijven met !important of de “belangrijkheid” weg moeten halen bij je reguliere css. Anders gebeurd er natuurlijk niets met het element.
Werkt de media query? Testen is weten!
Je hebt wel eens dat je code toevoegt aan een bepaald formaat en dan gebeurt er niets.. zorg eerst dat je zeker weet dat de css gebruikt wordt bij een bepaald formaat.
Wat ik vaak doe is eerst even een code schrijven dat de gehele body background verkleurt bij een bepaald formaat.
Bijvoorbeeld:
@media screen and (min-width: 600px) and (max-width: 900px) {
body { background-color: red !important; }
}
Dan bekijk je de website met je mobiel, tablet of je schaalt het scherm in je browser en je kijkt of de achtergrond tussen de 600 en 900 pixels rood wordt.
Fluid versus Fixed
De meningen verschillen enorm in de keuze voor Fluid of Fixed en daarom moet je gewoon doen wat jij het gemakkelijkst vindt.
De uitleg van Fluid en Fixed
Fluid is engels voor “vloeibaar” en houdt in dat je de wrappers (uiterste divs) op 100% zet. Het schaalt mee met de grootst mogelijke breedte van je apparaat.
Hierdoor bereik je dat je de maximale breedte kunt gebruiken maar met nadeel dat elke apparaat zijn eigen breedte heeft.
Fixed is een vaste waarde. Dan bepaal je per media query breedte hoe breed een wrapper wordt.
Hoe bepaal ik de flexibele breedtes
Dit kun je ook op verschillende manieren doen. Bijvoorbeeld vanaf 1000px, van 750 tot 1000px, en van 250 tot 750px.
Denk aan de 1000+ als op de computer, de 750 tot 1000 als voor de tablet in landscape modus, en de 250 tot 750 voor de tablet portrait modus en de telefoon op landscape modus.
Let op! Deze pixel breedtes wisselen jaarlijks aangezien de tablets steeds scherper worden en het per pixel gaat.
Dit was de start voor het maken van een responsive website zonder plugins!
Het gaat er in ieder geval om dat het relatief simpel te bereiken is zonder plugins, wat een betere basis vormt voor de snelheid en veiligheid van je WordPress website.
