Challenge Overview
Project Overview:
Welcome to AppXpress Customer Email Template. This challenge is to build HTML and CSS codes only for Email Template. The challenge goal is to create an email template to be viewed on email engines and for desktop browsers.
You will need to build the email template based on required storyboard and make sure they looks good on required email engine listed below. Read more detail requirements on Competition Task Overview.
Competition Task Overview:
The main task of this Bug Race is to create the AppXpress Customer Email Template based on the provided PSD Storyboard design. We are looking for an email template that works and looks consistent on required browsers as stated in the details below.
Read the specification details below; please let us know if you have questions.
EMAIL TEMPLATE GOALS:
- The result of this contest will be 1 HTML file and sliced images for each page.
- Email templates should use a fluid layout.
- Use TABLE tag instead of DIV for email template.
- You need test how email template renders. You can use litmus and mailchimp. FYI: these 2 apps are not free to use, we need your help to find another free app to use.
- We need pixel precisions on every UI elements padding/margin.
- Optimize images for fast download times.
- Avoid using background images as they are not supported by the email clients, use CSS background color instead whenever possible.
- Add height and width attribute to the image tag, this ensures that your design doesn't get squeezed or bleeds on the edges.
- Always use alt attribute of an image so that if the reader doesn't download the images or images fails to load, the email still gives the required information.
- Always use border attribute of an image (border="0") as few email clients and browsers add borders to images by default.
- Avoid Image Sprites.
Link References:
- 16 Tips for Troubleshooting Your HTML Email
- Ultimate Guide
- 20 Email Design Best Practices and Resources for Beginners
AppXpress Customer Email Templates:
1. AppXpress Customer Email – Receipt:
- Screenshot: AppXpress Customer Email - Receipt.png.
- Email template layout consists of "Header", "Body" and "Footer".
- All text should be editable.
- Link AppXpress logo and links to https://appxpress.com/
- Facebook icon in footer should link to https://www.facebook.com/appirio
- Twitter icon in footer should link to https://twitter.com/appirio
2. AppXpress Customer Email – Basic Text Plus Image:
- Screenshot: AppXpress Customer Email - Basic Text Plus Image.png.
- Email template layout consists of "Header", "Body" and "Footer".
- All text should be editable.
- The buttons can be dead links for now.
- Link AppXpress logo and links to https://appxpress.com/
- Facebook icon in footer should link to https://www.facebook.com/appirio
- Twitter icon in footer should link to https://twitter.com/appirio
3. AppXpress Customer Email – Basic Text:
- Screenshot: AppXpress Customer Email - Basic Text.png.
- Email template layout consists of "Header", "Body" and "Footer".
- All text should be editable.
- Link AppXpress logo and links to https://appxpress.com/
- Facebook icon in footer should link to https://www.facebook.com/appirio
- Twitter icon in footer should link to https://twitter.com/appirio
4. AppXpress Customer Email – Three Column:
- Screenshot: AppXpress Customer Email – Three Column.png.
- Email template layout consists of "Header", "Body" and "Footer".
- All text should be editable.
- Link AppXpress logo and links to https://appxpress.com/
- Facebook icon in footer should link to https://www.facebook.com/appirio
- Twitter icon in footer should link to https://twitter.com/appirio
Client Priorities (The items that are considered highest prototype priorities):
- Creating quality and efficient HTML/CSS code that works in all the requested email engines.
- All elements should be pixel precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required email engines.
Submission Deliverable's:
The following templates are required:
1 HTML Email Templates + sliced images folder for each page.
Specific HTML/CSS/Javascript Requirements:
Email Requirements:
- Your HTML code must be XHTML 1.0 Strict compliant.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables for page layout.
- CSS need to be implemented online.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent).
- Label all CSS or HTML hacks with explanations so others will understand.
JavaScript Requirements:
No JavaScript required in this challenge.
Email Engines Requirements:
- Apple Mail 4
- Apple Mail 5
- Apple Mail 6
- Gmail (Chrome)
- Gmail (Explorer)
- Gmail (Firefox)
- Hotmail (Chrome)
- Hotmail (Explorer)
- Hotmail (Firefox)
- iPad
- iPhone
- Outlook 2003
- Outlook 2007
- Outlook 2010
- Outlook 2011
- Outlook 2013
- Outlook.com (Chrome)
- Outlook.com (Explorer)
- Outlook.com (Firefox)
- Yahoo! Mail (Chrome)
- Yahoo! Mail (Explorer)
- Yahoo! Mail (Firefox)
Desktop Requirements:
- IE8
- IE9
- IE10
- Safari
- Firefox
- Chrome
Documentation Provided:
PSD Files
- AppXpress Customer Email Template PSD Source Graphics (AppXpress Customer Email Template.zip)
Final Submission Guidelines
Submission Deliverables:
- A complete list of deliverables can be viewed in the UI Prototype Competitions Tutorial.
Final Submission:
- For each member, the final submission should be uploaded to the Online Review Tool.