Or, some of what I learned at An Event Apart Boston

(some of this I already knew, unfortunately)

General

• Words are important, content is the meat of most web sites
• Text should be concise and to the point, scannable, not bulky
• Should reflect the brand or flavor of your site, speak to YOUR audience
• Consice, meaningful tagline
• Instruction should be simple and clear
• Get the point across in fewer words

Inspiration

• Look at some of the many CSS galleries
• Keep morgue files (a collection of photos or objects that inspire you, you may also want a collection for a specific client or project)

Usability

• Make things clear, the user should get it right away
• Test with about 3 people and test often
• Your test users don’t have to be targeted, they can essentially be anyone
• Recruit friends or friends of friends, buy them lunch or give them a gift certificate
• Fix the biggest problems first, tackle the rest if you have time

Accessibility

• Label items with straight forward meaningful text (especially important for javascript items where titles aren’t likely to show up)
  • What’s this object called?
  • What does it do?
  • What are it’s settings?
• Think about how a screenreader might see the site, get a program if you can (Camtasia, Morae, CamStudio)
  • Particularly tabs and other links that change things on the page without reloading
  • It may help to put a title before a section and give it a margin-left: -999em; so that screen readers will pick it up but other users won’t
• Test your site for color blindness – Colorblind Web Page Filter

Testing

• When you have a layout complete, remove the images and see if the text stands on its own
• Grayscale the design and blur it to see where the focus lies
• Create a style sheet just for testing. To make sure your images and anchor tags are accessible:
  • Put borders on images, and not on images with alt tags
    img {
    border: 5px solid red;}
    img[alt] {
    border-style: none !important;}
  • Put borders on anchor tags, and not on anchor tags with titles (same as above)
• Run HTML and CSS validators
• Turn off images, css, js (one at a time) and make sure your site is still usable
• Increase and decrease the browser’s font size
• Look at your site using another language (with a web translator)
• Firefox has a great add-on for achieving some of these things – the Developer’s Toolbar

Web Standards

• By using standards and semantic markup we’re preparing our sites for future developers and future changes
• Standards are easy, you just need to start using them
• Use Microformats, it’s easy and forward-thinking

CSS

• Many IE6 bugs have been fixed with IE7, but there will always be some more
• Use Dean Edwards script to bring IE6 up to par with the rest of the web – insert conditionally based on browser
• Create a separate CSS file for your browser specific hacks – insert conditionally
  <!–[if ie6]>
  <link rel=”stylesheet” type= “text/css” href=”ie6fixes.css” media= “all” />
  <![endif]–>

Clientelle

• Choose good clients, don’t accept a crap job just because you need the money – it will be hell and you’ll hate yourself for it
• Build trust, your the professional, show them that you know what you’re talking about
• Put the plans and process in writing, constantly reiterate the plans, follow up meetings with an email summarizing the discussion
• Sell ideas, not pixels – your designs should have meaning and convey a certain message/brand
• Criticism can be harsh or nonexistent, ask questions to derive what the client really wants and repeat what they’re saying back to them in your own words