|
My Site Design Checklist
By Mitchell Harper
Every week I receive an overwhelming number of emails from people who ask me to critique their Websites for
design and usability flaws. Hopefully though, if you use a sound process to develop your site, you won't need a
critique.
Here are the basic elements I consider each time I design a site -- using these as a checklist, I can be sure I've
covered all the Web design essentials in each design I complete. Try these tips and check off each point in the
list when you create your next site!
[ #1: Select A Color Scheme And Stick
To It ]
One day while surfing around, you decide to check out a new link. When it loads in your browser, you notice that
the home page is colored in red, black and gray. Then you click on a link to, for instance, the About Us page, and
you're greeted with a yellow and green page adorned by blue text.
This sort of inconsistent coloring is enough to deter visitors from ever coming back to a site -- not only is it hard on
the eyes, but it screams a lack of professionalism.
Before you even start to code your site, choose two or three complementary colors and stick with them. If the
organization for which you're building the site has a logo or brand that uses particular colors, you might consider
using those. If you take a look at any site of a large or successful company (try www.coca-cola.com or
www.ford.com), you'll see that, even when different sub-sections of a site are color-coded, the brand colors
are carried across every page of the site.
Take a look at other sites that you like: what colors do they use and how do they use them? Do they gradually
introduce the colors or are they all smack bang in the middle of the screen when you load their home page? I've
come up with a list of the five most used color combinations around the Web:
1. Red, yellow and white
2. Blue and white
3. Red, gray and white
4. Blue, orange and white
5. Yellow, gray and white
[ #2: Design For Cross-Browser
Compatibility ]
This is one of the most important aspects for a designer to master. Never, ever implement either an Internet
Explorer - or Netscape-specific function into a site unless it will only be used by a closed user group
(e.g. a company Intranet).
Sure, it can be tempting to implement super-dooper DHTML effects such as automated iFrame scrolling, but be
warned: those who don't have the latest browser installed won't take to kindly to your ignorance of their needs. If
you're desperate to implement flying pigs or falling snowflakes on your site but still want cross-browser
compatibility, then take a look at BrowserHawk from Cyscape.
BrowserHawk is a nifty set of COMs that allows you to detect all sorts of things about the client's browser,
including whether or not they have JavaScript enabled, and the version and name of their browser, to name a
few.
[ #3: Provide An Intuitive, Easy To Use
Navigation System ]
Have you ever been to a site and wondered where in the world the links to the rest of its pages are? Menu
accessibility is one of the key elements in creating a positive experience for your site's visitors.
Most Websites either display a left-aligned, vertically orientated menu, or a top-aligned, horizontally orientated
menu system. Surveys have shown that using either of these menu styles (or both together, if you lay them out in
a complementary format) is guaranteed to provide your visitors with a positive site experience. Using these
familiar styles will make your users feel comfortable moving from page to page, and means they won't have to
hit the back button every time they want to return to the home page.
To see what I mean, spend a couple of minutes moving around Amazon.com. Now, spend the same amount of
time at the site at www.isonsw.com.au. Which site's menu system did you feel comfortable with? I'm
sure you answered Amazon's, because it was consistent, easy to use, and made it blatantly obvious which page
you were on, no matter where you were on the site. When you develop a new site, you should prototype at least
three menu systems and ask friends, family and work colleagues which one they would prefer to use and why.
[ #4: Use Cascading Style
Sheets ]
Cascading Style Sheets (CSS) allow you to develop a specific setof style classes, which you can implement
throughout your site. Style sheets can also be used to change certain style attributes of the built-in HTML tags,
such as making the color of a <H1> tag red, or making the background color of a <td> cell yellow, etc.
Use the color scheme you identified in tip #1 to create a variety of styles including a bold headline, an "important
points" style, and a default text style. You may also want to change the default style of the anchor tag so that your
links match the color scheme of your site.
[ #5: Open External Links In A New
Window ]
One easily implemented tip that's often overlooked is this: make sure that any links that don't take the visitor
directly to a page on your site should be opened in a new window by default.
When you think about it, this approach benefits the visitor as much as it does yourself: they're given free reign to
browse the external link, with the option to return to your site simply by closing the external site's browser window.
About The Author
Mitchell Harper is the author of many eBooks and he also owns SiteTell. SiteTell is a unique viral marketing tool
that lets your visitors tell their friends about your site using either email or ICQ in just seconds. SiteTell harnesses
the power of viral marketing, making it extremely easy for you or anyone to let their friends, family, colleagues and
others know about your site! Learn more at SiteTell.com.
|