1. Provide Alt Text for Images and Image Maps: It’s really easy to provide meaningful alternate text to an image. Do this; consider what you would want a visually impaired person to hear about an image and type that as your alt text. If you do it well, you also get some SEO benefit. If the image is just decoration, use empty quotes so the person doesn’t have to hear anything.
2. Use HTML Elements Correctly: When companies develop technology to help people use the internet, they do so thinking that an OL will always be an ordered list and is meant to contain a list of something. As you build a website, you should only use OL for an ordered list. The P tag is not used for creating two line breaks; it is for holding a paragraph. Don’t be lazy…use the HTML tags properly and use CSS to make it look good.
3. Create Meaningful Link Text: “Click here” and “Learn more” only look nice to designers. They offer no benefit to website users. Your link needs to be the same text as the title of the page you are sending the person to.
4. Allow Text to be Readable: Make sure your text is set in percentages or em’s and not in points or pixels. This will allow a user to resize the text based upon their needs. Also, make sure there is enough contrast between the text color and background color. Not only does medium gray text on white background look poor but it’s hard to read.
5. Provide a “Skip to Content” Link: If you using a drop-down menu or a left column for navigation, provide a link at the very top of the page to skip right to the title of the page without having to go through your list of 70 links and 4 ads. This has some great benefits for mobile browsing to.

Testing

If you want to do some quick testing on your site, the first thing to do is lose the style sheet. Rename your style-sheet so the browser can’t find it and you should be looking at a perfectly accessible and usable HTML website. Then turn off the images. Any problems you have accessing your content are going to be experienced with mobile browsers, screen readers and technologies that don’t operate like a mouse does. Also, validate your HTML with the W3C Validation Tool. I also like to use Opera to view the site in its “small screen” mode, which turns the opera browser into a mobile browser.

This stuff is really easy and as stated earlier, even a little bit of work can go a long way to the people who need it.

Usability

Usability simply measures the level of difficulty a person has interacting with your user interface. Maybe “simply” wasn’t right. Usability deals with how easy your website or software is for a person to use. Are the buttons labeled so they make sense to the user? This is a usability question. When someone searches my site, are they getting accurate results? That is a usability question. Obviously, you can look at each and every aspect of a web page and question how well it can be used. Nothing is sacred here…font size, font color, length of sentences. I’ve studied several checklists on this matter and here are my top five items to be aware of. It will get you started in the right direction.

• Stick to conventions: As general rule, people expect the navigation to be at the top or left; they expect to see a search box; they expect to click the site/company’s logo and return home. Sometime in history, it was a good idea for a car to have four wheels and people have done well with that. If you want to make a five-wheeled car, don’t let me stop you but you will have to educate the world on how to use it.
• Common navigation theme: All pages should have some consistent navigation for the uppermost level of the site and access to a search engine and sitemap. It’s just common courtesy. That awesome idea about making the search box show up after I click on the “Find More” link actually stinks.
• Every page should be self-explanatory: Thanks to search engines, every page on your website has the potential to be the home page for somebody. Therefore, make sure the page title is clear, the body copy is scannable and that at a glance, a person can figure out what they are looking at.
• Clickable elements should be no-brainers: Let me adjust my soapbox for a second. Links that are in text need that underline and buttons need that drop shadow. Its how people know it’s a link and button. Also, the text that makes up a link needs to make sense out of context. “Learn more” and “Click here” are just lazy. Also, no precision clicking. If you want it clicked on, make it big enough for a person to do so. That 8-point font in the footer that I’m supposed to click to get to the sitemap drags the usability of the link way down. How would you like it if someone made the gas pedal in your car as small as possible so it wouldn’t interfere with the beauty of your floor mats?
• Don’t be difficult: There isn’t much more to say than that. Look at an element and ask someone else, “how hard is it to use that?” Don’t make people wonder what an element is or why it is on the screen or “why did they call it that?”

Testing

Do it. Usability testing is beyond what I’m talking about here but somebody somewhere said “testing one person is 100% better than doing nothing.” So grab someone from accounting and another from customer relations, park them in front of your website and do some guerrilla testing.

Next up is accessibility.

Research

Once the deal is done and you have a creative brief in hand, it’s time to get your hands dirty with some research. Start by investigating the competitive sites. Take note of the design style…some will be trendy, some will be bad and some will be right on. Try to get the tone of the sites as well. How do they talk to their customers? You’ll be talking to the same people soon so you want to find out who is doing it right. My next stop is to Template Monster and there I search out web templates based on the industry. Don’t steal anything but this is a place to check out some websites by other design professionals that spend quite a bit of time studying one particular industry. You generally won’t find anything cutting edge but you might get inspired.

• www.google.com: find the competition
• www.templatemonster.com: find trends in the industry

Design

Here you need pencil and paper. There are no links for that but I’m sure you know where to find them. At this point, I start sketching out layouts that begin as grids and then I add more flourishes and rough graphics to get an idea of scale. Scale is really easy to work out in pencil.

Navigation should be done at the same time and for that I use Optimal Sort. It is a great online card sorting tool that seems easy for your test subjects to use.

The next step is to create wireframes of your sketches and I use Gliffy for that since it is online. Visio is probably the standard here but I prefer anything online. Create your wireframes and test them on some users. After those are right, it’s time for Photoshop.

As far as colors go, I use two sites for finding schemes; Colour Lovers and Kuler. For images and illustrations, I use iStockphoto (no surprises there). It helps to create a lightbox for the project and keep dumping images in. Take a day off and then select an image from your lightbox. Nothing is more tiring than looking at hundreds of stock images and you don’t want to pick a bad image just because you are tired of looking.

In web design, there really aren’t that many fonts or font stacks to choose from. I use TypeTester and TypeChart to try out a few different combinations for the body and headings.

• www.staples.com: pencil and paper
• http://www.optimalsort.com: for selecting navigation categories
• www.gliffy.com: for wireframes
• www.colourlovers.com: for color schemes
• kuler.adobe.com: more color schemes
• www.istockphoto.com: stock art and illustrations
• www.typechart.com: for selecting a font
• www.typetester.org: for comparing fonts side by side

Prototyping

No mater how good your design is in Photoshop, it will different in HTML because of the text. For that reason, I set to work in HTML as early as possible. After I’ve sliced the graphics I need from the comp, I create the layout and CSS in an ASCII editor. I then use HTML Ipsum to grab the “Kitchen Sink” which has all the various HTML tags with text already in them. Now you can just work the style sheet until everything is right without having to find text or remembering all the tags you need.

• www.html-ipsum.com : grab the text and HTML

Conclusion

At this point, the work is pretty much done…just validate the template and clean-up.

When your site loads for the first time in front of a new user, the most immediate impact on the user will be from color. I believe that it sets the tone and mood for everything the user experiences from that point forward — even before they have read the first word. I won’t get into all of the psychology of colors here, not only because it is beyond the scope of what I’m writing but it’s also beyond the scope of my knowledge. Just trust me when I say that sites putting off a “red” vibe seem to be more urgent but you can probably take your time on a “blue” site. A site with a black background seems “dark” and “unsafe.” Ever plug your credit card into a site with a black background? Probably not. White sites are described as “clean.” This is the psychology that the color scheme produces on the person in front of the monitor.

Now that the pressure is off, how do you select a color scheme? At one time, I would always revisit the sites I really enjoyed and eventually, I had a wishing well of color schemes to choose from. Unfortunately, my taste didn’t really change with the times so neither did the well. At some point, all of my sites had the same colors. Also, I was finding that I was using colors that I liked (or the client liked) and not the colors the user liked.

When selecting colors now, I really consider two things and it makes the process so much easier. The first thing I look at are spaces the site’s target audience already occupies and then I think of the kind of mood and experience that will help the user achieve the goals of the site. Clear? Let me explain.

Spaces the User Occupies
Each site design should have a target audience or a few of them. Sometimes a persona created early on in the process will cover all of the planned users. Once you know this target, let’s say it is “female, ages 16 to 26, middle class income,” you need to find the places this person occupies and see what marketing is already going after the same target. For this I really like to go offline to find colors. Considering the sample target mentioned above, I would start by looking at “Old Navy” advertisements, the colors in the shirts and patterns of clothes designed for these people, movie posters, magazines, etc. I essentially get my hands on anything I can that is already made for these people and try to see what kind of patterns and trends I can come up with. It may be “lots of brown and orange with a high contrasting third color” or something like that. You will find more color schemes in the clothes rack at a department store (and there is a section in the store for each of your targets) than a day’s worth of searching online.

The next thing I do is to think of the mood or experience I want to create for the user and that helps to arrange the colors a bit. If the site has a goal toward taking an action (purchasing, signing up, etc.) and my colors were brown, orange and white, I would use the hotter colors (orange) along the path to that action. If I want the user to slow down, I would go with more muted colors such as the brown or shades of. The idea is to find a color scheme that your user is already experienced with and then apply the colors to create the experience you want the person to have.

In closing, I would suggest that the best place to find a website color scheme is anywhere but online.

Thx.