Infi-site nu responsive
Geplaatst door Jiska de Ligt op 19 juli 2012
Tag(s): Infi
Dankzij Borre is onze website nu responsive. ‘Responsive design’ zorgt ervoor dat websites er op alle schermformaten goed uitzien - dus ook op tablets en telefoons. Borre legt uit hoe het werkt.
'Voor iedere schermbreedte kiezen we een optimale opmaak. Op een breedbeeldscherm maken we optimaal gebruik van de beschikbare ruimte door een extra kolom te tonen, terwijl we op een smartphone alleen de belangrijkste informatie weergeven.
In 2010 publiceerde Ethan Marcotte een blogpost en boek onder de titel 'responsive web design'. Daarin betoogt hij dat een website zich aan moet passen aan de beschikbare schermbreedte, en niet, zoals gebruikelijk onder webdesigners, geoptimaliseerd moet worden voor slechts één schermresolutie. Immers, je weet niet op welk apparaat je bezoeker de site zal bekijken. Ook kun je er niet automatisch vanuit gaan dat jouw site fullscreen getoond zal worden.
Wanneer bedrijven een website goed willen tonen, worden hiertoe vaak twee versies van de website gemaakt: een desktop- en een mobiele versie. Bijvoorbeeld www.facebook.com vs. m.facebook.com. Responsive design is een geheel andere benadering, waarbij één en dezelfde website zich aanpast aan de breedte van het venster waarin het getoond wordt. Doordat maar één website hoeft te worden ontwikkeld, zo is de gedachte, worden de ontwikkeltijd en de kosten die daarmee gepaard gaan, ingeperkt. Bovendien is je website meteen compatibel met ieder denkbaar apparaat; ook apparaten die nog niet op de markt zijn, of waarvan je niet gedacht had dat iemand die zou gebruiken om naar jouw website te surfen.
Om een en ander te bewerkstelligen, wordt gebruik gemaakt van media queries, een toevoeging aan CSS 3. Met behulp van media queries kan styling toegepast worden aan de hand van bepaalde selectiecriteria. Om styling toe te passen, slechts dan wanneer de website wordt bekeken op een resolutie lager dan 960 pixels breed, kan gebruik gemaakt worden van de volgende media query:
@media screen and (max-width: 959px){
/* Alles wat hier komt is slechts van toepassing op vensters < 960px */
}
Aan de hand van deze methode worden bepaalde elementen op de Infi Mobile website vervolgens herschaald of niet getoond. Hieronder is te zien hoe de Infi-site wordt getoond op verschillende apparaten.
Je kunt dit natuurlijk ook zelf uitproberen: sleep je browser steeds een stukje smaller, en kijk wat er met de opmaak van deze website gebeurt. De smalste variant is bedoeld voor mobiele telefoons: daar tonen we alleen de meest noodzakelijke informatie. Overbodige afbeeldingen worden weggelaten, zodat de gebruiker overzicht houdt.'
