Challenge Overview
Welcome to 72hr! IBM Wiki Plain HTML Navigation UI Prototype
The purpose of this contest is to build a Wiki Template using HTML, provided graphics, and inline CSS on the IBM SmartCloud Communities Wiki feature. With the SmartCloud Wiki, you will be somewhat limited by the online HTML editor control and a Rich Text editor control.
You will need to build the HTML template based on the required storyboard and make sure that the Wiki looks good on all the required web browsers that are listed below. Read more detailed requirements on competition task. As part of this challenge, you also need clear documentation of the updated code (HTML/CSS, etc.) so that users who work with the template know how to use it and where to place the content.
Final Submission Guidelines
The main task of this competition is to create the IBM Wiki Plain HTML Navigation UI Prototype based on the provided PSD Storyboard design. We are looking for a HTML template that works and looks consistent on required browsers as stated in the details below.
Basically this challenge expected submission result similar like HTML Email challenge. You can read some of these following references to get familiar with HTML Email Rules before building your submission:
- Ultimate Guide to HTML Emails Basics, Tips, Tutorials and Resources
- 16 Tips for Troubleshooting Your HTML Email
- Ultimate CSS Guide
- 20 Email Design Best Practices and Resources for Beginners
Read the specification details below, please let us know if you have questions.
IBM Wiki Navigation Requirements
Screenshot : 11 Menu States.png
- The result of this contest will be 1 HTML file and sliced images.
- Use TABLE tag instead of DIV for email template.
- Avoid using background images, as possible use css background color.
- All stylesheet need added to related HTML tags elements
- No need create ID or class on HTML codes
- Create clean, and proper structure on your HTML codes.
- Optimize images for fast download times.
- Body background need use transparent color.
- Match Navigation width and height
- If we add or remove one menu, navigation need remain show up as 1 line
- Above each menu, there’s fixed height of colorful boxes.
- All colors need created as css code instead of images.
- Follow provided screenshot, you need show how “normal state”, “hover state” and “active state” look
- Need hover style on template, style need coded via inline css in related tag code.
- When hover, menu background will show related colors and the icons updated into white colored.
- Is hover state possible to build if put the code inside IBM wiki content?
- All icons inside the menu need displayed centered
- Use “Arial” font instead “Proxima Nova” in PSD storyboard.
- Match font properties like font size, line height, alignment, etc.
- As part of this challenge, you need create documentation of how to add/edit/remove navigation menu. Create notes as details as possible.
- We will provide access to IBM wiki so you can test your codes., please post your request access in challenge forum.
- FYI: IBM Wiki uses this Editor http://ckeditor.com.
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS code that works in IBM Wiki.
- All elements should be pixel precisions, pay attention to padding, margin, line-height, etc.
- Matching the storyboards (as close as possible) across the required browsers
Code Requirements:
- Your HTML code must be XHTML 1.0 Strict compliant
- 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 for page layout.
- 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 or HTML hacks with explanations so others will understand.
Javascript Requirements:
No javascript required on this contest
Desktop Requirements:
- IE7
- IE8
- IE9
- IE10
- Safari latest
- Firefox latest
- Chrome latest