Challenge Overview
Welcome to FAST! 72hr Hercules NEW MyMedia Tablet and Mobile Layout UI Prototype Challenge
For this UI Prototype challenge we need you update existing NEW MyMedia UI prototype to support responsive layout when viewed on Tablet and Mobile screen.
Read more details UI Prototype Requirements and Flow below.
Final Submission Guidelines
PAGE REQUIREMENTS:
Notes:
- Current prototype support Desktop resolution only. For this challenge we need you update prototype, so all pages works with fluid layout for Tablet and Mobile Layout.
- On Tablet Landscape Layout, make sure there’s no overlap/broken page elements. Let us know if you find one!
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- We use bootstrap for this prototype, make sure you optimise the usage when update into responsive prototype.
- You need check all pages to support responsive Layout.
File Downloadables:
new mymedia prototype.zip - UI Prototype as Base Updates
New MyMedia Tablet Portrait and Mobile Look.zip (74Mb) - Storyboard for Tablet and Mobile Layout
1. Tablet Layout
Thumbnails Page Layout
screenshot: 01-For-you-01-defaults.png
- Logo size remain same.
- Search and Upload button remain in the right side of screen
- Thumbnails need reflected ratios that scaled down, fluid thumbnail layout need adapted screen width. Make sure thumbnails not overlap with device screen. (Screenshot: Grid-layout---Tablet-Portrait.png)
- Make sure View options not overlap with the title.
- Footer displayed in the bottom page. Font size can remain same. Just need adapt the browser screen
- Fluid layout updates on this page need auto implemented to other pages when viewed on Tablet screen
- For Purchase.html. Make the thumbnails ratio look good on Tablet and Mobile devices. Refer updated grid: Grid-layout---Purchase-on-tablet.png & 04-Purchase-default-size.png
Asset Information Modal Window
screenshot: 02-Assets-Modal.png
- On Portrait and Landscape view of Tablet screen, we need swap the placement from left sidebar into the bottom of slideshow
- Slideshow fill up top area.
- Action button showing in center of page
- Make sure slideshow function still works
- “X” button to close the modal need updated to white colored
- For the new sidebar placement, Photo information can displayed as 2 columns format
- Keep same ordering like desktop version
- Tags line need to be in separated field
- For actions buttons, keep bottom and top border like existing look. We just need use center alignment
- Fluid layout updates on this page need auto implemented to other pages when viewed on Tablet screen
Slideshow Modal Window
screenshot: 03-Slideshow.png
- “X” button can use existing color for consistency
- Slideshow will fill all screen like existing desktop version
- Slideshow buttons need use center alignment
- No need the bottom bar
- Fluid layout updates on this page need auto implemented to other pages when viewed on Tablet screen
2. Mobile Layout
Thumbnails Page Layout
screenshots: 320px = 01-For-You-02-Defaults-view-All.png 480px = 01-For-You-01-Defaults-size.png & 01-For-You-02-view-all.png
- Mobile version layout need loaded when checked from 320px into 480px screen width
- Logo need displayed centered
- Menu button placed on top left
- Thumbnails need adapt screen layout, you need scale down the size ratio. (Screenshot: Grid-layout---Mobile-portrait.png & Grid-layout---Mobile-landscape.png)
- View All button filled whole screen area
- View options show tooltips format in vertical flyout (screenshot: 01-For-You-04-Flyout-Navigation.png)
- You can keep existing sizes
- Use black background for the tooltips
- Purchase page on mobile layout show 2 columns format. Refer Screenshots (04-Purchase-01-default-size.png
& 04-Purchase-01-view-All.png)
- On Landscape, layout will move up to show 3 columns format. Refer screenshot (- Purchase page on mobile layout show 2 columns format. Refer Screenshots (04-Purchase-01-default-size.png
& 04-Purchase-01-view-All.png))
- Fluid layout updates on this page need auto implemented to other pages when viewed on Mobile screen
Sidebar Navigation
screenshots: 320px & 480px = screenshot: 01-For-You-03-Navigation-sidebar.png
- User can access sidebar menu. Just need show/hide animation
- Match the sidebar width
- User Account displayed on top with progress information
- Album and Upload button moved to this sidebar navigation
- Main Navigation displayed as list format
- Sign out button show in the last row
- Fluid layout updates on this page need auto implemented to other pages when viewed on Mobile screen
Asset Information Modal Window
screenshot: 02-Asset-modal-01-info-details.png
- “X” button to close the modal need updated to white colored
- Photo information need follow existing desktop format
- For actions buttons, keep bottom and top border like existing look. We just need use center alignment
- Notice, we hide slideshow for mobile layout
- on Landscape view, box need use fluid width
- Fluid layout updates on this page need auto implemented to other pages when viewed on Mobile screen
Slideshow Modal Window
screenshots: 320px = screenshot: 03-Slideshow-01-defaults.png, 480px = screenshot: 02-01-Slideshow.png
- “X” button to close the modal need updated to white colored
- Slideshow will fill all screen like existing desktop version
- Slideshow buttons need use center alignment
- No need the bottom bar that contain actions button
- Fluid layout updates on this page need auto implemented to other pages when viewed on Mobile 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.
The following pages are required in your submission on tablet and phone devices by using Responsive Design solution:
- All pages inside attached UI Prototype
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.
- 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
- 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.
- 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
- We’re allowed limited JQuery or JQuery plugins. We want to make sure the overhead of all the JS libraries is very, very small, so please make sure that all JS libraries used are approved in the forum.
Browsers Requirements
- Safari Browsers on iPad
- Safari Browsers on iPhone
- Safari Browsers on Retina Devices