33 besökare online
3 kunder online

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://yourdomain.com/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="http://www.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 och 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.
Lläs mer om MIME hos Wikipedia Öppnas i nytt fönster (Open in new window) 

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:
http://www.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 Hotmail, Gmail, Yahoo och Spray och skicka HTML-mail till din egen inbox.

TIPS! Kolla resultatet i flera olika e-posttjänster och e-postklienter hos Email Standards Project Öppnas i nytt fönster (Open in new window) 

 

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. Du fattar säkert poängen...

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.

 

 

Exempel på HTML-formaterade mail

Med utgångspunkt från tips och riktlinjer i avsnittet ovan avgör du själv vilken typ av mail du skickar. Här visas tre olika exempel på HTML-formaterat nyhetsbrev med samma utseende men byggt med olika metoder. Resultatet varierar i olika e-posttjänster och e-postklienter och Gmail (Google Mail) ger ett dåligt resulat i förhållande till andra tjänster. Hotmail och Outlook Express ger samma resultat oavsett om du använder tabeller, inline CSS i <HEAD> eller <BODY> (inget av exemplen använder externa CSS-mallar).

Exempel 1: Tabeller och inline style

Klicka här Öppnas i nytt fönster (Open in new window)  för att se exempel 1 i webbläsaren (välj att visa källkoden för att se all kod för exemplet).

Att använda tabeller är en gammal men fungerande metod att bygga en layout. Ange i första hand formateringen direkt i elementet. I exemplet anges bakgrundsfärg för en tabellcell med BGCOLOR:

<td bgcolor="#0099cc">Text i tabellcell</td>

Teckensnitt och färg anger vi med inline CSS med STYLE direkt i elementet:

<td bgcolor="#0099cc" style="font-family: Geneva; font-size: 10px; color: #336699;">
Text i tabellcell</td>

Resultatet i Gmail (Google Mail):

 

 

Exempel 2: Tabeller och CSS inom <BODY>

Klicka här Öppnas i nytt fönster (Open in new window)  för att se exempel 2 i webbläsaren (välj att visa källkoden för att se all kod för exemplet).

Här används tabeller och även här anges i första hand formateringen direkt i elementet. I exemplet anges bakgrundsfärg för en tabellcell med BGCOLOR:

<td bgcolor="#0099cc">Text i tabellcell</td>

Teckensnitt och färg anger vi med men med CLASS:

<td bgcolor="#0099cc" class="sidhuvud_infotext">
Text i tabellcell</td>

Exemplet anväder CLASS och du kan även använda SPAN. Notera att ingen positionering eller placering med DIV används här. Normalt anges CSS-formatet inom <HEAD> men här har vi istället placerat koden inom <BODY>. Notera även att formatering av marginaler anges direkt i elementet <BODY>:

<body bgcolor="#0099cc" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<style type="text/css">
<!--
  .sidhuvud_infotext { font-family: Geneva; font-size: 10px; color: #336699; }
-->
</style>

Resultatet i Gmail (Google Mail):

 

 

Exempel 3: Tabeller och CSS inom <BODY>

Klicka här Öppnas i nytt fönster (Open in new window)  för att se exempel 3 i webbläsaren (välj att visa källkoden för att se all kod för exemplet).

Här används inga tabeller utan all positionering sker med DIV (boxar). Texten och det övriga innehållet i boxarna formateras med SPAN:

<div id="sidhuvud_infobox">
<span class="sidhuvud_infotext">
Text i boxen</span>
</div>

Hela mailet är gjort som en vanlig HTML-sida som ska visas i webbläsare. Här anges CSS-formatet inom <HEAD>:

<head>

<style type="text/css">
<!--
#sidhuvud_infobox { width: 550px; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; }
.sidhuvud_infotext { font-family: Geneva; font-size: 10px; color: #336699; }
-->
</style>

</head>
<body>

Resultatet i Gmail (Google Mail):

 

Resultatet i Outlook Express

Microsoft Outlook Express är den e-postklient som följer med Internet Explorer och programmet visar alltid HTML-mail utan problem. Däremot varierar resultatet om mottagaren valt att läsa meddelanden som oformaterad text. Här visas Exempel 3 Öppnas i nytt fönster (Open in new window)  som är formaterat med DIV (boxar) och CSS på samma sätt som en vanlig HTML-sida.

Visning utan bilder:

Visning med bilder:

Med menyn "Verktyg/Alternativ" kan användaren välja att läsa mail som oformaterad text:

Resultatet med tabeller <TABLE> i Exempel 2 Öppnas i nytt fönster (Open in new window) 

Resultatet med DIV (boxar) i Exempel 3 Öppnas i nytt fönster (Open in new window) 

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. 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. När du skickar två versioner ska du använda formatet: Content-Type: multipart/alternative. (läs mer i avsnittet "Skicka både HTML-mail OCH oformaterade mail" ovan).

 

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.