Challenge Overview
Challenge Objectives
-
Develop email templates: HTML/SCSS
-
Test email templates: Test email rendering in major email clients
Project Background
-
Topcoder Connect is client facing application of Topcoder. Customer use Topcoder connect to input requirements of their projects, then managers and copilots take it from there. You can see Topcoder Connect in action here: https://connect.topcoder-dev.com
-
Each event in the project creates notifications that are delivered in two modes: single email or bundled - accroding to user preferences. So far we have sent raw text emails
Technology Stack
-
HTML/SCSS
-
Major email clients
Code access
As we are developing new email prototypes, you should start from a clean code base.
1. Email templates (Major requirement)
Marvel app is available here, Sketch assets are available here and MeasureIt spec is available here.
There are 4 screens in scope: individual and bundled notifications for both mobile and dekstop screens. All the scss should be in separate files, and you should use css inliner to generate the demo pages - there should be no css in demo pages (except a link to the css files). You can use this nodejs library to inline the styles for the demo pages.
Designing email templates can be tricky since email clients render the content differently and don't support some styling features. Here is a useful guide with tips and best practices for designing email templates
The email clients we are targeting (and demo pages should be tested against) are: Gmail, Yahoo, Outlook, Gmail on Android, Mail app on iOS, Outlook 2010+, Mail app on MacOS and Thunderbird.
What To Submit
-
Project code
-
A README.md containing details on how to setup the environment and generate the demo pages
-
A short demo video