Hoe maak je een Responsive Website?



Het wordt tegenwoordig steeds belangrijker dat je als ontwikkelaar / webmaster verstand hebt van responsive websites. Er komen steeds meer apparaten op de markt in verschillende formaten en diverse resoluties, je website moet op alle apparaten goed getoond worden.

Wat is een responsive website?

Een responsive website is een website die schaalt op verschillende apparaten. Je hebt overigens verschillende frameworks klaarliggen waarmee zodat je website over een correcte fundering beschikt, waaronder Twitter Bootstrap, Foundation etc.. Toch wil ik aan de hand van deze tutorial laten zien hoe eenvoudig het is om zelf een responsive website te maken helemaal vanaf het begin.

Natuurlijk zijn er diverse formaten, in dit voorbeeld laat ik je zien hoe je jouw website schaalt naar een resolutie van 320 pixels. Er zijn twee bestanden van belang, mijn standaard “index.html” en mijn “style.css”. Meer heb ik niet nodig om de website responsive te maken. Je hoeft niet gebruik te maken van verschillende .css-bestanden, je kunt alles netjes verwerken in een enkel css-bestand.

Hoe maak ik een responsive website voor mobiele apparaten?

Open je kladblok en neem onderstaande code over:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive website</title>
<link href="styles.css" rel="stylesheet">
<body>
<div id="wrapper">
<header id="header">
<h1>Website titel</h1>
<nav id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Pagina #1</a></li>
<li><a href="#">Pagina #2</a></li>
</ul>
</nav>
<select id="small-nav">
<option>Navigatie</option>
<option><li><a href="#">Home</a></li></option>
<option><li><a href="#">Pagina #1</a></li></option>
<option><li><a href="#">Pagina #2</a></li></option>
</select>
</header>
<section id="content">
<p>Belangrijke content</p>
</section>
<aside id="sidebar">
<p>Sidebar widget</p>
</aside>
<footer id="footer">
<p>Footer tekst</p>
</footer>
</div>
</body>
</html>

Bovenstaande onderdelen mogen niet vreemd voorkomen voor een standaard webdesigner, indien het wel allemaal vreemd en nieuw is dan is het belangrijk dat je de basis van HTML leert.

Het enige wat je misschien vreemd vindt is de volgende regel:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

Deze regel is essentieel voor een mobiele website! Het geeft aan dat de website naar de breedte van het apparaat moet schalen. Tevens worden vaak de waardes 1 of 1.5 voor de initial-scale gebruikt. De waarde 1 kan prima gebruikt worden voor apparaten tot 200 DPI. 1.5 wordt vaak gebruikt voor apparaten met meerdere punten per pixel. Om duidelijk aan te geven wat het precies betekent. Stel je hebt je website met bovenstaande viewport en je bekijkt de website op een telefoon met 200 DPI dan zal deze perfect getoond worden. Indien je de website bekijkt op een apparaat op een 300 DPI apparaat zullen de afbeeldingen op de website samentrekken en kleiner worden dan de 100% van je scherm. Het is gebruikelijk om een initial-scale van 1 in te stellen.

Het tweede vreemde aan bovenstaande code is de dubbele implementatie van het menu. Een normaal menu en een small-menu. De small-menu gaan we op de ‘grote’ website verbergen en tevoorschijn laten komen op de mobiele website en het ‘grote’ menu gaan we verbergen op de mobiele website en tevoorschijn laten komen op de schermen groter dan 320 pixels.
Onderstaande style.css moet je nu aanmaken:

body {
margin:0;
font-size:13px;
color:#FFFFFF;
}
#wrapper {
width:980px;
margin:0 auto;
}
#header {
width:980px;
background-color:#003300;
}
#header h1 {
padding:20px;
margin:0;
}
#navigation {
background-color:#009900;
font-size:14px;
}
#navigation ul {
margin:0;
padding:0;
list-style:none;
}
#navigation ul li {
display:inline;
padding:15px 15px;
}
#navigation ul li a {
text-decoration:none;
text-align:center;
padding:10px;
font-weight:bold;
color:#FFFFFF;
}
#navigation ul li a:hover {
text-decoration:underline;
color:#ff0000;
}
#small-nav {
display: none;
}
#content {
width:600px;
float:left;
background-color:#99FF00;
padding:10px;
margin:10px 0;
min-height:300px;
}
#sidebar {
width:325px;
float:right;
background-color:#99FF00;
padding:10px;
margin:10px 0;
min-height:300px;
}
#footer {
clear:both;
width:960px;
background-color:#003300;
padding:10px;
text-align:center;
}
/* Responsive Styling */
@media only screen and (max-width : 320px) {
#wrapper {
width: 100%;
margin: 0;
}
#header {
width: 96%;
}
#navigation {
display: none;
}
#small-nav {
display: block;
}
#content {
width: 90%;
float: none;
}
#sidebar {
width: 90%;
float: none;
}
#footer {
width: 90%;
}
}

Niels Vos

Niels is gespecialiseerd in het ontwikkelen van websites. Tevens adviseert hij ondernemers op het gebied van online marketing. Oprichter van Webdesign-Twente en optimalisator bij webhoster Antagonist B.V.

More Posts - Website - LinkedIn - Google Plus