Att skapa det perfekta e-postmeddelandet för företags- eller marknadsföringskampanjer är en detaljerad och genomtänkt process. Varje aspekt, från layout till typsnitt och färger, beaktas noggrant för att säkerställa att meddelandet är både effektivt och visuellt tilltalande.

På grund av begränsningar i vissa e-postklienter, särskilt Outlook, kan visningsproblem däremot ibland uppstå.

Sedan Outlook 2007 har Microsoft Word använts för att rendera HTML-e-post, vilket ofta leder till oväntade layoutproblem. Eftersom Word är byggt för utskrift snarare än skärmdisplay, kan vissa designelement visas på ett annat sätt än avsett.

I den här artikeln kommer vi att utforska de vanligaste visningsproblemen i desktop-versionerna av Outlook och hur du kan åtgärda dem för att säkerställa att dina e-postmeddelanden visas korrekt över olika plattformar.

Inget stöd för icke webbsäkra typsnitt (ex. Google Fonts) 

Outlook stöder inte alltid Google Fonts eller andra externa typsnitt, vilket kan resultera i att de ersätts med standardtypsnitt som Arial eller Times New Roman. Detta kan påverka e-postens övergripande utseende om ett mer unikt typsnitt valdes.

För att hjälpa till att behålla ett konsekvent utseende rekommenderas det att definiera ett reservtypsnitt med hjälp av egenskapen för typsnittsfamilj. Till exempel: font-family: 'CustomFont', Arial, sans serif;

Detta säkerställer att om det anpassade typsnittet inte är tillgängligt, kommer e-postmeddelandet fortfarande att använda ett liknande typsnitt.

Det är också viktigt att vara medveten om att teckenstorlekar kanske inte visas som avsett. Outlook kan tolka anpassade teckenstorlekar felaktigt, särskilt när man använder typsnitt som inte är webbsäkra. Detta kan påverka layouten eller stiliseringen av e-postmeddelandet.

I vår editor: 

I Outlook:

Bakgrundsbilder: 

Outlook har begränsat stöd för bakgrundsbilder, vilket kan leda till att de saknas eller visas felaktigt i e-postmeddelanden.

• Brister i CSS-stöd för bakgrundsbild – De flesta versioner av Outlook ignorerar bakgrunder som sätts med standard CSS. 
• Felaktig skalning eller upprepning – Även om bakgrunden visas kan den upprepas eller beskäras felaktigt. 
• Problem med transparens – Outlook hanterar kanske inte transparenta bakgrundsbilder korrekt.

Microsoft har nyligen infört stöd för CSS-bakgrundsbilder i Outlook 365 och Outlook.com. Tyvärr stöds de fortfarande inte i de flesta desktop-versioner av Outlook.

Animerade bilder (GIF):

Outlook har kända begränsningar när det gäller animerade GIF-bilder. I äldre versioner, från 2007 till 2016, visas endast den första bilden eftersom dessa versioner använder Microsoft Word för att rendera e-post, vilket inte stöder animationer.

Trots att nyare versioner av Outlook kan stödja animerade GIF-bilder, kan uppspelningen fortfarande variera beroende på version, användarinställningar eller e-postklient. Animationer kan stoppas eller visas felaktigt, och stora filstorlekar kan leda till längre laddningstider eller blockeras på grund av säkerhetsinställningar. Även i mobilversionerna av Outlook kan animationer ibland inte fungera som förväntat.

Tips:

• Placera viktig information i den första bilden av GIF-bilden: Om din GIF innehåller viktig information eller en uppmaning till handling, placera den i den första bilden, eftersom den kommer att vara synlig även i Outlook-versioner som inte stöder animationer. 
• Inställningar för Outlook 365: Aktivera visning av animerade GIF-bilder i Outlook 365-inställningarna för korrekt rendering av animationer.

Inget stöd för rundade hörn

I Outlook är stödet för CSS-egenskapen border-radius begränsat eller helt frånvarande. Anledningen är att Outlook använder Microsoft Word för att rendera HTML-e-post, och Word stöder inte denna egenskap.

För att säkerställa att bilder visas korrekt i Outlook rekommenderas det att använda bilder med rundade hörn som redan är förberedda. På så sätt slipper du problem med visningen oavsett vilken version av Outlook som används.

Vill du läsa mer om stödet för border-radius i olika e-postklienter? Kolla gärna på Can I Email-resursen här: https://www.caniemail.com/features/css-border-radius/

Hur det visas i vår editor:

Hur det visas i Outlook:

Outlook lägger till vita linjer

Ett vanligt problem du kan stöta på är att slumpmässiga vita linjer dyker upp i Outlooks e-post. Detta beror främst på renderingproblem i äldre versioner av Outlook, som använder Microsoft Word för att visa HTML och inte fullt ut stöder modern CSS.

Den vanligaste förklaringen är att linjerna uppstår på grund av hur Outlook omvandlar pixelvärden (px) till punkter (pt) för egenskaper som line-height, höjd och teckenstorlek. När omvandlingen leder till bråkdelar kan det skapa tunna vita mellanrum på grund av avrundningsfel.

Linjerna syns oftare när det finns en kontrast mellan bakgrunds- och textfärg.

För att minska risken att detta händer, försök att använda jämna tal för line height, teckenstorlekar och marginaler. Även om detta inte alltid löser problemet helt, kan det hjälpa att använda samma bakgrunds- och textfärg eller noggrant justera avstånd för att minimera synligheten.

Ingen support för SVG- eller WebP-bilder

Outlook stöder inte SVG- eller WebP-filer för att visa bilder i e-postmeddelanden.

Du kan kolla nivån på stödet för SVG och WEBP bilder här. 

Problem med mörkt läge  / dark mode i Outlook

Outlook ändrar automatiskt färgerna på text, bakgrund och bilder, vilket kan leda till dålig läsbarhet eller förlorade designelement.

Vanliga problem med mörkt läge i Outlook:

• Automatisk färgändring – Outlook kan ändra textfärgen från svart till vit och vice versa, även om färgerna är manuellt inställda. 
• Bakgrundsfärgsändring – Om en vit bakgrund används i ljusläge kan den automatiskt ändras till mörkgrå eller svart i mörkt läge. 
• Bildproblem – Om det finns bilder med transparent bakgrund eller vita element i e-postmeddelandet kan de blandas med den mörka bakgrunden och bli osynliga. 
• Felaktig visning av knappar och logotyper – Knappar kan förlora sin design, och logotyper med vit text på en transparent bakgrund kan bli osynliga.

Du kan läsa mer om dark mode i den här artikeln: