Challenge Overview
Welcome to SFDC Communities Blogging UI Prototype Challenge (Mobile) - Part 2. In this challenge, we are looking forward to your UI prototype for SFDC Communities Blogging.
For this challenge, we need you focus to create prototype that will fully work within MOBILE platform.
In the end of this challenge we need solid UI prototype result with best practice solution, that can be updated easily in the future challenges..
Tips for Success:
Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Final Submission Guidelines
The main task of this competition is to develop HTML5 prototype based on the provided storyboard designs. Your prototype must work properly in all the required browsers.
PAGE REQUIREMENTS:
Notes:
- As possible we need all pages on this prototype linked each other. Let us know if you need clarification about the flow.
- All forms input on every page MUST follow storyboard design look consistent across required browsers.
- Please use Proxima Nova font. Use @font-face technique.
- For this Desktop Version, suggest how hover state look for every buttons and links. Make sure the style not far off from our current theme.
- Please save all data in separate data/*.json files, and use JavaScript to load the data. And use well-defined methods for retrieving the data, e.g. getting a list of recent blog posts might use getPosts(), were as getting comments might use getComments(postId). (Or) come up with any other methods that you recommend (Angular JS, etc...)
SF1 Requirements:
You can find the style guide for Salesforce1 (SF1) here:
- http://sfdc-styleguide.herokuapp.com/
It is not necessary that you need to use the below plugins but it could help ease your work
- https://github.com/SalesforceFoundation/bootstrap-sf1
- https://github.com/joshbirk/onestarter
- So, you can either use above plugins (or) come up with your own prototype.
- If you are using above plugins, make sure to have a notes that shows how to deploy the prototype.
Getting Started with Salesforce1:
- Sign up for a free Developer Edition Salesforce org: https://developer.salesforce.com/signup
- Setup org to view SF1 in desktop browser: http://jessealtman.com/2013/12/working-with-salesforce1-on-the-desktop/
- Or, login to your Salesforce org from your mobile device's web browser (even Safari in iOS Simulator works) - we had provided the login credentials in forums..
1) Homepage/Dashboard - 01_Homepage.jpg
- This is the default page..
- In this page, make all the blue color text as dead links (#) and please link certain pages as given below…
- Clicking on the notifications icon in the top right shows the notification panel (02_Notification.jpg) sliding from the left
- Clicking on “Main Menu” icon should slide the main navigation (03_Navigation.jpg) from right…
- Clicking on “Post Title” under Latest Blog posts will take user to 05_BlogPost_OpenedByAuthor.jpg
- “Follow” button onclick should change to “Unfollow”
- Allow user to select the tabs “Following and Followers”,
* Notifications:
- Follow the storyboards
- Clicking on any notification will take the user to corresponding page...for this prototype – take the user to a blog post (05_BlogPost_OpenedByAuthor.jpg)
* Main Menu:
- Follow the storyboards..
- Clicking on the menu icon again hides this..
- “Dashboard” takes user to 01_Homepage.jpg
- “Blogs” takes user to 04_BlogTab_All.jpg
2) Posts View - 04_BlogTab_All.jpg:
- This views shows all the posts within the blog.
- We need below interactions for this page..
* All, Published, Drafts - 04_BlogTab_All.jpg:
- These views are all the same as blogroll, when a particular view is selected then it needs to show active state (black color)
- In these views, each of the blog posts will have a below called “Quick Edit, Preview, Unpublish, Trash”
- Clicking on “Quick Edit” should take the user to 04_BlogTab_Quick-Edit.jpg
* Clicking on Post title should take the user to 05_BlogPost_OpenedByAuthor.jpg
- Please remove “Bulk Actions drop-down, Apply” that is shown at the bottom.
* Blogroll - 04_BlogTab_BlogRoll.jpg
- These views are all the same just that, when a particular view is selected then it needs to show active state (black color)
- In these views, each of the blog posts will have a below called “Preview”
- Clicking on a blog-post title in this view should take the user to 02_BlogPost_Other-User-View.jpg
* Trash - 04_BlogTab_Trash.jpg:
- This is similar to other (blog roll, all, published and drafts) view..
- For each post we need these below links “Undelete, Preview and Delete Permanently”
* "Blog Sorting and Search" need not be implemented, just have them as it is shown in the storyboard. Just have it as dead links!
3) Blog Post View (Author View) - 05_BlogPost_OpenedByAuthor.jpg:
- Follow the storyboard for this view – note that this view has admin capabilities as it was created by the logged in user…
- We need below interactions in this view…
* “Like it” button
- Clicking on this button need to change the “Liked” button (see 02_BlogPost_Other-User-View.jpg)
- Again clicking on “Liked” will change it to “Like it” button
* “Social Share” button
- Clicking on this button should show this view “05_BlogPost_Share.jpg”
- Within the ”Social Share” modal, clicking on “Share Now” or “Close” icon should close the modal window…
For below interactions, please find corresponding UI elements in 02_BlogPost_Other-User-View.jpg
* “Follow:
- Click on this button will change it to “Unfollow” button and clicking again will change it back to “Follow”…
- The clicked style of "Follow" button will be similar to "Show More" button in 01_Homepage.jpg..
* Add Comment:
- Click on “plus” icon in “Chatter Comments” will take the user to 03_BlogPost_AddComments.jpg
- Clicking on “Post or Cancel” within the “add comments” view will take the user back to blog post page…
* Any other links will be a dead link for now…
4) Blog Post View (Reader View) - 02_BlogPost_Other-User-View.jpg:
- Follow the storyboard for this view – note that this view doesn’t have any admin capabilities as the blog post was not created by the logged in user…
- All Posts from the blogroll view that were not created by the currently logged in user will see this view…
- All interactions as mentioned in the “Blog Post View (Author View)” is required here except anything that is not a part of this view.
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.
- Documentation of your prototype
CODE REQUIREMENTS:
HTML/CSS Requirements
You're encouraged to use and take advantage of CSS3.
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.
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.
No inline CSS styles- all styles must be placed in an external stylesheet.
Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
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)
Label all CSS, Javascript, or HTML hacks with explanations so others will understand.
Your code must render properly in all browsers listed in the Browser Requirements section.
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 Mobile browser
- Chrome Mobile browser