Challenge Overview
Welcome to Living Progress - WWF - Responsive Desktop UI Prototype Challenge
The main task of this project is to create the Living Progress - WWF Responsive UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive on Desktop platform. In the end of this challenge we need solid UI prototype result with best practice solutions
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
https://drive.google.com/folderview?id=0B31nrwic_6z0MW9uVGlnNVFzRUk&usp=sharing
Storyboard.zip - Storyboard Design
Wireframe.zip - Wireframe
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Rounded, Shadow effect as possible need created on CSS stylesheet instead of image based
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
- For the graphs in the storyboards, you are allowed to use any 3rd party chart plugins!.
- Some chart library reference: https://github.com/d3/d3/wiki/Gallery
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
1). Landing Page
Screenshot: 01 - Landing Page.jpg
- This is Landing page look before user logged in
- Background color/image need covered whole browser screen
- While main content area placed centered with fixed width like storyboard screen
Header
- On header bar, WWF logo need take user to this Landing page
- Notice on the left side of header bar, there’s rounded corner shape. Think about how you build this on your prototype
- Match icons for each main navigation menu
- Login and Register button placed on top of header bar. Click both buttons need load different flow explained below
- There’s a grey bar contains title and input on the right side
- Green and Grey bar need to be in fixed placement when user scrolling the page
Welcome
- Welcome area using slideshow function
- Slide need set to be auto looping
- Background image need covered whole browser screen
- Play button placed centered of each slide
- Click Next/Prev button or the dot pagination need take user to related slide
About Us
- Match content like storyboard
- Learn More button can be dead link
- Set consistent height for those 3 boxes
Start Using the application
- Background image need looping whole browser screen
- Login button need load the modal window, as explained below
Our Key Features
- Place 2 columns layout
- There’s icon on top of each image
Don’t have account yet
- Background image need looping whole browser screen
- Register button need load the modal window, as explained below
Footer
- Match column layout
- As possible page need linked each other
- Social links can be dead links
- Background need covered whole browser screen
2). Login
Screenshot: 01_0 - Login.jpg
- This login screen show up when click Login button
- Blur background for the effect
- Click “x“ button need close the modal window
- Welcome text placed on the left and some icons
- Login form on the right side
- Create error validation style after user click Login button (Screenshot: 01_0_1 - Login.jpg)
3). Register
Screenshot: 01_1 - Register.jpg
- This is Register page
- Match breadcrumb below the header
- Match text input background and placeholder text
- Click Register button need take user to Register page
4). Profile
Screenshot: 02 - My Profile.jpg
- After user logged in, Click on Welcome user will take to this page
- My Profile displayed some list and values
- Edit Profile placed on the right side
- Click the button need load inline text input (Screenshot: 02_1 - Edit My Profile.jpg)
- Save and Cancel button need close editable form
- Notice there’s button on top of user image
5). Dashboard
Screenshot: 03 - Dashboard.jpg
- This is Dashboard screen after user logged in
- Match active state for main navigation
- On the right side of breadcrumb, you need put buttons of Guide, Refresh and Manage
- Boxes on the bottom using 2 columns layout
- Rounded and shadow effect need created using css stylesheet
- Here’s dropdown menu look for some elements (Screenshot: 03_0_1 - Drop Down Menu.jpg)
Search Box
- Match dropdown content
- Search and Advanced can be dead link
Trends in Box
- On the right side of title, there’s arrow to navigate country exports, put dead links for now
- Gear button need load Setting Country List Modal Window
- Print and download button can be dead link
- User can toggle between Monthly and Annual (Screenshot: 03_0 - Dashboard.jpg)
- Also user can navigate between months tab
- Build chart using open source 3rd party library
- As possible match chart styling like storyboard
Global Trends for
- On the right side of title, there’s arrow to navigate species exports, put dead links for now
- Gear button need load Setting Country List Modal Window
- Print and download button can be dead link
- User can toggle between Monthly and Annual
- Also user can navigate between months tab
- Map can be image based
- But, the colorful dots need placed above map
- Display colorful dots legend below the map
- Click Filter dropdown need show this values (Screenshot: 03_0_1 - Drop Down Menu.jpg)
Setting Country List Modal Window
Screenshot: 03_0_2 - Settings Country List.jpg
- User can add reporter county by click + button
- Countries on Dashboard, there are minus button to let user remove selected countries
- Cancel and Save need hide the modal
- The dropdown look and feel should follow 04_0_2 - Search Data Multiple Select
- After select country 04_0_3 - Search Data Multiple Select will display value on dropbox
- And click + will append the selected country to bottom dashboard list
Top 10 Active Trading Companies
- Match bar chart styling
- Hover on label need load additional information (Screenshot: 03_0_3 - Company Address & Species ID Hover.jpg)
Saved Queries
- There area 2 chart for bar and donut on this box
- There’s arrow indicator on the right side of donut bar
Notification
- Match alternating rows
- Need same height like Trends in
Collaboration Messages
- Match alternating rows
- Need same height like Global Trends for
News & Case Studies
- Follow content like storyboard look
6). Manage Dashboard
Screenshot: 03_1 - Manage Dashboard.jpg
- Click Manage button need make the dashboard page modifiable
- Cancel and Save button need load default Dashboard page (Screenshot: 03_2 - Manage Dashboard.jpg)
- Search box become disable
- On the right side of each boxes there are toggle and drag button
- User need able to drag to change the placement (Screenshot: 03_3 - Manage Dashboard to Move Widget.jpg)
- Each row must consists of 1 wide box and 1 narrow box only
- Click toggle button need hide related widget (Screenshot: 03_4 - Manage Dashboard to Hide Widget.jpg)
- When toggle turn off, box need to be grey
- Hidden box looked gray out and disabled all function from the box, link, buttons will not be clickable.
- No need hide shift up other bottom boxes after widget hidden
7). Search Data
Screenshot: 04 - Search Data.jpg
- Search Data page contains form
- Match form element look like storyboard
- Hover on the label & “!” button need load the tooltips (Screenshot: 04_0 - Search Data Hover Informations.jpg)
- This is how dropdown look (Screenshot: 04_0_1 - Search Data Drop Down.jpg)
- Hover on each value need load additional information
- For reporter country, there are more than 1 option with checkmark (Screenshot: 04_0_2 - Search Data Multiple Select.jpg)
- Click add button next to dropdown need add some options below the dropdown
- Click “-” button need remove some selected values
- Radio buttons, follow the styling
- There’s a slider under notification
- Page look after some form filled (Screenshot: 04_1 - Search Data.jpg)
- Click Run Query button then take user to Search Data Result
8) Data Comparison Details
Screenshot: 05 - Search Data.jpg
- Page divided by details on left side and filter area on the right side
- Data Details placed on top of box
- Refresh, Save and other social buttons placed on the right side of title
- Match tabs navigation
- Comments area, display some comments like storyboard
- Click Show Less link need collapse the top area (Screenshot: 05_1 - Search Data Show Less Details.jpg)
- On Chart, make sure library support this, hover the Discrepancy details will load the flyout (Screenshot: 05_1_1 - Hover Discrepancy.jpg)
- Navigate to Map tab need load the map image (Screenshot: 05_2 - Search Data Map View.jpg)
- Table tab, contains table list format (Screenshot: 05_3 - Search Data Table View.jpg)
- Follow content and style like storyboard look
- Click dropdown need load these options (Screenshot: 05_3_1 - Table View Sort Options.jpg)
9) Collaborators Tab
Screenshot: 05_9 - Collaborators.jpg
- This screen contains Collaborator boxes
- Pagination placed on the bottom
- Hover on thumbnail area, need show up the action buttons (Screenshot: 05_9_1 - Hover.jpg)
- Click Edit button will load the modal window (Screenshot: 05_9_2 - Edit Collaborator Permission.jpg)
- There some checkboxes user can checked on/off
- Cancel and Save button need hide the modal
- Click Eye button need load details modal window (Screenshot: 05_9_2_ - Collaborator Details.jpg)
- Click Remove and Edit button need take user to correct modal window
- Click Trash button load confirmation modal window (Screenshot: 05_9_3 - Remove Collaborator.jpg)
- Click “+ Invite” button need load invite collaborator modal window (Screenshot: 05_9_4 - Invite Collaborators.jpg)
- Send Invitation make another modal window shows up (Screenshot: 05_9_5 - Invite Collaborators.jpg)
- Click Save button on top of Data Comparison Details page need load the modal window (Screenshot: 05_9_6 - Save Query.jpg)
- Click Share icon button need load modal window (Screenshot: 05_9_7 - Share Data.jpg)
- User can type the input (Screenshot: 05_9_8 - Share Data.jpg)
10) Activity Log
Screenshot: 05_11 - Activity Log.jpg
- This tab display table of Activity Log
- Click Filter button need expand the filter area (Screenshot: 05_12 - Activity Log Filter.jpg)
11). Querty List
Screenshot: 06 - Querty List.jpg
- This is Querty List screen
- Set active state for main navigation
- There are 2 tabs for My Querty and As Collaborator
- Display some charts on each boxes
- Hover on chart area need show up some action buttons (Screenshot: 06_1 - Hover.jpg)
- Click Filter need expand the filter area (Screenshot: 06_2 - Querty List Filter.jpg)
- For As Collaborator tab, you need display 2 icons when hover on chart (Screenshot: 06_3 - Hover.jpg)
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.
- Responsive Web Design solution!
CODE REQUIREMENTS:
HTML/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
- 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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
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.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
The main task of this project is to create the Living Progress - WWF Responsive UI Prototype based on the provided PSD Storyboard design.
For this challenge you just need create prototype submission to support responsive on Desktop platform. In the end of this challenge we need solid UI prototype result with best practice solutions
This challenge is part of the HPE Living Progress Challenge Blitz Program (Secure top placements in the leaderboard to grab additional cash prizes).
Good luck and we’re looking forward to your submissions!
Final Submission Guidelines
Challenge Downloadablehttps://drive.google.com/folderview?id=0B31nrwic_6z0MW9uVGlnNVFzRUk&usp=sharing
Storyboard.zip - Storyboard Design
Wireframe.zip - Wireframe
Important!
- Suggest best practice Responsive Web Design Breakpoints.
- Use HTML5/CSS3/Javascript as base of this UI Prototype submission
- Use Bower for Library Package Manager. DO NOT just put raw javascript library inside your prototype
- If you use custom styling/function based on existing library. Put them in separated files.
- Use SCSS/SASS for CSS Pre-Processor
- Put original sass folder also the output on your prototype
- You can use Bootstrap to build the layout
- Use separated JSON to store data.
- Your prototype submission need build for Desktop Size only
- Provided storyboard using 1280px and height up to page content
- As possible all buttons and links need linked each other. If the page not exists on storyboard, put dead links.
- Bring consistency placement/styling in your UI Prototype submission
- Rounded, Shadow effect as possible need created on CSS stylesheet instead of image based
- Let discuss any of your questions and let us know if need clarification.
- As far as possible, we need all pages on this prototype linked to each other; let us know if you need clarification about the flow.
- Match form element styling like storyboard look and feel.
- Please create a hover style for all button and links (if not specified), we are open to you thoughts!
- Also you can use open source library like jQuery.
- For the graphs in the storyboards, you are allowed to use any 3rd party chart plugins!.
- Some chart library reference: https://github.com/d3/d3/wiki/Gallery
Page Requirements:
Please go through the requirements and look to capture all interactions as mentioned below..
1). Landing Page
Screenshot: 01 - Landing Page.jpg
- This is Landing page look before user logged in
- Background color/image need covered whole browser screen
- While main content area placed centered with fixed width like storyboard screen
Header
- On header bar, WWF logo need take user to this Landing page
- Notice on the left side of header bar, there’s rounded corner shape. Think about how you build this on your prototype
- Match icons for each main navigation menu
- Login and Register button placed on top of header bar. Click both buttons need load different flow explained below
- There’s a grey bar contains title and input on the right side
- Green and Grey bar need to be in fixed placement when user scrolling the page
Welcome
- Welcome area using slideshow function
- Slide need set to be auto looping
- Background image need covered whole browser screen
- Play button placed centered of each slide
- Click Next/Prev button or the dot pagination need take user to related slide
About Us
- Match content like storyboard
- Learn More button can be dead link
- Set consistent height for those 3 boxes
Start Using the application
- Background image need looping whole browser screen
- Login button need load the modal window, as explained below
Our Key Features
- Place 2 columns layout
- There’s icon on top of each image
Don’t have account yet
- Background image need looping whole browser screen
- Register button need load the modal window, as explained below
Footer
- Match column layout
- As possible page need linked each other
- Social links can be dead links
- Background need covered whole browser screen
2). Login
Screenshot: 01_0 - Login.jpg
- This login screen show up when click Login button
- Blur background for the effect
- Click “x“ button need close the modal window
- Welcome text placed on the left and some icons
- Login form on the right side
- Create error validation style after user click Login button (Screenshot: 01_0_1 - Login.jpg)
3). Register
Screenshot: 01_1 - Register.jpg
- This is Register page
- Match breadcrumb below the header
- Match text input background and placeholder text
- Click Register button need take user to Register page
4). Profile
Screenshot: 02 - My Profile.jpg
- After user logged in, Click on Welcome user will take to this page
- My Profile displayed some list and values
- Edit Profile placed on the right side
- Click the button need load inline text input (Screenshot: 02_1 - Edit My Profile.jpg)
- Save and Cancel button need close editable form
- Notice there’s button on top of user image
5). Dashboard
Screenshot: 03 - Dashboard.jpg
- This is Dashboard screen after user logged in
- Match active state for main navigation
- On the right side of breadcrumb, you need put buttons of Guide, Refresh and Manage
- Boxes on the bottom using 2 columns layout
- Rounded and shadow effect need created using css stylesheet
- Here’s dropdown menu look for some elements (Screenshot: 03_0_1 - Drop Down Menu.jpg)
Search Box
- Match dropdown content
- Search and Advanced can be dead link
Trends in Box
- On the right side of title, there’s arrow to navigate country exports, put dead links for now
- Gear button need load Setting Country List Modal Window
- Print and download button can be dead link
- User can toggle between Monthly and Annual (Screenshot: 03_0 - Dashboard.jpg)
- Also user can navigate between months tab
- Build chart using open source 3rd party library
- As possible match chart styling like storyboard
Global Trends for
- On the right side of title, there’s arrow to navigate species exports, put dead links for now
- Gear button need load Setting Country List Modal Window
- Print and download button can be dead link
- User can toggle between Monthly and Annual
- Also user can navigate between months tab
- Map can be image based
- But, the colorful dots need placed above map
- Display colorful dots legend below the map
- Click Filter dropdown need show this values (Screenshot: 03_0_1 - Drop Down Menu.jpg)
Setting Country List Modal Window
Screenshot: 03_0_2 - Settings Country List.jpg
- User can add reporter county by click + button
- Countries on Dashboard, there are minus button to let user remove selected countries
- Cancel and Save need hide the modal
- The dropdown look and feel should follow 04_0_2 - Search Data Multiple Select
- After select country 04_0_3 - Search Data Multiple Select will display value on dropbox
- And click + will append the selected country to bottom dashboard list
Top 10 Active Trading Companies
- Match bar chart styling
- Hover on label need load additional information (Screenshot: 03_0_3 - Company Address & Species ID Hover.jpg)
Saved Queries
- There area 2 chart for bar and donut on this box
- There’s arrow indicator on the right side of donut bar
Notification
- Match alternating rows
- Need same height like Trends in
Collaboration Messages
- Match alternating rows
- Need same height like Global Trends for
News & Case Studies
- Follow content like storyboard look
6). Manage Dashboard
Screenshot: 03_1 - Manage Dashboard.jpg
- Click Manage button need make the dashboard page modifiable
- Cancel and Save button need load default Dashboard page (Screenshot: 03_2 - Manage Dashboard.jpg)
- Search box become disable
- On the right side of each boxes there are toggle and drag button
- User need able to drag to change the placement (Screenshot: 03_3 - Manage Dashboard to Move Widget.jpg)
- Each row must consists of 1 wide box and 1 narrow box only
- Click toggle button need hide related widget (Screenshot: 03_4 - Manage Dashboard to Hide Widget.jpg)
- When toggle turn off, box need to be grey
- Hidden box looked gray out and disabled all function from the box, link, buttons will not be clickable.
- No need hide shift up other bottom boxes after widget hidden
7). Search Data
Screenshot: 04 - Search Data.jpg
- Search Data page contains form
- Match form element look like storyboard
- Hover on the label & “!” button need load the tooltips (Screenshot: 04_0 - Search Data Hover Informations.jpg)
- This is how dropdown look (Screenshot: 04_0_1 - Search Data Drop Down.jpg)
- Hover on each value need load additional information
- For reporter country, there are more than 1 option with checkmark (Screenshot: 04_0_2 - Search Data Multiple Select.jpg)
- Click add button next to dropdown need add some options below the dropdown
- Click “-” button need remove some selected values
- Radio buttons, follow the styling
- There’s a slider under notification
- Page look after some form filled (Screenshot: 04_1 - Search Data.jpg)
- Click Run Query button then take user to Search Data Result
8) Data Comparison Details
Screenshot: 05 - Search Data.jpg
- Page divided by details on left side and filter area on the right side
- Data Details placed on top of box
- Refresh, Save and other social buttons placed on the right side of title
- Match tabs navigation
- Comments area, display some comments like storyboard
- Click Show Less link need collapse the top area (Screenshot: 05_1 - Search Data Show Less Details.jpg)
- On Chart, make sure library support this, hover the Discrepancy details will load the flyout (Screenshot: 05_1_1 - Hover Discrepancy.jpg)
- Navigate to Map tab need load the map image (Screenshot: 05_2 - Search Data Map View.jpg)
- Table tab, contains table list format (Screenshot: 05_3 - Search Data Table View.jpg)
- Follow content and style like storyboard look
- Click dropdown need load these options (Screenshot: 05_3_1 - Table View Sort Options.jpg)
9) Collaborators Tab
Screenshot: 05_9 - Collaborators.jpg
- This screen contains Collaborator boxes
- Pagination placed on the bottom
- Hover on thumbnail area, need show up the action buttons (Screenshot: 05_9_1 - Hover.jpg)
- Click Edit button will load the modal window (Screenshot: 05_9_2 - Edit Collaborator Permission.jpg)
- There some checkboxes user can checked on/off
- Cancel and Save button need hide the modal
- Click Eye button need load details modal window (Screenshot: 05_9_2_ - Collaborator Details.jpg)
- Click Remove and Edit button need take user to correct modal window
- Click Trash button load confirmation modal window (Screenshot: 05_9_3 - Remove Collaborator.jpg)
- Click “+ Invite” button need load invite collaborator modal window (Screenshot: 05_9_4 - Invite Collaborators.jpg)
- Send Invitation make another modal window shows up (Screenshot: 05_9_5 - Invite Collaborators.jpg)
- Click Save button on top of Data Comparison Details page need load the modal window (Screenshot: 05_9_6 - Save Query.jpg)
- Click Share icon button need load modal window (Screenshot: 05_9_7 - Share Data.jpg)
- User can type the input (Screenshot: 05_9_8 - Share Data.jpg)
10) Activity Log
Screenshot: 05_11 - Activity Log.jpg
- This tab display table of Activity Log
- Click Filter button need expand the filter area (Screenshot: 05_12 - Activity Log Filter.jpg)
11). Querty List
Screenshot: 06 - Querty List.jpg
- This is Querty List screen
- Set active state for main navigation
- There are 2 tabs for My Querty and As Collaborator
- Display some charts on each boxes
- Hover on chart area need show up some action buttons (Screenshot: 06_1 - Hover.jpg)
- Click Filter need expand the filter area (Screenshot: 06_2 - Querty List Filter.jpg)
- For As Collaborator tab, you need display 2 icons when hover on chart (Screenshot: 06_3 - Hover.jpg)
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.
- Responsive Web Design solution!
CODE REQUIREMENTS:
HTML/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
- 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.
- It is fine to use GPL/MIT/Open Source code.
- 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.
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.
- Make sure your submission look sharp for Retina and Standard devices
- Wherever it makes sense, you can use icon fonts instead of images.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser