Challenge Overview
Project Overview
This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.
The goal of this challenge is to build MailChimp Template for CSFV Newsletter.
Competition Task Overview
Key Requirements
-
Create a new responsive Mailchimp template using the provided storyboard
-
Test in all the required mail clients and browsers supported by MailChimp.
-
Provide ALL installation step by step, create details notes needed for your Mailchimp template.
-
Replicate the design of the approved Storyboards (PSD Files) for both Desktop and Mobile versions.
-
Your template must match the colors and structure of the provided storyboards.
-
Ensure your pages display correctly in all Mail clients and browsers. It is your responsibility to make sure the newsletter display correctly.
-
Ensure you submission clear of HTML and CSS Validation error and warning.
-
All content (headings, text, etc...) should be dynamic and editable via the Mailchimp code editor.
Detailed Requirements
Editable Template
The Mailchimp Template must implement all the features in this article http://kb.mailchimp.com/article/how-do-i-work-with-repeatable-content-blocks :
-
Repeat or delete a content block
-
Work with variable content blocks
-
Drag and drop content blocks
-
Hide or show a content block
Repeat or delete a content block
-
We have two types of blocks in the provided Storyboard :
-
One column block
-
Two columns blocks
-
-
Each block should have repeat and delete controls.
-
Don’t hardcode any image, use placeholder for images and content as shown in the article.
-
Both block types must be fully editable :
-
Single column block, we have the following editable content :
-
Video screenshot (the play button will be part of the screenshot, don’t consider it separate image)
-
Video title
-
Video Description
-
All the three above should be considered a single block with drag/drop it. and must be editable via Mailchimp design/code editor.
-
-
Two columns blocks, we have two widgets, each widget should be editable separately :
-
Widget header icon
-
Widget header title
-
Widget image placeholder
-
Widget content title
-
Widget content description
-
As shown in the Storyboard not all sections will always be available in the widget. Ability to delete some sections, edit styling of these sections via MailChimp editor is a MUST.
-
Both widgets will be a single draggable block.
-
-
Work with variable content blocks
-
As shown in the provided Storyboard we have different content structure for two columns blocks, build these blocks to leverage the variable content blocks concept.
Drag and drop content blocks
-
All blocks should be draggable, except header and footer.
-
The blocks container structure should allow dragging any block anywhere within the container.
Hide or show a content block
All blocks within the container area must support this feature.
Header
-
The header won’t be draggable/hidden/deleted, we only need the content visible in the header as shown in the storyboard to be fully editable.
Footer
-
The section from “Get Connected” and beneath it will be part of the Footer.
-
The 4 images in the footer will be clickable, the links and the images must be editable.
-
“Subscription Info” and “Have comments or suggestions?” both are separate sections, must be fully editable from Mailchimp editor.
-
“Share This Newsletter” icons are clickable, the images and links must be editable from Mailchimp.
-
“Unsubscribe” link, support email, and user email in the footer sections must use the Mailchimp merge tags.
Responsive Template
As in the provided Storyboard, the template must support both Desktop and Mobile versions.
How to build the template
It is discouraged to build the template as any regular UI prototype same as standard UI Prototype challenges hosted in TopCoder. It is highly recommended to follow Mailchimp guidelines/articles Create custom template. Basically you can either build the tempalte directly from within the Mailchimp template editor and export it. Or you can export a sample Mailchimp template from existing Mailchimp predesigned templates and use it as basis for your work. You can find the templates by doing the following :
-
Go to Campaigns from left side navigation menu
-
Go to saved templates by clicking on “Saved Templates” on the upper right side header navigation.
-
Click “Create Template” button in the “Saved Templates” page.
References and Helpful links
Specific HTML/CSS/JavaScript Requirements
-
You MUST use HTML and CSS
-
No Javascript to be used in this template.
-
Follow this article about guides for how to use CSS in email http://kb.mailchimp.com/article/css-in-html-email
-
Use Inbox Inspector to test your work http://kb.mailchimp.com/article/how-do-i-use-the-inbox-inspector
-
Follow this link for the supported CSS in email clients http://templates.mailchimp.com/resources/email-client-css-support
Browser/Email Clients/Mobile Requirements
-
All versions supported by MailChimp, Inbox Inspector covers them all http://kb.mailchimp.com/article/how-do-i-use-the-inbox-inspector
Documentation Provided
Storyboard attached in the forums.
Testing your submission
Reviewers will upload your submitted template MailChimp, test it by creating campaigns with different set of blocks and content. Mainly we will try to replicate the exact content of the provided Storyboard.
Final Submission Guidelines
Submission Deliverables
- A Mailchimp template ready to be imported and used in Mailchimp. Test your template that it can be imported successfuly in mailchimp and displayed properly before submitting it.
- Guide document describing step by step the deployment process and verification process.
- Include all images used in the Storyboard in a separate folder to be used in future to build campaigns.
Submission Guidelines
Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review.