RESPONSIVE WEBSITES
Wikipedia zegt:
Responsive webdesign is een benadering van webdesign waarbij de web developer streeft naar een optimale webervaring voor een breed scala aan apparaten (van desktop computerschermen tot mobiele telefoons). Het ontwerp van een responsive website schaalt mee met de afmetingen van een scherm, zonder in te leveren op leesbaarheid van tekst of bruikbaarheid van de gebruikersinterface.
Simpel gezegd passen responsive websites zich aan naar de scherm resolutie die een bezoeker van de website gebruikt. Of dit nu een desktop monitor is, een tablet, of een smartphone. Er is slechts één website die veranderd qua layout afhankelijk welk resolutie er gebruikt wordt.
Gezien de verscheidenheid in beeldscherm resoluties alsmaar zal toenemen is dit een belangrijk punt in de ontwikkeling van een website. Daarnaast is er geen ingewikkelde apparaat detectie of javascript nodig. Er is slechts één website waarvan de broncode onderhouden moet worden. Voor elke resolutie wordt bepaald wat er wordt getoond en in welke hoedanigheid. De tekst is dan altijd goed leesbaar zonder te hoeven zoomen. Deze techniek is ook uitstekend te combineren met een CMS systeem
Als nadeel van responsive websites kan genoemd worden dat er vaak grotere afbeeldingen worden ingeladen dan nodig is en de ondersteuning voor deze techniek alleen is ingebouwd in de modernere browsers. Voor Internet Explorer geldt bijvoorbeeld dat deze techniek met CSS3 ondersteund wordt vanaf versie 9.
One Size fits all
- Omdat er slechts 1 website gemaakt wordt die ‘past’ op alle platvormen(IOS, Mac, PC, Android, enz…) en op alle beeldschermen is het onderhoud allemaal op 1 plaats. Door het gebruik van standaarden en herbruikbare bibliotheken worden fouten snel gevonden en eenvoudig en kosten efficient aangepakt.
- Alle bezoekers gaan naar dezelfde site en zien dezelfde inhoud, maar wel geoptimaliseerd voor hun gebruikservaring. Op een mobieltje kunnen afbeeldingen kleiner worden aangeboden of menu’s zo ingesteld worden dat deze daar beter op weergegeven worden. Een sterk verbeterde gebruikerservaring voor iedereen.
- De beheerder hoeft ook maar over 1 ding na te denken: de inhoud. Het systeem regelt de vormgeving over de verschillende schermen.
Bekijk het zelf
Open deze website eens op een PC, MAC, Tablet of smartphone. En zie de kleine verschillen. Geen ander platform voorhanden? Maak de browser maar eens smaller (bijvoorbeeld een kwart van je beeldscherm) en zie wat er gebeurt.
Een voorbeeld van hoe verschillende elementen van een webpagina zich aanpassen aan de schermgrootte van verschillende apparaten zoals het beeldscherm van een desktopcomputer, een tablet-pc en een smartphone.