Challenge Overview
The Hercules Iris Portal challenge series is to help redesign an existing portal which is a Communication Cloud platform (PaaS) featuring APIs and SDKs for VoIP (video/voice), messaging, user auth, and other web application functionalities for mobile, javascript, and embedded devices. Twilio is a good example of a similar company in terms of platform scope and capabilities.
We have recently completed a customer-approved design, and now we are going to convert that design into a responsive HTML prototype, with the goal of being lean HTML and CSS, with minimal Javascript.
The next challenge in this series will be to convert the standalone prototype into a Hugo template (http://gohugo.io/), so we want to keep things very simple to allow for as much flexibility as possible when creating the Hugo theme.
Storyboards
This challenge will require conversion of the storyboards to support:
* Desktop
* Tablet
* Phone
Here are MarvelApp links to the relevant screens:
* Desktop --> https://marvelapp.com/25ja99d/screen/30675298
* Tablet --> https://marvelapp.com/62c164b/screen/30677258
* Phone --> https://marvelapp.com/93i20ej/screen/30676165
Note that the converted screens should be able to be turned to landscape mode on tablet and phone.
Source files
The source PSD files can be found in the challenge forum
Resolution
We should support up to @3x resolution for all image files to ensure that the design scales well on retina screens.
Requirements
* 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 CSS style when create all styling.
* Wherever it makes sense, you can use icon fonts instead of images
* Images, Icons (SVG), etc... should be in a consistent folder
* Please use proper ids and classes in your naming conventions
We will validate on all current browsers (Firefox, IE, Chrome, Safari), and iOS 10 and Android 7
Video
A video is required for this challenge.
Additional functionality
The next challenge will be to turn this design into a Hugo template. If you start this work, or provide documentation explaining how your submission can be easily adapted to a Hugo template, that would be considered useful additional functionality.