There are many people who fall into the category of lower literacy when it comes to websites. Some researchers estimate that as much as 50% of the U.S. population can be defined as having a lower literacy, while 30% of total online users can be said to have the same.

What’s discussed below is definitely something worth considering and applying to your website, especially if you think that a significant proportion of your visitors fall into the lower literacy category.

Higher literacy vs. lower literacy

The most important thing that I can emphasize up front is that when I use the term “lower literacy”, I’m not talking about people who are illiterate or unintelligent. Quite the opposite in fact.  People who have a lower literacy are able to read – they just struggle with it to some degree depending on the particular medium in question. In this case, I’m talking about lower literacy as it pertains to websites.

In general there are some common characteristics of people who have a lower literacy:

• They have trouble scanning text
• They need to go through content word-by-word
• They’ll often find themselves re-reading long, unfamiliar words

People who are otherwise highly literate and intelligent might actually have a lower literacy when it comes to websites. Older people in their 50s, 60s, etc. are a perfect example of this. Anyone who has sat and watched how their parents use a website knows exactly what I’m talking about – some of those characteristics describe them perfectly.

Higher literacy is just the opposite. People who are highly literate, especially on the web, are able to look at a website quickly, scan it for what they’re looking for, and interpret what’s on the website and what the website has to offer them.

If you think this describes you perfectly, you’re not alone – there’s a significant gap in web literacy levels between older and younger generations. Younger people have been using websites for a greater percentage of their lives than older generations have, so they’re that much more familiar with them. Add in the fact that older generations tend to be more “afraid” of computers than younger generations are – such as clicking the wrong link, filling out a form, etc. – and you begin to account for that generational gap.

Lower literacy on the web

So how does lower literacy manifest itself when people use websites? Here are some common habits that lower literacy website visitors display:

• Reading the navigation – Lower literacy visitors tend to read through all of your navigation links first, and then choose the option that best meets what they’re looking for.
• Narrowing the field of view – Lower literacy visitors will read through content line-by-line, giving them a particular narrow focus that they might find hard to zoom out from.
• Skipping over information – If something becomes too complicated, then lower literacy users are more likely to completely skip over it, potentially missing something important.
• Accepting as “good enough” – Digging deeper requires a lot of reading (which can be challenging and time consuming), so lower literacy users skip, usually looking for links.
• Avoiding search tools – Lower literacy users might have difficulty spelling the search terms, and then when they see the results, have difficulty processing out-of-context content.

How to design for lower literacy users

How can you improve your website’s usability for lower literacy users in order to make it work for a broad audience? Here are some suggestions:

• Prioritize your content – Place the most important content at the very top of the page, where readers who might otherwise give up after a few lines will see, and keep any other important information above the fold. This especially applies to your call-to-action.
• Avoid confusing navigation links – The links in your main navigation(s) should be written so that they’re as intuitively as possible. There’s no need to be creative and write “Who We Are” when writing “About Us” will do just as good a job instead.
• Improve your in-content navigation – Follow some of the basic recommendations to improve your page titles and headers, and you’ll not only break up the content for higher literacy users, but keep lower literacy users from getting frustrated.
• Avoid distractions – Design elements like Flash banners can serve a useful purpose on your homepage, but on internal pages, avoid anything that moves or might otherwise be a distraction. These really get in the way when you’re trying to concentrate, which lower literacy users need to do.
• Use a consistent page design – Unless there’s some compelling reason otherwise, every page on your website should have the same general feel to it, and should include all of the major navigational elements. Consistency is the goal – something that lower literacy users struggle without.
• Make effective links – There are things that both designers and writers can do to make links more effective. Follow some of these recommendations – such as using icons on particular types of links, or making the links scannable – to help lower literacy users navigate your website easier.
• Simplify form instructions – Forms give many people trouble, so you can imagine the trepidation with which lower literacy users fill them out – especially if giving away personal information is involved. Keep your instructions clear to avoid unnecessary confusion.

Do some of these tips sound familiar? If so, it’s because many of them are also general usability guidelines that you should be following anyways when creating your website. If you’ve already tried to incorporate many of them into your website and think that it’s as user-friendly as possible, then lower literacy visitors shouldn’t have much of a problem using it.

Thoughts?

Is lower literacy something you should be concerned with if you have a website? Or do you think it’s dependent solely on who the particular audience for that website is – no different than gender, profession, interest, etc? Share your thoughts with everyone by leaving a comment below!

My recommendations are what I consider the absolute basic things that you need to do as you start working with WordPress. There are a lot more things that you might consider doing and that others have recommended doing – Cenay Nailer in particular recommends 22 things that you should do after installing WordPress, while over at Pro Blog Design they recommend 10 things to do.

A lot of the things that others recommend I’ll find myself doing later in the design and development process. I don’t think they necessarily need to be done the very first time you log in to your WordPress admin panel, which is the perspective I’m coming from.

So without further ado, here’s my list of 8 basic things that you should do right after installing WordPress.

1. Change the admin password

After you’ve installed WordPress and configured the installation, WordPress gives you an automatically generated password to use the first time you log in. This should be a no-brainer, but make sure to change that password to something that you can remember easier.

Never changed a password before in WordPress? It’s quite simple – just go to the Users panel, click on the “admin” user, and scroll down the page to where you can change your password.

2. Enable permalinks

By default, WordPress generates a link using database strings – http://www.example.com/?p=N, for example. It’s not the most usable or SEO-friendly format, which is why most people choose to enable permalinks. That way, links will appear a lot nicer – http://www.example.com/about/, for example.

To enable permalinks, you need to upload an HTACCESS file to the root level of your website, and then give it read and write (0666) permissions, which you can easily do with most FTP programs. Then, go to Settings > Permalinks to enable them in any of the given formats or customize them in your own format.

For more information, including what an HTACCESS file is, read through the “Using Permalinks” page in the WordPress codex.

3. Activate the Akismet plugin

Akisment is plugin that is highly recommended for use on your WordPress website – so highly recommended, in fact, that it’s already included when you first install WordPress onto your server. It blocks spam comments from appearing on your website, which is a big concern, especially if you have comments enabled on your website.

When you activate Akismet, you need a WordPress API key in order to complete the activation. You can get one by registering your WordPress website at WordPress.com, which is different than WordPress.org.

4. Upload and activate plugins

Now might be a good time to install any plugins that you know you’ll need on your WordPress website. You can always add more or remove any at a later time, and of course there will probably still be some configuration that you’ll need to do in order to get everything working properly on your website.

If you’re new to WordPress and don’t know what plugins to install, take a look through my list of essential plugins for your WordPress website or blog for ideas.

5. Customize the login screen

I’ve written elsewhere about the benefits of customizing the WordPress login screen, and it’s something that I like to do for any clients that I build a WordPress website for. It helps make it easier for them to use WordPress, and is a little extra touch that can go a long way towards making the administrative experience more personal.

The method I detailed involves working with the PHP and CSS files that come with the WordPress installation. That’s fine to do if you want a fancier login screen, but the drawback to it is that when you upgrade your WordPress installation, you’ll lose all that work.

I found a nice plugin called WP Custom Login Form Image that I started using instead, which lets you customize the image that you’ll see on the WordPress login screen. This way, my clients will still see their logo on the login screen, no matter how many times the version of WordPress changes.

Why do this here? Because it’s a simple touch that might otherwise be overlooked later on, I think it’s just best to do it in the beginning.

6.  Change the default category

WordPress sets up a default category for your posts called “Uncategorized”. If you don’t want that to display the word “Uncategorized” to display on your website though, you might want to consider changing the name of the category.

This is generally a good idea to do because you never know when you might forget to select a category for your posts – it’s happened to me before, and I personally don’t like seeing “Uncategorized” display as a category on my blog.

There are two ways of doing this, both simple to do:

• Rename “Uncategorized” – You can edit the name of the “Uncategorized” category like you can any other. Simply go to Posts > Categories, and then edit the category name to whatever you want it to be.
• Choose another category as your default – Create a new category with a name of your choosing, and then go to Settings > Writing. Towards the top of the page you’ll see a drop-down menu where you can change the default category to the one you created.

7. Upload your theme files

Now that you’ve taken care of some of the preliminary settings, you’ll want to upload your theme files so that you can really start to design your website.

Use an FTP program of your choosing to upload the theme files to the wpcontent > themes folder. Then, go to Appearance > Themes, and activate that particular theme.

If you’re using an already-developed theme, then your WordPress website should pretty much be good to go. If you’re a designer, this is where you can start developing and testing your design.

8. Make theme files writable

When I’m creating a WordPress theme, I create the files in Adobe Dreamweaver, and then upload them via FTP to the server. After the website is launched and the responsibility for it gets turned over to the client, I have to think in their shoes. Not all them have Dreamweaver or want to use FTP, so they’ll need a way to update those files on occasion.

That’s where the theme editor in WordPress comes in – which in my mind is one of the more underrated tools in WordPress. This is the spot where someone can edit a particular theme file without needing any special software on their computers. (It just assumes that they have a working knowledge of PHP and CSS.)

The one trick is that you need to give write permissions to your theme files in order for them to be editable in the theme editor. You can do this the same way that you do with your HTACCESS file when enabling permalinks.

Thoughts?

After you install WordPress, what are some of the things that you do to get it set up? Are there things you do that are different for a client’s WordPress website as opposed to your own WordPress website? And finally, is there anything that you think should be on this list that I didn’t include?

Share your thoughts with everyone on these questions and more by leaving a comment below!

Dark websites can seem refreshing sometimes, especially because most websites are somewhat similar in the sense that they feature dark text on a white background. That’s no coincidence, either – that color contrast is easiest on the eyes.

Light text on dark backgrounds, on the other hand, is more difficult to read because it makes your eyes strain more in order to read the text on the page. Add that natural effect to the fact that a lot of dark websites out there don’t necessarily pay attention to some of these usability concerns, and it’s no wonder that some people have a love ‘em or hate ‘em mentality when it comes to them.

I’ll admit it: I was one of those designers who didn’t necessarily pay attention to all of these unique concerns. I created a dark website for a friend back in 2008 – actually the only one that I’ve done so far. I paid attention to most of these special concerns, but as I write this and look at the website again, I notice some things I would have done differently that don’t follow the advice I give below.

Concern #1: Font selection

On a lot of dark websites, designers use a serif font (such as Georgia, Times New Roman, etc.) because those types of fonts help convey all the senses that dark websites have (elegance, professionalism, etc.).

So what’s the concern? Using a serif font for your main text, at a normal size of 12-14 pixels, means that the flourishes on the serifs start making the text less readable. The letters will start to blend into each other, so your eyes have to strain more to tell words and letters apart.

Here are a few tips to keep in mind for proper font selection:

• Use serif fonts for headers only – Headers, page titles, and elements of that nature are always larger than the text around them. When you increase the font size, the flourishes in the serifs are more distinguishable, and that text is easier to read.
• Always use sans-serif fonts for text – Sans-serif fonts, such as Arial, Helvetica, etc., don’t have flourishes. On a dark background, this will make them easier to read, especially at the smaller sizes usually associated with regular body text.

Concern #2: Text contrast

Text contrast may be one of the most important determining factors in whether a dark website is successful or not. Too little contrast will make your text extremely difficult to read and your website difficult to navigate through – especially in conjunction with what fonts you used. Too much contrast will make everything stand out too much, and the design won’t look as nice.

The key to a great dark design is finding the right balance between the text and the background. Here are a few tips for how to do that:

• Experiment with shades of gray – On dark websites, most body text is generally in some shade of gray. Use a shade that’s not too dark though, because if you choose one that is, the text will be very difficult to read – especially when in conjunction with poor font selection, as I mentioned above. (This is one of the most common usability mistakes you’ll see on dark websites.)
• Use pure white sparingly – Pure white text on a black (or similarly dark) background will be very noticeable to the eye. How you use white – and how often – depends on a number of things, such as how dark your background is, what your text color is (for example, you might use white for links if your text color is a shade of gray), how big your text is, etc., so use your best judgment.

Concern #3: Font size

The size of your text needs to help compensate a bit for the additional eye strain that people will have trying to read your text. That’s why on a lot of dark websites, the  text is a little larger than it would normally be on a light website.

Keep in mind too that the font size is what will bring together the past three usability concerns. If your body text is a serif font, colored in a shade of gray that doesn’t give enough contrast, and is sized too small, that’s the perfect trifecta for what make your text almost completely illegible.

Concern #4: Color schemes

Generally speaking, when you’re designing a light website, you have a lot more flexibility when choosing a color scheme than when you’re working with a dark website. Most color schemes work well with a light color to contrast against, but they don’t all work well with black.

Most websites start with white as the foundation, and use color to achieve depth and some sort of visual effect. Dark websites are different in the sense that you’re already starting with a color and already have some depth to the website. You don’t want to add a color scheme with a lot of colors on top of the dark color you’re already using – that’s a lot of colors, and can be visually confusing. Your color scheme should generally be simpler, and should use less colors than the color schemes for light websites.

Here are some other things to keep in mind:

• Use color to draw just enough attention – When your eyes first see a dark background, they are drawn to color much quicker than they would on a light background. So use your colors to help lead people where you want them to go, but don’t overuse them so that they overpower your website and it’s difficult for people to focus on your content.
• Choose your color scheme appropriately – Depending on what your website is for, there might be certain colors that make sense to use in contrast to the darkness of your background. Yellow and black work well for action, red and black for romance, blue and black for technology, etc. So know what your website is really for when deciding what colors to use as contrast colors.

Want to see samples?

There are plenty of galleries out there with samples of great dark websites. Here are a few worth looking at for inspiration:

• 30 Dark Designs You Should’ve Seen (Smashing Magazine)
• 25 Beautifully Dark Website Designs (Vandelay Design)
• Web Design Inspiration – 27 Dark Website Designs (Dzine)
• 30 Most Inspirational Dark Web Designs (Elite by Design)

Thoughts?

If you work with or come across a lot of dark websites, what do you think about some of these usability concerns? Are there others that I haven’t listed that you think are also important? Share your thoughts with everyone by leaving a comment below!

While some of these things fall into what I would call basic design practices that should always be done, others are what I think of as the little extra touches the designer can do to make a website that much better.

No matter what you call them, what everything on this list has in common is that they’re extra value that clients are receiving for their financial investment. It’s something that I communicate to them when giving a cost estimate for their project because it shows both how I’ll be spending the time and what they’re getting for what they’re paying.

See how many of these things you do when working on a website for a client – and if you’re not doing them, consider adding them to your regular design process.

Design and Navigation

• Create an error page – You may have checked every single link on your website, but it’s still inevitable that some visitors will type a URL wrong or somehow get to a page that doesn’t exist. A custom 404 error page will help your users find what they’re looking for when that happens.
• Add a favicon – Favicons are the little icons that you see at the top of a browser window and in your bookmarks list. They’re a great finishing touch for any website to have, and can even have some small usability benefits – great reasons for why websites should always use favicons.
• Validate the site markup – Make sure your website adheres to web standards before you launch. Validated websites load faster, better, and on more web browsers, and are also “future proof” in the sense that all web browsers will handle the website as you designed it.
• Cross-browser test – Your website should look and functions the same in all of the major web browsers and on all of the popular operating systems. Most of the popular cross-browser testing tools, such as Browser Shots, also test your website in various screen resolutions as well.

Server Optimization

• Resize images accordingly - If you’re calling an image from the server and the image files is really large even though it’s being displayed much smaller, resizing ahead of time will speed up the load time of that page, and help keep the amount of server space you’re using up at a minimum.
• Put javascript in the footer – If you’re calling external Javascript within your website, putting them in the header means that the server will try to load them first before loading your content. Putting them in the footer loads the content first before fetching the script – much more desirable.
• Clean up server of working files – While developing a website, I often find myself with extra files on the server that I had used at some point but am not using any longer. I delete those unnecessary files so that what’s on the server is only what’s being used somewhere on the website.

Search Engine Optimization

• Generate a sitemap – Creating a sitemap is useful for your users as a navigation tool, but for the search engines perspective it will help them find new content on your website faster than by relying on their crawler to find it. This will help you get more of content noticed and more links followed.
• Submit URL to search engines – If you’re launching a new website, the search engines won’t know about it unless you tell them to come and crawl your website. This one of the simple steps to bolster SEO on your website, so at a minimum submit the URL to Google, Yahoo, and MSN.
• Create a robots.txt file – This file tells the search engine spiders what they can and can’t crawl on your website. If you don’t want them to look at certain directories, this is where you would specify that. One way this might be useful for SEO is as a way to avoid duplicate content on your website.

Content

• Proofread your content one last time – There’s no excuse for spelling or grammar mistakes on a website. If you’ve written content for a website, such as links, intro text, etc., having extra eyes looking at it to make sure everything sounds good and is written properly will make sure any errors are caught.
• Check for broken links one last time – You can spend all the time in the world making your website as great as possible, but if you have broken links on it, the website looks bad. Before you launch, click through all the links on the website to verify that everything works properly.
• Set up Google analytics – Understanding what content your visitors are looking at on your website is absolutely essential in order to make it as effective as possible. Google Analytics is not only free, but incredibly popular and easy to use, which is why I use it on all my client websites.

Thoughts?

Is there anything that I didn’t list here that your normally do when you launch a new website for a client? Share your thoughts with everyone by leaving a comment below!

I took a quick look around at the major cities that I could think of that had public transportation systems, and I was quite surprised by the results. Some of the websites were quite nice and featured great web 2.0 designs, an emphasis on usability, nice graphics and colors, etc. Others were quite disappointing, and it was obvious that they are still languishing in the web 1.0 days.

I’ll let you judge for yourself though. Here are my top 10 public transportation websites – 5 of the best, and 5 of the worst.

The 5 best websites

1. Chicago

2. Boston

3. Washington, DC

4. San Francisco

5. Los Angeles

The 5 worst websites

1. New York City

2. Philadelphia

3. Portland (Oregon)

4. Seattle

5. Dallas

Thoughts?

Now that you’ve seen the websites, what are your thoughts? What do you think makes the 5 best ones so great, or the 5 worst ones so bad? Share your thoughts with everyone by leaving a comment below!

Without further ado, here are the websites…

The best websites

I chose these websites for a number of reasons, but mostly because they combined good, clean designs with a usable interface that easy to find the information you’re looking for.

University of Akron

Binghamton University

Butler University

Cornell University

University of Louisville

University of Michigan

Purdue University

Robert Morris College

Interestingly, scroll up and look at the similarities between this website and Cornell’s. Don’t they look strangely similar?

Siena College

Temple University

University of Tennessee

Texas A&M University

Xavier University

The worst websites

As I’ve discovered, there are a lot of bad university websites out there – and it’s not just limited to the smaller schools. It’s surprising that some of the biggest-name schools in the tournament have such bad websites, but sadly, that’s the case.

Duke University

University of Kansas

University of North Carolina

North Dakota State University

University of Northern Iowa

Radford University

University of Southern California

Stephen F. Austin State University

Syracuse University

University of Utah

Villanova

Western Kentucky University

University of Wisconsin

Thoughts?

It was hard for me to narrow down the field to the best and the worst, since there were a lot of websites that fell somewhere in between. But, now that you’ve seen these websites, what do you think of how I grouped them? Are there any that you really liked or disliked, or any that you felt belonged in a different category? Share your thoughts by filling out the comment form below!

I’m a huge fan of college basketball this time of year – but then again, who isn’t. I find championship week to be almost as compelling as the NCAA tournament itself. In a majority of the conferences, it’s win or go home – the champion gets an automatic bid to the NCAA tournament, and the loser’s season is over.

I’ll use any excuse I can think of to take a look around at the state of websites related to a particular subject. I’ve written about TV channels and Olympic national teams in the past, so naturally, I felt this was good an opportunity as any to look at more websites. I went to each conference’s website, took a screenshot of it, and put them together below with links back to the website.

What I thought of the websites

I have to say that I’m not quite sure what to make of what I found. And in retrospect, I’m not quite sure what I was expecting these websites to look like.

My initial impression of these websites it that you can definitely tell that they are very media-oriented. They all feature content that probably doesn’t get a lot of media coverage elsewhere – on-campus updates, player profiles, game results, etc. – and that relates to all of the other sports that schools compete in that don’t get as much attention as basketball or football.

When it comes to the designs, if I could sum them up in one word, I’d have to use the word “busy”. I wasn’t particularly blown away by any of the designs, and there were a few things that I noticed that seemed to go against good design principles:

• Random color schemes – The color schemes were all across the board, which gave varied impressions of each conference in general. Color can have a big impact on what your website says about you, as I’ve written about elsewhere.
• Visual clutter – There were a lot of graphic advertisements and pictures that made the websites very distracting visually. A lot of these conferences probably make good money from the advertisements they feature, but when you combine those with the streaming video AND the photos AND the color schemes, the designs just feel crowded and difficult to navigate, rather than clean and usable.
• Left alignment – Most of the websites were left-aligned in the browser window, which is something that most designers don’t do anymore. Whenever I see websites that do that, I get a dated feel from them, even if they aren’t.
• Dual navigations – A lot of the conferences featured two primary navigations – one that ran horizontally across the top and another that ran vertically down the left. If I were to redesign these websites, I would suggested using a drop-down menu that might combine both navigations into one more usable format.

But, I’ll let you be the judge. Without further ado, here are the websites.

The conference websites

America East

Atlantic Coast Conference (ACC)

Atlantic Sun

Atlantic 10

Big 10

Big 12

Big East

Big Sky

Big South

Big West

Colonial Athletic Association (CAA)

Conference USA

Horizon League

Ivy League

Mid-American Conference (MAC)

Metro Atlantic Athletic Conference (MAAC)

Mid-Eastern Athletic Conference (MEAC)

Missouri Valley Conference

Mountain West

Northeast

Ohio Valley

Pac 10

Patriot League

Southeast Conference (SEC)

Southern Conference

Southland Conference

Summit League

Southwestern Athletic Conference (SWAC)

Sun Belt Conference

Western Athletic Conference (WAC)

West Coast Conference (WCC)

Thoughts?

So, now that you’ve seen all of the conference websites, what do you think? Are there any that you really liked or disliked? Are there any specific improvements that you think could be made to make such content-heavy websites more usable? Leave a comment below and let’s talk about it.

P.S. – Championship Week ends this weekend with “selection Sunday”, so next week I’ll be publishing a similar post featuring the websites of the schools that are automatic bids from each conference.

In the year or so that I’ve been in business for myself, I’ve continually looked to improve both my design abilities and how I communicate to potential clients the ways that my knowledge can benefit them. I’ve been making great progress on both fronts, but I’d really like to thank you especially, because it wasn’t until I saw your work that I became totally confident in my abilities in both areas.

A few months ago I approached the dental practice I go to with some thoughts I had about improving their website through a redesign. Their website at the time was in pretty rough shape and badly in need of improvement. The main dentist there told me that they had just contracted with you for the project, since you specialize in websites for dental practices. I wished him the best of luck on the project, and said that I looked forward to seeing their new website when it was ready.

I was thinking about that conversation this weekend. Since it had taken place 3-4 months ago, I figured that the new website would be launched by now. I did a quick Google search and confirmed that I was right – it had indeed been launched.

See, I specialize in creating custom websites for my clients that not only look great, but are also highly functional from both a usability and an SEO perspective. I like to talk to my clients and get a sense of who they are and what they need before I build them a website. I don’t think those are high standards to meet, and I thought that most other web designers shared a commitment to those ideas as well. But as I learned from seeing your work, that’s not always the case.

For a small business like this dental practice, the website that you gave them doesn’t truly meet their needs. I really believe that a redesign should be a big improvement over what it is replacing, but in this instance, I would even go so far as to say that it is a step backwards from their previous website.

Some of the things you did really stuck with me – in particular:

• Not taking advantage of their former #1 Google ranking for “dentist Chicago” - I’m sure you already know how difficult it is to optimize a website for generic keywords and have good results with them. Their previous website already already did that for them, even if those benefits weren’t intentional or they didn’t know how or why that was happening. Now, when you do a search for those terms, their practice isn’t anywhere near the first results page anymore.
• Not using their existing URL – For some reason the new website was created at a separate URL than the old one – www.their-website-url.com instead of www.theirwebsiteurl.com. But both URLs are still appearing in Google search results, so it will make people wonder which website is accurate. If I were some random person searching for a dentist and had to think about the difference between the two, you can bet I would just keep searching rather than stick around to find out the answer.
• Not creating a custom design - It’s very obvious after a few clicks through the website that the design is based on a template. That’s fine I suppose, although it’s not something I would personally choose to do for a client. On top of that, there are a lot of basic things that just look sloppy – such as the alignment on your list items, for example. Sloppiness can give people the impression that the business is unprofessional – which is probably not what they want to convey.
• Not understanding the role that colors have on a website - This particular dental practice markets itself as a dental spa. What that means, I’m still not quite sure, even though I’ve been going there for almost 4 years; I just know they offer a free shoulder massage after I get my teeth cleaned. But in any case, for a business that markets itself as such, I would have chosen colors that were much more reflective of what they are all about – perhaps colors that convey a sense of relaxation and ease, such as light blues and greens. I’m afraid that the dark purple and grey combination that you gave them just doesn’t give off that vibe.
• Not styling your links so it’s obvious what is a link and what isn’t - Website users associate blue words as links, so the way you styled words for emphasis in the headers and content gives the impression that those words are links, even if they aren’t. If you would have chosen another color for emphasis and used blue for your links instead of the dark red you used instead, it would have gone a long way towards making the text links as usable as possible.
• Not making it easy to find their address - You put “Northside of Chicago” in the top right area of the header, which is valuable real estate on a website. As a visitor, it’s good to have of where the practice is located in the city – but since the north side is somewhat/sort of a big area, it would have been more useful if you told me their address in that spot instead. Instead, you put the address in a place that’s more difficult to find and where I have to scroll down to find it.
• Not making the home page useful – Their business offers some unique services, so it would be useful to visitors to tell them on the home page what exactly they offer that differentiates theirs from a regular dental office. You could have put links to those services that they get the most business from, for example. Filling one-third of the home page with a lifestyle graphic strikes me as unnecessary, especially if you could could convey those emotions through a better design and color scheme, as I mentioned above.
• Not making it easy to find what it is they do - The procedures and services offered at their practice is why they’re in the business in the first place, so you want people to know about these things in as many ways as possible on the website. Making a list out of the almost 40 different things that are offered and only making it available from within the sidebar of their procedures section just doesn’t cut it. Neither does not alphabetizing or sorting the list in any way either. Next time, perhaps organize those links by categories or some other way to make it much more user-friendly.

Still with me? Good, because I’d like to thank you for everything that you did, however poorly it was done.

Why would I want to thank you for all of these things that I would do differently? It’s quite simple actually. As a web designer who is still perfecting my craft, it’s often helpful to get a sense of what not to do on a website so that I know what to do when I design my own. And by looking at your work, you just gave me the perfect example of what not to design when designing a website for a client.

Call me an idealist, but I believe that when we, as web designers, work with clients, we have a responsibility to deliver more than just the product that they are paying us for. We have a responsibility to really work with them so that they understand two main things – how:

1. Having a great website can really help their business
2. The unique knowledge that we have is necessary to achieve those benefits

That is the value proposition for why clients hire you. I know it’s mine, and it’s also why I am so committed to good design, usability, and SEO. All three are vital to a successful website, and a successful website can be vital to their long-term success. It’s up to us to incorporate these three concepts and to do a good job at doing so. I don’t know about you, but if I ever delivered a website to a client like the one that you delivered, I would not be able to call myself a professional any longer.

For my own success, I truly believe that being able to communicate these two points to our clients – and doing so in terms that they understand – is what really convinces people to hire me and what will ultimately make me successful as a web designer.

I hope that you feel the same way, and that you take these comments constructively as a way to improve the product that you deliver on future projects.

Sincerely,

Addicott Web

P.S. Next time I’m at the dentist, I’m going to follow up with them about their new website, and am planning to present some of my suggestions to truly improve their website. I hope I can show them that they don’t necessarily need to hire a firm specializing in a particular niche market in order to have a great website. They just need someone who is committed to creating a website that reflects their purpose and is fashioned with good design, usability, and SEO in mind. That is what will really benefit their business in the long run.

Webmaster Tools

Google’s suite of webmaster tools can tell you all sorts of information relating to how Google indexes your website. You don’t have to insert any code on your website to enable these tools, but you do have to make sure that Google is looking at your website. (As soon as you log in to the webmaster tools, it will tell you whether it is, so if it’s not, you can submit the URL to have your website crawled.)

Some of the most noteworthy things you can do within these webmaster tools include:

• Submit a sitemap – Creating a sitemap is one of those basic SEO steps that I’ve written about in the past. Submitting your sitemap directly to Google, which you can do here, will help Google’s crawler find pages on your website that it might not find otherwise.
• See your rank in top search query results – You can see a list of what people typed into Google that somehow led them to your website, as well as the rank that your website appeared in the search results for that query. This can be useful in evaluating how successful you’ve been at optimizing your content around the keywords you chose.
• Generate a robots.txt file – The robots.txt file tells the search engine crawlers what to look at and what to ignore when they visit your website. If you don’t have one already, this tool can help you create and analyze your robots.txt file.

Google Analytics

Google’s analytics package help you analyze the traffic that your website receives. Unlike when you use the webmaster tools I mentioned above, here you have to embed some code onto your website in order for Google to receive data from your website, but there are step-by-step instructions provided for how to do this.

Once Google verifies that the tracking code is working and begins to import data, you can analyze your web traffic in a wide variety of different ways. From a web design perspective, here are some of the things you can see that I find most important:

• See your visitors’ browser capabilities – There is a lot of data that Google gathers from your website’s visitors, but these tools allow you to know many things such as their screen resolutions, screen colors, etc. One important tool that I find particularly useful lets you see which web browsers your visitors are using (Firefox, Internet Explorer, etc.). Why is that important? Different web browsers render websites differently, so knowing that the majority of your website’s visitors use one browser over another might save you time by eliminating the need for cross-browser testing.
• Know where the traffic is coming from – What websites are visitors finding your website through? Are there referring sites that are driving traffic to your website, or are the search engines the primary sources? Both will benefit you in the search engines, but significant numbers of the latter tell you that the SEO work you did on your website is paying off.

Other Google Tools to Use

Website Optimizer

Google’s website optimizer helps you test variations of different elements on your website, often from a usability perspective, to see which helps convert visitors the best. These changes can be small, like changing the size, color, or wording of an element on your website, but they can all have a big impact. Basically, this helps you make sure that your website is doing what it’s intended to.

Keyword Research Tool

Google’s keywords tool helps you research keyword and keyword variations to use when optimizing your website. You can analyze the keywords by search volume or by the competition for that keyword, both of which are important to consider when deciding which keywords you should incorporate in your SEO efforts.

Thoughts?

Now that you know more about Google’s free tools, if you don’t already use them, are you considering using them? Or if you already use them, what features or tools have you found particularly useful? Share with everyone by filling out the comment form below!

Yes, you read that correctly.

Barack Obama ran for office using arguably the most technologically-committed campaign ever. The new look of the White House website is no surprise when you keep that in mind – although I must say that I actually was a bit surprised to hear about it. Considering everything else that is being talked about this inauguration day, honestly, who was even thinking about the White House website?

Thoughts on the new design

The new look of the White House website picks up where his campaign and transition websites left off. In fact, if you go to Change.gov now, there is a note saying that the “transition has ended and the new administration has begun. Please join President Barack Obama at Whitehouse.gov” – so you do get the sense of continuity from one phase of his election and presidency to the next.

Macon Phillips, the Director of New Media for the White House and a contributor to the White House blog, writes that the new website is “just the beginning of the new administration’s efforts to expand and deepen the online engagement” that many Americans used to help play a role in the election.

I think what I’m most impressed with the most is how Obama’s calls for transparency and communication in government were carried over to the website. What those two things translate most readily into in web design terms is what I talk about all the time – a commitment to site usability.

What’s done well

What are some features on the new website that make it very usable and that I really like?

• Intuitive navigation – The top navigational bar has only a few simple choices, and the drop-downs that appear when you hover over a link provide links to all sorts of information about his agenda, the administration, the history of the White House, the government, and how to stay informed. They’re simple to use and look great – what more could you ask form.
• E-mail updates – This is a standard feature on many websites, but this is downright genius the way it’s incorporates here – not to mention groundbreaking. But it comes as now surprise to see the administration use this, considering Obama’s use of other technologies during his campaign, such as text messaging.
• Functional footer – This is also a commonly found design element nowadays, but again, it’s use here really fits well with the openness and accessibility that the website and administration are both trying to convey. It makes it even easier for people to find the information that they’re looking if they don’t want to use the drop-down menus at the top – again, a hallmark of usability.

Of course, the snazzy Web 2.0 design really does wonders in tying eveything together, and the web designer in me can’t help but wonder if it’s running on WordPress!

What could be fixed

I know I’m probably being a bit too nit-picky here, but there are a few small touches that I would have done differently:

• Styling the text links – The text links are the same color as the text, and aren’t underlined either, so it’s hard to tell what is a link and what isn’t. I would have done this a bit differently, since styling them properly helps with both usability and accessibility – something I detailed in another post I wrote on the subject.
• Page title tags – The page titles on pages throughout the website are very basic: “Contact Us” is all it says for the “Contact Us” page, for example. I’m sure that the White House website doesn’t have search engine optimization forefront on their mind, but it wouldn’t hurt to include some more information in them. People who use tabbed browsers would be appreciative of that!
• Breadcrumbs – Once you get into the sub-pages on the website, there is a well-styled breadcrumb bar that appears at the top of the footer area. I just wish that they would have done the same at the top of the page where it would be more visible.
• Form fields – Eye-tracking studies have shown that it’s best to put the labels on top of input fields on website forms, but the Contact Form on the website has them reversed. I would switch this up and it will look a lot better.

It’s a great start

Overall though, this is a great website that I’m very impressed with. I’m curious to see how the website grows and changes over time as more content is posted to it – pending legislation and executive orders, for example – and new features come online – such as the RSS feeds, which aren’t quite ready yet.

From a marketing angle, I think it very accurately reflects the message that the new administration wishes to convey about itself. And as I’ve written elsewhere, if the design of a website is able to help convey the right message about an organization, then that truly a great website.