{"id":16570,"date":"2023-03-22T16:17:21","date_gmt":"2023-03-22T15:17:21","guid":{"rendered":"https:\/\/www.hostnet.nl\/academy\/?p=16570"},"modified":"2023-06-29T10:29:08","modified_gmt":"2023-06-29T08:29:08","slug":"responsive-website-maken","status":"publish","type":"post","link":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken","title":{"rendered":"Je website responsive maken, m\u00e9t of zonder technische kennis"},"content":{"rendered":"\n<p>Als ondernemer is het belangrijk om een <a href=\"https:\/\/www.hostnet.nl\/website-maken\">website te maken<\/a>. Maar als je site niet responsive is, bestaat de kans dat mobiele bezoekers afhaken en je conversie misloopt. Dat wil je niet. Daarom lees je in dit artikel hoe je jouw website responsive maakt, m\u00e9t of zonder technische kennis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wat-is-een-responsive-website\">Wat is een responsive website?<\/h2>\n\n\n\n<p>Een responsive website is een site die zich automatisch aanpast aan het schermformaat van een apparaat. Het maakt dus niet meer uit of een bezoeker je website bekijkt op desktop, tablet of mobiel van diverse formaten, want je website schaalt altijd mee. Teksten, afbeeldingen, video\u2019s en meer zijn goed zichtbaar zonder dat bezoekers moeten inzoomen.<\/p>\n\n\n\n<div class=\"product-banner border-radius gutter-padding no-padding-top gutter-margin-bottom gutter-margin-top\">\n    <div class=\"svg-icon-text gutter-margin-top\">\n        <i class=\"svg-icon icon-large no-margin-left gutter-margin-right-half icon-stroke-blue\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M35.9 50c-.2.6-.8 1-1.4 1h-8c-.6 0-1.2-.4-1.4-1H1.6c-.3 0-.6.3-.6.6v2.8c0 .3.3.6.6.6h56.8c.3 0 .6-.3.6-.6v-2.8c0-.3-.3-.6-.6-.6H35.9z\"><\/path><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M25.1 50c.2.6.8 1 1.4 1h8c.7 0 1.2-.4 1.4-1H56V11.1C56 9.4 54.6 8 52.9 8H7.1C5.4 8 4 9.4 4 11.1V50h21.1z\"><\/path><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" d=\"M36 40l12-12-12-12H24l12 12-12 12zM22 22H12m15 5H17m10 5H17m5 5H12\"><\/path><\/svg>        <\/i>\n        <span class=\"text-blue gutter-margin-right-half\">\n            Ontwikkel websites op betrouwbare en stabiele webhosting. Inclusief SSL en zakelijke e-mail.        <\/span>\n    <\/div>\n    <div class=\"button-holder gutter-margin-top\">\n        <a href=\"https:\/\/www.hostnet.nl\/webhosting#product-table-webhosting\" class=\"button\">\n            <span class=\"btn-text\">\n                Bestel nu            <\/span>\n        <\/a>\n    <\/div>\n<\/div>\n\n<script>\n    var productBanner = \"webhosting\";\n    dataLayer.push({'pageCategory': 'ac-' + productBanner});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wat-is-een-mobiele-site\">Wat is een mobiele site?<\/h3>\n\n\n\n<p>Een mobiele site is een website die speciaal is ontworpen voor tablets en mobiele telefoons. Het is een lichtgewicht website met een eenvoudige gebruikersomgeving, zodat hij snel laadt.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"responsive-vs-mobiele-website\">Responsive vs. mobiele website<\/h3>\n\n\n\n<p>Een responsive website is niet hetzelfde als een mobiele website. Bij een responsive website schaalt je \u2018normale\u2019 website mee aan het formaat van het gebruikte apparaat. Een mobiele website is een apart ontwerp dan je \u2018normale\u2019 website en gebouwd voor smartphones en tablets.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"waarom-een-responsive-website\">Waarom een responsive website?<\/h2>\n\n\n\n<p>Een website mobielvriendelijk maken, is anno nu onmisbaar. Steeds meer mensen gebruiken namelijk hun mobiel of tablet om een aankoop te doen of online iets te zoeken. Hoeveel mensen zie jij wachten op de trein met een laptop open? Waarschijnlijk niet veel. In plaats daarvan wachten deze mensen met een mobiele telefoon in hun hand.<\/p>\n\n\n\n<p>Een website responsive maken, biedt je de volgende voordelen:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Betere gebruikerservaring<\/strong><br>Je website past zich automatisch aan, zodat hij toegankelijk, gebruiksvriendelijk en bruikbaar blijft. Het maakt niet uit welk apparaat en formaat je bezoekers gebruiken.<\/li>\n\n\n\n<li><strong>Meer conversie<\/strong><br>Doordat je website gebruiksvriendelijk is, ervaren je bezoekers je site als prettig en gaan sneller tot een aankoop over.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.hostnet.nl\/academy\/hoger-in-google\"><strong>Hoger in Google scoren<\/strong><\/a><br>Google geeft responsive websites een hogere plek in de zoekresultaten, omdat je site gebruiksvriendelijk is. De zoekmachine wil namelijk de meest relevante en gebruiksvriendelijke informatie tonen. Bovendien bekijkt Google eerst je mobiele website, ook wel <a href=\"https:\/\/developers.google.com\/search\/docs\/crawling-indexing\/mobile\/mobile-sites-mobile-first-indexing\" target=\"_blank\" rel=\"noreferrer noopener\">mobile-first<\/a> genoemd.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"de-nadelen-van-een-responsive-website\">De nadelen van een responsive website<\/h3>\n\n\n\n<p>Een website responsive maken, heeft echter ook een aantal nadelen. Bijvoorbeeld:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ontwikkeltijd<\/strong><br>Een website mobielvriendelijk maken, kan een technische uitdaging zijn. Het kost bijvoorbeeld meer tijd om de juiste code te schrijven. Als je geen technische kennis hebt, is dit vrijwel geen optie.<\/li>\n\n\n\n<li><strong>Trage website<\/strong><br>Een responsive website bevat vaak meer code om ervoor te zorgen dat je site zich automatisch aanpast. Dit kan zorgen voor een tragere website.<\/li>\n\n\n\n<li><strong>Lastig te onderhouden<\/strong><br>Bij het onderhouden van je website moet je ervoor zorgen dat je wijzigingen voor alle pagina\u2019s doorvoert. Doe je dit niet, dan kan je site niet meer responsive zijn.<\/li>\n\n\n\n<li><strong>Verlies van functionaliteit<\/strong><br>Als je een bestaande site responsive maakt, kan het voorkomen dat sommige functies die op desktop goed werkte op mobiele apparaten niet meer werken. Dit zorgt voor een slechte gebruikerservaring.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"je-website-responsive-maken-kosten\">Je website responsive maken: kosten<\/h2>\n\n\n\n<p>De kosten van een mobielvriendelijke website maken, zijn afhankelijk van de grootte en complexiteit van je site. Over het algemeen begint de prijs van een responsive site bij iets meer dan \u20ac 100. Hoe groter en complexer je site is, hoe meer je betaald. De kosten kunnen oplopen tot in de duizenden euro\u2019s, bijvoorbeeld als je een responsive website laat maken door een webdeveloper op een <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-vps\">VPS<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"is-mijn-website-geschikt-voor-mobiel\">Is mijn website geschikt voor mobiel?<\/h2>\n\n\n\n<p>Wil je weten of je huidige website geschikt is voor mobiel? Dan kun je de <a href=\"https:\/\/search.google.com\/test\/mobile-friendly?hl=nl\" target=\"_blank\" rel=\"noreferrer noopener\">mobielvriendelijke test van Google<\/a> gebruiken. Zo werkt het:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Voer de volledige <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-een-url\">url<\/a> van je website in de balk.<\/li>\n\n\n\n<li>Klik op \u2018url testen\u2019.<\/li>\n\n\n\n<li>De tool test of je website mobielvriendelijk is. Dit kan even duren.<\/li>\n\n\n\n<li>Vervolgens zie je de testresultaten.<\/li>\n<\/ol>\n\n\n\n<p><strong>Let op:<\/strong> De tool test alleen de url die je hebt ingevoerd, dus niet alle pagina\u2019s van je website. Daarnaast raadt Google aan om de tool alleen te gebruiken om problemen met gebruiksgemak op te sporen voor mobiele apparaten. Sterker nog, het bedrijf geeft aan dat je de tool niet moet gebruiken om te zien of je pagina geschikt is voor mobiele apparaten in de zoekresultaten. Meer informatie hierover en wat de foutmeldingen betekenen, vind je op <a href=\"https:\/\/support.google.com\/webmasters\/answer\/6352293\" target=\"_blank\" rel=\"noreferrer noopener\">deze pagina<\/a> van Google.<\/p>\n\n\n    <div id=\"polls-13\" class=\"wp-polls\">\n\t\t<section class=\"bg-blue-light gutter-margin-top gutter-margin-bottom gutter-padding\">\r\n<img decoding=\"async\" src=\"\/wp-content\/themes\/academy\/images\/plugins\/wp-polls\/poll-chart.svg\" alt=\"\">\r\n<p class=\"h-size-18\">Ik ga een responsive website maken<\/p>\r\n<div id=\"polls-13-ans\" class=\"wp-polls-ans\">\r\n<ul class=\"wp-polls-ul no-margin-left\">\n\t\t<li><strong><i>Ja <small>(83%, 5 Stemmen)<\/small><\/i><\/strong><div class=\"pollbar\" style=\"width: 83%\" title=\"Je hebt op dit antwoord gestemd - Ja (83% | 5 Stemmen)\"><\/div><\/li>\n\t\t<li>Wat is responsive? <small>(17%, 1 Stemmen)<\/small><div class=\"pollbar\" style=\"width: 17%\" title=\"Wat is responsive? (17% | 1 Stemmen)\"><\/div><\/li>\n\t\t<li>Nee <small>(0%, 0 Stemmen)<\/small><div class=\"pollbar\" style=\"width: 1%\" title=\"Nee (0% | 0 Stemmen)\"><\/div><\/li>\n\t\t<\/ul>\r\n<p>Aantal stemmen: <strong>6<\/strong><\/p>\r\n<\/div>\r\n<\/section>\n\t\t<input type=\"hidden\" id=\"poll_13_nonce\" name=\"wp-polls-nonce\" value=\"47cb102e2e\" \/>\n<\/div>\n<div id=\"polls-13-loading\" class=\"wp-polls-loading\"><img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/plugins\/wp-polls\/images\/loading.gif\" width=\"16\" height=\"16\" alt=\"Aan het laden ...\" title=\"Aan het laden ...\" class=\"wp-polls-image\" \/>&nbsp;Aan het laden &#8230;<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"je-site-responsive-maken-de-eenvoudige-manier\">Je site responsive maken, de eenvoudige manier<\/h2>\n\n\n\n<p>Ik begrijp dat een website aanpassen voor mobiele telefoon als een technische aangelegenheid klinkt. Heb je geen technische kennis of wil je jouw tijd aan andere zaken besteden? Dan kun je het best een website maken met een <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-een-cms\">contentmanagementsysteem<\/a> (cms).<\/p>\n\n\n\n<p>Met een cms maak en beheer je eenvoudig een website. Dit betekent ook dat je toegang krijgt tot diverse responsive websitetemplates. Je hoeft er dus zelf niets voor te doen.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"cmsen-bij-hostnet\">Cms\u2019en bij Hostnet<\/h3>\n\n\n\n<p>Bij Hostnet kun je direct een responsive website maken met Website Builder en WordPress. Heb je geen technische kennis en wil je in een paar stappen je site online zetten? Kies dan voor <a href=\"https:\/\/www.hostnet.nl\/website-maken\">Website Builder<\/a>. Je beschikt over kant-en-klare responsive websitetemplates.<\/p>\n\n\n\n<section class=\"product-card product-card-single bg-highlight has-priceballoon gutter-margin-bottom gutter-margin-top gutter-padding no-margin-left no-margin-right\">\n    <div class=\"box box-medium\">\n        <img decoding=\"async\" alt=\"Product\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WEBSITE_BUILDER-package.svg\">        <div class=\"price-balloon sale\">\n                    <span class=\"price-before\">Actie<\/span>\n                    <span class=\"price-no-discount\">\n                        <span class=\"price-crossed\">\n                            <span>10,50<\/span>\n                        <\/span>\n                    <\/span><span class=\"product-price\">\n                    <span class=\"euro\">0<\/span>\n                    <span class=\"comma\">,<\/span>\n                    <span class=\"cent\">&#8211;<\/span>\n                <\/span>\n                <span class=\"period\">p\/m<\/span>\n            <\/div>    <\/div>\n    <div class=\"card-content\">\n        <h3 class=\"title h-size-21\" class=\"title h-size-21\" id=\"website-builder\">Website Builder<\/h3>\n        <div class=\"gutter-padding-bottom\">\n            <p>Je eigen professionele website in slechts 3 stappen. Vandaag nog online.<\/p>\n        <\/div>\n        <div class=\"usps list-style-check text-small\">\n            <ul>\n                <li>7 dagen p\/w support<\/li>\n                        <li>Gebruiksvriendelijke drag-and-drop-sitebuilder<\/li>\n                        <li>Geschikt voor elk apparaat<\/li>\n                        <li>Coderen is niet nodig<\/li>\n                        <li>Aanpasbaar naar smaak en wens<\/li>\n                        <li>Ruime keuze aan kant-en-klare templates<\/li>            <\/ul>\n        <\/div>\n        <div class=\"button-holder gutter-margin-top\">\n            <a class=\"button button-orange button-icon icon-right button-ellipsis\" href=\"https:\/\/www.hostnet.nl\/website-maken#product-table-website-builder\">\n                <i class=\"svg-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                <\/i>\n                <span class=\"btn-text hide-on-mobile\">Naar Website Builder<\/span><span class=\"btn-text hide-on-tablet hide-on-desktop\">Meer informatie<\/span>            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<p>Ben je op zoek naar meer geavanceerde functies? Dan is <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-wordpress\">WordPress<\/a> de juiste keuze. Wanneer je een <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-een-wordpress-thema\">WordPress-thema<\/a> gaat uitzoeken, raden we je aan om de beschrijving goed te lezen. Zo weet je zeker dat je een responsive websitetemplate kiest.<\/p>\n\n\n\n<section class=\"product-card product-card-single bg-highlight bg-highlight-wordpress has-priceballoon gutter-margin-bottom gutter-margin-top gutter-padding no-margin-left no-margin-right\">\n    <div class=\"box box-medium\">\n        <img decoding=\"async\" alt=\"Product\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WHWP-package.svg\">        <div class=\"price-balloon text-first\">\n                    <span class=\"price-before\">v.a.<\/span><span class=\"product-price\">\n                    <span class=\"euro\">2<\/span>\n                    <span class=\"comma\">,<\/span>\n                    <span class=\"cent\">&#8211;<\/span>\n                <\/span>\n                <span class=\"period\">p\/m<\/span>\n            <\/div>    <\/div>\n    <div class=\"card-content\">\n        <h3 class=\"title h-size-21\" class=\"title h-size-21\" id=\"wordpress-website-maken\">WordPress-website maken<\/h3>\n        <div class=\"gutter-padding-bottom\">\n            <p>Breng je idee tot leven. WordPress is de ideale start voor je blog, website of webshop.<\/p>\n        <\/div>\n        <div class=\"usps list-style-check text-small\">\n            <ul>\n                <li>7 dagen p\/w hostingsupport<\/li>\n                         <li>Zakelijke e-mail<\/li>\n                         <li>Gratis https-verbinding<\/li>\n                         <li>Ruime keuze in thema\u2019s en plugins<\/li>\n                         <li>Automatisch ge\u00efnstalleerd<\/li>\n                         <li>Direct aan de slag<\/li>            <\/ul>\n        <\/div>\n        <div class=\"button-holder gutter-margin-top\">\n            <a class=\"button button-white button-alt button-icon icon-right button-ellipsis\" href=\"https:\/\/www.hostnet.nl\/wordpress-website-maken#product-table-wordpress-website-maken\">\n                <i class=\"svg-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                <\/i>\n                <span class=\"btn-text hide-on-mobile\">Naar WordPress-website maken<\/span><span class=\"btn-text hide-on-tablet hide-on-desktop\">Meer informatie<\/span>            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"je-website-responsive-maken-de-technische-manier\">Je website responsive maken, de technische manier<\/h2>\n\n\n\n<p>Heb je technische kennis of wil je proberen om met programmeercode te werken? Dan kun je de onderstaande 4 aanbevelingen gebruiken om een website te optimaliseren voor mobiel.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-gebruik-een-responsive-framework\">1. Gebruik een responsive framework<\/h3>\n\n\n\n<p>Allereerst is het belangrijk om een responsive framework te gebruiken. Met een framework kun je eenvoudig een site responsive maken. Veelgebruikte frameworks zijn <a href=\"https:\/\/getbootstrap.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bootstrap<\/a> en <a href=\"https:\/\/foundation.zurb.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Foundation<\/a>.<\/p>\n\n\n\n<p>Om een framework te gebruiken, dien je de bestanden van Bootstrap of Foundation te downloaden en deze toe te voegen aan de juiste mappen van je website. Dit kun je doen via een FTP-programma als <a href=\"https:\/\/helpdesk.hostnet.nl\/hc\/nl-nl\/articles\/360015079657-Website-uploaden-en-downloaden-via-FileZilla\" target=\"_blank\" rel=\"noreferrer noopener\">FileZilla<\/a>. Vervolgens structureer je het ontwerp van je site via de ingebouwde classes (een verzameling van data en functies). Hiermee maak je onder andere een responsive menu en knoppen. Tot slot pas je het framework aan je eigen stijl door aangepaste css-code of variabelen toe te voegen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-maak-afbeeldingen-en-teksten-responsive\">2. Maak afbeeldingen en teksten responsive<\/h3>\n\n\n\n<p>Om te voorkomen dat afbeeldingen en teksten te groot zijn op mobiele apparaten, dien je deze mee te laten schalen.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"afbeeldingen-responsive-maken\">Afbeeldingen responsive maken<\/h4>\n\n\n\n<p>Met de onderstaande css-code maak je bijvoorbeeld afbeeldingen responsive.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img {\nmax-width: 100%;\n&nbsp;&nbsp; height: auto;\n&nbsp;&nbsp; display: block;\n}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Leestip: op <a href=\"https:\/\/web.dev\/learn\/design\/responsive-images\/\" target=\"_blank\" rel=\"noreferrer noopener\">deze pagina<\/a> van Google Developers vind je meer informatie over hoe je afbeeldingen responsive maakt.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"teksten-responsive-maken\">Teksten responsive maken<\/h4>\n\n\n\n<p>Om teksten te schalen, kun je het best kiezen voor relatieve afmetingen, zoals \u2018em\u2019, \u2018rem\u2019 of \u2018%\u2019. Hieronder vind je een voorbeeld van een code waarmee je teksten responsive maakt:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1 {\n&nbsp; font-size: 2.6rem;\n}\np {\n&nbsp;&nbsp; font-size: 1.6rem;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"3-kies-voor-media-queries\">3. Kies voor media queries<\/h3>\n\n\n\n<p>Wil je ervoor zorgen dat teksten, afbeeldingen en meer er goed uitzien op verschillende schermformaten? Dan kun je het best media queries gebruiken. Media queries zijn css-regels waarmee je de opmaak van een pagina wijzigt op basis van schermgrootte.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"de-viewport-instellen\">De viewport instellen<\/h4>\n\n\n\n<p>Om media queries te gebruiken, dien je eerst de viewport in te stellen. De viewport is het deel van je webbrowser waarin een website wordt weergeven. Is een website groter dan de viewport? Dan moet je naar links of rechts scrollen om een deel van de pagina te bekijken. Dat wil je voorkomen. Plaats daarom de onderstaande code in de html-code van alle pagina\u2019s:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/&gt;<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Leestip: op <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Viewport_meta_tag\" target=\"_blank\" rel=\"noreferrer noopener\">deze pagina<\/a> van Mozilla lees je wat alle elementen in de code betekenen.<\/p>\n<\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"media-queries-instellen\">Media queries instellen<\/h4>\n\n\n\n<p>Nadat je viewport hebt ingesteld, kun je in de css-code van je site de media queries bepalen. Dit doe je via de regel \u2018@media\u2019. In het onderstaande voorbeeld worden er verschillende achtergrondkleuren gebruikt voor diverse schermformaten. Je kunt media queries ook voor bijvoorbeeld afbeeldingen en teksten gebruiken.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Definieer standaard achtergrondkleur *\/\nbody {\n&nbsp;&nbsp;background-color: #f2f2f2;\n}\n\n\/* Media query voor schermformaat van maximaal 768px breed *\/\n@media only screen and (max-width: 768px) {\n&nbsp;&nbsp;body {\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #d3d3d3;\n&nbsp;&nbsp;}\n}\n\n\/* Media query voor schermformaat van maximaal 480px breed *\/\n@media only screen and (max-width: 480px) {\n&nbsp;&nbsp;body {\n&nbsp;&nbsp;&nbsp;&nbsp;background-color: #bfbfbf;\n&nbsp;&nbsp;}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"4-vermijd-vaste-breedtes\">4. Vermijd vaste breedtes<\/h3>\n\n\n\n<p>Tot slot is het belangrijk om geen vaste breedtes te gebruiken. Hierdoor schaalt je website niet goed mee op verschillende schermformaten. Deze vaste breedtes worden vastgesteld via pixels (px). In plaats daarvan kun je beter percentages of \u2018root em\u2019 (rem) gebruiken. Rem past zich aan het schermformaat aan. Een voorbeeld hiervan is:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Stel de lettergrootte in op 1.2 rem *\/\nbody {\n&nbsp;&nbsp; font-size: 1.2rem;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"een-responsive-website-laten-maken\">Een responsive website laten maken<\/h2>\n\n\n\n<p>Zoals je hierboven hebt gelezen, is een website mobielvriendelijk maken from scratch lastig. Je kunt in dit geval kiezen voor een kant-en-klaar <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-design\">webdesign<\/a>. Maar wat als je een website wilt maken die voldoet aan jouw wensen? Kies er in dit geval voor om een responsive website te laten maken door een webdeveloper of -bureau. Een goede developer houdt rekening met verschillende schermformaten, zodat je website er altijd goed uitziet op elk apparaat.<\/p>\n\n\n\n<p>Wil je meer weten over een website laten maken? Lees dan een van de onderstaande artikelen:<\/p>\n\n\n<section class=\"block-related-posts gutter-margin-bottom gutter-margin-top\">\n    <h3 class=\"block-title h-size-21 lineheight-margin-bottom\" class=\"block-title h-size-21 lineheight-margin-bottom\" id=\"leestips\">Leestips<\/h3><div class=\"posts-container\"><a href=\"https:\/\/www.hostnet.nl\/academy\/wordpress-website-laten-maken\" class=\"related-post col-box-basic bg-white block-shadow-elevation-hover\" target=\"_self\" aria-label=\"Lees het artikel: Een WordPress-website laten maken? Deze 32 vragen helpen je op weg!\">\n                <div class=\"thumbnail hide-on-mobile\">\n                    <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2019\/01\/WordPress-website-laten-maken-792x495.png\" alt=\"Een WordPress-website laten maken? Deze 32 vragen helpen je op weg!\">\n                <\/div>\n                <div class=\"content\">\n                    <div class=\"card-text\">\n                        <div class=\"thumbnail hide-on-tablet hide-on-desktop\">\n                            <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2019\/01\/WordPress-website-laten-maken-792x495.png\" alt=\"Een WordPress-website laten maken? Deze 32 vragen helpen je op weg!\">\n                        <\/div>\n                        <h4 class=\"related-post-title h-size-21 no-margin-bottom-mob\" class=\"related-post-title h-size-21 no-margin-bottom-mob\" id=\"een-wordpress-website-laten-maken-deze-32-vragen-helpen-je-op-weg\">Een WordPress-website laten maken? Deze 32 vragen helpen je op weg!<\/h4>\n                        <p class=\"text-small hide-on-mobile\">Een WordPress-website laten maken bespaart je tijd en gedoe. Maar waar moet je op letten? Met deze 32 vragen gaat het je lukken.<\/p>\n                    <\/div>\n                    <div class=\"card-link\">\n                        <span class=\"link-name\">Lees artikel<\/span>\n                        <i class=\"svg-icon icon-small\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                    <\/div>\n                <\/div>\n            <\/a><a href=\"https:\/\/www.hostnet.nl\/academy\/wordpress-webshop-laten-maken\" class=\"related-post col-box-basic bg-white block-shadow-elevation-hover\" target=\"_self\" aria-label=\"Lees het artikel: Een WordPress-webshop laten maken, hoe werkt dat?\">\n                <div class=\"thumbnail hide-on-mobile\">\n                    <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2022\/11\/wordpress-webshop-laten-maken-792x528.jpg\" alt=\"Een WordPress-webshop laten maken, hoe werkt dat?\">\n                <\/div>\n                <div class=\"content\">\n                    <div class=\"card-text\">\n                        <div class=\"thumbnail hide-on-tablet hide-on-desktop\">\n                            <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2022\/11\/wordpress-webshop-laten-maken-792x528.jpg\" alt=\"Een WordPress-webshop laten maken, hoe werkt dat?\">\n                        <\/div>\n                        <h4 class=\"related-post-title h-size-21 no-margin-bottom-mob\" class=\"related-post-title h-size-21 no-margin-bottom-mob\" id=\"een-wordpress-webshop-laten-maken-hoe-werkt-dat\">Een WordPress-webshop laten maken, hoe werkt dat?<\/h4>\n                        <p class=\"text-small hide-on-mobile\">Wil jij een WordPress-webshop laten maken? Maar heb je geen idee waaraan je moet denken? Ontdek handige informatie in dit artikel.<\/p>\n                    <\/div>\n                    <div class=\"card-link\">\n                        <span class=\"link-name\">Lees artikel<\/span>\n                        <i class=\"svg-icon icon-small\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                    <\/div>\n                <\/div>\n            <\/a><a href=\"https:\/\/www.hostnet.nl\/academy\/website-laten-maken\" class=\"related-post col-box-basic bg-white block-shadow-elevation-hover\" target=\"_self\" aria-label=\"Lees het artikel: Een professionele website laten maken? Gebruik deze 35 vragen.\">\n                <div class=\"thumbnail hide-on-mobile\">\n                    <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2022\/05\/website-laten-maken-792x528.jpg\" alt=\"Een professionele website laten maken? Gebruik deze 35 vragen.\">\n                <\/div>\n                <div class=\"content\">\n                    <div class=\"card-text\">\n                        <div class=\"thumbnail hide-on-tablet hide-on-desktop\">\n                            <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2022\/05\/website-laten-maken-792x528.jpg\" alt=\"Een professionele website laten maken? Gebruik deze 35 vragen.\">\n                        <\/div>\n                        <h4 class=\"related-post-title h-size-21 no-margin-bottom-mob\" class=\"related-post-title h-size-21 no-margin-bottom-mob\" id=\"een-professionele-website-laten-maken-gebruik-deze-35-vragen\">Een professionele website laten maken? Gebruik deze 35 vragen.<\/h4>\n                        <p class=\"text-small hide-on-mobile\">Jij bent van plan om een professionele website te laten maken. Maar waar moet je op letten? Je vindt alle informatie in dit artikel.<\/p>\n                    <\/div>\n                    <div class=\"card-link\">\n                        <span class=\"link-name\">Lees artikel<\/span>\n                        <i class=\"svg-icon icon-small\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                    <\/div>\n                <\/div>\n            <\/a><\/div><\/section>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"conclusie\">Conclusie<\/h2>\n\n\n\n<p>Een responsive website is voor ondernemers onmisbaar in de huidige digitale wereld. Bezoekers verwachten eenmaal dat websites optimaal werken op elk apparaat. Doet de site dit niet? Dan haken ze af en loop je conversie mis. Met een cms als Website Builder en WordPress is het eenvoudig om een responsive website te maken. Heb je technische kennis? Dan kun je zelf aan de slag met html- en css-code. Veel succes met het responsive maken van je website!<\/p>\n\n\n\n<p><strong>Heb jij nog goede tips om een responsive website te maken? Laat dan een reactie achter!<\/strong><\/p>\n\n\n\n<section class=\"product-card product-card-single bg-highlight has-priceballoon gutter-margin-bottom gutter-margin-top gutter-padding no-margin-left no-margin-right\">\n    <div class=\"box box-medium\">\n        <img decoding=\"async\" alt=\"Product\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WH-package.svg\">        <div class=\"price-balloon text-first\">\n                    <span class=\"price-before\">v.a.<\/span><span class=\"product-price\">\n                    <span class=\"euro\">2<\/span>\n                    <span class=\"comma\">,<\/span>\n                    <span class=\"cent\">&#8211;<\/span>\n                <\/span>\n                <span class=\"period\">p\/m<\/span>\n            <\/div>    <\/div>\n    <div class=\"card-content\">\n        <h3 class=\"title h-size-21\" class=\"title h-size-21\" id=\"webhosting\">Webhosting<\/h3>\n        <div class=\"gutter-padding-bottom\">\n            <p>Ontwikkel razendsnel websites op betrouwbare en snelle webhosting. Inclusief uitgebreide features.<\/p>\n        <\/div>\n        <div class=\"usps list-style-check text-small\">\n            <ul>\n                <li>7 dagen p\/w hostingsupport<\/li>\n                        <li>Installeer in 1 klik WordPress<\/li>\n                        <li>Gratis Wildcard SSL<\/li>\n                        <li>Zakelijke e-mail<\/li>\n                        <li>Stabiel en razendsnel platform<\/li>\n                        <li>Direct opgeleverd<\/li>            <\/ul>\n        <\/div>\n        <div class=\"button-holder gutter-margin-top\">\n            <a class=\"button button-orange button-icon icon-right button-ellipsis\" href=\"https:\/\/www.hostnet.nl\/webhosting#product-table-webhosting\">\n                <i class=\"svg-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                <\/i>\n                <span class=\"btn-text\">Naar webhosting<\/span>            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Als ondernemer is het belangrijk om een website te maken. Maar als je site niet responsive is, bestaat de kans&hellip; <a class=\"more-link\" href=\"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken\">Lees verder <span class=\"screen-reader-text\">Je website responsive maken, m\u00e9t of zonder technische kennis<\/span><\/a><\/p>\n","protected":false},"author":122,"featured_media":16572,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[34],"class_list":["post-16570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-design","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wat is een responsive website? En hoe maak je er een? | Hostnet<\/title>\n<meta name=\"description\" content=\"Wil jij een responsive website maken, maar weet je niet hoe? In dit artikel lees je hoe je dit doet, met of zonder technische kennis.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat is een responsive website? En hoe maak je er een? | Hostnet\" \/>\n<meta property=\"og:description\" content=\"Wil jij een responsive website maken, maar weet je niet hoe? In dit artikel lees je hoe je dit doet, met of zonder technische kennis.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken\" \/>\n<meta property=\"og:site_name\" content=\"Hostnet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Hostnetbv\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-22T15:17:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T08:29:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"761\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lysanne Hopman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hostnet\" \/>\n<meta name=\"twitter:site\" content=\"@hostnet\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lysanne Hopman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wat is een responsive website? En hoe maak je er een? | Hostnet","description":"Wil jij een responsive website maken, maar weet je niet hoe? In dit artikel lees je hoe je dit doet, met of zonder technische kennis.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken","og_locale":"nl_NL","og_type":"article","og_title":"Wat is een responsive website? En hoe maak je er een? | Hostnet","og_description":"Wil jij een responsive website maken, maar weet je niet hoe? In dit artikel lees je hoe je dit doet, met of zonder technische kennis.","og_url":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken","og_site_name":"Hostnet","article_publisher":"https:\/\/www.facebook.com\/Hostnetbv\/","article_published_time":"2023-03-22T15:17:21+00:00","article_modified_time":"2023-06-29T08:29:08+00:00","og_image":[{"width":1280,"height":761,"url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg","type":"image\/jpeg"}],"author":"Lysanne Hopman","twitter_card":"summary_large_image","twitter_creator":"@hostnet","twitter_site":"@hostnet","twitter_misc":{"Geschreven door":"Lysanne Hopman","Geschatte leestijd":"8 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#article","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken"},"author":{"name":"Lysanne Hopman","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/7648cc9888b518c8f552ef2cd4e8e730"},"headline":"Je website responsive maken, m\u00e9t of zonder technische kennis","datePublished":"2023-03-22T15:17:21+00:00","dateModified":"2023-06-29T08:29:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken"},"wordCount":1525,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg","keywords":["Design"],"articleSection":["Website"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken","url":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken","name":"Wat is een responsive website? En hoe maak je er een? | Hostnet","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#primaryimage"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg","datePublished":"2023-03-22T15:17:21+00:00","dateModified":"2023-06-29T08:29:08+00:00","description":"Wil jij een responsive website maken, maar weet je niet hoe? In dit artikel lees je hoe je dit doet, met of zonder technische kennis.","breadcrumb":{"@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnet.nl\/academy\/responsive-website-maken"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#primaryimage","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2023\/03\/responsive-website-maken.jpg","width":1280,"height":761,"caption":"responsive website maken"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnet.nl\/academy\/responsive-website-maken#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnet.nl\/academy\/"},{"@type":"ListItem","position":2,"name":"Je website responsive maken, m\u00e9t of zonder technische kennis"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnet.nl\/academy\/#website","url":"https:\/\/www.hostnet.nl\/academy\/","name":"Hostnet","description":"Haal meer uit je online succes met handige tips en tricks","publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnet.nl\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.hostnet.nl\/academy\/#organization","name":"Hostnet","url":"https:\/\/www.hostnet.nl\/academy\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","width":581,"height":99,"caption":"Hostnet"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Hostnetbv\/","https:\/\/x.com\/hostnet","https:\/\/www.instagram.com\/hostnetbv\/","https:\/\/nl.linkedin.com\/company\/hostnet-bv","https:\/\/nl.pinterest.com\/hostnet\/","https:\/\/www.youtube.com\/channel\/UCiMHZBSkh8FKopNquGmzgyQ"]},{"@type":"Person","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/7648cc9888b518c8f552ef2cd4e8e730","name":"Lysanne Hopman","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec4049cff2def2f9cc9f0dffaa43086d15768c453550ce7623a2f549d04860b4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec4049cff2def2f9cc9f0dffaa43086d15768c453550ce7623a2f549d04860b4?s=96&d=mm&r=g","caption":"Lysanne Hopman"},"description":"Lysanne Hopman werkte tot voor kort als SEO Content Specialist bij Hostnet. Haar passie voor schrijven en SEO komt tot leven in zowel haar werk als op haar lifestyleblog.","sameAs":["https:\/\/www.linkedin.com\/in\/lysannehopman\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/16570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/users\/122"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/comments?post=16570"}],"version-history":[{"count":7,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/16570\/revisions"}],"predecessor-version":[{"id":17081,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/16570\/revisions\/17081"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media\/16572"}],"wp:attachment":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media?parent=16570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/categories?post=16570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/tags?post=16570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}