Challenge Overview
Welcome to "Trestle Responsive Newsletter UI Prototype Challenge". In this challenge, we need your help to create responsive HTML5 prototype for our newsletter platform that will be sent to sales staff to inform them about latest information about new products, promotions, events, deadlines, technology, and other stuff related to our business.. Read more details below and Join with us NOW!!
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive HTML5 prototype for our newsletter platform which will be use by our sales staff to inform them about latest information about new products, promotions, events, deadlines, technology, and other stuff related to our business.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) for our Newsletter platform.
- Create 2 different prototype for this challenge:
1. Create Best practice responsive HTML prototype for our email newsletter (for email purpose)
2. Create HTML5 website focus on Desktop, Tablet and Mobile version in this challenge.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- For Mobile navigation, please use screen "00_A_Navigation", "00_B_Search".
- Replicate the design of the approved Storyboards (PSD Files) for all pages. Use the desktop version as base design for the prototype. If there is a design differences between desktop, tablet and mobile, please use the desktop version. The site & newsletter need to be responsive, so the mobile and tablet versions should be used as a guide, but the overall design should be like the desktop.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
01. Email Newsletter Page
- Storyboard References:
-- Desktop: 02_Email Template, 02b_Email Template
-- Tablet: 01_Email Template
-- Mobile: 01_Email Template
- Create an email newsletter page that will be use as HTML email template which will be sent to ous sales staff emails.
- Please create both email templates (02_Email Template, 02b_Email Template) page
- This email newsletter will be send every period of time to user (Bi-weekly).
- All the links and button in the email will redirect user to Newsletter web.
- The red alert message and information Message at the top area (red box) will only appear on the email and visible when we have an information to be published and need user attention. This will be a WYSIWYG area to allow text, links and images. Please make sure that we can hide/show this area easily in the prototype.
- When image not displayed by default, the layout and text should not break up.
- Nine specie/category buttons/links will appear on the email. Not every bi-weekly edition will have content for every specie. In the case there is no content, the button/link will be disabled and grayed out.
- All Specie/Category content can be found below:
-- Cattle
-- Horse
-- Dairy
-- Swine
-- Backyard Poultry
-- Specialty & Companion
-- Show Animals
-- PMI Pet
-- Mazuri
- Other Links:
-- The Farm VIP
-- Business Updates
-- The Trestle Newsletter PDF Version
-- BusinessLink Newsletter PDF
- Please create this page using best practice for HTML email. Use this references as starting point/consideration to create HTML email:
-- http://templates.mailchimp.com/getting-started/html-email-basics/
-- https://www.sitepoint.com/how-to-code-html-email-newsletters/
-- https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770
-- https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
02. Homepage
- Storyboard References:
-- Desktop: 02_Newsletter Homepage
-- Tablet: 02_Newsletter Homepage
-- Mobile: 02_Newsletter Homepage
- User will see this screen when access the newsletter website directly via URL/browser.
- Notice that there are differences between desktop and tablet version for the specie/category boxes arrangement. Please use desktop design as base for both desktop and tablet prototype.
- The hamburger menu should be clickable and show navigation like shown in mobile version "00_A_Navigation".
- Provide hover and click state design for each link and buttons in all devices.
03. Archive Page
- Storyboard References:
-- Desktop: 03_Achive Pages_TAB1, 04_Achive Pages_TAB2
-- Tablet: 03_Achive Pages_TAB1, 04_Achive Pages_TAB2
-- Mobile: 03_Achive Pages, 04_Achive Pages Filter
- Chronological list of PDF version of past newsletters with a short abstract accompanying each link to describe each archive entry.
- Archive will have a full text search.
- The newsletter PDF that links from each page will be a compilation of all specie newsletters for that edition. Generated on click.
- The archive will only maintain the PDF version of past editions and will be searchable by keyword.
- Filter and search should works and able to filter the archive content (simulate dummy content)
- There will be 2 tabs available in this screens "Newsletters" and "Business News", create both tab
- Each archive list can be viewed online or downloaded. Please provide an alert modal window to notify user about the interactions.
04. Newsletter Swine Page
- Storyboard References:
-- Desktop: 05_Newslette_Swine Section
-- Tablet: 05_Newslette_Swine Section
-- Mobile: 05_Newslette_Swine Section
- User can access this page by clicking one of the specie category in the homepage or from specie box in the email newsletter.
- Web based newsletter that contains news stories and event reminders specific to the specie clicked on in email received
- Notice that the desktop version and tablet version have different design, please use the desktop version as base for both devices.
- All 9 specie/category (mentioned in email newsletter requirements) will share the same template layout (only content changes).
- User will be able to check the latest and detailed information about the specie/category from this screen.
- There should be a navigation/menus to go to other specie/category and other links from this screen.
- Chronological list of past, all specie newsletter with links to PDF versions (Searchable).
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- 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, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use Bootstrap or Zurb Foundation for this challenge.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
- Email client Software (for HTML newsletter page)
Documentation Provided:
- Storyboards
- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Background Overview
In this challenge, we need your help to create responsive HTML5 prototype for our newsletter platform which will be use by our sales staff to inform them about latest information about new products, promotions, events, deadlines, technology, and other stuff related to our business.
Primary Goal
- We are looking for your help to help us create responsive UI Prototype (front end only) for our Newsletter platform.
- Create 2 different prototype for this challenge:
1. Create Best practice responsive HTML prototype for our email newsletter (for email purpose)
2. Create HTML5 website focus on Desktop, Tablet and Mobile version in this challenge.
Competition Task Overview
The main task of this competition is to develop Responsive HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
Screen Requirements
General Requirements:
- For Mobile navigation, please use screen "00_A_Navigation", "00_B_Search".
- Replicate the design of the approved Storyboards (PSD Files) for all pages. Use the desktop version as base design for the prototype. If there is a design differences between desktop, tablet and mobile, please use the desktop version. The site & newsletter need to be responsive, so the mobile and tablet versions should be used as a guide, but the overall design should be like the desktop.
- Your pages must match the colors and structure of the provided storyboards.
- Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly.
- Ensure you submission clear of HTML and CSS Validation error and warning.
- Test in all the required browsers.
01. Email Newsletter Page
- Storyboard References:
-- Desktop: 02_Email Template, 02b_Email Template
-- Tablet: 01_Email Template
-- Mobile: 01_Email Template
- Create an email newsletter page that will be use as HTML email template which will be sent to ous sales staff emails.
- Please create both email templates (02_Email Template, 02b_Email Template) page
- This email newsletter will be send every period of time to user (Bi-weekly).
- All the links and button in the email will redirect user to Newsletter web.
- The red alert message and information Message at the top area (red box) will only appear on the email and visible when we have an information to be published and need user attention. This will be a WYSIWYG area to allow text, links and images. Please make sure that we can hide/show this area easily in the prototype.
- When image not displayed by default, the layout and text should not break up.
- Nine specie/category buttons/links will appear on the email. Not every bi-weekly edition will have content for every specie. In the case there is no content, the button/link will be disabled and grayed out.
- All Specie/Category content can be found below:
-- Cattle
-- Horse
-- Dairy
-- Swine
-- Backyard Poultry
-- Specialty & Companion
-- Show Animals
-- PMI Pet
-- Mazuri
- Other Links:
-- The Farm VIP
-- Business Updates
-- The Trestle Newsletter PDF Version
-- BusinessLink Newsletter PDF
- Please create this page using best practice for HTML email. Use this references as starting point/consideration to create HTML email:
-- http://templates.mailchimp.com/getting-started/html-email-basics/
-- https://www.sitepoint.com/how-to-code-html-email-newsletters/
-- https://webdesign.tutsplus.com/articles/build-an-html-email-template-from-scratch--webdesign-12770
-- https://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978
02. Homepage
- Storyboard References:
-- Desktop: 02_Newsletter Homepage
-- Tablet: 02_Newsletter Homepage
-- Mobile: 02_Newsletter Homepage
- User will see this screen when access the newsletter website directly via URL/browser.
- Notice that there are differences between desktop and tablet version for the specie/category boxes arrangement. Please use desktop design as base for both desktop and tablet prototype.
- The hamburger menu should be clickable and show navigation like shown in mobile version "00_A_Navigation".
- Provide hover and click state design for each link and buttons in all devices.
03. Archive Page
- Storyboard References:
-- Desktop: 03_Achive Pages_TAB1, 04_Achive Pages_TAB2
-- Tablet: 03_Achive Pages_TAB1, 04_Achive Pages_TAB2
-- Mobile: 03_Achive Pages, 04_Achive Pages Filter
- Chronological list of PDF version of past newsletters with a short abstract accompanying each link to describe each archive entry.
- Archive will have a full text search.
- The newsletter PDF that links from each page will be a compilation of all specie newsletters for that edition. Generated on click.
- The archive will only maintain the PDF version of past editions and will be searchable by keyword.
- Filter and search should works and able to filter the archive content (simulate dummy content)
- There will be 2 tabs available in this screens "Newsletters" and "Business News", create both tab
- Each archive list can be viewed online or downloaded. Please provide an alert modal window to notify user about the interactions.
04. Newsletter Swine Page
- Storyboard References:
-- Desktop: 05_Newslette_Swine Section
-- Tablet: 05_Newslette_Swine Section
-- Mobile: 05_Newslette_Swine Section
- User can access this page by clicking one of the specie category in the homepage or from specie box in the email newsletter.
- Web based newsletter that contains news stories and event reminders specific to the specie clicked on in email received
- Notice that the desktop version and tablet version have different design, please use the desktop version as base for both devices.
- All 9 specie/category (mentioned in email newsletter requirements) will share the same template layout (only content changes).
- User will be able to check the latest and detailed information about the specie/category from this screen.
- There should be a navigation/menus to go to other specie/category and other links from this screen.
- Chronological list of past, all specie newsletter with links to PDF versions (Searchable).
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- 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, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use Bootstrap or Zurb Foundation for this challenge.
Browsers Requirements:
- Desktop: IE11 above, Latest Firefox, Safari & Chrome Browsers
- Tablet and Mobile: Android Browser, Mobile Chrome & Firefox, Safari Mobile
- Email client Software (for HTML newsletter page)
Documentation Provided:
- Storyboards
Final Submission Guidelines
Submission Deliverables:- A complete list of UI prototype deliverables can be viewed at: UI Prototype Tuorial
Final Submission:
- For each member, the final submission should be uploaded to: Online Review Tool