!!!72 hrs!!! CSFV UI Prototype - News Pages Revamp

Project Overview

This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.

In this challenge you will be updating news pages to match the provided storyboard.

Competition Task Overview

The main goal of this contest is to produce HTML/CSS/JS prototype of the provided Storyboard following the outlined requirements below.

Detailed Requirements

Header, Menu and Footer

The header/footer will remain as it is, we are only updating design of the main content area of the pages

News Listing Page

• File Name : news-listing-page.html (this is a new html page you will create)

• Screenshots :

  • 01 News.png

  • 02 Empty News.png

• The news listing widget is designed to show news with images at left column, and news without images at right side column.

• We are going to load the news items content via ajax call, so we designed a loading indicator as in 02 Empty News.png, these should be very light background images that are set via css while content are loading it will be displayed. It is important to make sure they are very light in size so it loads and displayed fast when user open page and wait for results - and yes! we need an image size to be less than 1 byte :)

• Clicking view more will use the empty news widgets design as loading indicator for next items to be loaded.

• It is important that elements in the news item do not overlap with each other, disregard the length of the news image it should not overlap with items below it, also if we have 10 news tags (i.e. as xylem in below screenshot) if it needs to wrap in the line then it should not overlap with the title, and title should not overlap with excerpt below it if it needs multiple lines (even if three lines) .. etc. So code your prototype correctly that styling don’t get messed up if text length are more than what we originally have in design.  
  

• Also you can assume that the image width is same as the width of the widget, so DO NOT SET a width in css for the image. if the image width is larger than widget width then we should see that it is messing up the style so we fix the image dimension, we don’t want to scale down or stretch the image.

• The sharing icon will show social buttons on hover.

• Selecting from drop down list (top right corner of the page content area) will reload the content of the page via ajax, you need to simulate this in javascript.

• News item click behavior :

  • title, image, and read more will link to news details page.

  • The news tag will change the drop down selection and reload the content of the page via ajax.

• Code the page with SEO in mind :) Make titles of news items as H1 heading. do you have other recommendation ? :)

• Simulate how 'view more' work

• The bottom three widgets in the page are already implemented in index-loggedin.html, index.html, Achievements_Logged_In.html, and Achievements.html

News Details Page

• File Name : news-details-page.html (this is a new page you will create)

• Screenshots :

  • 03 News Details with Pics V1.png

  • 04 News Details no Pics.png

• News Details area will be loaded from WYSIWYG editor, so this page should not have a reset css attributes so it won’t affect the content of this area:
  

• The News title should be H1 heading to improve SEO for the page. Other improvements to html structure for SEO is welcome.

• It is important that elements in the news details item do not overlap with each other, disregard the length of the tags and title.

• The next/previous area below news details should be considered buttons, the whole area is clickable. Note that if news title is long then the area height should expand, we don’t want the title to overlap with borders of that buttons area.

• Hovering over ‘posted by’ username will show user info popup.

• Comments widget will load Disqus comment widget inside it. The widget header and borders are custom styling, it is a MUST to use the real disqus widget to test your work.

• News widget below comments are same as news listing widget but smaller in height.

  • The content of this widget will be loaded via ajax same as news listing page, use same JS code for it and same styling.

  • Simulate ‘view more’

  • Use the empty news loading indicator for this widget as well.

• We have two styling for the sharing social buttons in news details screenshots, we will use the one in “03 News Details with Pics V1.png”

• News tags above title are clickable. Posted by username is clickable.

• The bottom three widgets in the page are already implemented in index-loggedin.html, index.html, Achievements_Logged_In.html, and Achievements.html

General Notes

Use angular.js for content to be loaded via ajax. You don't and you are not required to maintain state of content when navigating between pages or when closing/restarting browser.

Specific HTML/CSS/Javascript Requirements

CSFV is a big project, and we are going to launch series of UI prototype contests in the next months. And the current Storyboard is one of the UI themes we will build for CSFV website, it will change in future as we are testing several themes. And since we are not using any Theming framework in frontend (i.e. wordpress) we need to make sure that the UI prototype specifically the CSS part we are building starting from this contest is predictable, reusable, maintainable, and scalable, so when we want to swap themes or upgrade the theme it will be a smooth transition/task. And in order to achieve these points we are enforcing css component-based structure, naming pattern, and enforcing CSS Lint.

CSS Structure and Naming Convention
Structure your CSS into the following categories :

• Base Components - consists of reset rules and element defaults.
• Modules Components - represent reusable visual elements, use this naming pattern :

  .component-name
  .component-name--modifier-name
  .component-name__sub-object
  .component-name__sub-object--modifier-name

  example

  .button-group { } /* component name */
  .button--primary { } /* A component modifier (modifying .button) */
  .button__icon { } /* A component sub-object (lives within .button) */

• Layout Components - for positioning of site-wide elements as well as generic layout helpers like grid systems, use this naming pattern :

  .l-layout-method { }
  .grid

  example

  .l-header { }

• State Components - refers to styling that can be toggled on or off via JavaScript, use this naming pattern :

  .is-state-type { }

  example

  is-hidden { }
  is-selected { }
  is-expanded { }

• Javascript Components - Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours, use this naming patter :

  js-action-name { }

  example

  js-submit { }
  js-action-save { }
  js-ui-dropdown { }
  js-ui-carousel { }

CSS Lint
Your code must pass CSS Lint validator with all options are toggled on, if you decided not to include any option in the validation, you must provide a text document explaining why you skipped specific lint option from validation, otherwise, reviewers will deduct your scope for not passing CSS Lint validator.

HTMLRequirements:

• Your HTML code must be XHTML 1.0 Transitional compliant
• 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 scorecard in both Mac and PC environments.

Javascript Requirements

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.

You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype.

Browser Requirements

• IE8+
• FF 3.5++ Mac & PC
• Safari Latest Mac & PC
• Chrome Latest Mac & PC

 

Final Submission Guidelines

.