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

About Nicole

I'm a quiet artist making a living as a web designer.
This entry was posted in Design, Technical. Bookmark the permalink.

One Response to Things to Remember When Designing For The Web

  1. Debbie Gray says:

    A great checklist-Thanks for posting this!

Leave a Reply

Your email address will not be published. Required fields are marked *