Things to Remember When Designing For The Web

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

This entry was posted on Thursday, March 29th, 2007 at 11:05 am and is filed under Design, Technical. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.