Responsive Web Design en Twitter Bootstrap
Moderne websites passen zich aan de bezoekers aan. Wordt de site bekeken op een 24 inch beeldscherm, dan gaan alle grafische trukendozen open met bewegende banners en grote menuknoppen. Voor bezoeken via een smartphone wordt de compacte snelle variant getoond.
Werden vroeger meerdere versies van dezelfde website ontworpen en beheerd, tegenwoordig is dat niet meer te doen door de grotere diversiteit aan browsers en apparaten en de explosieve groei van dynamische webcontent en vereiste actualiteit.
De nieuwste trend in web design heet Responsive Web Design (afgekort tot RWD) en biedt soelaas. Met RWD wordt een site zodanig ontworpen dat deze altijd een optimale gebruikerservaring biedt bij het lezen en navigeren, ongeacht de gebruikte browser of het (mobiele) apparaat. Gestreefd wordt naar een minimum aan resizing, scrolling, panning op zowel desktop computer monitoren, tablets en smartphones.
De i-Concept website maakt ook gebruik van RWD en wel door middel van de inzet van het zogenaamde Twitter Bootstrap raamwerk. Hieronder ziet u de schermafbeelding van een browser op een PC met 19 inch computerscherm en daarnaast dezelfde website bij een kleiner scherm, of zoals de site op een smartphone zou tonen. De banners, menuknoppen en tekstkaders bewegen lenig mee met de aanpassing van de schermresolutie.
De belangrijkste kenmerken van het Bootstrap raamwerk:
- Een grid met 12 kolommen
- RWD ready met componenten die automatisch meeschalen met alle schermresoluties en apparaten voor een consistente gebruikerservaring.
- Een zeer complete front-end tool kit met CSS en JavaScript
- Ondersteuning van alle belangrijke browsers (zelfs IE!)
i-Concept adviseert haar klanten om de nieuwe en vernieuwde sites zo mogelijk op basis van RWD te ontwerpen. Dit scheelt enorm veel redactioneel werk en kan ook een positieve uitwerking hebben op de zoekmachine optimalisatie (SEO), omdat Google dezelfde content op meerdere sites als content duplicatie zou kunnen bestraffen.
Bekijk hier andere voorbeelden van Responsive Webdesign of neem direct contact met ons op voor een toelichting.
