• featured
• portfolio
• resume
• teaching
• et cetera
• contact

Visual Comps Review

• Let's look at the visual comps you finished
• How did creating them go?
• Were you able to create layers or layer comps to show state changes?
• Did you include all the required elements?

---

Image Types for Web

• Image File Types
• Use GIFs for simple flat colors or logos
• Use JPEGs for photographic content or subtle colors
• Use PNGs for photographic content that can include transparency (May not work with all versions of browsers)

---

Advanced Typography with CSS

• typography.html
• Ways to spec type size and leading (line-height:1.2em;)
• Special characters, the dreaded question mark

---

Controlling the placement of graphics

• Making content float around copy
• Clearing a float
• Lining up boxes
• Absolute and Relative positioning of content

---

Creating forms

• When would you use a form?
• Basic form structure and tags specific to forms
• How to control its look and design

---

Web Project Checklist

Here is a Web Project Checklist [176k] showing the basic flow of a new web project. We've discussed all of these things in class and they usually proceed in this way for most projects.

---

Practical Considerations

• Target your browsers and versions
  Screen Resolution and Page Layout
• Know your screen resolution, page width and pagefold
  Browser Screen Sizes Download 5.3mb
• 1024x768px is the lowest common denominator for screen size
• Understand where the prime real estate on your page is
• Who controls the home page? Designers, marketing, owners?
• Prepare for errors, 404 error page
  alistapart.com 404 error page
• Failing gracefully: disable javascript, disable flash, is your page still usable?
• Consider creating print versions of your pages
• Consider mobile versions of your content
• Control external links, pop-ups, blank pages. Do you want users to leave your page for content somewhere else?
• Know, and learn, from your competitors
  Seattle Videographers Google Search

Validating your XHTML and CSS

• W3C HTML Validator
• W3C CSS Validator
• The validator checks against your DOCTYPE
• Article about why to use the right DOCTYPE
• Fixing Errors

QA Process

• Checklist before launching a site
• Is everything spelled correctly?
• Do all the links work?
• Do all downloads work?
• Do all images have alt tags?
• Do all images or content have title tags if needed?
• Does the site work with images turned off?
• Does the site work with javascript turned off?
• Do all the forms work?
• Does the site have a custom 404 error page?
• Does the site have a way for users to contact you?
• How does the site look in different browsers?
• How does the site look on mac and pc?
• Can you print the pages?
• How does the site look on mobile devices?
• Can the text be enlarged on the site for people with vision problems?
• Does the site load quickly? (Quickly being relative, a site should load in 3-5 seconds typically)
• Does the html/css validate?
• Do different pages have unique keywords and metatags?
• Does the site have a favicon?
• Does each page have a unique title?
• 45 Useful Questionnaires and Checklists - Smashingmagazine

---

Meta Tags, Search Engines, XML sitemaps, Favicons

• META tag primer
• The basics of meta tags on a page
• SmashingMagazine Favicon article
• Creating and adding a Favicon
• Submitting your site to search engines
• 10 Things to know before submitting your site to google
• Get Analytics on your Users
  Google analytics
• Creating a sitemap in xml for search engines
• Techniques for improving your traffic, crosslinking, linkbait, seo
• semoz.org tools
• semoz crawl-test tool
• johncrice.com test crawl
• Web Design Client Questionnaire

---

Additional Learning & Resources

• Take the HTML & CSS class at SVC
• Read the Head First with XHTML & CSS book
• Read smashingmagazine.com for great articles about web design, UI and more
• Pester families and friends for small web projects
• Cruise craigslist.com for paying projects
• Build your own website: Keep practicing your skills
• Generate your own interactive ideas or projects and design them
• Ask for web projects at work
• The long trail of learning: html -> css -> user interface design -> information architecture -> javascript -> PHP/MySQL -> Flash -> ActionScript programming -> Animation -> Motion Graphics
• Don't give up!

---

Complete Instructor Evaluations

Make sure to complete the Instructor Evaluations before leaving tonight (Approx. 15min). I hope you enjoyed taking Print2Web!