When you're planning on sending out an email, it is recommended to adhere to best practice so your email will render and function correctly in the widest range of email clients.
Before you get started, make sure that your browser isn't zoomed in or your desktop resolution isn't set to anything other than 100%.
- To reset your browser zoom, press ctrl+0 (control and zero).
- To check your desktop resolution go to your operating systems options for changing screen resolution.
Before you begin using the drag and drop editor, or even using your own HTML code, it is important to plan out the email design. This includes determining the pixel width of the email, where images will be and any padding or margins which will be used.
Your email width will govern the rest of the content and how it is arranged within the design. You can access the email width option in your account by clicking the 'design' tab on the right hand side in the drag and drop editor :
If you're using your own HTML code, the width will be set manually in either the <body> tag or a custom <div> wrapper.
Once you have determined the width of your design, you can choose how the layout will fill the available space. Because HTML text is generally dynamic in how it responds to available space, the next step is working with images.
Images can be used in a variety of ways in an email design. They can be full width header or hero images, banners, aligned to the left, right or centre and they can be social media icons. There are of course other uses of images in email design.
The first thing to do is decide what images are going to be used in your design and where they're going to sit. This is important as it dictates the pixel dimensions that the image needs to be.
Something to take note of, is to seldom use an image which is drastically larger than it needs to be and let the drag and drop editor scale it down. This can lead to problems with various email clients as well as making the email slow to load for recipients.
Instead, determine how big (typically how wide) in pixels the image needs to be and arrange for it to be saved exactly or very close to that width. Also, make sure your images are saved at either a 72dpi or 92dpi resolution. Having DPI values much higher than this usually indicates the image was initially intended for printing and would make the size of the file in kb/mb much larger and cumbersome.
The colour profile of the image is another thing to take into account. If you have been provided with an image(s) that was intended for print, then it may be in a CMYK colour profile. This is not what you want for emails. Make sure your images are either in an RGB or an Indexed colour profile.
Another important point to be aware of is the format in which you save your images. Typically, for graphics (eg. social media icons, logos, graphics requiring transparency) the file format should be either a PNG or a GIF. These are an indexed file type, meaning they have a set colour palette.
If you're going to be using photographs in your email, then save these as the JPEG file type. JPEG files are specifically for use with photographs and provide the optimum file compression vs quality. That said, photographs can be saved as an indexed file type if transparency is needed.
Padding, Margins & Borders
Along with the size of your images, it is important to take in to account any padding, margins or borders you plan to use in your email. These values take up space inside the alloted email pixel width.
If you have an image which is 300 pixels wide and it has a value of 40 pixels of padding applied to it, this would mean the entire width that the image would take up would be 380 pixels; 40 on the left side, 300 for the image and 40 on the right side. There would also be 40 on the top and the bottom, unless otherwise specified in the options on the right hand side :
The same applies with margins and borders. Padding, margins and borders on any component in your email will take up additional space, which needs to be considered in the overall design.
Using links inside your email may seem self explanatory, however there are some things to watch out for. In the drag and drop editor, if you paste in a long URL which spans multiple lines, this can cause rendering issues in some email clients. In cases like this, it is best to apply the long URL to some text instead. eg. Click Here.
Some URL shortening services aren't as reputable as others and can have a negative effect on your emails spam score if used. Typically it would be best to stick to the more well known URL shortening services such as Bitly and Google.
The content in your email (the text) is what is most important, as it is the crux of what you're communicating. You may be tempted to create your text content in another application such as MS Word. Ordinarily this would not be a problem, however if you copy this and paste it into your email in the drag and drop editor, some additional data can be brought over which can interfere with how your email displays in some email clients.
It is recommended to create your text content within the drag and drop editor and format it using the available tools :
When working with text, it is important not to use the spacebar to attempt to format or align your content. Doing so will insert a large number of non breaking spaces ( ) into the HTML behind the scenes. This will cause display issues with your email in some email clients. Instead, make use of the alignment options in the toolbar :
Tables are very useful for organising information. While they can be used within your email, it is important to take note that doing so will affect the way in which your email shows up on mobile devices such as phones and tablets.
If you need to use a table, you can choose to disable the mobile friendly option, which will simply show the email 'as is' on mobile devices. To disable this, click the below button :
If the above information hasn't helped you identify or solve a problem you're having with your email, please don't hesitate to get in touch with our team.