Logo

‘View this online’ text

link 1 link 2 link 3 link 4 link 5 link 6

EMAIL TEMPLATE
DESIGN Image
Agillic Dialogue Emails are built by inserting a variation of ‘blocks’ from a pre-configured HTML template. Our developers
build these template ‘blocks’ from a Photoshop file (PSD) which is why it is important that this file reflects exactly how the
email should look when it reaches your end user.

GENERIC TEMPLATES
To show you how Agillic Dialogue will eventually understand your PSD file the ‘blocks’ in the example on the right have
been put into green dashed boxes. Emails are built by adding these different ‘blocks’ together. For example in one email
you might choose to have what is given in the example on the right, but in another you might choose to place Heading 1 at HEADING 1
the top, followed by 2 half width images and then paragraph text. The options are endless.

For this reason it is important to ‘future proof’ your template by creating a generic template with blocks that can be used Heading 2
for different purposes. So when designing the template think about what kinds of content you need to accommodate so that
a new template or new blocks don‘t have to be created for every email.
paragraph text paragraph text paragraph text paragraph text paragraph
text paragraph text paragraph text paragraph text paragraph text link in
paragraph paragraph text paragraph text paragraph text paragraph text
ONLY SOME OF IT’S EDITABLE paragraph text paragraph text paragraph text paragraph text paragraph
text paragraph text paragraph text paragraph text paragraph text para-
It is important to keep in mind that only some visual elements of your blocks are easily editable (without recoding the graph text paragraph text paragraph text paragraph text paragraph text
template) in Agillic Dialogue. While the interface offers options for formatting the text and HTML can be added to many paragraph text paragraph text
elements, there are some parts of your email that won’t be editable. The colour of the background, for example, cannot be
edited in the interface. It is therefore important to create visual elements that don’t need to be customised for every email.

MOBILE FIRST
With mobile email opens increasing, thinking about the mobile layout first is important. Consider a narrow template width
for mobile screens (for example 320px) and a width of between 600-650px for desktops. The desktop width will be true to
the size you specify however the mobile width will be used as a guideline to understand your desired layout because mobile
templates are designed to be fluid so that they can accommodate a variety of different devices. Contact us to learn more
about mobile first email best practices.
Image Image

CUSTOM FONTS
You can use your own fonts provided that you package them in woff2 format with the delivery of your files. You can also
specify a Google Font for us to use. Otherwise please make sure to use an accessible web and email safe font in your Footer text footer text Footer text footer text Footer text footer text Footer text
design. In all cases please remember to designate backup fonts. footer text Footer text footer text
FILE FORMATS ... ON A SCALE OF OUR DEVELOPERS’ HAPPINESS

HTML PDF / JPEG / PNG

If you are NOT providing a Photoshop or HTML file, kindly fill out the form below
Thank you! If you are providing a PSD you can help our developers
further with the following: Description of font family and backup fonts eg. Lato (primary) / Description of font sizes and line heights for all text types in
Arial (backup) pixels eg. Headline - 12px / 22px
Avoid flat images, use photoshop
Try to create all the graphical elements in Photoshop itself rather than using placed
images. This allows for more precision as our developers can see all the settings.

Layers, layers and more layers

Layers make your Photoshop file organised and more straightforward for our developers
to understand and implement in HTML. They also make it easier to optimise the design
Description of colors in hex format for all graphical elements eg. Description of element sizes and margins in pixels
for various clients and devices.
Headline - #ff33ff

Pixel perfect
Our developers will try to use the exact dimensions given in your photoshop file so make
sure that everything you have designed is pixel perfect.

REMEMBER TO PACKAGE...

• A custom font in woff2 format, if you’re using one

• Original images included in the template design eg. logo files, static banner
images
EMAIL CLIENT SUPPORT AND OPTIMISATION

The rendering of an email varies a lot from client to client so there is no guarantee that an email looks exactly the same across them all. Listed
below are the email clients that Agillic email templates are optimised for. These email clients occupy 90% of the email client market share.

MOBILE CLIENTS DESKTOP CLIENTS WEB-BASED CLIENTS

iOS Apple Mail AOL Mail Outlook.com

iPad Retina iOS 8 Apple Mail 7 OS X 10.9 AOL Mail Explorer Outlook.com Explorer
iPad Mini iOS 8 Apple Mail 8 OS X 10.10 AOL Mail Firefox Outlook.com Firefox
iPhone 5s iOS 7 AOL Mail Chrome/Safari Outlook.com Chrome/Safari
iPhone 5s iOS 8
Lotus Notes
iPhone 6 iOS 8 Lotus Notes 8.5 Windows 7 Gmail Yahoo Mail
iPhone 6 Plus iOS 8 IBM Notes 9 Windows 7 Gmail Explorer Yahoo Mail Explorer
iPhone 6 iOS 9 Gmail Firefox Yahoo Mail Firefox
iPhone 6 Plus iOS 9
iPhone 6s iOS 9
Thunderbird Gmail Chrome/Safari ✓ Yahoo Mail Chrome/Safari
Thunderbird 38.2 Windows 7
iPhone 6s Plus iOS 9 Google Apps GMX.de
Google Apps Explorer GMX.de Explorer
Outlook
Windows Mobile Google Apps Firefox GMX.de Firefox
Outlook 2000 Windows 7
Windows Phone 8 Windows 8.0 Google Apps Chrome/Safari GMX.de Chrome/Safari
Outlook 2002 Windows 7
Outlook 2016 OS X 10.10
Outlook 2003 Windows 7
Outlook 2007 Windows 7 Office 365 Web.de
Android Office 365 Explorer Web.de Explorer
Outlook 2010 Windows 7
Android 4.4 Android 4.4 Office 365 Firefox
Outlook 2011 OS X 10.10 Web.de Firefox
Android 5.1 Android 5.1 Office 365 Chrome/Safari
Outlook 2013 Windows 7 Web.de Chrome/Safari
Android 6.0 Android 6.0
Outlook 2016 OS X 10.10
Outlook App Android 4.4
Outlook App Android 5.1

Unless otherwise specified, email clients that do not feature on this list will not be taken into consideration when an email is developed. If you would like optimisation to
an email client that does not feature on this list, we need time to discuss the possibilities and obstacles, and decide whether it’s possible to deliver a satisfying result.
Any work done on templates to fit clients outside of the list is not included in the original pricing for development.

We monitor changes to email clients all the time and will give you notice about any rendering issues in your email templates and propose solutions to fix them. However,
any work to accommodate these changes is not included in the original pricing.

Questions? Write to [email protected]