Challenge Overview
Welcome to HYGEIA Responsive Widgets UI Prototype Challenge
For this challenge we need you focus on creating the html for the interactive widget that will reside in the top right hand area of client’s website. We are looking for UI Prototype with responsive design that can adapt to all platforms (Desktop, Tablet and Mobile.)
Read more details UI Prototype Requirements and Flow below.
Final Submission Guidelines
CODE REQUIREMENTS:
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.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- 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.
- You’re encouraged to use LESS/SCSS or SASS to make the CSS code clean, provide source files on your submission.
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.
WIDGET REQUIREMENTS:
HYGEIA is an interactive site to help our employees and their families start the journey to better health. The site contains a wide range of health topics, tips and stories to help users understand where they can start or continue their road to better health.
IMPORTANT!
- For this challenge you just need create interactive widget that placed in the top right side of website. Refer this screenshot for area guidance (screenshot: working-area.png)
- Key thing is making these widgets have the proper wrapper to be used/switched/content changed out as needed
- You need put your codes into the right side area of attached Rendered Client Website Codes (rendered-html.zip)
- Ignore existing HTML/CSS/JS Errors and Warning, just make sure you NOT create new Errors/Warnings.
- Create separated NEW html/css/javascript/images files for this Widgets UI Prototpe.
- Remember, when resize browsers into mobile screen width, all widgets need transform into fluid mobile layout
- Create Documentation for all new and updated to help future developer build your solutions into client website.
- Make sure font displayed consistent across required browsers
- When resize browser to minimum mobile (480px), your prototype must smoothly transform the layout into mobile version.
- You need think solution how to set different fixed height on these widgets with optimize and efficient the css code usage, BUT width must responsive.
- Pay attention to height differences for each widgets based on storyboard screens!
- Each required widget need displayed in separated html pages. You need create index.html that will contains links to these widget variation. This page will help reviewers to navigate to all required widgets
Documentation Provided
rendered-html.zip - Rendered Client Website Code
storyboard-images.zip - Storyboard Design Images
storyboard-sources.zip - Storyboard Design PSD
I. Double Widget with Social Media
- These section show double widgets stacked vertically with the Social Buttons in the bottom
Social Buttons
- Social buttons placed in the bottoms
- Put dead links for all socials icons
- Match font properties, also spacing & margin
1. Tips & Sign up Widgets
screenshot: 01-1_Double widgets with SocMed_PC.png
Tips Widget
- Background image placed in the left side and should easily updated
- Match font style and shadow effect for text description and Widget Title
Sign Up Widget
- Use dark green for this widget background
- Background image placed in the left side and should easily updated
- Match font style and shadow effect for text description
- Input and button use rounded corner, you need apply effect via CSS properties
- Enter your email show by default, once user start typing value will be hidden
- Sign Up button show blue colored background with white text
- Privacy is text link, other text will be plain text
2. Quote & News Widgets
screenshot: 01-2_Double widgets with SocMed_PC.png
Quote Widget
- Quote text placed on top
- User information need easily updated
- Photo border should wrapped use stylesheet properties
- Match font properties styling
News Widget
- This is News Widget
- News and Health Alerts show up as title
- User can scrolling the content, visible content will be 2 rows.
- Match scrollbar styling
- Date Placed on left side
- News title in the right side, when filled with more lines, make sure each row expand the height automatically.
- Show All Alerts is a text link. Put dead link for now
3. Slideshow & Vote Widgets
screenshot: 01-3_Double widgets with SocMed_PC.png
Slideshow Widget
- Slideshow will use continuous loop
- click the left and right need navigate the slideshow
- dotted pagination should works to show the active slide
- fyi: white dotted as indicator of current active slide
- Feel free to suggest any animation effect when move from one slide to another
- Make sure slides running smooth with no lag in all required browsers
Vote Widget
- Background image should easily updated in the right side
- Match Vote text font properties
- Follow radio button style based on storyboard
- Click the label, should checked on/off related radio
- Vote button placed centered in the bottom
- After user click the Vote button, you need simulate animation progress (screenshot: 01-4_Double widgets with SocMed_PC.png)
- Make sure animation running smooth with no lag
4. Video & Popular Widget
screenshot: 01-5_Double widgets with SocMed_PC.png
Video Widget
- You can load random youtube video on this widget
- Follow size based on storyboard
Popular Widget
- Create tab format to navigate Popular and Recent content
- Make sure tab works to navigate both content
- You can put random content
- User can scrolling the content, visible content will be 2 rows.
- Match scrollbar styling
- Each row consists of thumbnails and description
- Put time information on bottom right of video, make sure when filled with longer text, overlay background not break
- Thumbnails and title are clickable, put dead link for now
II. Double Widget with No Social Media
- These section show double widgets stacked vertically WITHOUT Social Buttons in the bottom
- You MUST re-use completed codes for each widgets, DO NOT create new codes.
- You need show clever way to adjust the height to fit the look based on storyboard in your stylesheet codes
1. Tips & Sign up Widgets
screenshot: 02-1_Double widgets no SocMed_PC.png
Notes:
- Compare how text alignment differences for this widget
- Match updated background image
- Make sure widget height match with storyboard design
2. Quote & News Widgets
screenshot: 02-2_Double widgets no SocMed_PC.png
Notes:
- Match content difference with storyboard design
- Make sure widget height match with storyboard design
- Notice scrolling show 3 visible rows
3. Slideshow & Vote Widgets
screenshot: 02-3_Double widgets no SocMed_PC.png
screenshot: 02-4_Double widgets no SocMed_PC.png
Notes:
- Match updated image
- Make sure widget height match with storyboard design
4. Video & Popular Widget
screenshot: 02-5_Double widgets no SocMed_PC.png
- Make sure widget height match with storyboard design
- Notice scrolling show 3 visible rows
III. Single Widget with Social Media
- These section show single widget that filled right side area WITH Social Buttons in the bottom
1. Tips Widget Single
screenshot: 03-1_Single Widget with SocMed_PC.png
Notes:
- Match updated background image
- Match updated text
- Search input displayed as widget width
- Sign Up button displayed as widget width
- Lorem Ipsum text displayed in the bottom
2. News Widgets
screenshot: 03-2_Single Widget with SocMed_PC.png
Notes:
- News widget show 5 visible rows on scrolling area
- Match the widget height
3. Video & Popular Widget
screenshot: 03-4_Single Widget with SocMed_PC.png
Notes:
- Match the spacing between video and popular tabs widget
4. Details Information Widgets
screenshot: 03-3_Single Widget with SocMed_PC.png
Notes
- This is NEW content
- Image placed on top
- And description in the bottom
- Learn More will be dead link
IV. Single Widget with No Social Media
- These section show single widget that filled right side area WITHOUT Social Buttons in the bottom
1. Tips Widget Single
screenshot: 04-1_Single Widget no SocMed_PC.png
Notes:
- Expand the height to match sidebar area
- Pay attention to small updates based on storyboard
2. News Widgets
screenshot: 04-2_Single Widget no SocMed_PC.png
Notes:
- Expand the height to match sidebar area
- News widget show 6 visible rows on scrolling area
3. Video & Popular Widget
screenshot: 04-3_Single Widget no SocMed_PC.png
Notes:
- Expand the height to match sidebar area
- Popular widget show 3 visible rows on scrolling area
4. Details Information Widget
screenshot: 04-4_Single Widget no SocMed_PC.png
Notes:
- Image on top use same size
- You just need expand the content area
V. Single Widget Mobile
- These mobile versions will apply for all widget mentioned above.
- These fluid mobile version will transform when browsers resized into maximum 480px width. DO NOT create separated pages for all these mobiles.
- For Mobile version, all widgets will be placed below “Get In Game” area taken from original website.
- Ignore the dotted pagination in the bottom of mobile version
1. Tips & Sign up Widgets
screenshot: 05-1_Widget_Mobile.png
Notes:
- Widget width will displayed fluid as browser screen
- Socials buttons remain in centered
2. Quote & News Widgets
screenshot: 05-2_Widget_Mobile.png
Note:
- Widget width will displayed fluid as browser screen
3. Slideshow & Vote Widgets
screenshot: 05-3_Widget_Mobile.png
screenshot: 05-4_Widget_Mobile.png
Note:
- Widget width will displayed fluid as browser screen
3. Video & Popular Widget
screenshot: 05-5_Widget_Mobile.png
Note:
- Widget width will displayed fluid as browser screen
4. Details Information Widget
screenshot: 05-6_Widget_Mobile.png
Note:
- Widget width will displayed fluid as browser screen
Client Priorities (The items that are considered highest prototype priorities)
- Creating quality and efficient HTML/CSS3 code that works in all the requested browsers.
- 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.
HTML/CSS Requirements:
You're encouraged to use and take advantage of 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 Browser Requirements section.
Browsers Requirements
- IE9
- IE10
- Safari latest version
- Firefox latest version
- Chrome latest version
- Safari Browsers on iPad
- Safari Browsers on iPhone