Assignment Overview

This is the major project of Internet and Writing Studies: the creation of your 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 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 content-rich overview page (no splash pages), an “about me”/biography page with a separate artist or writer’s statement, your resume or vita, and at least 5 pages of portfolio items. You will also use CSS to add a compelling layout to your pages, enhance your navigation, and increase the accessibility and usability of your pages. It should also contain links to and/or embed content from your social media sites, including your blog.

Your site should be styled via two stylesheets written in CSS: one for screen (media="screen") and one for print (media="print"). Your media="screen" stylesheet should prepare your pages to be viewed on at least 3 screen sizes: desktop/laptop, smartphone, and tablet. Each screen must contain (at least slightly) different style properties.

While completing this assignment we will also create wire frames of the page layouts and sketches of the emotional design properties of the site.

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, scalable 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, XHTML, and CynthiaSays accessibility Validation sites
• Link to and/or embed content from your Social Media spaces, including your blog
• Make use of conditional comments to load CSS for IE, when necessary

Your XHTML must:

• Feature semantic markup in a sensible source order (structured for content, not presentation/design)
• 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
• Use the XHTML 1.0 Strict DOCTYPE
• Use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes
• Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made templates, though you may download these bare-bones XHTML and CSS files to help you begin.
• Not use tables, except for tabular data (if you have any)
• Validate against the W3C Markup Validation Service and the CynthiaSays Web Accessibility Tool

Your CSS must:

• Be built over the top of a reset CSS file, such as Eric Meyer’s CSS Reset
• Use only valid CSS 1 & 2 selectors, properties, and attributes (CSS3 will be an option in Project 3)
• Not use hacks; use conditional comments instead
• Be loaded into your XHTML 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; do not use of Dreamweaver’s CSS property dialog boxes or any pre-made templates, though you may download these bare-bones XHTML and CSS files to help you begin.
• Validate against the W3C CSS Validation Service (at least all CSS 1 & 2; consider segregating CSS3 with vendor prefixes to its own file)

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 XHTML pages, using grid-based design methods for layout and typography
• Learn to develop your site in a baseline browser, test in other browsers, and use conditional comments to address the oddities of Internet Explorer

Due Dates

• TH 10/25: Detailed wireframe and emotional design descriptions/sketches due in blog post at start of class
  
• M 11/12: Professional Site Rough Draft due by 11:00pm
• TH 10/29 12/20: Professional Site Final Draft and Reflection due online by 11:00pm (if you want an extension through January 2, email BW)

Note: Monday due date for this assignment is to provide you with additional time to work on the project rather than having it due the prior Thursday. If the class decides, I can move the due date back to that Thursday.

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 post on your blog 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.

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