Challenge Summary
For this contest you will create a static HTML prototype for a simplified e-mail client.
This application will be an e-mail client with a greatly simplified user interface, which is suitable for old people, and for some very young, and for any person having cognitive disabilities that would make using a regular e-mail client difficult.
The main goal of this application, is to satisfy elderly people and others who have trouble with complexity with an extremely simple and yet powerful communication client with a guided and very user-friendly GUI.
The goal of this contest is to produce the HTML and CSS that accurately captures the information from the provided wireframes and color/styles from the provided storyboard. You should analyze all sections of the provided wireframes and ask questions in the forum for anything that is unclear. All 23 pages in the wireframe will be implemented. You will be responsible for coding the following sections of screens: - User - Tutor - Admin User Screens There are 3 kinds of users : Simplified Client, Moderate Client and Advanced client. For Simplified client: - Home (simple_main.psd) - Read Mail (simple_reading.psd) - New Mail (simple_addressbook2.psd) - Reply Mail For Moderate Client: - Home (moderate_main.psd) - Read Mail (moderate_reading.psd) - New Mail - Reply & Reply all For Advanced Client: - Home - Read Mail - New Mail - Reply & Reply All - Forward Mail Tutor Screens - Login - My Profile - Add/Edit/Manage Users - Registration Admin Screens - Login - My Profile - Add tutor - Add user - View/Remove Client's Profile - Registration Please read description.rtf in the storyboad folder to help you understand the screen behaviors of this application better. Application Functionality Below is the base functionality of the application. Please consider this in your design. - Automatic periodical checking of the incoming e-mail with ability to manually check too. - Alerts for New Mail - Ability to read incoming e-mail in the simplified way. - Ability to easily reply to the incoming e-mail. - Ability to make a new e-mail and send it in the easy way. - Ability to arrange e-mail on the desktop of our e-mail client. - All application actions will be performed through the context menus. - Ability to create/open/delete folders in easy way in the advanced mode. - Ability to delegate all the configuration actions to a more experienced user (like child, tutor, etc.). - E-mail client can work in different levels of user experience (simplest, moderate, advanced, etc.) Target Audience Older, younger or cognitively disabled persons with little experience on modern computers who are overwhelmed and confused by the features contained in a standard e-mail client like Mozilla Thunderbird or Microsoft Outlook. Accessibility This site is about promoting accessibility throughout the web. Therefore, it is more important than ever that this prototype be completely accessible. We have provided an Accessibility Checklist (accessibility_checklist.zip) that MUST be completed and submitted with your prototype. All of AOL's Accessibility information can be found here: http://dev.aol.com/topic/accessibility AOL Accessibility Requirements: http://dev.aol.com/accessibility/requirements AOL Accessibility Best Practices: http://dev.aol.com/accessibility/bestpractices Development Considerations - Submissions must render correctly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. If something fails within a browser, please point it out in a separate text file. - Use styling and design from the storyboard provided. - Follow all functionality and navigation shown in the wireframes. - Submissions that provide a good solution for graceful degradation will get bonus points. It means the final website application will still work in case that the javascript, or images, or css is disabled. This is important for accessible important websites. For more information: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ HTML/CSS Requirements - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - If alpha channel PNGS are used be sure to include script to use filters for IE 6 - Do not use graphical text (for buttons use the graphics as backgrounds) - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. Javascript You are allowed to use the jQuery javascript library for this contest. You may use existing jQuery plug-ins to achieve the desired effect, but submissions that are completely original and do not require additional libraries beyond the core jQuery library will be viewed more favorably. Judging Criteria Submissions will be judged by the cleanliness and organization of their source code, the completeness of the solution, cross-browser compatibility and additional original elements provided by the competitors. Your submission should meet the requirements, but also add visual flair beyond the requirements in order to stand out. You should not hesitate to take your submission beyond the contest requirements. Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your design within it. You are free to resize or crop your design to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
The goal of this contest is to produce the HTML and CSS that accurately captures the information from the provided wireframes and color/styles from the provided storyboard. You should analyze all sections of the provided wireframes and ask questions in the forum for anything that is unclear. All 23 pages in the wireframe will be implemented. You will be responsible for coding the following sections of screens: - User - Tutor - Admin User Screens There are 3 kinds of users : Simplified Client, Moderate Client and Advanced client. For Simplified client: - Home (simple_main.psd) - Read Mail (simple_reading.psd) - New Mail (simple_addressbook2.psd) - Reply Mail For Moderate Client: - Home (moderate_main.psd) - Read Mail (moderate_reading.psd) - New Mail - Reply & Reply all For Advanced Client: - Home - Read Mail - New Mail - Reply & Reply All - Forward Mail Tutor Screens - Login - My Profile - Add/Edit/Manage Users - Registration Admin Screens - Login - My Profile - Add tutor - Add user - View/Remove Client's Profile - Registration Please read description.rtf in the storyboad folder to help you understand the screen behaviors of this application better. Application Functionality Below is the base functionality of the application. Please consider this in your design. - Automatic periodical checking of the incoming e-mail with ability to manually check too. - Alerts for New Mail - Ability to read incoming e-mail in the simplified way. - Ability to easily reply to the incoming e-mail. - Ability to make a new e-mail and send it in the easy way. - Ability to arrange e-mail on the desktop of our e-mail client. - All application actions will be performed through the context menus. - Ability to create/open/delete folders in easy way in the advanced mode. - Ability to delegate all the configuration actions to a more experienced user (like child, tutor, etc.). - E-mail client can work in different levels of user experience (simplest, moderate, advanced, etc.) Target Audience Older, younger or cognitively disabled persons with little experience on modern computers who are overwhelmed and confused by the features contained in a standard e-mail client like Mozilla Thunderbird or Microsoft Outlook. Accessibility This site is about promoting accessibility throughout the web. Therefore, it is more important than ever that this prototype be completely accessible. We have provided an Accessibility Checklist (accessibility_checklist.zip) that MUST be completed and submitted with your prototype. All of AOL's Accessibility information can be found here: http://dev.aol.com/topic/accessibility AOL Accessibility Requirements: http://dev.aol.com/accessibility/requirements AOL Accessibility Best Practices: http://dev.aol.com/accessibility/bestpractices Development Considerations - Submissions must render correctly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. If something fails within a browser, please point it out in a separate text file. - Use styling and design from the storyboard provided. - Follow all functionality and navigation shown in the wireframes. - Submissions that provide a good solution for graceful degradation will get bonus points. It means the final website application will still work in case that the javascript, or images, or css is disabled. This is important for accessible important websites. For more information: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ HTML/CSS Requirements - Your HTML code must be XHTML 1.0 Strict compliant - Validate your code - we will accept minor validation errors, but please comment your reasons for any validation errors in a text file you provide. - Your code must render properly in Internet Explorer 6, Internet Explorer 7, Firefox 2 and 3, Google Chrome and Safari in both Mac and PC environments. - Use CSS to space out objects, not clear/transparent images (GIFs or PNGs). - If alpha channel PNGS are used be sure to include script to use filters for IE 6 - Do not use graphical text (for buttons use the graphics as backgrounds) - Proper use of structural CSS to lay out your page is strongly encouraged. - No inline CSS styles - all styles must be placed in an external stylesheet. - Provide as much semantic code as possible. Elements such as ABBR, ACRONYM, ADDRESS, CITE and CODE enhance the semantics of content when used appropriately. - Use strong and em tags instead of bold and italic tags - Only use table tags for tables of data/information and not for page layout. Javascript You are allowed to use the jQuery javascript library for this contest. You may use existing jQuery plug-ins to achieve the desired effect, but submissions that are completely original and do not require additional libraries beyond the core jQuery library will be viewed more favorably. Judging Criteria Submissions will be judged by the cleanliness and organization of their source code, the completeness of the solution, cross-browser compatibility and additional original elements provided by the competitors. Your submission should meet the requirements, but also add visual flair beyond the requirements in order to stand out. You should not hesitate to take your submission beyond the contest requirements. Preview Image Please create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place your design within it. You are free to resize or crop your design to fit this size, but do not add any filters or elements for dramatic effect, such as drop shadows or reflections.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.