Introduction ... or shirking responsibility onto the reader.
The second worst part in of writing this article is that many of the items on this list could be argued to be "personal preference". Hopefully, you'll walk away with ideas for your next website "sprucing up" project. The worst part of writing this article is knowing that there are people out there who don't even know they're making these mistakes. Some of these mistakes are made by inexperienced web developers and designers. Some of them are made by customers who will not heed professional advice. Some of these mistakes are made in oversight. I'm going to try to be as generous as possible to all those involved in the making of these decisions. But I'm sure that I'm going to piss some of them off.
And now - as any good countdown must, the top mistakes, as I see them, in reverse order.
Number 5 - Your Site Is Not Legible
Please, for the love of all that is sacred and holy, try to read your website. No, really, sit there all afternoon and try to read it. Now that you're cross eyed, look at my website or any article on FastCompany.com or their baby sites. See the difference? Now, I'm not going to say that the content on Fast Company is going to interest you the way that the content on your site interests you. After all, your site is your baby. You only put things on there that do interest you. In case it's not entirely clear here, I'm using "you" in the "you personally" interchangeably with the "your company" "you". Silly English. What I am driving at here is legibility. I want to read things on my site and Fast Company because they look "readable". The typeface is interesting, but unobtrusive, and the lines are spaced so that one line of text is not sitting directly above where the serifs for the next line (if we used serif-ed fonts) would be.
This one is easy to correct. Work with an experienced designer to make sure that text is large enough to be read comfortably, and that letter and line spacing make the page easy to scan.
Number 4 - Your PDF or Word Document Does Not Impress Me
There is nothing that you have to say that cannot be said equally well on your webpage. Your brochure? Well, that's a purpose your webpage serves. Your menu? Also should be on your page. A scan of a form you want me to fill out? That should be a form on your site. I do not want your website's junk in my downloads folder. If the design of your menu or brochure or form is so fascinating that I really must have the option of seeing it, link to a copy of it, from the webpage containing that content. Want an example? See my resume page.
Number 3 - Your Newsletter Looks Nice in Those Colors, Not Your Website
So, Susan from accounting set up your last company newsletter, and everyone thought she did a great job. A large (red) company logo at the top and interesting (red) typeface for section headers with bold (red) text to emphasize quarterly goals and nice (various shades of red) charts showing year over year growth. That much red in the space of one or two pages can work, but it won't on your website (unless, well, you're Verizon Wireless). Mono-chromatic websites, especially those that use "hot" colors, are more likely to get visitors to go away. Remember, in nature, those colors mean "I'll kill you if you try to eat me", and generally, things with those colors mean it. Dark colors, especially black, must be applied judiciously. A dark background on a website reads "oppressive". Leave that color choice to government entities. An over-abundance of pastel colors make a website read "immature".
An easy way to fix this is to utilize "your color" in splashes and small amounts. I've attempted to use just enough color on the pages on this site to keep it interesting, but not overwhelm anyone with a sense of "I'm going to kill you if you try to eat me" (which I would) in the orange flowers in the site header. The blog is a place for me to introduce splushes (technical term) of color without overwhelming the visitor.
Number 2 - In-Accessibility
This should be higher on the list. It's a HUGE personal pet peeve of mine. My mother suffered from multiple sclerosis. Towards the end of an otherwise outwardly healthy life, as that disease sunk its claws into the muscles and finite fibres of her eyes, my mother was reliant on a screen reading program to read email messages from friends and family and do what research she could to make the most of assistive technologies available to her. As recently as 2008, when she passed, there were major websites that were still inaccessible to screen reading programs. Bless her heart (that's 'southern' for "I love her too much to call her stupid"), she had been an avid Yahoo! user. For a sighted person, the general information layout for that directory-driven website, was, at that time, relatively convenient for finding news and doing minor bits of research. However, we quickly found out, that when a special screen reading browser was utilized, the only content available on the Yahoo! homepage was an apology that the "outdated browser" being used was not supported. We'll skip the technical analysis on this one, but suffice it to say, it was Yahoo! whose thinking was out of date, not the browser. (They have since corrected the issue.)
Accessibility is super easy. Well, once you know what you're doing. An accessible website, such as the one you're reading now, takes into account a few key factors:
- Each page should have a "Skip to content" link as the very first item "visible" to a screen reading program. This link should allow the user to navigate to an anchor on the page immediately before the beginning of that page's content, and AFTER all navigation and advertising items.
- Minimal "top" navigation. Have five or six "section" navigation items on each page and encourage users, through the use of in-section navigation to explore your site. This is just good design theory, anyhow.
- As few images as possible. Generically speaking, the web is a visual medium. However, every image on a page should serve a purpose to sighted person as well. Images on pages should ALWAYS have "alt text" which gives a carefully chosen SHORT description of the image. (PS, this also has a minor SEO benefit, as well.)
- Do not change your page's content based on the visitor's browser, only the layout. If your content management system allows you to produce text versions of the content of the page, do so and link from as high on the page as possible. Utilize link tags in the head with the rel="alternate" attribute to give screen readers the option to pull that content in stead. If Google agrees that the content from your main page and the alternate page are similar enough, there's another small SEO boost to be had here, as well.
- Use a program called "Lynx" to view your content. Lynx is a text-based browser that is capable of laying out content in the manner that most screen readers will attempt to read your site. A skilled designer or programmer will be able to make corrections seamlessly.
- Do not assume that the visitors to your site must be sighted because that's what Google Analytics tells you. Many modern screen readers utilize Firefox or Webkit (the foundation for the wildly popular Chrome browser) and DO NOT CHANGE their "signature". Some screen reading programs are actually plugins for these browsers and have no need to change their signatures. You should be following accessibility guidelines on your site whether you think your visitors may have accessibility issues or not.
Number 1 - Poorly Laid Out Content / Too Much Content
While verging on the sin of "too much content" on this page, myself, I feel that the tips, especially those about accessibily, contained herein are worthy of that. My final, and biggest flaw I find with websites is poorly laid out content, or just too much of it. I will, hopefully, eventually run into the problem of having too much content on this website; specifically within article pages, such as this one. I'm planning ahead, however. I've taken time to carefully categorize and separate my content, which makes navigating the site much easier. Long articles are kept separate from shorter "Blogs", but a search mechanism exists to allow users to search all content, independently of its categorization.
You will want to consider how to lay out your website, as I have taken the time to do so for mine. It is, in retrofitting current content to a new navigation system, the most boring job, and possibly the most thankless job, you'll ever do. I suggest starting with the steps laid out on adaptivepath.com for taking an inventory of pages. The benefits, however, can be amazing. Recategorizing content to make it more accessible to users can make old articles seem new, give you the opportunity to sift out crud that may not be performing, and generally revitalize the way users experience your site.
Conclusion
I've taken the time to lay out my site properly, in my humble opinion (ok, not so humble, but it's still my opinion!). Users with assistive devices will be able to visit my page and have a similar experience to those who read it. Those who read it, should find the choice of colors, fonts, font sizes and spacing pleasant and unobtrusive. This is by design. If my site is not your cup of tea, that's fine, at least I didn't make it on to the list of worst sites on the web.