Project 1 Details

I hope you all are doing well with Project 1. To summarize, Project 1 is due at the beginning of class on Thursday, October 13. Please be ready to copy your files to the Flash drive that I will pass around.

Here’s a quick housekeeping checklist (these are required):

• All your files must be in a single folder (named lastname-project1) which contains only the files necessary for your site. No old drafts, no PSDs, no PDFs: just .html, .css, and .js files plus your images. You’re free to organize these into folders however you like; just make sure your href and src attributes are written as relative paths to their corresponding page (e.g. <img src="images/poster1.jpg" />).
• All your filenames must be all lowercase
• Your home page file must be named index.html
• Your pages must be primarily driven by a single stylesheet (the acceptable exception would be extra lightbox or slideshow stylesheets that work in addition to yours)  
• Images must be properly optimized. Rectangular images that don’t need transparency should be saved as JPGs with a quality setting of 70-80. Images that require transparency should be saved as PNG-24. 

And here are the content requirements from the syllabus:

• Your site must contain a gallery of art/design work, your contact information, and a short bio. Additional content might include an artist’s statement, a résumé, writing samples, a links/inspiration page, and/or a client list.
• You are also free to incorporate dynamic embedding (Flickr photos, Twitter feed, etc) if that content makes sense as part of your concept and can be thoughtfully integrated.

Design Considerations

Typography

Make sure to give your project a typographic audit: first and foremost, proofread your text. Then take a look at the finer points: do your quotation marks on block quotes hang in the margin? Do drop-caps line up with their baseline, and have small caps been used if appropriate? Have you used the correct HTML entities for quotation marks, dashes, ellipses, etc.? Remember you can speed up this process by running your text through Textile.

Grid System

Most of you are using a grid system to organize your content into a system of columns that have a mathematical relationships. Try checking your grid alignments by taking a screenshot of your web page and then bringing it into your Photoshop mockup.

Code Considerations

Validation

Please validate your HTML and CSS. You need not use perfectly valid code (especially if employing CSS3 properties or pulling in external content), but none of your errors should come from unclosed tags, missing alt attributes, or CSS syntax errors.

Markup

Strive to use semantic — not presentational — markup. This fundamentally means using the right HTML tag for the content you are marking up. Your primary “vocabulary” for your text content includes h1-hn headings, paragraphs, lists, and blockquotes. For example, navigation links are traditionally marked up as an unordered list (<a>s nested in <li>s nested in a <ul>). If using HTML5, you’ll want to wrap this list in a <nav> tag as well.

In addition, although the browser can’t understand them, you should be preferring semantic class and ID names, too: main, intro, caption, gallery, subnav all describe what the content is, not how it will look when the stylesheet is applied. If your pages are filled with names like bluebox, largetext, or indented, you should go back and reconsider them.

Smart CSS

This project is an opportunity to practice using efficient CSS. Make use of the descendent selector (ul#nav a) rather than putting a class or ID on every element. Apply classes and IDs to your primary content containers so that you can target the contents of each one selectively. Remember that you can apply the same set of rules to multiple elements using a comma (#main ul, #sidebar ul). Take a look at the Document Object Model the Review of Classes, IDs, and Selectors posts as reference.

“Bulletproofing” Your Site

We’ve talked about the principals of “progressive enhancement,” “graceful degradation,” and the philosophy of developing “mobile first”. These are largely interrelated ideas: our stylesheets and javascripts should always be written in ways that anticipate non-ideal conditions: small screens, slow connections, old browsers, or lack of Javascript support. Here are some good habits to help make this happen:

• If possible, don’t specify heights on the primary containers in your pages (usually divs): it’s better to let the content itself expand the box — that way you can add more content later without updating the stylesheet, or even recycle the same div and ID on subsequent pages that contain different amounts of content. Use padding on the content to create space inside the container, and margins on the individual elements to create space between them.
• Stress-test your pages by resizing the text up and down a few times. (Make sure to check View > Zoom Text Only) in your browser. If the layout breaks, you may be able to improve the page by specifying fewer widths and heights on your containers.
• When styling links as buttons, use padding in combination with display:block; so that your clickable area include the entire button, not just the link text.
• When floating elements, you almost always need to specify widths. If the floats are interfering with the content that follows them in the markup, use the clearfix trick on the container of the floats.

Good luck!