Så tar du bort horisontella linjer i Outlook 2016

Av APSIS

2016-06-27

Varje dag gör våra e-postdesigners små underverk och skapar e-postmeddelanden som verkligen sticker ut i din inkorg. 

Men det finns gränser för vad som är möjligt att åstadkomma inom e-postdesign. Som designer gäller det att ta hänsyn till hur meddelandet visas för olika e-postklienter och för olika operativsystem, dessutom ska meddelandet fungera på både desktop och mobil.

Att skapa meddelanden som ser bra ut i Microsoft Outlook har länge varit en svår nöt att knäcka. Våra e-postdesigners har länge slitit sitt hår över det tillsynes omöjliga problemet med horisontella linjer som dyker upp i Outlook 2016. Men efter hårt arbete lyckades de hitta ett sätt att komma runt problemet. Vår designer Tim Hansson förklarar hur de gick tillväga. 

 

Vill du hjälp att designa ditt nyhetsbrev? Tveka inte att kontakta oss!

 

Ta bort de elaka linjerna i Outlook 2016

Ända sedan e-postens barndom har Outlook skapat stora utmaningar för oss som designar e-post. Kort efter lanseringen av Outlook 2016 började vi lägga märke till att horisontella linjer dök upp när e-postmeddelanden öppnades i Outlook 2016. 

Månader passerade och vi kunde, trots tappra försök, inte förstå varför dessa linjer dök upp i Outlook. Vi gav oss ut på den stora vida webben i jakt på en lösning, men vi tvingades återvända till våra skrivbord, utan hopp i sikte. 

Men till sist. En solig morgon när allt stod på spel så lyckades vi äntligen bli av med de elaka linjerna!

Vår lösning 

1. Genom att byta bakgrundsfärg för body-taggen så att den matchar innehållets bakgrundsfärg, kunde vi kontrollera de elaka linjerna i nyhetsbrevet.

<style type="text/css">

body {

...

background-color: #ffffff; <!-- Controls the color of the lines -->

}

</style>

Men nu ställdes vi inför ännu en utmaning. Den elaka linjen fortsatte att visas till höger om nyhetsbrevet, se nedan. 

 

2. Genom att lägga till en tabell med overflow:hidden; lyckades vi även bli av med linjen till höger om nyhetsbrevet. Voila!

<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">

<tr valign="top">

 <td style="overflow:hidden;">

  ...

 </td>

</tr>

</table>

 

Resultatet

Detta fungerar bäst för mallar som har samma bakgrundsfärg till alla sektioner (se exemplet ovan). 

 

Ladda ner vår kostnadsfria handbok i e-postmarknadsföring för mer tips om e-postdesign och mycket mer! 

 

Att designa e-post för Outlook 2016

Outlook tvingar oss som arbetar med e-postdesign att trolla med knäna. Så frågan är om Outlook är värt besväret? Om du arbetar med B2C är svaret nej, åtminstone ur ett designperspektiv. För dig som är verksam inom B2B är Outlook ett bättre alternativ.   

Så länge du enbart använder en enfärgad bakgrund genom hela e-postmeddelandet kommer du inte ha problem med horisontella linjer i Outlook 2016. Detta beror på att färgen på den horisontella linjen endast kan ställas in till en färg som måste vara den samma som bakgrundsfärgen på body-taggen. Annars syns den horisontella linjen. 

Däremot kan linjerna bli synliga om du väljer att ha flera bakgrundsfärger i samma nyhetsbrev, eftersom färgen på den horisontella linjen måste vara den samma som bakgrundsfärgen för att inte synas i nyhetsbrevet. 

Ett sista tips! Håll ett öga på den (stora) marginalen i Outlook. Om du inte använder en vit bakgrundsfärg till ditt innehåll finns det en risk att det ser lite märkligt ut.

 

Den här bloggposten är skapad i samarbete med Tim Hanson, han är Email Designer på APSIS Creative Services och han brinner för fotboll.