Responsive web design (RWD) is een benadering voor het ontwerpen van websites die zich aanpast aan verschillende schermformaten en apparaten. Hiermee kunnen gebruikers jouw website bekijken op een manier die logisch is voor elke individuele gebruiker. Bij een Responsief design worden er vaak meerdere versies van je website gemaakt. Bijvoorbeeld een versie voor op mobiel, een versie voor desktop en een voor tablets. 

Begin met het maken van een responsive website sjabloon

Een goed uitgangspunt is om een responsive website template te gebruiken. Dit zal je helpen een solide basis te leggen voor jouw toekomstige projecten. Je kunt online gratis sjablonen vinden, zoals Bootstrap, Foundation en HTML5 Boilerplate. Vaak biedt een CMS ook al responsieve thema’s aan. 

Zodra je een responsieve website sjabloon hebt, kun je met dat sjabloon een nieuw project maken. Als je bijvoorbeeld een eenvoudige blog wilt maken, kun je hetzelfde sjabloon gebruiken om een WordPress-site, een Tumblr-site of een statische HTML-pagina te maken.

Voeg mediaquery’s toe om indien nodig wijzigingen aan te brengen. Met media query’s kun je  CSS-stijlen toevoegen op basis van de schermgrootte. Je wilt bijvoorbeeld bepaalde elementen verbergen wanneer je een webiste op mobiele apparaten bekijkt. Om dit te doen, voeg je een mediaquery toe met een waarde voor maximale breedte.

Creëer een mobile first-benadering

Een responsieve website past de lay-out automatisch aan op elk schermformaat waarop deze wordt bekeken. Dit betekent dat jouw website er goed uitziet, ongeacht het type apparaat dat mensen gebruiken om deze te bekijken. Het maakt het ook gemakkelijker voor gebruikers om door jouw site te navigeren, omdat er geen schokkende wijzigingen in de lay-out zijn als ze tussen verschillende schermen schakelen.

Voeg een favicon toe

Favicons zijn kleine afbeeldingen die naast links op websites verschijnen. Ze helpen gebruikers een link sneller te identificeren door ze een idee te geven van wat voor soort website ze bezoeken. Je kunt een favicon aan uw website toevoegen. bijvoorbeeld met behulp van een gratis online service genaamd Iconfinder.com. Voer eenvoudig de URL van uw website in het zoekvak in en klik op ‘Pictogram maken’. Upload vervolgens de afbeelding die je als favicon wilt gebruiken.