MAXmade Blog

back arrow Terug naar overzicht
2017-09-14

Wat is responsive webdesign?

Een responsive webdesign past zich automatisch aan wanneer de schermgrootte veranderd. De website schaalt dus mee voor verschillende schermformaten zodat de website goed te gebruiken is op jouw telefoon, tablet, laptop en desktop. responsive

Hoe dan?

Dit kun je op meerdere manieren bereiken wanneer je code voor een website schrijft.
Bijvoorbeeld met CSS media queries:
@media only screen and (min-width: 320px){
/* mobiel opmaak code hier */
}
@media only screen and (min-width: 768px) {
/* tablet opmaak code hier */
}

Het probleem:
Er zijn heel erg veel verschillende schermformaten, pixel densities (DPI), aspect ratios. Daar bovenop kunnen telefoons en tablets ook nog van portrait (rechtop) naar landscape mode (liggend) veranderen. Dit maakt het ongelofelijk veel werk om handmatig alles op te vangen.
De oplossing:
CSS frameworks met grid systems! Zoals hetgeen in Twitter Bootstrap. Dit soort frameworks hebben alle queries al vooraf opgesteld zodat je deze zelf niet hoeft te bedenken. Hierdoor hoef je in de html code alleen maar classnames toe te voegen:
<div class="col-sm-12 col-md-6 col-lg-3 col-xl-2"></div>
alsnog kost het veel tijd om te bepalen hoe content moet worden weergeven op verschillende apparaten.

Waarom responsive webdesign?

Er zijn meer dan 1.2 miljard mobiele gebruikers op dit moment. Het aantal mobiele gebruikers heeft het aantal desktop gebruikers ingehaald. Het is dus erg belangrijk om deze gebruikers tevreden te houden! Wij werken dus ook mobile-first.

Laadtijd en prestatie

Feitje: 53% van mobiele gebruikers verlaten websites die langer dan 3 seconden laadtijd hebben. [bron]
Mobiele apparaten hebben vaak ook niet zo'n goed internet dan vaste computers/laptops, en al helemaal niet zoveel rekenkracht. Mobiele websites moeten dus ook 'lichter' zijn dan websites voor desktops.

Ander gedrag

Mobiele gebruikers gedragen zich anders dan desktop gebruikers. Dat is ook niet zo vreemd. Mobiele gebruikers hebben vaak geen toetsenbord en muis, maar een touch screen. Navigatie moet voor deze gebruikers dus worden aangepast. Ook is sommige informatie minder relevant voor mobiele gebruikers omdat deze groep andere doelstellingen heeft.

Wat wij doen

Wij zorgen ervoor dat mobiele apparaten kleinere bestanden kunnen laden. Onze code wordt gecomprimeerd en gezipt (dit scheelt 75% in grootte). Ook zorgen wij ervoor dat er kleinere plaatjes worden gestuurd naar kleinere schermen. Hiervoor gebruiken we handige compressie algoritmen. Minder laadtijd is altijd beter! Grotere apparaten hebben vaak meer rekenkracht en vaak beter internet, dus kunnen deze grotere plaatjes aan zonder dat de gebruiker langer hoeft te wachten. Wij proberen een beste afweging neer de zetten tegen de kwaliteit die de gebruiker te zien krijgt, en de laadtijd.
Ook zorgen wij ervoor dat onze websites op elk scherm mooi worden getoond. Dit is een voorbeeld van hoe onze website op verschillende apparaten terecht komt:responsive maxmade example

back arrow Terug naar overzicht