Challenge Overview
Welcome to BMC - myEBC Event App Responsive Landing Page UI Prototype
The main task of this project is to create the BMC - myEBC Event App Responsive Landing Page UI Prototype based on the provided PSD Storyboard design.
Final Submission Guidelines
IMPORTANT!
- This application will use Bootstrap (http://getbootstrap.com/getting-started) for responsive design purpose. Please follow coding standards and write clean code.
- We encouraged you to use AngularJS frameworks to get better performance for this application. If you more comfort with other framework, let us know to approve your choice via challenge forum.
- When resize browsers into mobile screen width, all widgets need transform using fluid layout
- Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
- You also need create Retina Images version for every graphics!
- Font size need adapted screen sizes.
Files Downloadable
Storyboard.zip - Storyboard screens and PSD files
BMC - myEBC Event App Landing Page Requirements
A. Desktop Version
screenshot: Desktop Full View.jpg
- This is Dashboard page look
- Background need fluid on wide screen, refer this site solution: http://sixrevisions.com/css/responsive-background-image/
- While main content area use fixed width in the center of page
- Let us know if need provide updated background image than what we attached on storyboard
- “BMC” logo placed in the left side and can be dead link
- User Profile show arrow in the right side, suggest dropdown option look, show dummy data
- Setting will take user to Preferences page, keep dead link for now
- Match main navigation style for active/inactive state
- Each menu showing icons in the left side
- Click Main navigation menus will take user to related section
- Animation scrolling need smooth across required browsers
- Header and Main navigation remain fixed on top when scrolling the page
- Here’s list of main navigations menu and the scrolling target:
-- Dashboard = Top of Content page
-- My Visit = The Agenda section
-- About BMC = About BMC section
-- Travel Info = Travel Info section
-- FAQ = FAQ section
-- Contact Us = Contact Us section
- Download App placed in the right side, Show this ONLY IF the device the user is viewing it on is iOS or Android. If it is...the button will link to the any APP on APP store or Google Play. If the device is a Blackberry...the button would not show.
- Below main navigation there’s bar contains “Personal and Dietary Request”. Click button take to Contact us section.
- Suggest hover state for buttons and text links.
Weather section
- Weather content always placed centered on page
- You need show tab function for Weather
- Weather icon will be updated regularly, make sure when we replace with another icon remain in correct place
- Numbers need reflected correct Fahrenheit or Celcius degree
- Background image need fluid as browser screen size
- Match spacing and margin for font and graphic
The Agenda section
- Click My Visit on the menu takes the user to this Agenda section
- This section is showing list of Agenda
- Icons placed in the left side
- Follow margin below each list
- “Agenda” title and picture are clickable. Put dead link for now.
- There will typically be 10-20 agenda items and height will be dynamic.
Discussion Leader section
- Match content for each Leader information
- Rounded and border need created as css properties
- You can remove social buttons, ignore storyboard look
- When there’s longer or shorter Leader information, grid layout should not break
- Background image need fluid as browser screen size
- Page will display ALL leaders and grow taller with more speakers
About BMC
- Follow font typography from storyboard
- Know More should linked to http://www.bmc.com/corporate/about-bmc-software.html
Travel Info
- Travel Info section divided by 3 separated row: "Flights", "Hotels" and "Logistical Details"
- Each section need collapsible/expandable
- Match travel information for each section
- Match arrow style for expand and collapse state
- Call button should activated the calling on mobile devices, and dead link on desktop version
FAQ
- User can toggle each FAQ list
- See the difference icon for expand/collapse icons
- Background image need fluid as browser screen size
Contact Us
- Match Contact Us Form for input field and textarea
- When user start typing, default value will be removed
- Submit button can be dead link
- Background image need fluid as browser screen size
- See there’s orange background in the bottom
- Update “Ut nom quam...” text into “For Immediate response...” text
- Remove “For Immediate response” text next to “Subject Title” input
- Expand Subject Title width like textarea width
B. Tablet Version
- Tablet version need adjust the content when resize browser screen
- Refer this site when resize browser screen: http://www.gt3themes.com/demo/?theme=Sherwood%20WP
- Apply for all sections.
- Let us know if need some confirmation
C. Mobile Version
screenshot: mobile full view.jpg
- This is Mobile version look
- Header area need fixed on top of screen
- BMC logo smaller in Mobile version
- Menu button show in the left side to triggered Sidebar Navigation
- Setting button placed in the right side
- “Personal and Dietary Request” remain centered in page.
- For every section, need fluid layout adapted well on Landscape and Portrait layout
- Provided storyboard is for Retina devices, you need make sure all graphics look okay on standard sizes.
Sidebar Navigation
screenshot: mobile-menu.jpg
- Sidebar navigation show up after click the menu on top left of header area
- “Jhon Kaparino” is a dropdown menu. Suggest us how submenu design look?
- Main navigation placed below user account
- Click each menu need hide the menu and scrolling to related section
- Reduce left margin to be more close with left side
- Download App button ONLY show up if the device is iOS or Android. Except than that browser should hidden
- Put dead link for Logout menu
Weather section
- Functions remain the same like desktop version
- Need fluid background adapted well
The Agenda section
- Agenda section remain in list layout
- Agenda information showing less text than desktop version
Discussion Leader section
- Mobile version showing 4 Leaders information by default on Mobile version
- List show alternate left and right alignment
- No need Load More speakers button for mobile version
About BMC
- Text content need adjust width as browser screen
Travel Info
- Call button placed in the bottom
- Click the buttons need triggered device calling
FAQ
- FAQ Content need adjust as browser screen width
Contact Us
- Input and Textarea need fluid as browser screen
- Submit button placed in the bottom
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.
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
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Windows & Mac OS
- IE10
- Safari latest version
- Firefox latest version
- Chrome latest version
Tablet/Mobile
- Safari Browsers on iPad
- Safari Browsers on iPhone
- Android Browsers
Development Framework Requirements
- Bootstrap
- JQuery
- AngularJS