Challenge Overview
Welcome to the Topcoder.com 2.0 Mobile Responsive Layout WordPress Challenge! The goal of this challenge is to update the provided theme into mobile responsive layout.
All WordPress functionality are already been built. This challenge will focus on updating the current layout to adopt in mobile devices.
All of the task requires for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Desktop version should be retained and should not get broken in doing the mobile version.
2. Use only the provided template markup, you can tweak/update it but do not create 2 version of code markup.
3. There should be no hardcoded text in the templates.
4. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data and theme should prevail.
5. Always ask in the forum for clarifications.
NAVIGATION REQUIREMENTS:
1. Main Navigation
- The main navigation is located at the right side of the page and is triggered by the nav icon that can be found on the top right part of the page.
- Functionality of showing/hiding the menu should be similar to the desktop version.
- The “Get Started” button and “Login” link should be visible only when the main navigation is shown.
2. Middle Page Navigation
- Some of the page has middle page navigations (ex. /what-can-you-do page).
- This middle page navigation will be a dropdown version as shown in 20 M_What Can You Do_1.png.
- Active page nav should be displayed by default.
- Expanded design of the nav is shown in 27 M_What Can You Do_Preview_Sub Menu.png.
- When user scrolled the page, the nav should still stick at the top section of the page just like the existing functionality in Desktop version.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided mobile storyboard layout. The following pages outlined below have specific requirements.
1. Homepage
- Each sections should take 100% of screen height with the exception of the bottom part (Let’s Connect and Footer sections).
- The arrow up icon that is found in “Why Should You Use Crowdsourcing” section will start to get visible from this section up to the last section. It should have sticky position at the bottom and when clicked it will scroll up the page to the top with smooth scroll animation.
- This icon is not yet existing from the provided theme. You can add a markup for this and add this to all the page.
- Multi columns section from the Desktop version will be converted to paginated section for Mobile version. Example of this is the “Why Should You Use Crowdsourcing” and “Our Products” sections. Apply this method to the other pages that has multi-column section and don’t have specific storyboard.
- Make sure that paginated section will work in mobile touch gestures.
2. What Can You Do with Crowdsourcing page
- Each sections height should follow what's in the storyboard.
- The sections of this page is transformed into a paginated section. See storyboards from 20 M_What Can You Do_1.png to 25 M_What Can You Do_6.png.
3. Mobile Applications page
- Each section's height will be as it is like in the storyboard with the ability to grow as required by the content.
- Follow the layout and styling of each sections as shown in 28 M_App Design _ Dev.png.
4. App Modernization page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 31 M_Cloud Migration.png.
5. Innovation Programs page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 33 M_Innovation Programs.png.
6. Algorithms & Analytics page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 35 M_Algorithms _ Analytics.png.
7. Staff Augmentation page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 37 M_Staff Augmentation.png.
- Some sections from the provided content are not existing in the storyboard. For sections not in the storyboard, please follow the layout outlined in “3. Mobile Application page” above.
8. Community Segments page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 39 M_Community Segments.png.
- Some sections from the provided content are not existing in the storyboard. For sections not in the storyboard, please follow similar layout outlined in “3. Mobile Application page” and “1. Homepage” above.
9. About Topcoder page
- The section below the middle page navigation should follow the same layout in 35 M_Algorithms _ Analytics.png.
10. Community page
- Plain text section can follow the style and layout from 39 M_Community Segments.png.
- Testimonial section can follow the same style from 19 M_Home.png testimonial section.
11. Team page
- Section below just need to be in single column.
12. Contact page
- Section below just need to be in single column.
13. Customers page
- Follow similar section layout from the previous page.
14. Marketplace page
- Follow similar section layout from the previous page.
15. Blog
- This page is out of scope.
- 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
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
All WordPress functionality are already been built. This challenge will focus on updating the current layout to adopt in mobile devices.
Final Submission Guidelines
Although this challenge requires to run in WordPress, all the theme’s functionality are already been created and functions properly.All of the task requires for this theme update are focused mainly in updating SCSS file and possible a little tweak in HTML markup.
PROVIDED FILES AND DOCUMENTATION
- WP theme, plugins, sample content, and deployment guide.
- Storyboard (PSD & PNG) files.
IMPORTANT RULES:
1. Desktop version should be retained and should not get broken in doing the mobile version.
2. Use only the provided template markup, you can tweak/update it but do not create 2 version of code markup.
3. There should be no hardcoded text in the templates.
4. Expect to have some difference in text content from the provided theme and storyboard. When this happens, text content from the provided data and theme should prevail.
5. Always ask in the forum for clarifications.
NAVIGATION REQUIREMENTS:
1. Main Navigation
- The main navigation is located at the right side of the page and is triggered by the nav icon that can be found on the top right part of the page.
- Functionality of showing/hiding the menu should be similar to the desktop version.
- The “Get Started” button and “Login” link should be visible only when the main navigation is shown.
2. Middle Page Navigation
- Some of the page has middle page navigations (ex. /what-can-you-do page).
- This middle page navigation will be a dropdown version as shown in 20 M_What Can You Do_1.png.
- Active page nav should be displayed by default.
- Expanded design of the nav is shown in 27 M_What Can You Do_Preview_Sub Menu.png.
- When user scrolled the page, the nav should still stick at the top section of the page just like the existing functionality in Desktop version.
PAGE REQUIREMENTS:
All page in the provided theme and sample data should adopt to the provided mobile storyboard layout. The following pages outlined below have specific requirements.
1. Homepage
- Each sections should take 100% of screen height with the exception of the bottom part (Let’s Connect and Footer sections).
- The arrow up icon that is found in “Why Should You Use Crowdsourcing” section will start to get visible from this section up to the last section. It should have sticky position at the bottom and when clicked it will scroll up the page to the top with smooth scroll animation.
- This icon is not yet existing from the provided theme. You can add a markup for this and add this to all the page.
- Multi columns section from the Desktop version will be converted to paginated section for Mobile version. Example of this is the “Why Should You Use Crowdsourcing” and “Our Products” sections. Apply this method to the other pages that has multi-column section and don’t have specific storyboard.
- Make sure that paginated section will work in mobile touch gestures.
2. What Can You Do with Crowdsourcing page
- Each sections height should follow what's in the storyboard.
- The sections of this page is transformed into a paginated section. See storyboards from 20 M_What Can You Do_1.png to 25 M_What Can You Do_6.png.
3. Mobile Applications page
- Each section's height will be as it is like in the storyboard with the ability to grow as required by the content.
- Follow the layout and styling of each sections as shown in 28 M_App Design _ Dev.png.
4. App Modernization page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 31 M_Cloud Migration.png.
5. Innovation Programs page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 33 M_Innovation Programs.png.
6. Algorithms & Analytics page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 35 M_Algorithms _ Analytics.png.
7. Staff Augmentation page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 37 M_Staff Augmentation.png.
- Some sections from the provided content are not existing in the storyboard. For sections not in the storyboard, please follow the layout outlined in “3. Mobile Application page” above.
8. Community Segments page
- Follow the same approach mentioned in “3. Mobile Application page” above.
- Follow the layout and styling of each sections as shown in 39 M_Community Segments.png.
- Some sections from the provided content are not existing in the storyboard. For sections not in the storyboard, please follow similar layout outlined in “3. Mobile Application page” and “1. Homepage” above.
9. About Topcoder page
- The section below the middle page navigation should follow the same layout in 35 M_Algorithms _ Analytics.png.
10. Community page
- Plain text section can follow the style and layout from 39 M_Community Segments.png.
- Testimonial section can follow the same style from 19 M_Home.png testimonial section.
11. Team page
- Section below just need to be in single column.
12. Contact page
- Section below just need to be in single column.
13. Customers page
- Follow similar section layout from the previous page.
14. Marketplace page
- Follow similar section layout from the previous page.
15. Blog
- This page is out of scope.
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
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser