zondag 21 februari 2010

Een HTML/CSS handtekening toevoegen aan OS X Mail

Wanneer je in OS X Mail gebruik maakt van een handtekening (signature) onderaan je emails dan heb je alleen de beschikking over de ‘rich text format (rtf)’ editor. Dit is voldoende als je een simpele handtekening wilt maken. Het toevoegen van elementen zoals plaatjes, logo’s, HTML of CSS is standaard niet mogelijk.

Hieronder vind je een stappenplan waar mee het toch mogelijk is om HTML en CSS toe te voegen aan een handtekening.

1. Open de OS X Mail-applicatie en ga naar Mail ▸ Voorkeuren. Selecteer de sectie ‘Handtekeningen’ en voeg een nieuwe handtekening toe door middel van de ‘+’-knop.

Je hoeft hier verder niets aan te passen, sluit OS X Mail af (belangrijk!) en maak met behulp van een editor een html signature.

De door mij gebruikte html/css voorbeeld handtekening kan je hier dowloaden:

html-css handtekening (7834)

2. Nadat je klaar bent met het ontwerpen van je handtekening open je deze in Safari. Ga in Safari naar Bestand ▸ Opslaan als… en bewaar de pagina in de Web Archive structuur.

3. Ga nu in Finder naar je home folder en open de map: Bibliotheek ▸ Mail ▸ Signatures.

In deze map tref een bestand aan met een identificatie-code en deze eindigend op .webarchive. Kopieer deze naam door het bestand te selecteren ▸ enter toets ▸ crtl-c.

Geef je zelf gemaakte handtekening uit stap 2 dezelfde bestandsnaam en plaats deze hierna in de map Bibliotheek ▸ Mail ▸ Signatures. Op de vraag of het bestand vervangen dient te worden selecteer je ‘Vervang’.

Je vervangt dus de door OS X Mail genereerde handtekening uit stap 1 door je eigen ontwerp uit stap 2.

4. Open opnieuw OS X Mail en ga naar Mail ▸ Voorkeuren ▸ Handtekeningen. In het venster zie je de aangemaakte verschijnen. Sleep de handtekening naar het email account waarmee je deze wilt gebruiken en je bent klaar.

Eventueel kan je onderin het venster nog je standaard handtekening selecteren, deze wordt dan automatisch toegevoegd aan een nieuwe email. Als je dit niet doet dan kan je de handtekening handmatig selecteren.

Het resultaat:




Zie ook:


Reacties:


  • wivku 21 februari 2010 om 13:46

    Hou er rekening mee dat niet elke client op dezelfde manier de signature toont bv. background images, gegroepeerde CSS. Vaak laat Outlook het heel anders zien. CSS is in orde, maar dan beter inline, dus niet als aparte groep.

    Wat handige tips:

    http://www.emailsignature.eu/phpBB2/4-tips-that-will-make-your-email-signature-design-work-great-t1199.html

    Op die site ook een tool om te testen hoe het er uit gaat zien op andere systemen.

  • Richard 21 februari 2010 om 15:51

    Ik heb het voorbeeld aangepast, zodat deze ook goed in Gmail verschijnt.

    http://www.appletips.nl/wp-content/plugins/download-monitor/download.php?id=21

  • Max 21 februari 2010 om 19:52

    Bovenstaande tip heb ik uitgevoerd maar bij collega’s worden in Outlook mijn logo’s niet weergegeven.

    Tevens krijgen outlook gebruikers mijn e-mails in times new roman. Ook als ik verdana of Arial als lettertype gebruik. Hoe kan je dit nu voorkomen??

  • wivku 21 februari 2010 om 22:21

    Logo’s in Outlook: als je het als CSS background gebruikt -zoals in het voorbeeld- dan wordt het in Outlook volgens mij (of eigenlijk: volgens tip #2 uit de emailsignature link) inderdaad niet getoond.
    Voor font: het font dat hierboven genoemd wordt, heeft alleen effect op de signature. Het is (vreemd!) niet mogelijk om het algemene font in te stellen.
    Wel met een truukje, vergelijkbaar met bovenstaande tip.
    Maak een signature als volgt:

    [plaats hier de mail]

  • wivku 21 februari 2010 om 22:22

    Ah, het lukt niet om HTML codes in een comment te stoppen, zie hier -stap 3- voor de details:
    http://www.sriramkrishnan.com/blog/2009/08/setting-outgoing-font-in-apple-mail.html

  • Biker 21 februari 2010 om 22:39

    Wat een geweldige tips hier, net nu ik bezig ben om voor het bedrijf een goede universele handtekening te maken voor drie soorten clients; Lotus Notes 7, Outlook 2007 en Apple Mail 4.

  • wivku 22 februari 2010 om 14:07

    Vanmorgen tegen nog een probleem aangelopen: als je bv. een PDF in de mail meestuurt, dan wordt de HTML signature opeens een attachment in Outlook.

    Nog een handige link, Outlook komt er niet zo goed van af als het om standaarden gaat: http://www.email-standards.org/clients/microsoft-outlook-2007/
    Daarom het initiatief: http://fixoutlook.org/

  • Vincent 27 februari 2010 om 7:13

    ”Kopieer deze naam door het bestand te selecteren ▸ enter toets ▸ crtl-c.”

    Moet dit niet Command + C zijn? Volgens mij wel, maar kan zijn dat ik mij vergis.

  • Jill 18 mei 2010 om 11:21

    Dank jullie wel voor de tutorial over html handtekening toevoegen aan OS X mail.
    Het gaat bij mij bijna goed… De tekst wordt weergegeven in mijn handtekening alleen bij het plaatje staat een vraagteken en wordt dus niet getoond.
    Kunnen jullie me helpen?
    Thanx

  • Greenflash 11 juni 2010 om 11:42

    Na de update van Safari 5 werkt mijn HTML handtekening niet meer? Ik heb het net getest op een machine die nog niet geupdate was en daar alles nog perfect. Lijkt erop dat Safari 5 ook zaken in Apple Mail veranderd. Iemand een oplossing?

  • Theo 13 augustus 2010 om 18:09

    Net Als Jill (nummer 9 ) krijg ik bij mijn mail geen afbeeldingen te zien , alleen een blauw blokje met vraagteken. Bij mail voorkeuren : handtekeningen krijg wel de volledige preview te zien van de handtekening. Iemand een idee ? ik heb al geprobeerd om de images map te kopieeren naar de map waar de handtekening staat : maar dit bied geen oplossing.

  • Van Belle Servaas 9 oktober 2010 om 13:25

    Ik gebruik deze techniek al een poos op mijn Mac Book en iMac.. maar plots werkt dit niet meer op de iMac…
    Dit nochtans met hetzelfde webarchief-bestand…
    Bij een test op een andere Mac Book lukt dit ook niet…

    Samenvatting.. op mijn computer kan ik deze techniek gebruiken maar op twee andere niet..

    Hoe kan dat ?

  • Frank 5 november 2010 om 11:58

    Hallo,

    Ik krijg net als Jill en Theo ene blok met een vraagteken, terwijl bij Voorkeuren het wel goed getoond wordt.

    Heeft iemand een tip om dit op te lossen?

    Alvast bedankt!
    Mvg

  • ginny 20 december 2010 om 22:30

    net als jill en theo… ik ook! is er niemand die kan helpen? ik zoek me een ongeluk… come on apple freaks, this shouldn’t be that hard, or is it?

    groetjes,
    ginny

  • Richard IJzermans 20 december 2010 om 22:35

    Ik zal van de week het artikel updaten, Apple heeft in de Mail app namelijk iets aangepast waardoor het niet meer werkt.

    –R

  • max 21 december 2010 om 10:52

    Ik gebruik deze optie al heel lang, maar al die tijd is het op Windows computers niet leesbaar. Als ik een mail naar een windows gebruiker stuur dan komen er altijd kruisjes ipv de afbeeldingen. Outlook vraagt dan of de afbeeldingen geladen mogen worden. Tevens komen al mijn mails bij windows gebruikers aan met courier lettertype terwijl ik typ in verdana.

  • Peppijn 12 maart 2011 om 15:49

    Ik heb ook het probleem met het vraagteken de ene keer wordt het plaatje wel weergegeven en de andere keer niet????
    Wie zou hier mee kunnen helpen, heb inmiddels de toppen van mijn vingers gesurft echter tot nu toe geen blijven werkende oplossing

  • Menno 11 juni 2011 om 23:57

    @Richard : is het artikel al aangepast ? in Outlook komt mijn handtekening wel goed aan maar vreemd genoeg zie ik geen logo in Mail.

  • Menno 12 juni 2011 om 3:18

    Misschien dat ik het allemaal niet goed begreep maar volgens mij is het makkelijker om een handtekening te creëren in een nieuwe email.

    Deze dan via Cmd C kopiëren en Cmd V plakken in de handtekening via Voorkeuren.

    Het ziet er goed uit voor alle ontvangers… Outlook, Gmail etc

  • Menno 12 juni 2011 om 3:19

    oh en dit werkt gewoon wel met plaatjes… :-)

  • Francisca Zonjee 9 augustus 2011 om 19:40

    Weet iemand hoe je een facebook button plaatst in je handtekening, zodat de ontvanger kan linken naar je facebook fanpage? Hetzelfde geldt ook voor een linkedIn button?
    Ik heb een mac en gewoon mac mail.

  • Joep 24 augustus 2011 om 21:55

    Hallo,

    zelfde probleem: alle stappen uitgevoerd, maar geen plaatje, alleen een vraagtekentje.

    Wat ik wil is het volgende:
    mijn bedrijfslogo (afbeelding) inclusief n.a.w. gegevens (als opgemaakte tekst) in een handtekening.

    Wat voor mij superhandig zou zijn is een Mac programma waarbij ik mijn handtekening zelf kan ontwerpen en waarbij de achterkant automatisch van html wordt voorzien. Ik kan namelijk geen html lezen. Deze html wil ik dan in mijn websitefolder plaatsen en deze linken naar de handtekeninginstellingen in mail. Als dit tenminste mogelijk is…

    Ik hoor graag van je/jullie!

    Gr. Joep

  • Jor 11 oktober 2011 om 22:03

    Helaas krijg ook ik een vraagteken te zien. Is er inmiddels een oplossing voor?

    preview bij voorkeuren is wel zichtbaar.

  • Jolanda 17 januari 2012 om 10:06

    De hele stap met webarchive en kopieren hoeft niet!
    als je je handtekening in html opent in safari, gewoon cmnd a, cmnd c en weer plakken met cmnd v in je handtekening bij mail > voorkeuren

  • Angelo 27 januari 2012 om 14:06

    heb een probleem met stap 3: vind geen map: Bibliotheek ▸ Mail ▸ Signatures.
    Met zoekfunctie vindt ik ook bijv. de map Bibliotheek of Library niet. Ik dacht dat iedere user wel een Library had, maar waarom die bij mij niet meer zichtbaar is? Joost mag het weten.

  • Mark 18 september 2013 om 16:41

    Dit artikel heeft een update nodig, want de hier beschreven methode werkt voor de laatste versie(s) van Apple Mail niet meer.

    Hoe het wel kan vind je hier:
    http://www.xenon-webdesign.co.uk/dev/create-graphical-html-signature-mac-mail-os-mountain-lion/

  • Jonathan 3 januari 2014 om 0:44

    Ivm de foto’s. Ik denk dat jullie de foto van jullie locale schijf laten draaien. Hier wringt echter het schoentje. Je moet de url ingeven waar de foto op geplaatst staat. Bv. eerste foto van deze site:

  • Jonathan 3 januari 2014 om 0:46

    html code kwam er niet door dus hier een voorbeeld van de url: http://cdn.appletips.nl/wp-content/uploads/2010/02/appletips.html.png

  • Wiesje 12 februari 2014 om 19:36

    Hallo,
    Dank voor de uitleg! Ik ben al een heel eind, maar ergens doe ik toch iets niet goed. Ik volg alle stappen, heb een signature aangemaakt met mijn bedrijfslogo erin. Alles lukte. Deze verschijnt nu in een draft of als ik een mail naar mezelf stuur (via apple mail). (Ik heb via een onlineconvertor mijn logo (jpg) in html codering overgezet en daar vervolgens via textwrangler een html van gemaakt en de verdere stappen gevolgd). Echter, als ik nu een mail verstuur naar een ander mailadres, dan verdwijnt het logo. Ook als ik de naar mijzelf gestuurde mail (met logo) forward, dan verdwijnt dat logo ook. Help? Dank!!

  • Pim 26 maart 2014 om 11:11

    Hallo, ik heb een mail signature in OSX 10.7 gemaakt met in de style/css @media query voor een responsive signature. Dit werkt op alle devices prima! Mijn signature zit in een .webarchive file. Nu zijn er sommige collega’s die hun mac wel hebben geupdate naar 10.8 of hoger en daar zit de signature in een .mailsignature file. Ik krijg de @media query hier niet werkend!! Iemand een oplossing hiervoor?? Alvast bedankt.

Reactie toevoegen

Stel een avatar in