Responsive webdesign nader bekeken

Reponsive webdesign

Responsive webdesign is een term die we het afgelopen jaar vaker en vaker voorbij zien komen. In 2012 deed het begrip zijn intrede bij het grote publiek en in 2013 kunnen we er eigenlijk niet meer omheen.

Als ik naar de statistieken van mijn website kijk van de afgelopen maand dan zie ik dat maar liefst 15% van de bezoeken heeft plaatsgevonden op een mobiele telefoon. Als ik dit vergelijk met het jaar ervoor dan is het aantal smartphone bezoeken met 375% gestegen!!

Met andere woorden, we gebruiken steeds vaker onze smartphone om een website te bezoeken. En het is zaak dat ondernemers hier op inspelen! Gelukkig zien steeds meer ondernemers de noodzaak hiervan in en kiezen zij voor een oplevering van hun website inclusief responsive webdesign.

Wat is responsive webdesign?

Responsive webdesign is in Jip en Janneke taal ‘het optimaliseren van je website voor tablet en smartphone gebruik’. Als je op je mobiele telefoon www.websitedelivery.nl bezoekt dan zie je dat de website er anders uit ziet dan wanneer je op de computer naar mijn website surft.

De reden dat responsive webdesign in het leven is geroepen is puur gebruiksgemak. Als je website niet is geoptimaliseerd voor smartphones en tablets moet je telkens ‘pinchen en zoomen’, oftewel je vingers gebruiken om de website beter te kunnen bekijken. Het doel van responsive webdesign is dat de gebruiker zo weinig mogelijk moeite hoeft te doen en de inhoud van de website recht voor zijn raap krijgt.

Responsive webdesign: zelf je website optimaliseren

Heb je zelf een website, verstand van HTML en wil je jouw website optimaliseren voor smartphones en tablets? Hieronder vind je een korte responsive webdesign tutorial.

Viewport tag

Het eerste wat je hoort te doen is de viewport tag instellen. De viewport tag is een HTML code die je toe moet voegen aan de header van elke pagina. Als je net als ik gebruik maakt van WordPress plak je de volgende code in het bestand header.php:

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

Met dit stukje code geef je aan dat de tablet of smartphone de website niet moet herschalen (verkleinen) zodat de hele website in scherm past. Het gevolg is dat je de website op ware grootte ziet, dezelfde grootte als op je computer scherm.

Wil je voorkomen dat de gebruiker kan pinchen en zoomen op tablets en smartphones, gebruik dan de volgende code. Onderstaande code gebruik ik wanneer ik responsive webdesign toepas. Zoomen is immers niet nodig bij geoptimaliseerde websites.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Oke, nu de viewport tag is ingesteld wordt het tijd om de zogenaamde media queries te gebruiken. Maar eerst een korte uitleg.

CSS3 media queries

Met de komst van CSS3 heeft er een revolutie plaatsgevonden op het gebied van responsive webdesign. Media queries zijn namelijk het ideale instrument om je website te optimaliseren voor tablets en smartphones. Media queries zijn CSS codes waarmee je kunt bepalen welke styling je wilt toepassen voor welk apparaat. Nog niet helemaal duidelijk? Geen zorgen, ik leg het zo uit aan de hand van voorbeelden!

Voordat we van start gaan is het verstandig om een nieuw CSS bestand aan te maken welke je bijvoorbeeld responsive.css noemt. Vergeet niet om in je header een link te leggen met dit nieuwe CSS bestand. Ik ga er vanuit dat je weet hoe dit moet. Zo niet, laat dan even een reactie achter.

CSS3 media queries

De juiste media queries instellen

Ik heb de nodige uren gespendeerd om de media queries te bepalen die ik het fijnst vindt werken, maar als je ze eenmaal te pakken hebt, kan je ze telkens weer gebruiken. En ik geef ze jou cadeau! Je mag mij bedanken in de comments. 😉

Aan de hand van vier media queries zorg ik ervoor dat de website responsive wordt voor vrijwel alle tablets en smartphones op de markt. Verdeel het bestand responsive.css in de vier ‘categorieën’ die hieronder staan. Plaats een aantal enters onder elke categorie zodat het onderscheid duidelijk zichtbaar is in je CSS bestand.

@media only screen and (max-width: 1024px) {
/* plaats hier de css code voor tablets in landscape mode */
}
@media only screen and (max-width: 960px) {
/* plaats hier de css code voor tablets in portrait mode */
}
@media only screen and (max-width: 767px) {
/* plaats hier de css code voor smartphones in landscape mode */
}
@media only screen and (max-width: 479px) {
/* plaats hier de css code voor smartphones in portrait mode */
}

Bovenstaande media queries zorgen ervoor dat schermformaten worden ingedeeld op basis van het aantal pixels wat een scherm heeft. De eerste media querie dient aangepaste codes te bevatten voor tablets in landscape mode (horizontaal) en in de tweede media querie plaats je CSS codes voor tablets in portrait mode (verticaal). De twee laatste twee media queries gelden voor smartphones, zelfde verhaal.

In de praktijk brengen

Het is de bedoeling dat je voor elke media querie andere CSS codes gaat schrijven. De breedte kan je vandaag de dag het beste in procenten definiëren, zodat elk scherm gecoverd is. Mijn voorkeur gaat uit naar een breedte van 90-95% met een padding aan weerszijden van 2.5-5%, zodat de tekst niet tot het scherm loopt.

Zie hieronder een kort voorbeeld over de opmaak van de code.

@media only screen and (max-width: 960px) {
h1{
font-size: 24px;
}
.wrapper{
width: 95%;
padding: 0 2.5%;
}
}

Let op de laatste twee sluitingstekens, deze vergeet ik nog wel eens en dat zorgt ervoor dat mijn hele website overhoop ligt. Als dat ook voorkomt bij jouw website, denk dan weer even terug aan deze alinea.

Het principe van responsive webdesign is dat de oorspronkelijke CSS codes uit het algemene style.css bestand worden toegepast, maar dat deze worden overruled door de CSS codes uit het responsive.css bestand. Herschrijf dus niet de originele code van het style.css bestand, maar bewerk het responsive.css bestand en geef de bestaande CSS codes nieuwe waardes.

Tip! Maak de browser op je computer smaller door de rechterkant naar links te trekken, zodat je niet telkens je telefoon of tablet hoeft te refreshen.

Als je er niet helemaal uitkomt, bekijk dan de code van mijn website als voorbeeld. Tal van plugins kunnen je hierin voorzien, bijvoorbeeld de Firebug plugin als je Firefox gebruikt als je browser.

Succes!

Jouw website ook responsive?

Wil je een complete website laten maken inclusief responsive webdesign? Ik help je graag verder! Vraag vrijblijvend een offerte aan of benader mij telefonisch op 06 12897156.