9/29/11

This assignment may be linked to your final course project, and could be part of your final portfolio (DArt 480). Here are good places to look for design inspiration:

http://www.csszengarden.com (of course)
http://www.thebestdesigns.com/ (current, iframes, fractured looks)
http://www.linkdup.com (lots of CSS, Flash)
http://www.alistapart Jeff Zeldman's magazine

Also (being realistic) there are free templates out there. Here is one source (Comments? Critiques?). And here is the file.

Use a style sheet to establish a screen version of the resume. Play with the font style, contrast, color, white space, relative measures (ems or pixels or % or word-variants). Use inheritance for more efficient code (e.g. use body{ ...}). Use positioning to establish boxes, using margins and padding as needed. Try combinations of absolute, relative and floats.

Put a background (not white) in the body, and consider adding a watermark (maybe b&w text-based logo, at about 20 or 30% opacity). Use borders, background, background-image, list-style-type, and so on to make CSS do the design. Image replacement is extra credit, but you should understand what it is and some of the techniques (see this summary of revised IR methods).

This is an online resume for a designer, so use links, hover effects, appropriate images, and so on. You must incorporate @font-face and at least two other CSS3 elements (specify for which browsers) such as text-shadow: or box-shadow: border-radius:, gradient(), multiple columns (see Extra resume notes 2:CSS3 notes and our Gillenwater projects).

Finally, you must have one CSS for screen and one for print (see link from alistapart.com and the demos on the Schedule for this course) AND the resume must render acceptably in both IE (8 or 9) and Firefox (5+) or Safari (5+).

The final project should probably have the Web style sheet as an embedded CSS file, with the print file external in a <link> above it. You can experiment with embedded and linked for both browsers if there are problems.

For the print CSS, you should turn off complex images (display: none;), add some borders or other decoration, consider adding a footer that gives the URL (see handout), use points for type, fit to an 8 1/2 by 11 page, and force the page break (page-break-before:always;). Note that the second page could have a list of skills or addresses of references.

DUE: Thursday, Oct. 13. For full credit (5% of grade) you must bring your work-in-progress to class October 11 and we will address them as a group. Also, the final versions must have valid CSS that you can check here or on the Firefox toolbar. Note that that means specifying a <!DOCTYPE>. You can use XHTML 1.+ transitional or strict, or try HTML5. If you want to use proprietary code, validate the code without that, and then put it back in. Print out the results page when it validates.