Zo maakt u HTML-nieuwsbrieven met Photoshop, InDesign en Illustrator
Tips voor het ontwerpen en verzenden van HTML-nieuwsbrieven
Nieuwsbrieven kunnen met behulp van veel verschillende programma’s worden ontworpen en vervolgens worden omgezet naar HTML. Voor het ontwerp is in principe elk bewerkprogramma voor afbeeldingen en iedere lay-out tool geschikt. In dit artikel laten we u zien wat u moet overwegen bij het ontwerpen van uw nieuwsbrief, zodat deze zich eenvoudig en correct naar HTML laat vertalen. Daarnaast presenteren we ook tips voor het ontwerpen van HTML-nieuwsbrieven met de meest gangbare tools.
Echter, willen we u wel direct vooraf waarschuwen, vaak is het ontwerpen van een nieuwsbrief met een grafisch hulpmiddel, die u daarna zelf programmeert, zeer tijdrovend en onnodig. Daarom toont dit artikel ook een alternatieve methode voor het nieuwsbrief ontwerpproces, waarvoor u geen HTML-kennis nodig heeft. Met de e-mailmarketing van Newsletter2Go ontwerpt u namelijk eenvoudig met een drag & drop editor een professionele nieuwsbrief. Bij verzending wordt de nieuwsbrief automatisch omgezet naar HTML en voorzien van een responsive template. Hiervoor hoeft u geen design expert of programmeur te zijn. Meer over het maken van HTML-nieuwsbrieven kunt u op deze pagina vinden.
Algemene tips voor het ontwerpen van HTML-nieuwsbrieven
Elke nieuwsbrief dient over een vaste breedte te beschikken, zodat horizontaal scrollen geëlimineerd wordt. Dit verstoort namelijk de flow tijdens het lezen. Wij raden een breedte van ongeveer 600 pixels aan. Deze breedte is geschikt voor de meeste apparaten.
De belangrijkste informatie moet in de eerste 300 pixels tot 500 pixels worden overgebracht. Dit gebied is op de meeste schermen “boven de vouw” en hierdoor zichtbaar zonder te hoeven scrollen.
HTML-nieuwsbrieven met Photoshop maken
Om een HTML-nieuwsbrief in Photoshop te creëren, moet u eerst een nieuw document maken met een iets groter formaat dan de breedte van de uiteindelijke nieuwsbrief. Op deze manier kunt u beter rekening houden met de achtergrond van de nieuwsbrief. Kies bijvoorbeeld voor een breedte van ongeveer 800 pixels. De lengte kan vrij worden gekozen, maar om te beginnen raden we ongeveer 1000 pixels aan. Een resolutie van 72 dpi is voldoende voor de nieuwsbrief. Als modus moet altijd de RGB-modus worden gekozen.
In dit document maakt u daarna een box met een breedte van 600 pixels breed, welke u in het midden centreert. Dit is uw daadwerkelijke nieuwsbrief template. Voor een optimale leesbaarheid kunt u het beste voor een witte achtergrond van het nieuwsbriefgedeelte kiezen. De achtergrond kunt u het beste vullen met lichtgrijs.
Van boven naar beneden, kunt u nu het beste zo uw nieuwsbrief opbouwen:
Helemaal bovenaan bevindt zich de inhoud preview en de link naar de webversie. Dit moet in elke nieuwsbrief worden opgenomen, voor het geval dat de gebruiker geen afbeeldingen wilt downloaden of liever de nieuwsbrief in de browser bekijkt.
Hieronder kunt u een teaserafbeelding invoegen. Pas de afbeelding in Photoshop direct op het formaat van uw nieuwsbrief aan, om de afbeeldingsgrootte minimaal te houden. De tekst op de afbeelding kunt u tevens in Photoshop invoegen.
Om het hoofddeel te maken, voegt u onder de header een nieuwe rechthoek van 600 pixels breed toe. Hier kunt u naar wens tekst en afbeeldingen invoegen. Om extra inhoud toe te voegen, kopieert u het eerste inhoudsblok en plakt u deze eronder. Met behulp van hulplijnen voor de afzonderlijke boxen kunt u de elementen correct uitlijnen en de afstanden controleren. Zorg voor voldoende afstand om een betere leesbaarheid te garanderen.
Onder het hoofddeel, waarin nu alle informatie is toegevoegd, kunt u, indien gewenst, social media buttons toevoegen.
Aan het einde van elke nieuwsbrief bevindt zich een footer, ook wel de voettekst. Elke nieuwsbrief moet verplicht een afmeldlink voor ontvangers bevatten. Deze kunt u prima in de footer toevoegen. Let er echter wel op dat u de tekst eenvoudig leesbaar en gemakkelijk klikbaar maakt.
HTML-nieuwsbrieven met InDesign maken
Wanneer u een HTML-nieuwsbrief met InDesign wilt maken, moet u eerst een nieuw document met een breedte van 600 pixels creëren. De nieuwsbrief lengte kunt u zelf kiezen. Sla de nieuwsbrief op in het eigen formaat en open direct.
U kunt nu de rechthoek tool gebruiken om drie rechtstreeks aaneengesloten rechthoeken, die de gehele breedte van de pagina in beslag nemen, onder elkaar te plaatsen. Dit zijn de header, het hoofdgedeelte en de footer van uw nieuwsbrief.
In de header kunt u een afbeelding toevoegen. Let op dat bij het nieuwsbriefontwerp met InDesign alle gebruikte afbeeldingen online moeten worden gehost, zodat ze zichtbaar zijn voor de lezer.
In het hoofddeel is het belangrijk om gebruik te maken van een witte achtergrond, voor een betere leesbaarheid. Dit deel kunt u naar wens indelen met tekst en afbeeldingen. Zorg ervoor dat u een afstand vanaf de zijkant instelt, zodat de tekst zich niet direct aan de rand begeeft.
In de nieuwsbrief footer plaatst u de impressum en een afmeldlink. Een correct werkende afmeldlink in elke nieuwsbrief is in Nederland verplicht.
Wanneer u de volledige HTML-nieuwsbrief met InDesign in elkaar heeft gezet, heeft u de mogelijkheid om de nieuwsbrief direct vanuit InDesign als HTML te exporteren. Echter, wordt dit niet aangeraden. De door InDesign gegenereerde HTML is namelijk niet geoptimaliseerd. De presentatie zal daarom waarschijnlijk niet aan uw verwachtingen voldoen. We raden daarom aan om de nieuwsbrief zelf te programmeren in geldig HTML.
HTML-nieuwsbrieven met Illustrator maken
Ook het tekenprogramma Illustrator is in principe geschikt voor webdesign en nieuwsbriefcreatie. U kunt hiermee weliswaar lastig een gehele nieuwsbrief lay-out maken, maar het programma is zeer geschikt voor het ontwerp van nieuwsbrief elementen, die later in de HTML-nieuwsbrief kunnen worden gebruikt. Zo kunt u bijvoorbeeld de achtergronden voor de nieuwsbrief met Illustrator maken.
Voor de daadwerkelijke samenstelling van de complete nieuwsbrief kunt beter een ander programma gebruiken, hiervoor is Illustrator niet geschikt.
Manieren om uw HTML-nieuwsbrief te programmeren
Een HTML-nieuwsbrief programmeren is fundamenteel verschillend dan het ontwerpen van een website. In tegenstelling tot webdesign met HTML, zijn de CSS-stijlen in nieuwsbrieven problematischer. Echter, wordt inline CSS door de meeste e-mailcliënten herkend en kunt u dit zonder problemen gebruiken. Voor het nieuwsbriefontwerp wordt normaal gesproken gebruik gemaakt van HTML-tabellen.
Zo verloopt de programmering van een HTML-nieuwsbrief stap voor stap:
Stap 1: Sla alle afbeeldingen op
Sla alle afbeeldingen die u in de nieuwsbrief wilt gebruiken afzonderlijk op.
Stap 2: Maak een nieuwe HTML-bestand
Hiervoor kunt u gebruik maken van een visueel hulpmiddel, zoals Dreamweaver, of met een leeg bestand beginnen in een teksteditor zoals Kladblok.
Stap 3: Maak een header
Maak eerst een tabel in de breedte van uw nieuwsbrief. In dit voorbeeld gaan we uit van een breedte van 600 pixels. Deze tabel kan volgens uw behoeften geformatteerd worden en eigen content kan worden toegevoegd. Vergeet niet voor alle afbeeldingen een zogenaamde ‘alt-tekst’ toe te voegen. Hierdoor blijft uw nieuwsbrief leesbaar, ook wanneer de ontvanger de afbeeldingen niet heeft geladen.
Stap 4: Maak de content
Ook hier werkt u met tabellen. Tussen de verschillende content elementen voegt u zogenaamde ‘cellpadding’ toe, om meer witte ruimte te creëren en de leesbaarheid te verbeteren.
Stap 5: Maak de footer
Ook in de footer gebruikt u tabellen. Wanneer u meerdere afbeeldingen of tekst naast elkaar wilt plaatsen, dan kunt u gebruik maken van kolommen. Om de nieuwsbrief te verzenden, kunt u uw HTML-template in bijvoorbeeld uw Newsletter2Go account uploaden.
Alternatieve opties zonder vereiste programmeerkennis
De makkelijkste manier om een nieuwsbrief te ontwerpen, is om een nieuwsbrief software met een WYSIWYG-editor te gebruiken. Met Newsletter2Go werkt het maken van HTML-nieuwsbrieven als volgt:
1. Bepaal het onderwerp en afzenderadres van de nieuwsbrief
Voer eerst het onderwerp en de preheader in. Beide regels tekst kunnen worden aangepast en gepersonaliseerd, om zo de ontvanger rechtstreeks aan te spreken. De afzendernaam en het adres van de afzender worden aan uw ontvangers weergeven en kunt u vrij kiezen.
2. Selecteer een kant-en-klare template of upload uw eigen ontwerp
U kunt kiezen uit een van onze 50 kant-en-klare templates, waaronder seizoensgebonden speciale templates en premium templates die het Newsletter2Go voor u persoonlijk op maat maakt. Alle templates in de editor zijn responsive. Dit betekent dat de HTML geoptimaliseerd is, zodat de template perfect wordt weergegeven op mobiele apparaten. Daarnaast heeft u ook de mogelijkheid om uw eigen ontwerp up te loaden.
3. Nieuwsbrief in de editor maken
Newsletter2Go biedt een visuele editor die werkt middels een drag & drop systeem. U kunt hiermee eenvoudig verschillende blokken voor tekst en afbeeldingen invoegen en deze rechtstreeks bewerken. Binnen de blokken kunt u uw eigen inhoud kopiëren en plakken, gebruik maken van afbeeldingen uit uw bibliotheek en links invoegen. De blokken zelf kunnen ook worden bewerkt. Zo kunt u de positie, opmaak, marges en opvulling wijzigen. Alle aanpassingen die u maakt verschijnen direct in de editor, u heeft dus altijd een nieuwsbrief preview tot uw beschikking.
4. Nieuwsbrief personaliseren
In uw nieuwsbrief kunt u placeholders invoegen, die automatisch worden ingevuld bij het verzenden. Hiervoor worden de ontvangersgegevens uit het adresboek gebruikt. Op deze manier kunt u, bijvoorbeeld, een persoonlijke benadering in de aanhef gebruiken. Bovendien kunnen individuele blokken ook slechts voor bepaalde ontvangers worden weergeven. Bijvoorbeeld wanneer u één dezelfde nieuwsbrief maakt met twee verschillende teaserafbeeldingen, één gericht op het vrouwelijk publiek en één gericht op het mannelijk publiek.
5. Plaats links naar webversie en afmeldpagina
De links naar de webversie en afmeldpagina worden automatisch door Newsletter2Go gegenereerd en aan uw account gekoppeld, zodat uw adresboek altijd up-to-date is.
6. Plaats producten of inhoud in de nieuwsbrief
Vooral nuttig in onze nieuwsbrief software is de 1-klik-overname, waarmee u producten of inhoud met slechts één enkele klik in de nieuwsbrief toevoegt. Newsletter2Go biedt een speciale module, waarmee u producten en inhoud op een locatie naar keuze in de nieuwsbrief kunt toevoegen. Het product of de inhoud wordt ingevoerd aan de hand van de ID uit uw huidige systeem. Hierdoor hoeft u de informatie niet onhandig handmatig te kopiëren en plakken.
7. Nieuwsbrief verzenden
Het goede nieuws: om uw nieuwsbrief te verzenden heeft u geen andere software nodig. In plaats van omslachtig de nieuwsbrief vanuit uw e-mailcliënt te verzenden, kunt u uw nieuwsbrief rechtstreeks vanuit uw Newsletter2Go account verzenden. De speciale nieuwsbrief distributieservers zijn voorbereid op grote distributie en kunnen tot 1 miljoen e-mails per uur, per klant verzenden. Uw computer wordt dus niet ondraaglijk traag, zoals bij handmatige verzending kan voorkomen.
De professionele verzending heeft daarnaast nog een belangrijk voordeel: de server is gewhitelistet en wordt door e-mailproviders als betrouwbaar gekenmerkt. Hierdoor komen uw e-mails rechtstreeks in de inbox van de ontvanger terecht. Wanneer u gebruik maakt van een reguliere e-mailclient om direct uw nieuwsbrieven mee te verzenden, dan is de kans groot dat uw mailings worden onderschept of geblokkeerd door spamfilters.
Hoe ontwerpt en verzendt u uw nieuwsbrieven?
