I denne guide vil vi fortælle om de begrænsninger, du som designer vil opleve, når du skal designe til e-mail-programmer frem for webbrowsere og trykkerier.
Generelt design til viewporten
Når du designer til et e-mail-program, vil den første begrænsning, du oplever, være viewporten, altså det område læseren ser e-mailen i første gang den åbnes. I de fleste e-mail-programmer er viewporten ikke meget mere end 150 – 200 pixel høj ved en opløsning på 1024 x 768 pixel, hvilket giver et meget begrænset område at vise nyhedsbrevet til modtageren på.
Når modtageren først er interesseret, og har lyst til at læse nyhedsbrevet, vil mange åbne det i et større vindue, men for at få læseren så langt i processen, er det område, læseren først ser, nødt til at fange interessen i første forsøg.
Tænk på det, når du designer – hvis området, læseren ser, optages af bannerreklamer eller et stort logo, der ikke siger noget om indholdet, vil modtageren ofte gå videre til næste e-mail frem for at læse indholdet.
Tænk desuden over hvordan nyhedsbrevet ser ud “udenfor” rammen. Normalt vil der være en ensfarvet baggrund omkring indholdet, og den skal du have med i tankerne. Et nyhedsbrev slutter ikke udenfor de 600 pixel bredde, indholdet normalt fylder, så overvej hvad der sker udenfor indholdet.
Designelementer
Visse designelementer kan give udfordringer i gængse e-mail-programmer. Her følger en kort gennemgang.
Billeder
Langt de fleste e-mail-programmer blokerer for indlæsning af billeder, når e-mailen vises. Modtageren skal aktivt vælge at indlæse billeder, før de vises, hvilket er vigtigt for designet af nyhedsbrevet.
Indholdet bør derfor præsenteres pænt og overskueligt, selv når billeder ikke er indlæst, og vigtige indholdselementer som overskrifter bør ikke indsættes som billeder, men derimod som ren tekst.
Afsnit
E-mail-programmer fortolker næsten aldrig p-tagget ens. I visse e-mail-programmer kan den indbyggede margin fjernes med CSS, i andre kan den ikke. Man må derfor som udgangspunkt forvente, at afstande mellem afsnit ikke kan rammes perfekt, hvis man benytter p-tagget.
Baggrundsbilleder
Outlook 2007, Outlook 2010 samt GMail understøtter ikke baggrundsbilleder som andre e-mail-programmer og browsere generelt. Her er kun baggrundsbillede på body-elementet understøttet – altså kan du kun indsætte en baggrund bag selve indholdet, ikke bag elementer i indholdet.
Baggrunden skal desuden kunne gentages uendeligt i bredden samt højden, da repeat-atributter ikke fungerer korrekt.
Fonte
Kun fonte installeret på læserens computer vil vises korrekt, ligesom når du designer til en browser. I browsere kan du dog indlæse særlige fonte ved hjælp af tekniske tiltag – det kan du ikke i et e-mail-program. Du bør derfor ikke bevæge dig udenfor de standardiserede fonte, du finder her.
Dynamisk indhold
Der er meget begrænset understøttelse for dynamisk indhold i e-mails, så Javascript, Flash og iframes vil slet ikke virke. Video understøttes i begrænset omfang (ved udformningen af denne vejledning, kun i Mail.app til Mac og på iPhone/iPad), så du bør i stedet linke til videoer uploaded på f.eks. Youtube frem for at indlejre det i e-mail-programmet.
Animerede GIF’er er understøttet, men i Outlook 2007 og Outlook 2010 vises kun første billede i animationen. Laver du et banner som en animeret GIF, er det derfor vigtigt, at budskabet i banneret vises allerede i første billede.
Bemærk: Hvis du indsætter en animeret GIF i Ubivox-systemet, og bagefter tilpasser bredden vha. vores indbyggede funktion til formålet, så konverteres GIF’en til en PNG, som ikke understøtter animation. Derfor bør du ikke bruge den indbyggede resize-funktion, hvis du har brug for animation i GIF’en.
Kontakt os
Har du spørgsmål til hvorvidt noget kan lade sig gøre i dit design, så kontakt os endelig i supporten.