Responsive webdesign
Geschreven door Tanja de Bruijn dinsdag, 31 januari 2012 16:16
De tijd dat mensen alleen internet op de PC hadden, ligt in een ver verleden. Tegenwoordig heeft gemiddeld 50% van de Nederlanders mobiel internet, 8% van de Nederlandse huishoudens ontvangt internet via een smart televisie en zo’n 12% heeft een internetverbinding via een spelcomputer. Met andere woorden: de komende jaren zullen de hoeveelheid apparaten waarop we internet kunnen ontvangen, alleen maar toenemen. Smartphones, tablets, netbooks, pc’s en laptops. Elk met zijn unieke user interface, zijn eigen interactie en schermresolutie.
Eén website/webdesign voor alle apparaten
Met responsive webdesign creëer je de mogelijkheid om voor een website slechts één versie te optimaliseren voor verschillende schermresoluties. Zonder in te leveren aan content of functionaliteit, past de website zich aan op de resolutie van het scherm. Je kunt er ook voor kiezen om bepaalde elementen van de website wel of juist niet te tonen op de verschillende schermresoluties. Zo komt er geen overbodige informatie op bijvoorbeeld een smartphone, waardoor het onoverzichtelijk en druk wordt. Er zit dus niet alleen een technische kant aan, zoals een CSS aanpassing, maar zeker ook de verandering in het kijken naar webcontent en webbeleving is belangrijk.
Bron: http://www.mediaqueri.es/
Werk van klein naar groot
Daarom begint responsive webdesign in het ontwikkelproces met het ontwerpen voor mobiel. Omdat het scherm kleiner is, wordt de ruimte beperkt. Hierdoor wordt de focus gelegd op de belangrijkste informatie. Dit geldt zowel voor het grafische ontwerp als voor de content structuur. Zorg ervoor dat eerst alle essentiële elementen in het ontwerp opgenomen zijn en voeg naarmate de ruimte toeneemt de ‘nice to have’-elementen toe. Je werkt met responsive webdesign dus van klein naar groot, waarbij je de doelgroep altijd als uitgangspunt neemt.
Voordelen
Responsive webdesign heeft vele voordelen. Er wordt gebruik gemaakt van één enkel bronbestand, waardoor het onderhoudsgemak toeneemt. Content wijzigingen en –aanvullingen, maar ook technische aanpassingen, kunnen gedaan worden in één versie.
Tevens biedt responsive webdesign niet alleen een duurzame oplossing, doordat het relatief eenvoudig is om voor een nieuwe resolutiestandaard te optimaliseren, maar er zijn ook voordelen voor de efficiëntie van het ontwerpen. Zo hoeft er bijvoorbeeld maar één website ontwikkeld te worden. De aparte mobiele versie vervalt met dit concept.
Enkele technische kenmerken
- Een responsive website is gebouwd met een flexibel grid. Hierdoor wordt de inhoud van de website schaalbaar. Dit wil zeggen dat de elementen op de pagina geen vaste plek en geen vast formaat meer hebben. Hierdoor veranderen alle elementen zoals onder andere de breedte, hoogte, margins, paddings en fonts op de site bij het schalen van de pagina.
- Ook bestaat responsive webdesign uit flexibele media. Dit houdt in dat bijvoorbeeld afbeeldingen geen vaste grootte meer hebben, waardoor deze niet mee veranderden wanneer de site van grootte veranderd. Door alle media flexibel in het ontwerp te verwerken, schalen ze mee met het formaat van de browser.
- Met behulp van media queries kunnen we het type apparaat en de bijbehorende karaktereigenschappen herkennen, waarmee de site bezocht wordt. Hier wordt de juiste content en vormgeving op aangepast.
Het wordt steeds belangrijker om de juiste informatie op de juiste manier aan te kunnen bieden, ongeacht het gebruikte apparaat. Responsive webdesign is een oplossing om efficiënt en doeltreffend te voorzien in de informatiebehoefte van deze tijd. Het wordt mogelijk de nieuwe standaard bij de ontwikkeling van platformonafhankelijke websites en webapplicaties.
