Blog.

Terug naar overzicht.
Responsive webdesign

Responsive webdesign

Posted on 11-10-2013 by Internetbureau gett

Voer voor techneuten: Responsive, media queries, viewport.
Kijk om je heen. Wie heeft er tegenwoordig geen smartphone. Ik hoef u dan ook niet uit te leggen dat het belang van een goede mobiele website bepalend kan zijn of een klant geïnteresseerd blijft in uw product of dat deze na een seconde weer weg is omdat de website wel erg traag is.
U wilt toch geen omzet mis lopen omdat uw website niet geschikt is voor een mobiel apparaat?
 
Responsive webdesign is de oplossing voor dit soort problemen. Ik wil hier op een vrij technische manier op in gaan uitleggen hoe dit werkt.
Bekijk bijvoorbeeld deze website maar eens op uw smartphone. Dan zal ik vervolgens uitleggen wat er zoal gebeurt.
 
Geen resolutie maar device width
Om een goede website te maken houden we normaal gesproken rekening met een resolutie van min. 1005 pixels breed. 9% van de internet bezoekers gebruikt nog het 1024 scherm maar ook deze groep is aan het ‘uitsterven’. Nu hebben smartphones en tablets verschillende resoluties. Voor het maken van een responsive website, een website die respondeert aan het medium waarop het bekeken wordt, gebruiken we daarom geen resolutie maar device width. Dit is een klein stukje code dat geplaatst wordt in de <head> en voor de CSS bestanden.
 
Responsive webdesign: de magie begint hier
<meta name="viewport" content="width=device-width, user-scalable=false;">
Met het stukje code hierboven bepalen vanaf nu dat de breedte die berekend zal worden, de breedte van het scherm is, genaamde device-width. Met user-scalable vermijden we dat bezoekers in gaan zoomen, dit is niet nodig.
 
Nu dat stukje is toegevoegd aan de code kunnen we pas beginnen aan het echte werk.
 
Mocht dit al te ver gaan laten we dan eens een afspraak maken zodat wij kunnen bepalen of wij uw website geschikt kunnen maken voor een smartphone en tablet.
 
When it brake add a breakpoint
We beginnen klein, laten we dan ook beginnen met een kleine iPhone 4 / HTC Wildfire / Samsung Galaxy S1 deze verouderde toestellen hebben een device width van 320 pixels breed.
Een ongeschreven regel is dat je een breakpoint toevoegt wanneer de website er niet meer netjes uitziet of volledig uit zijn voegen breekt. Een breakpoint kun je toevoegen door het toepassen van een media querie.
 
HUH? een media querie? Leg uit!
Een media querie in CSS zal worden aangeduid met @media. Onderstaande media querie bepaald wat er op een scherm met een maximale breedte van 320px moet gebeuren.
 
@media only screen and (max-width: 320px) {
#youtube {
display: none;
}
}
 
Zodra de browser de viewport tegenkomt verwacht deze dan ook dat er voorwaarden voor verschillende typen schermen aanwezig zijn. De voorwaarden van het bovenstaande stukje code is dat deze geldt wanneer het scherm maximaal 320 pixels breed is dit zou gelden voor zowel landscape als portrait. Het kan bijvoorbeeld zijn dat u een YouTube filmpje op uw website heeft staan die helemaal niet geschikt is om te vertonen op een mobiel apparaat. U kunt er dan veel beter voor kiezen deze gebruiker door te sturen naar de YouTube app, deze is daar tenslotte voor gemaakt. Dus daarom sluiten we hiermee uit dat de mobiele browser het filmpje gaat inladen en kunnen we deze bijvoorbeeld laten vervangen door een afspeel knop die verwijst naar de You Tube app.
 
De schermen van een smartphone worden natuurlijk steeds groter. Een 5 inch smartphone is tegenwoordig al vrij normaal en deze worden nog groter. Steeds meer fabrikanten kiezen ervoor om er nog een schepje bovenop te doen. De zogenaamde Phablets (PHone & tABLET) zijn hier een mooi voorbeeld van, zoals de Samsung Galaxy Mega met een 6,4 inch display.
 
Laten we verder gaan met een grotere device-width. De volgende stap is dat we het scherm gaan uitrekken tot dit breekt.
 
In onderstaand geval willen we het menu knopje verwijderen dat zichtbaar moet zijn op mobiel maar bijvoorbeeld niet op een iPad. Ook geven we aan dat dit pas mag gebeuren wanneer het scherm een minimale breedte heeft van 767 pixels.
 
@media only screen and (min-width: 767px) {
#mobile_menu_icon {
display: none;
}
}
 
Een media querie kun je vrij lang maken:
 
@media only screen and (min-width: 320px) and (max-width:768px) and (orientation: portrait) {
 
}
 
Dit zou een smartphone kunnen zijn met een scherm van minimaal 320 pixels en maximaal 768 pixels die in portret modus moet worden vast gehouden.
 
In bovenstaande voorbeelden ben ik voornamelijk bepaalde elementen aan het uitsluiten. Maar dit is niet de enige mogelijkheid. Ook zouden we ervoor kunnen kiezen om de knoppen die aanwezig zijn op uw website te vergroten zodat deze makkelijk te raken zijn. Of we veranderen de kleuren van bijvoorbeeld de links.
 
Media queries kunnen toegevoegd worden voor bijvoorbeeld een simpele presentatie website maar ook voor een complexe webshop met een gigantisch aantal producten. Een klant zal onthouden wanneer hij/zij een website prettig vond en makkelijk via een smartphone of tablet een bestelling heeft kunnen doen. Deze klant zal uw website dan ook aanraden aan bijvoorbeeld familie of vrienden.
 
Ik hoor u al denken:
Maar mijn CSS zal wel een stuk langer worden zo, en hoe meer regels er gelezen moeten worden door de browser hoe trager mijn website zal worden toch? Simpel gezegd: Nee. Een browser begint boven aan uw HTML bestand en detecteert dat deze door middel van de viewport (device-width) moet gaan kijken naar het CSS bestand. Als de device-width niet voldoet aan een van de voorwaarden van uw media queries zullen deze worden overgeslagen nog voor dat deze door de browser ingelezen wordt.
 
Leuk dat je er nog bent. Best een technisch verhaal, niet?
Heb je zoiets van: "ja leuk allemaal dat responsive webdesign maar ik weet niet of ik hier al klaar voor ben" dan geldt mijn aanbod nog steeds! Koffie of thee?
 
Responsive webdesign? bel 0318 - 46 99 99 en maak een afspraak!

Deel op social.