What Makes a Bad Website?

Attractive, welcoming websites are not just an accessibility issue. However, building attractive, welcoming websites may make your site more accessible.

When you visit a website, especially for the first time, have you ever had an immediate like or dislike for the site? If so, why? Could it be that it took far too long for the website to display on your screen? Most people get frustrated if a website or even a webpage takes more than 10 seconds, much less 30 seconds. At one time, that was the standard. Hard to believe, isn’t it? Of course, connection speeds were lower back then, but so too were the demands that web designers placed on a website.

Maybe the site color scheme is the problem. I’ve seen some websites with color schemes that almost hurt my eyes when I looked at them. Often the font colors are too similar to the background like a blue text on a black background (or vice versa) or perhaps a lime green on a white background. When the text is too hard to read, I typically just move on to another site. But what if you have no choice. Well, there are ways to deal with this issue in some browsers that have accessibility controls. There are also some add-ins for your browser that can make the text easier to read by changing the text and background colors. But what if the problem is not a solid background color, but a pattern, gradient, or even an image?

Then there is the question of fonts. Some fonts work well across all browsers because they are common such as Arial, New Times Roman, Calibri, and Courier. There are also generic fonts like Serif and Sans-Serif which most browsers use as defaults if the website tries to specify a font that is not installed on that machine. However, there are hundreds if not thousands of other fonts. Some are easy to read. Some are quite decorative (which can mean hard to read). You probably would never create a website using a script type font (handwriting) unless your goal was to give the effect of a handwritten document. Some other fonts are best reserved for posters or possibly titles, but never for the entire document.

It is not just the font choice, there is also the font size, the font style, and the font color which I touched on briefly above. Some of these factors can be easily adjusted by the person’s browser. For example, if the font size is too small or too large, one can in nearly all browsers adjust the zoom factor of the page. Font style is not as easily to adjust. But consider that an entire page of bold or italic text should never be used because both styles should only be used to emphasize individual words or perhaps phrases. Notice I did not include underlining as a possible font style. Underlined text should be reserved for text that serves as a link to another page or site. It should never be used to underline regular text on a page least it confuses a reader into trying to click on it. This is especially a problem when the text is a section header within the text. The viewer may think that because the text is underlined that it is a link to additional information and attempt to click on it. When they discover that clicking on the text does nothing, they may think that the link is broken. Another situation occurs when a page contains only links. Some web designers think that having everything on the page underlined looks bad and they refrain from using the underline style. This can sometimes work if it is obvious that everything on the page is a link, but in any case, the link should still be displayed in a different color and when the user passes over the link with the mouse, the color should change and perhaps the underline appears at that time. On the other hand, if the page is mostly text with the occasional link, color alone may not be sufficient to identify the links which will frustrate the viewer.

What about the websites where it looks like the page designer tries to put all the information on the first page forcing the user to scroll and scroll and scroll to get through the content? While this may be acceptable for a book, it is not acceptable for most web pages especially when different topics are discussed as your scroll down through the page. When the viewer first opens the site, how are they to know where to find the content they are looking for exists within this long scrolling page or if it even exists? Of course, one solution might be to place a Table of Contents at the top of the page which describe each topic to be found on the page with a link that jumps directly to that point in the page. However, instead of doing that, why not put each topic on a separate page and link to the page instead. This method makes more sense even to the web designer because individual pages are easier to maintain. This also brings up the question about navigation.

How easy is it to navigate around the website? Can you get to the information easily from the home page of the site? Can you easily return to the home page when you are finished reading a topic? Is there a hierarchy of topics that go from more general information to very specific information? Then there is the question of how to display the menu. Should you use a series of major categories that run across the top of the page that open a drop-down to the next level in which the individual items in the drop-down display a flyout of more detailed information? This will work if there are not too many levels. After about three or four levels, this type of navigation gets very confusing. Another method uses a side menu which begins again with only the major categories. In this case, each time you drill down a level, the side menu changes to display only the pages beneath that item along with perhaps an option to return to the site’s home page. If you only want to go back one or two levels, you can always use the back arrow button in most browsers to step back up the hierarchy to any point.

Does the text use a lot of jargon or TLAs (that’s Three Letter Acronyms)? Sometimes web designers forget that the jargon or TLAs that they use everyday may not have the same meaning to the viewer or perhaps no meaning at all. For example, if you saw CIA in a sentence would you know if they were talking about the Central Intelligence Agency or the Culinary Institute of America? Using words specific to an industry may make it difficult for some viewers to understand the content of the page.

And while we are speaking of understanding the content of a page, did you know that some word processing programs like Microsoft Word can evaluate the complexity of the text used on the page and compare it to grade levels from elementary school grades through graduate level? Generally, a good rule of thumb is to write using words and phrases that require an 8th grade level of reading comprehension. Unless you are writing for an elementary school level site or PhD scientific study site, this target grade level may be best.

I suppose that I have rambled on enough tonight. Over the coming weeks, I hope to dedicate time to explore these and many more topics in greater detail. How are these topics related to accessibility of your website? Perhaps some of you have already surmised that you can address many of these issues directly while at the same time ensuring that your site is accessible to the most people. In fact, accessibility guidelines may require that you redesign your website and in that process resolve all of these issues. A website that is easy to read and use is not just something needed for people with various vision, hearing, or motion control issues. It is something that benefits us all.

C’ya soon.

Author: sharepointmike

I am interested in all things scientific and technical, but especially SharePoint, SQL Server, Power BI, and ADA.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: