42 besökare, 7 medlemmar och 4 Studenter är online nu
Loopia

Webdesign och HTML

Information om mail

POP-mail
Om du har ett eget domännamn så kan du ansluta egna e-postadresser till domänen (läs mer i guiden webbhotell och domännamn »). De flesta internetleverantörer erbjuder också e-postkonton. För att skicka och läsa e-post använder du en e-postklient och anger då dina användaruppgifter tillsammans med uppgifter om POP3-server och SMTP-server. POP3 (Post Office Protocol 3) är ett protokoll som används för att hämta e-post från en e-postserver. SMTP (Simple Mail Transfer Protocol) är ett protokoll för att skicka elektronisk post. Exempel på e-postklienter är Microsoft Outloook, Outlook Express, Lotus Notes, Eudora, Mozilla Thunderbird, Opera Mail mm.

Webbmail
webbhotell och internetleverantörer erbjuder webmail som ett alternativ till att använda en e-postklient. Webbmail innebär att du kan läsa din mail direkt i webbläsaren utan att använda ett e-postprogram. Dessutom finns många webbaserade e-posttjänster som erbjuder e-postkonton att användas som webbmail (ibland också som POP-mail). Några exempel är Hotmail, Yahoo, Gmail och Spray.

Spam och virus
När du skickar ett mail från din e-postklient eller webmail så kan du aldrig vara säker på att det når fram till mottagaren. Anledningen är att e-postservrar använder antivirusfilter och spamfilter som sorterar bort mail i riskzoonen.

Nyhetsbrev och massutskick
Du kan skicka samma mail till alla mottagare i din adressbok eller även ange flera mottagare i adressfältet. Du kan alltså gör en form av massutskick eller skicka nyhetsbrev direkt från din webmail eller e-postklient. Antalet mottagare är begränsat av antalet poster i adressbok eller sändlista men även vad leverantören av din e-posttjänst tillåter. När du skickar information till ett stort antal mottagare bör du dessutom följa vissa regler. Om ett utskick inte är välkommet utan uppfattas som spam kan detta leda till negativa reaktioner och målet med massutskicket uppås inte. Det bör framgå vem som är avsändaren och varför mottagaren erhåller nyhetsbrevet. En "unsubscribe-länk" eller annan möjlighet att enkelt att avregistrera sin e-postadress från sändlistan bör alltid finnas. När du skickar nyhetsbrev eller annan form av massutskick är det viktigt att du själv enkelt kan administrera adresserna och att användarna själva kan lägga till sin e-postadress (eller avsluta sin prenumeration). Lösningen är att anlita en leverantör av tjänsten och flera webbhotell erbjuder nyhetsbrev som en tilläggstjänst.

Om du har tillgång till PHP och MySQL kan du använda programmet WDS Nyhetsbrev » som vi själva använder till Webdesignskolans Nyhetsbrev.

Text och HTML
Att skicka mail som endast innehåller text helt utan formatering (plain text) är den säkraste metoden för att mottagaren verkligen ska kunna läsa den information du skickat. Det är inte lika snyggt som ett HTML-formaterat mail men fungerar bra när innehållet är viktigare än layouten. HTML-formaterade mail är i grunden detsamma som HTML-sidor i en webbläsare. Att skapa HTML-mail som fungerar i olika e-postklienter och webmail är betydligt svårare än att få en HTML-sida att fungera i olika webbläsare. Läs mer i tipsen nedan!

 

Tips för HTML-formaterade mail

Att skapa HTML-mail som fungerar i olika e-postklienter och webmail är betydligt svårare än att få en HTML-sida att fungera i olika webbläsare. Webbaserade e-posttjänster som tex Hotmail, Gmail, Yahoo ändrar din HTML-kod innan de visar innehållet. Anledningen är att de inte vill riskera att sidkoden som tjänsten själva använder ska påverkas av koden i dina HTML-mail. Det kan innebära att bakgrundsfärger, CSS-formatering, javascript och Flashfilmer tas bort. En annan skillnad mot HTML-sidor i en webbläsare är att det utrymme som ditt HTML-mail disponerar delas med menyer, annonser eller annan information. Du kan alltså inte räkna med att webbläsarens fönsterstorlek kan utnyttjas till ditt HTML-mail.

Här är några tips när du skapar dina HTML-mail. Se det i första hand som rekommendationer och testa dig fram till vad som passar bäst för dina egna HTML-mail!

Fokusera på innehåll och inte layout

Innehållet i ditt mail är viktigare än utseende och layout. Att fånga intresset med ett intressant budskap är en konst. Fokusera hellre på att skriva ett bra textinnehåll än att paketera innehållet snyggt.

Anpassa bredden på innehållet

Många användare öppnar inte mailet utan läser det i förgranskningen och utrymmet som ditt HTML-mail disponerar delas med menyer och ibland annonser eller annan information. Du kan alltså inte räkna med att webbläsarens fönsterstorlek kan utnyttjas till ditt HTML-mail. Bredden på nyhetsbrevet bör vara högst 500-550 pixlar.

Använd inte javascript, Flash, ActiveX mm

Webbaserade e-posttjänster som tex Hotmail, Gmail, Yahoo ändrar din HTML-kod innan de visar innehållet. Anledningen är att de inte vill riskera att sidkoden som tjänsten själva använder ska påverkas av koden i dina HTML-mail. Det kan innebära att javascript, ActiveX-kontroller och Flashfilmer tas bort. En annan anledning är att dina mottagare och deras e-posttjänster med all säkerhet använder antivirus-program som inte tillåter aktivt innehåll.

Använd gärna Tabeller till layouten

Att separera innehållet från layoten är ett av ledorden inom webutveckling, läs mer i guiden CSS. Att använda tabeller till layoten anses vara gammalt och förlegat men fungerar alltså fortfarande bra för HTML-mail. Anledningen är att CSS-stödet varierar för olika e-postklienter och e-posttjänster och du kan inte använda alla CSS-formateringar.
Se en sammanställning här: http://www.campaignmonitor.com/css Öppnas i nytt fönster (Open in new window) 

Du bör undvika positionering med <DIV> men däremot kan du använda tabeller och formatera <TABLE> och <TD> med <CLASS> och innehållet med <SPAN>.

Använd CSS direkt i dokumentet - (inline style)

Länkar till externa stilmallar raderas av vissa e-posttjänster och det fungerar bättre att ange CSS-formatet direkt i dokumentet.

Använd INTE externa mallfiler som i exemplet nedan:

<head>
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>

Normalt placeras CSS-koden inom <HEAD> men även den koden kan ignoreras av e-postklienten och därför bör du istället ange CSS-koden inom <BODY>.

Flytta CSS-koden från <HEAD>:

<head>
<style type="text/css">
<!--
p { font-size: 10px; }
-->
</style>
</head>

...till <BODY> med placering före övrig kod:

<body>
<style type="text/css">
<!--
p { font-size: 10px; }
-->
</style>

<p>
sidans innehåll här...</p>
</body>

En säkrare metod är att ange CSS-formatet direkt i elementet (inline style):

<p style="font-size: 10px;">texten här...</p>

Som en extra säkerhetsåtgärd bör du inleda varje rad som innehåller class-selektorer med ett blanksteg. Detta för att vissa e-postservrar tolkar den inledande punkten som "slut på meddelande" och risken finns att meddelande-texten avbryts. Exemplet nedan visar class-namnet som inleds med en eller ett par blanksteg:

  .infotext { font-size: 10px; }
p { font-size: 10px; }

Dessutom kan du förkorta din kod ännu mer. När du skickar HTML-mail tar vissa e-posttjänster eller e-postklienter bort vissa märken och du kan faktiskt själv göra din kod kortare och snabbare att skicka och bearbeta genom att hoppa över <DOCTYPE>, <HEAD>, <META> och <TITLE>.

Använd absoluta sökvägar till bilder och länkar

Bilderna skickas inte som bilagor till dina HTML-mail och du måste alltså publicera bilderna till din webbserver och ange de absoluta sökvägarna till bilderna.

Använd INTE relativa sökvägar som denna:

<img src="images/logo.gif">

Ange den absoluta sökvägen till dina bilder.

I exemplet ligger bilden i mappen "newsletter/images":

<img src="http://dindomän.se/newsletter/images/logo.gif">

Samma sak gäller för länkar. Använd absoluta sökvägar även för länkarna.

Länka till ett nytt webbläsarfönster med attributet TARGET="_BLANK" så att länkade sidor öppnas i en webbläsare och inte i e-postprogrammet.

Här används absolut sökväg och länk till externt webbläsarfönster:

<a href="https://webdesignskolan.se" target="_blank">till Webdesignskolan</a>

Använd ALT och WIDTH - HEIGHT för bilder

Använd attributen ALT, WIDTH och HEIGTH för alla bilder. Det ger ett bättre resultat om bildvisningen stängts av i e-postklienten.

Här anges en kort beskrivning och bredd och höjd för bilden:

<img src="http://yourdomain.com/logo.gif" alt="InternetLivs logotype" width="300" height="50">

Använd inte enbart bilder som innehåll

Många e-posttjänster och e-postklienter har bildvisningen avstängd som standard. Det innebär att mottagaren själv måste vara aktiv och välja att visa bilder i dina mail. Om dina mail är byggda med innehåll och information i form av bilder så missar många mottagare ditt budskap.

Om du använder bilder bör du ange WIDTH och HEIGHT så att inte det övriga textinnehållet förskjuts när bilden inte visas. Ange också en ALT-beskrivning av bilden.

Inled inte ditt nyhetsbrev med en stor bild. Använd små bilder kombinerat med textinnehåll så att mottagaren får en uppfattning om vad meddelandet innehåller och då kanske väljer att visa bilderna.

Så här kan ett nyhetsbrev som inleds med en LITEN bild se ut (när bildvisning är avstängd):

Så här kan ett nyhetsbrev inleds med en STOR bild se ut (när bildvisning är avstängd):

 

Skicka både HTML-mail OCH oformaterade mail

Den standard som används för mail är MIME (Multipurpose Internet Mail Extensions). När du skickar mail bifogas en HEADER där MIME-formatet anges som tex: MIME-Version: 1.0

Mediatypen kompletteras med information om innehållet i meddelandet i form av en CONTENT-TYPE.

När du skickar HTML-mail anges mediatypen Content-Type: text/html

När du skickar ett oformaterat mail anges mediatypen Content-Type: text/plain

Många mottagare kan (eller vill) inte läsa HTML-mail och då fungerar oformaterade mail bäst. Vissa e-postklienter och e-posttjänster visar HTML-mailen ändå men all formatering tas bort.

Om du vill ha kontroll över hur dina mail ser ut även om den oformaterade versionen används ska du skicka TVÅ versioner av dina mail; HTML-formaterade OCH oformaterade mail. Detta kallas för "MIME multipart message" och det finns olika typer beroende på innehåll.

Läs mer om MIME hos Wikipedia

När du skickar två versioner ska du använda formatet: Content-Type: multipart/alternative.

Innehållet i mailet kan då ha en alternativ version och de olika versionerna är åtskiljda av en "boundary". En boundary är en form av avgränsare som skiljer de olika delarna åt. Ofta används en slumpvis genererad kod som boundary.

Exemplet nedan visar ett nyhetsbrev som skickats med programmet WDS Nyhetsbrev » som vi själva använder till Webdesignskolans Nyhetsbrev:

Här är den oformaterade versionen av nyhetsbrevet:

TIPS! Skriv ut inledningen http:// i dina länkar så är chansen större att de fungerar i den oformaterade textversionen.

Ange:
https://webdesignskolan.se
istället för:
www.webdesignskolan.se

 

Här är HTML-versionen av samma nyhetsbrev:

 

Testa ditt HTML-mail i flera e-posttjänster

Att testa hur ditt HTML-mail ser ut i alla e-posttjänster och e-postklienter är en tidskrävande och kanske omöjlig uppgift. Kolla i första hand i det e-postprogram du själv använder.

Du kan också skicka ditt HTML-mail till vänner och kollegor med andra e-postklienter och öppna konto hos Gmail etc och skicka HTML-mail till din egen inbox.

TIPS! Kolla resultatet i flera olika e-posttjänster och e-postklienter hos Email Standards Project

 

Utmana inte spamfiltren

Alla seriösa e-posttjänster använder Spamfilter-program och det gör även många användare lokalt i sina e-postklienter.

Använd inte ord som med all säkerhet är blockerade typ "sex", "viagra", "BUY NOW" osv. Spamfiltren använder olika kriterier för att bedöma om mailet är ett spammail och det kan tex vara fraser som "CLICK HERE!" - "KLICKA HÄR!" - "FREE!" - "BUY KNOW" - "OTROLIGT ERBJUDANDE" mm.

Använd inte stora bokstäver som visar att du SKRIKER ut ditt budskap.

Undvik även dummy-texter som "lorem ipsum" och "test" och liknande som kan vara blockerat av spamfiltren. Skriv en riktig och vettig text även när du testar mailet.

 

Skicka HTML-formaterade mail och nyhetsbrev

Du kan skicka samma mail till alla mottagare i din adressbok eller även ange flera mottagare i adressfältet. Du kan alltså göra en form av massutskick eller skicka nyhetsbrev direkt från din e-posttjänst eller e-postklient. Antalet mottagare är begränsat av antalet poster i adressbok eller sändlista men även vad leverantören av din e-posttjänst tillåter.

När du skickar information till ett stort antal mottagare bör du dessutom följa vissa regler. Om ett utskick inte är välkommet utan uppfattas som spam kan detta leda till negativa reaktioner och målet med massutskicket uppås inte.

Det bör framgå vem som är avsändaren och varför mottagaren erhåller nyhetsbrevet. En "unsubscribe-länk" eller annan möjlighet att enkelt att avregistrera sin e-postadress från sändlistan bör alltid finnas.

När du skickar nyhetsbrev eller annan form av massutskick är det viktigt att du själv enkelt kan administrera adresserna och att användarna själva kan lägga till sin e-postadress (eller avsluta sin prenumeration). Lösningen är att anlita en leverantör av tjänsten och flera webbhotell erbjuder nyhetsbrev som en tilläggstjänst.

Om du har tillgång till PHP och MySQL kan du använda programmet WDS Nyhetsbrev som vi själva använder till Webdesignskolans Nyhetsbrev.

Med WDS Nyhetsbrev kan du själv konfigurera unsubscribe-länkar både för HTML-formaterade och oformaterade mail. Du kan även skicka två versioner med formatet: Content-Type: multipart/alternative. Innehållet i mailet får då en alternativ version och de olika versionerna är åtskiljda av en "boundary". En boundary är en form av avgränsare som skiljer de olika delarna åt.