Waarom een responsive website?

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.

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.

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.

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.

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.

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.”