Assignment Overview

In this project you will design a full professional web presence in a way that will allow you to continue to add to and revise the site into the future. Your site should be designed according to HTML5, CSS 1 and 2, and Web Standards, which includes designing it according to all usability and accessibility guidelines we have read about. It should also be designed in terms of the ideas and theories on grid-based responsive design (Marcotte) and Emotional Design (Walter). The final should include

• a bold, eye-catching, and informative front page
• clear navigation and a footer
• an “about me”/biography page with a separate artist or writer’s statement, your resume or vita
• a portfolio with at least 5 fully explained and linked portfolio items,
• a contact page that includes a form designed at WuFoo
• links to and/or embed content from your social media sites

Your media="screen" stylesheet should prepare your pages to be viewed on at least 3 screen sizes:

@media screen and (min-width: 320px) /* mobile phone portrait view */
@media screen and (min-width: 768px) /* tablet portrait view */
@media screen and (min-width: 1200px) /* computer widescreen view */

Each screen must contain (at least slightly) different style properties.

Use the p2-sample-files.zip to get you started.

Assignment Specifics

Your pages must:

• Display appropriately (though not necessarily exactly the same) in Firefox, Safari (or Google Chrome, if you have no Mac access), Opera, and Internet Explorer 7+ (IE)
• Use responsive web design techniques (e.g., media queries, scale-able images, flexible layouts) to display on mobile, tablet, and desktop devices
• Have a consistent emotional design
• Have a consistent navigation menu and footer, which includes links to CSS, HTML5, and Wave accessibility Validation sites
• Link to and/or embed content from your Social Media spaces
• Use GoogleFonts instead of computer defaults
• Make use of conditional comments to load CSS for IE, when necessary

Your HTML5 must:

• Use the HTML5 doctype
• UTF-8 character encoding
• Use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes
• Be hand-written and original
• Not use tables, except for tabular data (if you have any)
• Have a meaningful .html name in all lowercase letters with the main page name being index.html
• Include accessibility features, such as links for skipping to navigation or content sections, ALT and TITLE elements on images and links, LONGDESC elements and files when needed, subtitles or transcriptions to videos, and so on
• Validate against the HTML5 and Wave accessibility Validation sites

Your CSS must:

• Be built over the top of a reset CSS file, such as Eric Meyer’s CSS Reset
• Use valid CSS 1 and 2 selectors, properties, and attributes
• Not use hacks; use conditional comments instead
• Be loaded into your HTML5 pages via the <link> tag in the head area (no inline styles via the style="" attribute or embedded in the head with the <style> tag) using the appropriate media attribute value.
• Be hand-written and original
• Validate against the CSS and Wave accessibility Validation sites

Project Goals:

• Establish a solid and sound representation of yourself and your skills, based on your career or field of study/area of expertise
• Organize and style your professional site using responsive design techniques for maximum rhetorical effect under particular viewing conditions (desktop/laptop, smartphone, tablet)
• Learn to prepare and organize appropriate materials to represent yourself on the web using theories on Emotional Design
• Learn to design a site in terms of Web Standards, including putting usability and accessibility at the forefront of your designs, as well as integrating sustainable design techniques
• Learn to use CSS to control the layout and design of HTML5 pages, using grid-based design methods for layout and typography

If You Want to Try More Advanced Techniques

Though not required, if you would like to take a risk and try more advanced techniques, some you might consider are:

• making your site one page (instead of multiple pages) by using JQuery interactivity (these are different from media queries)
• incorporating a customized image slider
• employing CSS3 selectors, properties, and attributes

Due Dates

4/26: Rough Draft of Full Site due by 11:00pm
4/27 – 4/28: 30-minute conferences to discuss drafts
5/5: Final Draft of Full Site and Reflections Due by 11:00pm

The Reflection
Compose two 500-750 word reflections that consider the following:

• First: evaluate your site in terms of the emotional and responsive design techniques and theories we read. Do you find that it has an emotional and responsive design? How did your design change from the initial sketches you used to what we see today? What would you like to add to help it be more emotional and responsive.
• Second: evaluate your your progress from the first assignment to the end of the second. Consider your successes and what you would have changed if you had the time or the skills. Discuss where you think you stand right now in terms of your comfort level with coding and writing for the web. What would you suggest for future classes to help you fully reach your goals and potential (that is, if you feel like you haven’t just yet).

Make each reflection a separate page coded using HTML5 and CSS and be sure to add links where necessary. You may also find it useful to add screenshots of your site and/or samples of code. Link to your reflections from your About page.

This assignment is informed by a similar assignment created by Karl Stolley.