HTML Email Template for Northstar UI guidelines
Page 1 of 17
I. General Requirements ... 1
II. Visual Specifications ... 2
III. Email template types (purpose of the email) ... 2
IV. Email template formats ... 2
V. Main Elements ... 6
Pre-header ... 7
Header ... 7
Email Body ... 8
CTA (Call to Action)... 9
Sidebar ... 11
Email Wrapper ... 12
Contact Us ... 13
Company Footer ... 13
VI. Email Template Design for Mobile ... 14
Mobile Design Approach ... 14
General Guidelines ... 15
Mobile Layouts ... 15
VII. References ... 17
VIII. Document details ... 17
I.
General Requirements
Currently we send emails in Text format to our customers. Text emails have higher unsubscribed rates, lower click-through rates, and in general, a lack of responsiveness. They are considered outdated and reflect badly on the company sending them.
Effective email design ensures that your subscribers will see the design & layout that you want them to see. Due to the variety of email clients and limited support of HTML5 and CSS in many email clients, email design has a number of issues with some of the standard web design practices, and therefore there are some very specific rules & dos/don'ts when it comes to email design.
The CAN-SPAM Act of 2003, a law that sets the rules for commercial email, establishes requirements and compliance guidelines for commercial messages, gives recipients some rights and spells out tough penalties for violations.
Some of the requirements are (see links to more information under “Resources”): Don’t use deceptive or misleading subject lines or headers
Tell recipients how to opt out of receiving future emails For promotional emails - Identify the email as such
HTML Email Template for Northstar UI guidelines
Page 2 of 17
II. Visual Specifications
Please refer to the “Grid and Templates” document.
III. Email template types (purpose of the email)
• General
• Notification
• Promotional
IV. Email template formats
• Generic template
• Data (Table) template
HTML Email Template for Northstar UI guidelines
HTML Email Template for Northstar UI guidelines
HTML Email Template for Northstar UI guidelines
HTML Email Template for Northstar UI guidelines
Page 7 of 17
Pre-header
• Email pre-header is the top of the email where the company logo resides. • It is usually part of the overall email wrapper design.
• Can contain the company logo, partner logo, company’s marketing tagline, company mantra or a descriptor of the email.
Example:
Header
• Email header is where the main headline, sub-headline, call to action, and imagery resides. • This section should be the most prominent and attractive part of the email.
HTML Email Template for Northstar UI guidelines
Page 8 of 17
Email Body
• Is also referred to as content area.
• Is where the salutation, main email copy/ content reside. • Usually it ends with a Call to Action.
Example:
Do’s:
Only include essential elements that communicate your brand or product and main message.
Simple layouts are best – the more complicated the design the more compatibility issues will surface, which will increase development, testing and debugging time.
HTML Email Template for Northstar UI guidelines
Page 9 of 17 Avoid superfluous elements that might pull a reader’s attention away from your central
message.
Do not embed videos and/or Flash. Many email clients will not support such code and many spam & virus detection programs will flag your email as spam/malicious. Do not use background images as they are not fully supported.
CTA
(Call to Action)• Should be a graphical button with text meant to prompt a user to click and continue down a conversion funnel.
• The prime purpose of the email is to convince the recipient to click the CTA.
• The CTA should be prominent, distinct and clearly visible in the email header as well as the end of the email body.
HTML Email Template for Northstar UI guidelines
HTML Email Template for Northstar UI guidelines
Page 11 of 17
Sidebar
Can be used for the following purposes:
• Promotional – show product box shot, pricing, CTA • Partnership – show award icons, partnership status, etc.
• Events/Tradeshows/Webcast – Show event time, location, schedule, meeting title, agenda, and/or registration CTA.
• Whitepaper/Reports/Datasheet – Show imagery that illustrates the document and a CTA
Examples:
Do’s:
• Use clear design guidelines for sidebar headline, imagery, CTA, font type and size; • Use consistent and flexible designs that can be used in the same manner for multiple
HTML Email Template for Northstar UI guidelines
Page 12 of 17
Email Wrapper
• Is the outer shell of the main email body. • It usually includes the email pre-header.
• It is a container that wraps around the email header and email body.
• The legal footer, disclaimer, unsubscribe link, privacy policies, social network links will reside outside of the email wrapper
Do’s:
Should be consistent and align with IPA theme/design and/or color palette.
Don’ts:
HTML Email Template for Northstar UI guidelines
Page 13 of 17
Contact Us
This section is optional and is the standard Symantec Contact Us footer.
Example:
Do’s:
Although optional, please do use it for transactional emails such as order confirmation.
Company Footer
This section needs to incorporate compliance elements for CAN-SPAM act of 2003.
Example:
Do’s:
Display company’s name and or logo Display company’s address
Display “Unsubscribe” link
HTML Email Template for Northstar UI guidelines
Page 14 of 17
VI. Email Template Design for Mobile
Mobile Design Approach:
When it comes to mobile, there are two main design approaches for HTML emails:
• Mobile-optimized email: HTML email designed specifically for small mobile devices that render designs at 320–480 pixels.
Advantages:
o Delivers a positive experience for most subscribers on mobile and desktop screens, and is a solid strategy for mobilizing your email program without significantly increasing the time or money invested in the program.
Disadvantages:
o Even though it renders on desktop screens it limits the experience you can provide to your desktop readers because it’s designed to render on a small screen and therefore looks small when opened from a desktop, and doesn’t utilize all of the available desktop screen real estate.
o The narrowness of the design limits design layout options
• Responsive email: composed of one HTML file that uses CSS media queries to listen for a device’s screen width.
Advantages:
o Adjusts the screen width dynamically.
o Copy and imagery can be wrapped, hidden, resized or optimized when the layout reaches a specified width.
o Results in a better user experience than other approaches and has been shown to facilitate higher click-through conversion when aligned with the right audience.
Disadvantages:
o In order for this to happen, the mobile email app must recognize the responsive media queries (which the native email apps on iOS, Android and some newer BlackBerry devices currently do).
o The majority of Windows Phones do not support responsive media queries, although future updates may include support. When a responsive email is opened on a device that does not recognize the media queries, the email simply opens as any other basic HTML email would on a mobile screen.
HTML Email Template for Northstar UI guidelines
Page 15 of 17
General Guidelines
Do’s:
Keep mobile-optimized emails short and simple.
Use clear messaging and imagery that help convey the primary message.
Strip away non-essential elements Straightforward, uncluttered messaging is the most effective way to get these subscribers to act.
Lighten your email file sizes - The optimal email weight for mobile is 20K or less. Some subscribers pay per megabyte when downloading content, so sending lighter files
shows respect for your customers.
Ensure that your most valuable content is within the top left 320-pixel area of your email. Ensure that CTAs are easy to tap (location and size wise).
Used mobile-optimized assets.
Don’ts:
Avoid Flash videos as they do not play on iPhones.
NOTE: Mobile optimized email may mean presenting a mobile-optimized landing page!
