Horizontale menubalk boven je nieuwsbrieven

Horizontale menubalk in Mailchimp

Soms hoor ik dat je een horizontale menubalk of tabel in Mailchimp wilt.

Mailchimp heeft geen blok voor een horizontale menubalk of voor een tabel, dus als je dit toch wilt dan moet je de HTML zelf maken en in een code blok zetten. Om de beschikking te hebben over een code blok heb je in Mailchimp de versies Standard of Premium nodig.

Een horizontale menubalk heeft de structuur van een tabel. Dus dit verhaal geldt ook voor een tabel.


Horizontale menubalk boven je nieuwsbrief

Een code maken voor een horizontale menubalk is niet zo heel erg moeilijk. Maar het probleem bij een nieuwsbrief is dat een nieuwsbrief responsive is. En daar beginnen de problemen. Ik heb een paar testjes gedaan zodat je het zelf even kunt zien.


Laptop

Je ziet hier een paar mini-nieuwsbrieven met een horizontale menubalk er boven. Hier zie je hoe deze nieuwsbrieven er op een laptop uitzien.

horizontale menubalk voorbeeld laptop

Als je het zo ziet, dan zou je denken dat dit best een leuk idee kan zijn. Maar je moet zoiets altijd heel goed testen, dus we gaan nog wat verder.


Horizontale menubalk mobiel testen

Op de website mobiletest.me kun je testen hoe je nieuwsbrief eruitziet op verschillende devices. Klik dan eerst in je nieuwsbrief de preview aan, klik daarna op “view this in your browser” en kopieer de URL die dan in je werkbalk staat.

In mobiletest.me klik je een apparaat aan en je plak de URL in het daarvoor bestemde veld.

Apple iPhone 5
Apple iPhone 5

Apple iPhone 5

Hier zie je een nieuwsbrief met een horizontale menubalk op een Apple iPhone 5.

Kijk goed naar de menubalk, hij reageert responsive, maar door gebrek aan ruimte moet hij het menu over 2 regels plaatsen.

Dat is al minder mooi, maar de afbeelding blijft nog wel zonder links-rechts scrollen in z’n geheel zichtbaar.

Horizontale menubalk

Dat is allemaal leuk en aardig, maar je wilt in je menubalk niet iets neerzetten als “Item 1” en “Item 2”. Je wilt er aanklikbare woorden in zetten. Dus dat ga ik nu testen.

Apple iPhone 5

Apple iPhone 5

En dan zie je dat het mis gaat.

De menubalk is wel responsive, maar de woorden zijn te lang en ze worden niet afgebroken en over 2 menu regels verspreid.

Dit wil je niet natuurlijk, want de klant moet je nieuwsbrief nu lezen door op iedere regel van links naar rechts te scrollen.

De klant wil dat zelf ook niet, dus hij of zij zal de telefoon draaien.

Dit moet dus ook getest worden.

Apple iPhone 5 landscape met horizontale menubalk
Apple iPhone 5

Zoals je ziet is dit ook niet helemaal wat je wilt.

Kleinste telefoon

En bedenk nu ook nog dat een Apple iPhone 5 niet de kleinste telefoon is. Het kan dus nog veel erger.

samsung galaxy y
Samsung Galaxy Y

Samsung Galaxy Y

Hiernaast zie wat er gebeurt als je lezer een Samsung Galaxy Y gebruikt.

Dat is gewoon een onleesbare nieuwsbrief waar niemand vrijwillig aan gaat beginnen.

Je moet daarom verwachten dat deze nieuwsbrief direct weer gesloten wordt.

Samsung Galaxy Y

Kan een horizontale menubalk?

Ik heb in deze voorbeelden het menu neergezet als een H3 kopje met een 20 px letter. Daar kun je natuurlijk aan sleutelen. Dat heb ik dus ook even gedaan.

16 px magere letter

Om een lang verhaal kort te maken, ik heb nu alleen getest voor een Samsung Galaxy Y want dat is de kleinste telefoon die ik hier kan testen. En als het op deze telefoon goed gaat, dan gaat het ook goed in de grotere telefoons.

Lees ook:  MailChimp account gehackt

Ik heb deze test gedaan met een 16 px magere letter. En zie hieronder het resultaat.

samsung galaxy y kleine letter
Samsung Galaxy Y

Dit is dus ook niet wat je wilt. En een nog kleinere letter dan een 16 px letter is gewoon te klein. Je kunt dit dus niet op een klantvriendelijke manier doen als je 4 menu items wilt. En voor een menu zijn 4 items niet veel.


Langste woord uit het menu gehaald

Nu heb ik het langste woord uit het menu gehaald en een magere 16 px letter gebruikt. En ook dat blijkt niet genoeg te helpen. Evengoed valt het menu item dat het meest links staat weg.

samsung galaxy y met horizontaal menu 16 px magere letter
Samsung Galaxy Y

Horizontale menubalk in Mailchimp

Aan dit experiment kun je zien hoe belangrijk het is dat je een nieuwsbrief door en door test. Zeker als je er iets in zet dat er niet standaard is.

Want besef altijd je doel voor je iets doet. Met een nieuwsbrief heb je ook een doel. Je wilt een relatie opbouwen met je lezers en je wilt conversie. Maar dat gaat niet lukken als je een klantonvriendelijke onleesbare nieuwsbrief rond stuurt.

Besef dat je niet weet op welk apparaat je lezer de nieuwsbrief gaat lezen. Daarom moet je nieuwsbrief goed leesbaar zijn op ieder device.


Horizontale menubalk in je nieuwsbrief

Als je nou toch absoluut een horizontale menubalk in je nieuwsbrief wilt, ga dan even terug naar het eerste voorbeeld met Item 1 , 2 etc. Het kenmerk hiervan is dat de menu items uit 2 woorden bestaan, waardoor ze over 2 regels geplaatst kunnen worden. Neem kleine, magere letter en test je nieuwsbrief door en door, vooral op kleine telefoons.


Kan er een tabel in je nieuwsbrief

Zoals ik bovenaan al zei: een horizontale menubalk heeft de structuur van een tabel. Voor een tabel geldt dit alles dus ook. Of een tabel kan hangt er dus vanaf wat je in die tabel zet:

  • Hoe groot moet je letter zijn?
  • Hoeveel kolommen wil je in je tabel?

En test je nieuwsbrief heel erg goed als je er een tabel in zet. Denk er ook aan je nieuwsbrief opnieuw te testen als je iets aan de tabel verandert. Want niet alleen het aantal kolommen is van belang, maar ook de lengte van de woorden die je in de kolommen zet.


Een nieuwsbrief is geen website

Besef ook dat een nieuwsbrief geen website is. Als je in een website gaat knutselen met eigen HTML en je doet het fout, dan zie je later in Google Search Console terug dat er fouten in je website zitten. Maar verder gebeurt er niet zo veel.

Maar je HTML fouten in je nieuwsbrief hebt, dan reageren de spamfilters daar op. Wees daarom heel voorzichtig voordat je een nieuwsbrief met zelf gecodeerde HTML gaat versturen.

Meer over een korte cursus Mailchimp

Mailchimp cursus

Horizontale menubalk in Mailchimp was last modified: by

Met dank aan Canva, Fotoaanpassen.nl en Mobiletest.me voor het beeldmateriaal op deze pagina.

Horizontale menubalk in Mailchimp was last modified: by

Over Judith de Vries

Ik kan je helpen meer klanten te krijgen. Ik ben facilitator voor de marketingmethode Get Clients Now!™ en door Hubspot gecertificeerd voor inbound marketing. Ik kan je helpen met klanten krijgen via de organische zoekresultaten, door Yoast gecertificeerd. En ik kan je helpen met e-mailmarketing. Erkend als expert door MailChimp en MailerLite.