Challenge Overview
Welcome to the Actian Documentation Web Portal - Responsive UI Prototype Challenge.
Actian is the hybrid data management, integration, and analytics Company that enables Enterprises to seamlessly manage and connect operational and analytic data for superior performance, insights, and business outcomes. Activate Your DataTM - Learn more about Actian’s products here and follow us on Twitter.
We need help from the TopCoder Community to design the new docs.actian.com portal UI and UEX frontend optimized for the Developer / IT-Practitioner. Developers and IT-Practitioners do a lot of reading of technical documentation, and companies such as example 1, example 2, and example 3 have set the bar high for documentation UI/UEX best practices. We are looking for help from Developer Community in creating our own unique experience.
Target Platforms
Both desktop and mobile layouts are in scope. Please use 992px as breakpoint between desktop and mobile layouts. Minimum desktop width is 375px
Desktop browser support
- Microsoft Edge
- Microsoft Internet Explorer 11
- Firefox latest version
- Safari latest version
- Chrome latest version
- Windows Phone browser latest version
Mobile browser support
- Latest Android browser
- Latest Safari browser on iOS devices
- Latest Windows Phone browser
Allowed Technologies
-
jQuery
-
Angular 2+
-
Bootstrap
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript
- You are encouraged to use your own scripts.
- Open Source may be leveraged so long as usage is in compliance with the open source license.
- We may ask you to provide us with a list of third party code used.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Challenge Assets
We’ve provided the following in challenge forums
-
Link to design sources
-
Links to Marvelapp for desktop and phone resolutions
Requirements:
Look and feel:
-
The UI should leverage the www.actian.com website theme.
-
Docs.actian.com will open and run in a new browser window and requires a responsive design
-
The header, footer, search and side navigation(s) must be optimized for a simple user experience
-
The prototype must clearly demonstrate end-user experience and interaction incl. responsive design, search, changing products, changing product version numbers etc. See http://docs.actian.com/#page/Welcome%2Fwelcome_ALL.1.1.htm%23 for the list of Actian products and product versions to be supported.
-
Code snippets should display functionality similar to the following Open Source project https://github.com/wp-plugins/enlighter
-
Provide an online form screen for users to contribute/improve/correct the documentation. Their suggestions will go into an Actian approval review before being published. The form should allow them to add code snippets of their own and have a button for them to submit their suggestion to Actian. The result will be an HTML formatted email that is sent to Actian for review.
-
Search functionality is a critical element of the interaction design and user experience. Actian leverages Google for search, and a brand-compliant stylized view of results is also required, and should assume a federated search experience across all related resources for the product(s) so the UI should show results from not only the search within the documentation portal, but also from across the other support resources including Actian GitHub, Stack Overflow, YouTube and Blog.
-
Header navigation
o Product version specific documentation selection
o “Tabs” for other related product documentation i.e. PDF version of the online docs, link to product specific support forums, link to product downloads, Actian Blog etc.
o Icon links to additional resources and support i.e. Actian GitHub, Stack Overflow, YouTube, Twitter, Facebook and LinkedIn
• Page content
o Ability to “share this page” via social media and to print this page per the current docs.actian.com functionality
o Ability to scroll left/right to previous/next section
o Ability to change the font type/size (there are a lot of people that have visual impairments that will appreciate this ability)
o Ability to collapse/expand the side navigation to make more space for the important content (important on smaller screens and support responsive design)
o Avoid using subpages for subtopics. Each topic should deliver all the main subtopics on a long HTML page, and use one page section anchors to jump to the relevant subsection (you can still have the links to this content in side index navigation). This allows developers to CRTL+F or command+F to quickly scan the documentation for key information without needing to click through every subsection page relating to the topic.
Scorecard
Standard Responsive scorecard applies
Additional scorecard criteria from Actian
• Must comply with the stated requirements.
Additional terms and conditions for all participants
The following terms and conditions must be included in the description of the Competition. By participating in this Competition, You acknowledge and agree that
-
You must comply with all applicable laws in submitting a Competition Submission, and you represent that you are authorized to submit the Competition Submission.
-
Actian Corporation (“Actian”) is free to use, disclose, distribute or otherwise exploit Residual Knowledge. Residual Knowledge means information that is retained in the unaided memories of Actian’s employees and contractors who have had access to any Competition Submissions submitted by You. An employee’s or contractor’s memory will be considered unaided if the employee or contractor has not intentionally memorized the information for the purpose of retaining and subsequently using or disclosing it; and
-
You are not entitled to any compensation from Actian or any of the benefits which Actian may make available to its employees, and You are not authorized to make any representation, contract or commitment on behalf of Actian.
-
Employees and direct and indirect subcontractors of Actian Corporation and its subsidiaries and other affiliates, and employees and direct and indirect subcontractors of Actian’s partners (including TopCoder and its affiliates) are not eligible to participate in the challenge.
Final Submission Guidelines
* Zipped prototype code (and including a txt file with links to any third party code used)* Deployment Guide with instructions to run