Blog design voor mobiel: doe eens iets unieks met je blog
Pak je telefoon en open de blog van een willekeurig bedrijf. Grote kans dat je dit ziet: een logo, een hamburgermenu, een uitgelichte foto die te klein is om indruk te maken, en daaronder een lange kolom tekst. Het werkt. Maar het voelt als een desktoppagina die in een smal vak is geperst.
Dat is gek, want juist op mobiel zitten je lezers. Bij de meeste sites komt inmiddels het grootste deel van het blogverkeer binnen via een telefoon, vaak zestig procent of meer. En toch ontwerpen we blogs nog steeds eerst voor een groot scherm, om ze daarna responsive te laten inklappen.
In dit artikel laat ik zien dat het anders kan. Geen screenshots, maar twee werkende telefoons in je browser: een blog die voelt als een app, en een blog die leest als een magazine. Tik, swipe en scroll gerust. Daarna loop ik door de ontwerpkeuzes, en vooral: hoe je dit doet zonder je vindbaarheid op te offeren.
Waarom de meeste blogs op mobiel op elkaar lijken
De oorzaak is niet luiheid, maar de manier waarop blogs gebouwd worden. Bijna elk CMS en elk thema gaat uit van hetzelfde sjabloon: een overzichtspagina met kaarten in een raster, en een artikelpagina met een kop, een foto en tekst. Op desktop staan die kaarten naast elkaar, op mobiel onder elkaar. Klaar.
Dat heet mobielvriendelijk, en dat is het ook. De tekst is leesbaar, de knoppen zijn groot genoeg en Google is tevreden. Maar mobielvriendelijk is iets anders dan mobiel ontworpen. Het eerste zorgt dat niets kapotgaat. Het tweede zorgt dat iemand blijft lezen, terugkomt en onthoudt van wie dat verhaal was.
| Mobielvriendelijk | Mobiel ontworpen | |
|---|---|---|
| Uitgangspunt | Desktop-lay-out die inklapt | Ontworpen voor de duim en een smal scherm |
| Overzicht | Kaarten onder elkaar in één lange lijst | Filters, masonry, swipebare covers |
| Navigatie | Hamburgermenu bovenin | Belangrijke acties onderin, binnen bereik van je duim |
| Artikel | Kop, foto, tekst | Beeld dat meebeweegt, leesvoortgang, hoofdstukken |
| Sfeer | Hetzelfde als elk ander thema | Herkenbaar als jouw merk |
| Vindbaarheid | Goed | Net zo goed, mits goed gebouwd |
Voorbeeld 1: een blog die voelt als een app
Het eerste voorbeeld is gebaseerd op een populair concept voor een mobiele nieuws-app, dat we hebben nagebouwd en een Afternoon-saus hebben gegeven: ons limoengroen als accent, onze typografie en een paar extra functies. Het is geen plaatje. Alles hieronder werkt echt.
Een blog die voelt als een app
- Filter met je duim op categorie, de kaarten schuiven mee.
- Wissel tussen licht en donker, rechtsboven.
- Open een verhaal: hoofdstukken staan verticaal in de kantlijn.
- Bewaar met het hartje en vind het terug onder Bewaard.
De Bubbelnevel: een zeepbel van zeven lichtjaar
24 sep 2026 · 5 min lezenHoog in het sterrenbeeld Cassiopeia hangt een bel die zo rond is dat hij bijna nep lijkt. Astronomen noemen hem NGC 7635, de rest van de wereld de Bubbelnevel. De bel is ongeveer zeven lichtjaar breed, en hij groeit nog steeds.
Zo zit het
In het hart van de bel brandt een ster die tientallen keren zwaarder is dan de zon. Die ster blaast een harde wind van geladen deeltjes de ruimte in. Waar die wind op het koudere gas eromheen botst, ontstaat de dunne, gloeiende rand die je op de foto ziet.
De ster staat niet in het midden van de bel, maar een stuk ernaast. Aan de ene kant is het gas dichter dan aan de andere, en daar komt de wind minder ver.
Waarom het telt
Zware sterren leven kort en heftig. Door bellen als deze te bestuderen, zien astronomen hoe zo'n ster zijn omgeving vormgeeft, lang voordat hij als supernova eindigt. Deze foto is een momentopname van iets dat miljoenen jaren duurt.
Filteren met je duim
Categorieën staan niet in een menu verstopt, maar als horizontale chips bovenaan. Eén tik en het overzicht past zich aan, met een korte animatie zodat je ziet wat er verandert. Dat klinkt klein, maar het is het verschil tussen zoeken en ontdekken.
Een overzicht met ritme
De kaarten staan in een masonry-lay-out: twee kolommen met foto's van verschillende hoogte, de rechterkolom iets verschoven. Daardoor scant je oog in een zigzag in plaats van een rechte lijn naar beneden. Het voelt rijker, terwijl er precies evenveel informatie staat.
Licht of donker, de lezer kiest
Veel mensen lezen 's avonds, op de bank of in bed. Een blog met dark mode is dan geen gimmick maar een service. In de demo zit de schakelaar rechtsboven én onderin de navigatie, en de keuze geldt overal: in het overzicht, in het artikel en in het menu.
Hoofdstukken in de kantlijn
Open je een verhaal, dan staan de hoofdstukken verticaal in de linkermarge. Ze lopen mee als je scrolt en lichten op bij het stuk dat je aan het lezen bent. Tik je erop, dan spring je erheen. Bovenin loopt een dunne groene balk mee die laat zien hoe ver je bent. Samen geven ze houvast in een lange tekst, zonder ruimte in te nemen.
Bewaren en terugkomen
Met het hartje bewaar je een verhaal voor later, en onder Bewaard vind je het terug. De groene knop in het midden opent een nieuwsbriefaanmelding als sheet van onderaf, precies waar je duim al is. Zo wordt je blog meer dan een archief: het wordt een plek waar lezers iets doen.
Voorbeeld 2: een blog als magazine
Het tweede voorbeeld gaat de andere kant op. Geen app, maar print. Denk aan een modetijdschrift: grote foto's, veel wit, een klassieke schreefletter en tekst die zich niet opdringt. Ook dit concept hebben we nagebouwd en eigen gemaakt, met onder andere een voortgangsbalk voor de covers en groene accenten die je als markeerstift terugziet.
Oker
Kleur van het seizoen27 september 2026Magazine
Oker
Kleur van het seizoenEr zijn kleuren die schreeuwen en kleuren die blijven hangen. Oker hoort bij de tweede soort. Het is de kleur van aarde, van nazomer en van oude muren in Zuid-Europa, en dit seizoen duikt hij overal op.
Oker maakt rood rustiger en huid warmer.
Het werkt vooral in combinatie. Tegen een okergele achtergrond wordt rood minder fel en krijgt huid een gloed die je met geen filter namaakt. Fotografen weten dat al lang: een warme wand doet meer dan een dure lamp.
Wil je het zelf proberen? Begin klein. Een sjaal, een tas of een muur in je werkkamer. Oker vraagt geen aandacht, het geeft aandacht.
Een blog als magazine
- Swipe door de covers, of tik op het nummer linksonder.
- Lees een verhaal: de foto schuift mee, de tekst ligt erop als een pagina.
- Blader via het menu door de index, als een inhoudsopgave.
Covers in plaats van kaarten
De startpagina toont niet tien artikelen tegelijk, maar één. Schermvullend, met een titel die er staat als op de voorkant van een tijdschrift. Swipe naar links en het volgende verhaal schuift in beeld, met een langzame zoom die de foto tot leven brengt. Het nummer linksonder vertelt waar je bent.
Typografie als beeld
Een modern blog design gebruikt meestal één schreefloze letter voor alles. Hier niet. De koppen staan in een Bodoni, een letter uit de achttiende eeuw met scherpe contrasten, in kapitalen met veel letterafstand. De lopende tekst is juist klein en rustig. Dat contrast doet hetzelfde als in print: de kop trekt je erin, de tekst laat je lezen.
Een pagina die over de foto schuift
In het artikel begint de foto bovenaan, en schuift het witte tekstvlak eroverheen als je scrolt. Het vlak begint niet tegen de rand, maar iets naar binnen, zoals een bladzijde die op tafel ligt. De foto beweegt langzamer mee dan de tekst. Het is subtiel, maar je voelt dat hier over is nagedacht.
7 principes voor een mobiel blog design dat opvalt
De twee voorbeelden zien er totaal anders uit, maar ze delen dezelfde basis. Dit zijn de principes die je in elk mobiel blogontwerp kunt toepassen, welke stijl je ook kiest:
- Ontwerp eerst voor de telefoon. Begin met het kleinste scherm en voeg voor desktop toe, in plaats van andersom weg te halen.
- Zet acties binnen bereik van de duim. Belangrijke knoppen horen onderin, niet in de hoek linksboven waar niemand bij kan.
- Geef beeld de ruimte. Op mobiel is een foto die het hele scherm vult sterker dan drie kleine naast elkaar.
- Maak lange teksten overzichtelijk. Hoofdstukken, leesvoortgang en tussenkoppen helpen de lezer om te blijven.
- Laat beweging iets betekenen. Een animatie moet laten zien wat er verandert, niet alleen versieren.
- Kies typografie met karakter. Een eigen lettercombinatie maakt je blog direct herkenbaar.
- Houd het snel. Elk effect moet licht genoeg zijn om ook op een oudere telefoon en een trage verbinding soepel te lopen.
Mobielvriendelijk zorgt dat niets kapotgaat. Mobiel ontworpen zorgt dat iemand blijft lezen.
Blijft zo'n blog wel vindbaar in Google?
Dit is de vraag die ik het vaakst krijg, en terecht. Een blog bestaat voor een groot deel om gevonden te worden. Als een mooi ontwerp ten koste gaat van je posities in Google, heb je er weinig aan.
Het goede nieuws: het een sluit het ander niet uit. Het hangt af van hoe je het bouwt. De interactie, dus de filters, de animaties en de dark mode, is een laag bovenop gewone, goed opgebouwde pagina's. Onder de motorkap blijft elk artikel een echte pagina met een eigen adres, echte tekst, koppen in de juiste volgorde en beschrijvende alt-teksten bij de foto's.
- Artikelen worden op de server opgebouwd, dus Google ziet de volledige tekst direct, zonder te wachten op JavaScript.
- Foto's worden automatisch verkleind en in moderne formaten geladen, alleen als ze in beeld komen.
- Animaties gebruiken technieken die de browser zelf versnelt, zodat de pagina niet hapert.
- Structured data vertelt zoekmachines wie de auteur is, wanneer het is gepubliceerd en welke vragen je beantwoordt.
Deze blog, die je nu leest, is op precies die manier gebouwd in Next.js. De twee telefoons hierboven draaien gewoon mee in de pagina, zonder dat het artikel er trager van wordt. Wil je weten hoe dat werkt voor een hele website, lees dan meer over websites met AI.
Welke stijl past bij jouw merk?
Niet elk blog moet een app of een magazine worden. De vorm hangt af van wat je publiceert en hoe je lezers het gebruiken. Een paar vuistregels:
| App-stijl | Magazine-stijl | |
|---|---|---|
| Past bij | Veel artikelen, meerdere onderwerpen, terugkerende lezers | Minder artikelen, sterke beelden, een uitgesproken merk |
| Voorbeelden | Kennisbank, nieuwsplatform, SaaS-blog, recepten | Mode, interieur, reizen, horeca, cases van een studio |
| Kracht | Snel vinden, bewaren, terugkomen | Indruk maken, sfeer overbrengen, uitnodigen tot lezen |
| Let op | Houd het rustig, anders wordt het druk | Zorg voor sterke fotografie, anders valt het concept om |
Van idee naar een blog die van jou is
Een eigen blogomgeving klinkt als een groot project, maar dat valt mee. Omdat design en development bij mij in één hand liggen en AI het bouwen versnelt, gaat het van schets naar werkend prototype in dagen in plaats van weken. Je ziet dus vroeg of het concept werkt, op je eigen telefoon.
- RichtingDag 1
Wat publiceer je, voor wie, en welke stijl past daarbij?
- PrototypeWeek 1
Een werkende mobiele versie met je eigen content en huisstijl
- BouwWeek 2-3
Overzicht, artikelpagina, SEO-basis en koppeling met je CMS
- LiveWeek 3-4
Getest op echte telefoons, gemeten in GA4, klaar om te schrijven
Je hoeft je bestaande artikelen niet weg te gooien. Die verhuizen mee naar het nieuwe ontwerp, met dezelfde adressen, zodat je opgebouwde posities in Google behouden blijven. Hoe zo'n traject verder loopt, lees je op de pagina over design & development.
Veelgestelde vragen over blog design op mobiel
Een mobielvriendelijke blog is een desktopontwerp dat netjes inklapt op een klein scherm. Een mobiel ontworpen blog is vanaf het begin bedacht voor de telefoon: met navigatie binnen bereik van je duim, filters, grote beelden en details als leesvoortgang en dark mode.
Niet als hij goed gebouwd is. De interactie is een laag bovenop gewone pagina's. Elk artikel heeft een eigen adres en wordt op de server opgebouwd, zodat Google de volledige tekst ziet. Snelheid en een goede opbouw van koppen blijven belangrijker dan het ontwerp.
Ja. Je kunt WordPress houden om in te schrijven en de voorkant opnieuw laten bouwen, of je artikelen verhuizen naar een nieuw systeem. In beide gevallen blijven de adressen van je artikelen gelijk, zodat je posities in Google niet verloren gaan.
Een werkend mobiel prototype staat meestal binnen een week. Een complete blogomgeving met overzicht, artikelpagina, SEO en CMS-koppeling is doorgaans binnen drie tot vier weken live.
Voor een magazine-stijl wel, want daar draait alles om beeld. Voor een app-stijl kun je prima starten met goede stockfoto's, zoals in de demo hierboven, die volledig met gratis beeld van Unsplash is gemaakt.
Conclusie
Je blog is vaak de eerste plek waar iemand je leert kennen, en meestal gebeurt dat op een telefoon. Een standaard thema zorgt dat je artikel leesbaar is. Een mobiel blog design dat bij je merk past, zorgt dat het blijft hangen.
Of dat nu een app-achtige omgeving wordt, een magazine of iets ertussenin: het begint met de vraag wat je lezer op dat kleine scherm nodig heeft. Wil je sparren over wat dat voor jouw blog betekent? Plan een vrijblijvend gesprek, dan laat ik je zien wat er kan.
