BLOG

Responsive bouwen van een website

25 september 2018
Artikel door Marco Mes

Responsive betekent dat een website op alle apparaten (computer, mobiel, tablet etc) goed te gebruiken is. Een website die niet responsive is komt onvertrouwelijk over. Je wilt natuurlijk dat jou website voor alle bezoekers goed wordt getoond. Je kunt je website op verschillende manieren responsive maken. De meest voor de hand liggende manier is door gebruik te maken van Media query.

Media Query

Een mediaquery is een CSS-functie waarmee de inhoud van een webpagina kan worden aangepast aan het apparaat waarop de pagina wordt weergegeven, zoals een telefoon of tablet.

Mediaquery’s is een populaire techniek voor het leveren van een op maat gemaakt ontwerp aan desktops, laptops, tablets en mobiele telefoons.

Query toepassen

Een media query ziet er als volg uit:

@media screen and (max-width: 650px){

CSS-Code;
}

Hier zeg je dat de code die je heb ingevoerd te zien word op een scherm die de breedte heeft tot 650 pixels.

De code word niet gezien als de breedte van je scherm boven 650px is.

Stel: je website is af voor de desktop, maar het is niet responsive voor de mobiel. Je wilt dat de tekst past op een kleinere scherm en dat logo in plaats van 400×400, 200×200 pixel moet worden. De scherm breedte van jou telefoon is 850px, maar je wilt natuurlijk ook dat het te zien word op een scherm van 600px. Dat kan, dan gebruik je de volgende code:

@media screen and (max-with: 900px) and (min-width:300px){
Body, p{
font-size: 20px;
}
div.logo{
background-size: 200px 200px;
}
}

Hier zeg je dat de tekst 20px en de logo 200×200 pixel moet worden als je de website bezoekt op een scherm die de breedte heeft van 250px tot 900px.

Let wel op de laatste twee sluittingstekens ‘}’, deze zorgt ervoor dat jou hele website niet overhoop ligt. Als dat het geval is denk dan weer terug aan deze alinea.

Grootte van het scherm

Bekijk je je website op een mobiel? Dan zie je een andere ontwerpt dan op de computer. Bekijk je hem op je tablet? Dan zie je weer een ander ontwerp. Je ontwerp past zich aan afhankelijk van hoe breed je scherm is. Op een kleinere scherm zijn bepaalde details verborgen en ligt er meer nadruk op de inhoud.

VERDIEPING

Meer blogs & nieuws lezen?

Meer weten over een bepaald onderwerp? Lees dan eens één van onze andere blogs.

Hoe lazy loading in WordPress jouw website betere resultaten oplevert

5 tips voor ondernemers met hun handen in het haar door het Coronavirus!

27 maart 2020 - Artikel door Marco Mes

Wij willen je graag helpen in deze periode!

17 maart 2020 - Artikel door Thimo Vissers

Gewijzigde websupport pakketten

3 maart 2020 - Artikel door Thimo Vissers

GDPR proof support, wat houdt het in?

3 maart 2020 - Artikel door Demi Kloosterman

Waarom is on-page optimalisatie belangrijk voor je website?

21 februari 2020 - Artikel door Thimo Vissers
START JOUW PROJECT

Jouw website overlaten
aan webspecialisten?

Ons ervaren team staat klaar voor jouw project.