the final professional site
For the final professional web site and online portfolio I would like you to think outside the box. That is, to move away from the boxy layout that we used in the rough draft. That does not mean that your page will not be structured by boxes, but that you might not show the borders of those boxes (and I suggest you use one of the many CSS layout tools that have been posted to the CSS Social Bookmarking List and then altering the stylesheet to fit your needs). Rather, I’d like you to think about using color to make bold and significant statements about you, who you are, and the kind of job you are looking for or are currently in. The goal is to create a clean web page.
To see how people are using CSS to incorporate color in wonderful ways, see CSS Beauty, Stylegala, and CSSloaf. When looking at the sites on the pages, try to avoid focusing on how they are using links or flashy displays and focus on the colors. Then, using the CSS Developer Toolbar go and take a look at their CSS to see where they are controling for color, whether it is an image or not. You might also look at Dan Cederholm’s discussion of Faux Columns. Others have discussed other techniques (some of which you have posted on the CSS Social Bookmarking List).
Specifcs for the professional site final draft:
- Rename your professional page draft “index-prof-draft.html” and name the new page “index.html”.
- Think about this as a completely new web site. That is, do not try to adapt or alter the rough draft of the site. Start from scratch using the sketches you created for class.
- The text for this site is going to be of primary importance. You are presenting a professional identity for yourself and as such you should discuss yourself in that light. Talk about your education, your major, your coursework, your career goals, and so forth. If you are going to be a teacher, mention your teaching philosophy and how you run a classroom. If you are an artist, contextualize your art in relevant theories and philosophies. If you are a writer, talk about your writing, your approach to writing, your influences. If you are in business, discuss your the business and your job within it. This text should be between 200 – 300 words and broken into paragraphs. Go back to Neilson and Loranger to see what they have to say about writing for the web.
- It is up to you if you want to have a photograph of yourself; it is better to have your name in a good sans-serif font than to have an awkward photograph. But, the choice is yours. More and more often photos are not appear on the front page, but on an inner page (if they appear at all).
- Have a horizontal and/or vertical navigation that includes links to :
- influential web sites or CSS blogs you have come across (5)
- professional web sites (5)
- this course
- the CSS social bookmarking list
- your place of employment and related items
- an about page (about.html) if you feel it necessary to say more about yourself
- a portfolio page (portfolio.html)
- your css zen garden page if you choose to complete one (csszengarden/index.html)
- a resume (can be a PDF or HTML)
- and your home page (index.html).
- Between the two <head></head> tags, include the following:
<title>title of your page</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />This code will allow CSS and XHTML validators to correctly identify the type of page you have, which will result in an accurate validatation.
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="ROBOTS" content="ALL" />
- Your name must be wrapped by <h1></h1> tags and styled in the way you’d like, including an image replacement hack that is used in the CSS Zen Garden or the one I tend to advocate because it does a better job of allowing for ALT-like text:
#banner {The reason for placing your name in <h1></h1> tags is because search engines are more often than not looking to the <h1/> to rank results
margin-bottom: 5px;
padding: 0;
background: url(’../images/banner.gif’) no-repeat top left;
height: 125px;
}
#banner h1 {
margin-left: -2500px;
}
- the following accessibility features must be included:
- TITLE tags to all images and links
- ALT text to all images
- a correct DOCTYPE and language
- TABINDEX tags to all links
the portfolio
While a resume is nice to have, more and more often potential employers are asking for portfolios that highlight your work and your abilities. As a result, we will be creating portfolios with a professional look and feel—ones you would feel confident asking a potential or current employer to see. The portfolio should include work that you would like others to see and you want to highlight, such as: articles or papers you have written (convert all Word docs to PDF); photographs or other creative work; teaching materials, etc. Anything that highlights your talents. The fact that you are putting it online shows the employer that you have web design skills.
The portfolio should have the same layout as your professional page (though the colors can be altered to indicate to the user that you are on a new part of the site, as Doug Bowman does with the different sections of Stopdesign). Include between 5 and 7 items in the portfolio. When adding your work to your portfolio, please include the following kinds of information:
- a brief summary of the material, which should include if it was crated as a result of an assignment and what that assignment was
- if artwork, a description of it written as Joe Clark and the Art of ALT recommend writing long descriptions
- date it was created
- your role in the design (for example, sole designer, role in the group, etc.)
- design objectives (if any)
- applications used (if other than Word)
- other relevant technologies used (such as camera type, film speed, lens, etc.)
- file size (if .pdf, .gif, etc.)
You have the option of placing all of your portfolio items on one page (such as on my Courses page) or on individual pages (such as on my photography portfolio—a site that was created using the Faux Columns technique). Each layout scheme has its benefits. Often, the design and goals of the site constrain how much is on one page. I also encourage you to look at the CSS portfolio gallery archived at Design Shack. Much of the work is more advanced than we will be able to do, so use it to help stimulate ideas.
due date
Final CSS Home Page Due: Monday, Dec 8 at start of class
Final CSS Portfolio Due: Monday, Dec 15, by 11:00pm