Waarom een responsive website en wat houdt het in?

 

Steeds meer websites hebben het, maar wat is een responsive website en wat zijn de voordelen? Hieronder staan een paar van de belangrijkste principes waar je aan kan denken als je een website gaat maken met een responsive-layout.

Responsive VS Adaptive

Een responsive-layout kijkt continue naar de breedte van het scherm en past de layout hierop aan. Maar er is geen sprake van goed of fout, een adaptive-layout kan je ook net zo goed gebruiken. Het ligt aan de content op de pagina, daar vanuit moet je bepalen wat het beste ontwerp is voor je website.

01_responsive-vs-adaptive

Relative VS Static Units

Het scherm kan er een zijn van een tv, smartphone of alles daar tussen in. Ook de pixel dichtheid kan per apparaat verschillen. Hierdoor heb je waardes nodig die flexibel zijn en overal goed werken. Daarom gebruik je met een responsive layout percentages in plaats van vaste waardes. Dus als je iets 50% breed maakt dan is dit element op elk scherm 50% van het scherm.

02_relative-units-vs-static-units-1

Breakpoints

Met breakpoints kun je, net zoals bij een adaptive-layout, op bepaalde punten de layout wijzigen, hierdoor kan je voor elk type scherm een unieke weergave tonen. Als voorbeeld: op een telefoon zal een gebruiker de content zien in een lange kolom. Terwijl dezelfde pagina voor een gebruiker met een tablet of desktop, de content getoond zal worden in twee kolommen.

03_with-breakpoints-vs-without-breakpoints-1

Max-width layouts

Bij flexible-layouts is het probleem dat als je scherm te groot wordt, de layout zich nog steeds wilt aanpassen aan het scherm. Hierdoor maakt de layout zich enorm breed en dit maakt afbeeldingen te groot en zinnen te lang. Hiervoor is het een goede tip om een maximum breedte aan je layout toe te voegen. Je layout kan nog steeds dynamisch van formaat wijzigen, maar wanneer je scherm te groot wordt, stop je layout met rescalen. Wanneer je wilt dat een element juist altijd de volledige breed in beslag neemt, dan moet je dit niet toevoegen. Denk aan een achtergrond afbeelding die je over de volledige breedte wilt.

07_max-width-vx-no-max-width-1

Vector VS Pixel images

Heb je een website waar je veel gebruik maakt van iconen, dan is het slim om te kijken naar SVG afbeeldingen. Dit is een vector afbeelding. Wat is vector? Vectors zijn wiskundige berekeningen die paden en objecten vormen. Zo kan je een logo tonen op je website die op elk willekeurig formaat nog steeds scherp wordt getekend. Andere bestandsformaten (.png, .jpg) maken gebruik van pixels. Wanneer je dit bestand vergroot dan worden de afzonderlijke pixels zichtbaar.

09_vectors-vs-images-1

Het kan zijn dat u dit artikel aan het lezen bent op uw laptop, tablet, tv, game console, smartphone of zelfs op uw smartwatch, met ieder zijn eigen schermafmetingen en pixel dichtheid. Schermformaten zullen altijd veranderen, dus het is belangrijk dat uw website zich kan aanpassen aan elk schermformaat. Dit houdt in: de schermen die nu bestaan en de schermen die nog gemaakt moeten worden. Voor websites is het belangrijk dat de gebruiker deze altijd kan bereiken, op welk apparaat dan ook, met welk schermformaat dan ook! Hiervoor moet uw website zó ontworpen zijn dat deze reageert op de gebruiker en de pagina’s zich aanpassen aan het apparaat en de behoefte van de gebruiker.

Vloeiende layouts, flexibele content en breakpoints zijn de drie technische componenten voor een responsive website, maar het vraagt ook om een andere manier van denken. In plaats van voor ieder mogelijk apparaat en scherm een unieke ervaring te maken, moeten we een uniek apparaat zien als een facet van een en dezelfde ervaring. Dit zegt niet dat elke website een responsive website moet zijn, de content van de website moet het ontwerp bepalen. Er kan altijd de vraag komen om een website te maken voor één specifiek scherm of apparaat.

Maar deze manier van denken hoeft niet de standaard te zijn. Nu meer dan ooit, ontwerp je een website die wordt bekeken op een groot scala van verschillende apparaten en schermen. Responsive webdesign biedt ons een weg vooruit, waardoor wij “ontwerpen voor de eb en vloed van dingen.”

 
Waarom een responsive website?