Challenge Overview
Welcome to the Topcoder.com 2.0 Layout Update for Tablet Device WordPress Challenge! All WordPress functionality are already been built. Desktop and Mobile layouts are working already working and fine tuned. The goal of this challenge is to have all the pages' layout responsive in tablet device with instructions outlined below.
All task requirements for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup to make all responsive in tablet device.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Match the design from the storyboard including the background positions and sizes of some sections unless otherwise over-ruled below.
2. Desktop & Mobile layout should be retained and should not get broken in doing the tablet version.
3. Use only the provided theme's template markup, you can tweak/update it but do not create 2 version of code markup whenever possible.
4. There should be no hardcoded text in the templates.
5. There should be no hardcoded iamge header's background in CSS file, please use existing Dynamic CSS that are included within the PHP templates.
6. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data should prevail.
7. You are not allowed to change content data from WP Admin.
8. Always ask in the forum for clarifications.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided tablet storyboard layout. The following pages outlined below have specific requirements.
Match the storyboard as much as possible and existing page functionality are expected to work well in tablet device.
NOTE: There is a new feature in the provided theme that is not shown in the storyboard. This feature is for showing a sticky banner and we would like to have this shown in Tablet version as well. This is already working and tested in Desktop and Mobile version, we would like to make sure that this will work too in Tablet version. This will have the same functionality just like in Desktop version.
1. Home
URL Reference: https://www.topcoder.com/home/
Storyboard: 01 to 03
- Make sure all sections text and background & image position & effects match the storyboard.
- Please retain the "scroll to top" feature found in Mobile layout. This should be applied to all pages. On storyboard, this feature can be seen on "06 T_What Can You Do_Scrolled Down.png".
2. What Can You Do?
URL Reference: https://www.topcoder.com/what-can-you-do/
Storyboard: 04 to 06
3. App Design & Development
URL Reference: https://www.topcoder.com/what-can-you-do/mobile-applications/
Storyboard: 07 & 08
4. App Modernization
URL Reference: https://www.topcoder.com/what-can-you-do/web-applications/
Storyboard: 09 & 10
5. Innovation Programs
URL Reference: https://www.topcoder.com/what-can-you-do/innovation-programs/
Storyboard: 11 & 12
6. Algorithms & Analytics
URL Reference: https://www.topcoder.com/what-can-you-do/algorithms-analytics/
Storyboard: 13 & 14
7. Staff Augmentation
URL Reference: https://www.topcoder.com/what-can-you-do/staff-augmentation/
Storyboard: 15 & 16
- Products section (Technical Staff Augmentation Products) & Product Showcase carousel section (Results Matter) are not in the storyboard BUT they should be availabel too in Tablet device just like in Desktop and Mobile devices.
8. Community Segments
URL Reference: https://www.topcoder.com/what-can-you-do/community-segments/
Storyboard: 17 & 18
- The sections from "Your tech, our community." to "Step 3 - Unleash the Crowd:" shoud follow the same layout style found in "04 T_How Do You Do.png"
9. About Topcoder
URL Reference: https://www.topcoder.com/about-topcoder/
Storyboard: 19 & 20
10. About Community
URL Reference: https://www.topcoder.com/about-topcoder/community/
Storyboard: 21 & 22
11. About Team
URL Reference: https://www.topcoder.com/about-topcoder/team/
Storyboard: 23
- Please note that the PNG is a merged version of 2 PSDs. "T_About the Team.psd" is used for the Header & Footer, while "T_About the Team - SECTION.psd" for the section area.
- Existing Desktop functionality should be carried over to Tablet device.
12. About Customers
URL Reference: https://www.topcoder.com/about-topcoder/customers/
Storyboard: 24 & 25
13. Marketplace
URL Reference: https://www.topcoder.com/marketplace/
Storyboard: 26 & 27
14. Marketplace - Community
URL Reference: https://www.topcoder.com/marketplace/the-community/
Storyboard: 28 & 29
15. Marketplace - Products
URL Reference: https://www.topcoder.com/marketplace/the-products/
Storyboard: 30 & 31
- Existing Desktop functionality should be carried over to Tablet device.
16. Contact Us
URL Reference: https://www.topcoder.com/about-topcoder/contact/
Storyboard: 32 & 33
Code Requirements
HTML / HTML5 / PHP Template
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor. You can use the existing SASS files.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
Browsers Requirements
- Chrome & Safari browser for both iPad & Android devices.
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
Final Submission Guidelines
Although this challenge requires to run in WordPress, all the theme’s functionality are already been built and functions properly.All task requirements for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup to make all responsive in tablet device.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Match the design from the storyboard including the background positions and sizes of some sections unless otherwise over-ruled below.
2. Desktop & Mobile layout should be retained and should not get broken in doing the tablet version.
3. Use only the provided theme's template markup, you can tweak/update it but do not create 2 version of code markup whenever possible.
4. There should be no hardcoded text in the templates.
5. There should be no hardcoded iamge header's background in CSS file, please use existing Dynamic CSS that are included within the PHP templates.
6. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data should prevail.
7. You are not allowed to change content data from WP Admin.
8. Always ask in the forum for clarifications.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided tablet storyboard layout. The following pages outlined below have specific requirements.
Match the storyboard as much as possible and existing page functionality are expected to work well in tablet device.
NOTE: There is a new feature in the provided theme that is not shown in the storyboard. This feature is for showing a sticky banner and we would like to have this shown in Tablet version as well. This is already working and tested in Desktop and Mobile version, we would like to make sure that this will work too in Tablet version. This will have the same functionality just like in Desktop version.
1. Home
URL Reference: https://www.topcoder.com/home/
Storyboard: 01 to 03
- Make sure all sections text and background & image position & effects match the storyboard.
- Please retain the "scroll to top" feature found in Mobile layout. This should be applied to all pages. On storyboard, this feature can be seen on "06 T_What Can You Do_Scrolled Down.png".
2. What Can You Do?
URL Reference: https://www.topcoder.com/what-can-you-do/
Storyboard: 04 to 06
3. App Design & Development
URL Reference: https://www.topcoder.com/what-can-you-do/mobile-applications/
Storyboard: 07 & 08
4. App Modernization
URL Reference: https://www.topcoder.com/what-can-you-do/web-applications/
Storyboard: 09 & 10
5. Innovation Programs
URL Reference: https://www.topcoder.com/what-can-you-do/innovation-programs/
Storyboard: 11 & 12
6. Algorithms & Analytics
URL Reference: https://www.topcoder.com/what-can-you-do/algorithms-analytics/
Storyboard: 13 & 14
7. Staff Augmentation
URL Reference: https://www.topcoder.com/what-can-you-do/staff-augmentation/
Storyboard: 15 & 16
- Products section (Technical Staff Augmentation Products) & Product Showcase carousel section (Results Matter) are not in the storyboard BUT they should be availabel too in Tablet device just like in Desktop and Mobile devices.
8. Community Segments
URL Reference: https://www.topcoder.com/what-can-you-do/community-segments/
Storyboard: 17 & 18
- The sections from "Your tech, our community." to "Step 3 - Unleash the Crowd:" shoud follow the same layout style found in "04 T_How Do You Do.png"
9. About Topcoder
URL Reference: https://www.topcoder.com/about-topcoder/
Storyboard: 19 & 20
10. About Community
URL Reference: https://www.topcoder.com/about-topcoder/community/
Storyboard: 21 & 22
11. About Team
URL Reference: https://www.topcoder.com/about-topcoder/team/
Storyboard: 23
- Please note that the PNG is a merged version of 2 PSDs. "T_About the Team.psd" is used for the Header & Footer, while "T_About the Team - SECTION.psd" for the section area.
- Existing Desktop functionality should be carried over to Tablet device.
12. About Customers
URL Reference: https://www.topcoder.com/about-topcoder/customers/
Storyboard: 24 & 25
13. Marketplace
URL Reference: https://www.topcoder.com/marketplace/
Storyboard: 26 & 27
14. Marketplace - Community
URL Reference: https://www.topcoder.com/marketplace/the-community/
Storyboard: 28 & 29
15. Marketplace - Products
URL Reference: https://www.topcoder.com/marketplace/the-products/
Storyboard: 30 & 31
- Existing Desktop functionality should be carried over to Tablet device.
16. Contact Us
URL Reference: https://www.topcoder.com/about-topcoder/contact/
Storyboard: 32 & 33
Code Requirements
HTML / HTML5 / PHP Template
- 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.
SASS/CSS
- Use SASS as CSS Pre-Processor. You can use the existing SASS files.
- Use Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the SASS code. We need SASS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- All SASS naming should not have any conflicts.
- As possible use SASS style when create all styling, avoid image usage.
- 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.
- Use Bower for Library Package Manager
- Create separate files if you plan to create custom functions
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
Browsers Requirements
- Chrome & Safari browser for both iPad & Android devices.
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser