Optimera marknadsföringsmeddelanden för mobila enheter

När du skriver ett marknadsföringsmejl kan du dölja specifika avsnitt på e-postklienter för datorer eller mobiler. Du kan också ändra kolumnkonfigurationen och den övergripande layouten för att förbättra upplevelsen för mottagare som läser ditt e-postmeddelande på mindre enheter.

Om du anpassar ditt e-postmeddelande till olika enheter kan du öka engagemanget och förbättra den övergripande användarupplevelsen av dina e-postmeddelanden.

Förstå begränsningar och överväganden

• Att ställa in separata moduler och styling för datorer och mobiler kan bara göras i dra-och-släpp-redigeraren. För e-postmeddelanden som skapats med hjälp av mallar från designhanteraren måste utvecklarna manuellt lägga till eventuella enhetsanpassningar.
• Följande e-postklienter stöder inte mobiloptimerade e-postmeddelanden: Yahoo! Mail på Android, AOL Mail på Android, Gmail IMAP och vissa versioner av Samsung Mail. I dessa klienter kommer dolda moduler att vara synliga och mobilanpassade konfigurationer kommer att ignoreras.
• Modulinställningar som t.ex. teckenstorlek eller utfyllnad kan inte ställas in med olika värden för mobil och dator. Om du vill använda olika värden för dessa inställningar rekommenderar vi att du skapar separata moduler för mobil och dator med samma innehåll.

Dölj moduler och avsnitt på dator eller mobil

Så här anpassar du vilka moduler eller avsnitt som ska visas för stationära eller mobila mottagare:

1. I ditt HubSpot-konto, navigera till Marknadsföring > E-post.
2. Klicka på namnet på ett utkastat e-postmeddelande eller klicka på Skapa e-postmeddelande.
3. Klicka på desktop skrivbordsikonen ellermobilemobilikonen högst upp i e-postredigeraren för att konfigurera inställningarna för varje enhetstyp.

4. Håll muspekaren över en modul eller ett avsnitt och klicka påikonen hide hide för att dölja den modulen i den version av e-postmeddelandet som du redigerar.

5. Om du vill visa alla dolda moduler för en version som du redigerar klickar du på rullgardinsmenyn Visningsalternativ längst upp i redigeraren och växlar sedan Visa dolda på.
6. Om du vill göra en dold modul synlig igen för den versionen av e-postmeddelandet klickar du på ikonen view view där den dolda ikonen annars skulle ha varit.

Anpassa modulstapling på mobila enheter

Du kan anpassa hur modulerna i ett avsnitt ska staplas när de visas på en mobil enhet.

1. I ditt HubSpot-konto, navigera till Marknadsföring > E-post.
2. Klicka på namnet på ett utkastat e-postmeddelande eller klicka på Skapa e-postmeddelande.
3. Klicka på ett avsnitt i e-postredigeraren.
4. I redigeraren för vänster sidofält väljer du ett alternativ i avsnittet Stapling :
   • Behåll samma kolumner: e-postmeddelandet kommer att visa samma antal kolumner på mobilen som på datorn.
   • Vänster ovanpå höger: modulerna på vänster sida av avsnittet visas först på mobilen.
   • Höger ovanpå vänster: modulerna på höger sida av avsnittet visas först på mobilen.

Anpassa styling på desktop eller mobil

Du kan konfigurera separat styling för dator och mobil för ett enskilt avsnitt eller för hela marknadsföringsmailet.

1. I ditt HubSpot-konto, navigera till Marknadsföring > E-post.
2. Klicka på namnet på ett utkastat e-postmeddelande eller klicka på Skapa e-postmeddelande.
3. Klicka på ett avsnitt i e-postredigeraren för att redigera dess styling eller klicka på ikonen styles malldesign till vänster för att redigera styling för hela e-postmeddelandet.
4. I redigeraren i det vänstra sidofältet kan du avaktivera Alla enheter bredvid ett avsnitt för att visa separata inställningar för dator och mobil.

5. Redigera stylinginställningarna för desktop och mobil.

När du är klar med att redigera synlighets- och layoutinställningarna för ditt e-postmeddelande kan du förhandsgranska hur e-postmeddelandet kommer att visas i olika e-postklienter.

Optimera e-postmeddelanden för mobila enheter

För att förbättra utseendet på dina marknadsföringsmeddelanden på mobila enheter rekommenderar vi att du följer dessa bästa metoder:

• Använd en responsiv e-postmall: responsivt innehåll justeras för att passa skärmen där det visas. HubSpots dra-och-släpp-mallar är responsiva som standard, men utvecklare som skapar kodade mallar måste använda markeringen för responsiva e-postmallar.
• Minska storleken på bildfiler: mindre bildfiler resulterar i mindre e-poststorlekar och snabbare laddningstider. HubSpot ändrar automatiskt storleken på alla bilder med en viss bredd, vilket minskar filstorleken, men du kan också använda en tjänst som FastStone Photo Resizer.
• Skapa läsbara länkar och knappar: alla textlänkar och knappar bör vara minst 57 pixlar i bredd och höjd.
• Testa förhandsgranskningstexten i e-postmeddelandet: alt-texten för bilder som placeras i början av ett marknadsföringsmeddelande kan dras in i e-postmeddelandets förhandsgranskningstext. Du kan ta bort bildens alt-text för att lösa detta problem. Vi rekommenderar att du skickar ett testmejl för att verifiera att förhandsgranskningstexten visas som förväntat.
• Undvik Javascript och iframe-element: inbäddade Javascript- och iframe-element återges inte av de flesta e-postklienter. Vi rekommenderar att du undviker att lägga till dessa i kodade mallar.
• Minska e-postmeddelandets storlek för att undvika klippning: e-postmeddelanden på över 102 KB kan få sitt innehåll dolt bakom en "Visa hela meddelandet-länk" i Gmail. Läs mer om hur du beräknar och minskar storleken på ett e-postmeddelande.