When coding both landing page and email templates there are several best practices that will ensure consistent deliverability and the needed flexibility to perform across different email clients, web browsers, and computer platforms. Elixiter and MT Web Farm have worked together to create a condensed, straightforward list of best practices to ensure effective, flexible, and high quality templates.
Recommendations for email templates:
- It is essential to use web safe fonts for emails. Click here for a rundown of web safe fonts. This is a pretty limited list, but these are fonts that are commonly found on all computers, therefore will display correctly.
- Marketo supports the following fonts in its WYSIWYG editor, none of which are condensed:
- Andale Mono, Arial, Arial Black, Book Antiqua, Comic Sans MS, Courier New, Georgia, Helvetica, Impact, Symbol, Tahoma, Terminal, Times New Roman, Trebuchet MS, Verdana, Webdings, Wingdings
- For best results, it is recommended that email width should be 600px or 650px wide.
- Background images should not be used in emails. If text appears in front of an image within an email, the two will have to be combined into one image, rendering the text un-editable.
- Images may be used, but must maintain a fixed width and height, meaning that they cannot expand or contract as content is resized.
- Text can be positioned over a solid color background without the resizing issues outlined above effecting the email.
- HTML emails should always be programmed with a table layout. This table feature will ensure pixel perfect emails and consistent viewing and should be utilized as often as possible.
- In general, simplicity is the key to an effective, flexible email template. For HTML emails, strive to eliminate excess clutter or complicated coding wherever possible.
Recommendations for landing page templates:
- For landing page templates there is more elasticity in terms of font choice, but the easiest and safest is still to use the web safe fonts from the link above.
- Another option or alternative is to embed fonts from an online web font service. A few of the most reliable services are:
- For best results, it is recommended that landing page size should be around 1000px wide.
- In contrast to email templates, background images are fine for landing page templates and should not cause issues.
- Landing pages should have a fixed width (as mentioned above, around 1000px wide). Marketo cannot natively handle responsive layouts, but this is something that can be solved with additional coding work.
- If desired, to maintain look and feel, landing pages can have part of the background area extend outside the main width of the landing page to fill the width of the browser window. It gets notably more complicated if there are two separate background images. Again, simplicity is key to a successful landing page template.
- In terms of landing page content layout and display on mobile devices, it is best to place forms near the top of the landing page in a column separate from the main content (Minimize the amount of content above the form).
These recommendations are brief best-practices that will help in creating email and landing page templates that fulfill broad and comprehensive use-cases. There are always corner-cases or highly specified templating needs where these best practices may not apply. For more pointed or direct questions about creating templates, general information on template creation, or help with developing and implementing templates of your own, please contact Elixiter.