Responsive TC-CS Help Center UI Prototype

Welcome to CS-TC Help Center UI Prototype Contest. We just completed a storyboard to get the inital flow for the large TopCoder-CloudSpokes Help Center. For this contest, we need your help in transforming the storyboard to a responsive UI Prototype based on the attached design. This UI Prototype will be transformed to Wordpress Theme on next phase.

Page Requirements
Below are the required pages from storyboard

General Rules :

• Update provided UI Prototype
• Create new CSS and JS file(s) for these pages, and don't edit any existing assets
• header, footer, and main navigation should be handled by existing CSS and JS files
• See [nav-explaination.png] and and  [navigation.xls] file to understand about navigation
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Ensure you submission clear of HTML and CSS Validation error and warning
• Watch word typos in every place including the source code. Make sure they have correct meaning
• Layout (background) should be fluid, depend on browser width
• Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
• Please provide animated Glowing link for clickable text
• Modal window should be center aligned.
• Clicking overlay area (outside of modal window) should close modal window
• Please provide Mobile view only for Help Center Home right now. the others will be on next phase 
• Please add "< prev" link next to existing "Next >" link even though storyboard don't have it
• Zebra style should be implemented by JS
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example : http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype

 

Help Center Home:
This is main page in the help-center, it will be a gateway for the user to proceed to other sections of the help-center
output : help-home.html

• This page will play a very important role in the help-center. 
• Mobile view should be implemented for this page, storyboard is [Mobile_01_home_2.png]
• Left-side navigation contain mainly five sections to start with; they are Design, Development, Data/Algorithms, Copilots/Reviewers, and TopCoder University.
• Scrollbar of left-side navigation should match to storyboard
• Banner should be as image. Clicking on any sections below banner will change the banner 
• Clicking on any sections left-side navigation will display Section template that will be  described below
• Clicking on "FAQ" text will display FAQ Home that will be described below
• Clicking on any sections on FAQ widget will display FAQ template that will be  described below
• Clicking Submit Tip Now button will open Submit Tip template that will be  described below

Section:
This is section page
Output : help-section-design.html and help-section-copilot.html, we will only build design and copilot section for now. and the other sections will be via Wordpress Theme Build later

• Left-side navigation will display topics and also sub-topics within current section. each section will have different topics and subtopics
• Banner should be as image element and banner on this page is different to banners at home page
• Should support grid and list view layout, and layout changes will be by JS instead of open another page
• Video thumbnails at right-side should be as youtube thumbnail. Please display the following thumbnail : http://img.youtube.com/vi/fFJ4rnEQAyI/0.jpg, http://img.youtube.com/vi/Grg4ZCTXRNY/0.jpg, http://img.youtube.com/vi/ejZawFKeXg4/0.jpg
• Click on a "Topic Name" (example: In studio section, topics names are Competition Types, Tournaments etc..) from the left-side navigation will display Topics page that will be describe below

 

Topics:
Output : help-topics.html

• Below the topic summary, we will list all the Sub-topics within that topic. clicking on any Sub-topics will open Sub-topics detail page
• Should Support both grid and list view. there is storyboard for grid view, but please reuse grid view layout from another page

Sub-Topics:
Output : help-sub-topics.html

Search Results:
Output : help-search-result.html

• Autocomplete on search box should work via AJAX and data should from dummy JSON file
• Please show an animated loading icon below search box while data is being loaded. see [autocomplete-loading .png]
• Click on the magnifier icon in the search bar to see the results, see [05_Search Result.png]

FAQs home :
Output : help-faq-home.html

• Clicking on "Ask a Question" will open form in modal window
• Please display simple "Thanks for Submitting Lorem Ipsum ..." message after sending data via AJAX
• Clicking on "FAQs section" will open FAQ detail page below

 

FAQ detail :
Output : help-faq-detail.html

Member Tips :
Output : help-member-tip.html

• This page will be similar to http://community.topcoder.com/studio/help/submitting-to-a-contest/member-tips/
• Should support grid and list view
• Clicking on "Submit a Tip Now" will open form in modal window
• Validation input should work
• Please display simple "Thanks for Submitting Lorem Ipsum ..." message after sending data via AJAX.

 

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• 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 lay out 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 stylesheet.
• 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.
• Current website code has some inline CSS, please move them to external CSS file.

 

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari on tablets / phones

Final Submission Guidelines