Asking these questions often means stepping outside of our role as designers and putting on a marketer’s cap, because ultimately that’s what a lot of this information is all about. Marketers focus on helping clients communicate with their customers, and that’s exactly what a successful website does.

People sometimes rely on our expertise as web designers without understanding that marketing is also an important part of what we do. If information about the target audience falls through the cracks, sooner or later the client might come to realize that their website isn’t doing as well as it should be. In their mind, that’s a reflection on your product and work as a web designer.

So put on your marketing cap, and ask your clients some of the following questions in order to design a website that will truly meet the needs of a particular target audience.

Demographic information

The most basic information you can get about a target audience is their demographic information. While it’s important that your client is happy with the website, you need to take into account basic demographic information in order to create a design that will make the website more successful.

Here are some basic demographic questions to ask about a target audience:

• What gender are they? – Knowing whether the target audience is male, female, or both makes a huge impact on your design decisions, mainly in what colors you choose. Men and women react differently to colors, and colors symbolize different things to age groups, professions, and ethnic or social groups.
• How old are they? – Generally speaking, different age groups may be more computer savvy than others, have different familiarities with finding or doing something online, and have different expectations about what functionality they’ll find on a website.
• What keywords are they searching for? – Knowing what keywords people are using to find the product (specifically) or search online for (broadly) is useful for SEO purposes. Ask whether the website is geared towards businesses, individuals, etc., and then use keywords based on their answer.

Content information

Visitors are coming to your website for some purpose, whether to find information, make a purchase, etc. While the colors and functionality of the website are important, the content is what they’re really looking for.

Here are questions that I ask my clients about the content expectations of their target audience:

• Why are visitors coming to your website? – Websites for businesses, organizations, and news media all have very different purposes. People come to each type of website looking to do something specific. Knowing what people are most often looking for will help you, as the designer, know what content to emphasize, how to structure the information architecture, and more.
• Why should they come back again? – Designing a successful website means that you’ve convinced people that it’s worth their time (and/or money) to visit the website again in the future. That means communicating some incentive to them, either through your products or through the information they can find on the website. Getting them to visit once is great, but getting them to come back is even better.
• What should they see on the homepage? – It’s always tough to prioritize what information should be seen on the homepage. Focusing on your target audience and understanding what they want quick access to should help make those decisions easier. Also keep in mind what the purpose of your website is, and what people are coming to your website for, to help prioritize what content should go on it.

Technical information

If I’m being hired by a client to redesign an existing website, I always check with them to see if they’re using an analytics program to track their website usage. Most of these programs also offer you information about the website’s visitors, which would be very useful to know when making some design decisions.

Here are a few questions that you should ask if you know that data is available from the current website:

• What kind of browser are they using? – What proportion of your visitors are using Firefox? Internet Explorer? Safari? This information might be especially useful to know if the target audience is largely using IE 6.0; if they are, then chances are you’ll have to find some workarounds for the inevitable programs with how your design will display.
• What are the most common screen resolutions? – Are they using 1280 x 1024? 800 x 600? Something in between. This information is useful because it will give you a sense of not only how wide your main content area can safely be, but of what proportions you can use in your design in order to let most people be able to see it so that it still looks nice.

Thoughts?

What other questions do you ask about a website’s target audience when you work with clients? Share your thoughts with everyone about this topic and anything else that comes to mind by filling out the comment form below!

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!

So before I go into why favicons are used and how to make them, here’s a brief review of what they are. When I use the term “favicon” I’m referring to an icon that is associated with a particular website, and which web browsers display in three places – next to:

1. the URL in the address bar
   
2. the website’s name in a list of bookmarks
   
3. the page title in those browsers that have tabbed browsing
   

Is it absolutely essential to have a favicon on a website? Of course not. But incorporating one into your design is one of those small touches that goes a long way towards improving the overall quality of a website, and it can also have a few smaller benefits for your visitors.

Why use a favicon?

If my clients ask about it, I always tell them the little icon isn’t there just for looks. It has a subtle – yet important – role in building the brand on their website. When a visitor sees one on their website, that can be a strong indicator that they came to the right place – which can also be reassuring in a sense.

But using favicons also serves a more practical purpose as well, at least from your visitor’s perspective. How so? By saving people time when browsing the Internet.

It’s the same principle that applies elsewhere on your website. When you look at a web page, your eyes notice an image before the text surrounding it. So when I’m looking through my folders and folders of bookmarks, looking for the favicons of the websites I’ve filed away helps me find what I’m looking for that much quicker.

In the image I used above, you can see what I mean. When a website doesn’t use a favicon, your web browser will use a little blank page icon next to the website’s name in your bookmarks list. If you get enough of these in a column, then it becomes a bit tedious to sift through all of them to find the website you’re looking for.

But if a website does use a favicon, it makes it all the more easier and quicker to look through a list of bookmarks and find then one that you’re looking for, because your eye will notice the colorful favicons before it does the text of each bookmark’s name and the blank icons surrounding it.

Making a favicon

A favicon is a special file that ends in an .ICO extention, so you can’t just use any old image. But you can design your own image and then use one of the many websites out there that can convert your image into a favicon.

Favicons are 16 pixels by 16 pixels in dimension, so you want to be sure that when you’re designing your icon, whatever your including will actually be readable. Again, this is why so many favicons are simply the logo of the organization or business.

Here are some places where you can upload an image and convert it into a favicon for your website:

• Favicon.cc
• Dynamic Drive
• Favicon from Pics (this is the tool that I use)
• Favicon Generator

See if you notice them

So the next time you’re browsing through your bookmarks or your favorite websites, take a closer look and see if you can notice the favicons that are used. And if you have any other thoughts about favicons, share with everyone by commenting on the form below!

If you want to upgrade to the latest version of Internet Explorer, you can do so here.

Keyboard Shortcuts

It might take you a little while to learn these shortcuts, but once you do, your browsing will be that much quicker. Here are some of the more common shortcuts:

• Alt+Home (Go to your preset home page)
• Alt+Right Arrow (Go to the next page)
• Alt+Left Arrow or Backspace (Go to the previous page)
• Home (move to the top of a page)
• End (move to the bottom of a page)
• F5 (reload the current page)
• Ctrl+D (bookmark the current page)
• Ctrl+F (find)
• Ctrl+O (open a new website or page)
• Ctrl+N (open a new window)
• Ctrl+T (open a new tab)
• Ctrl+W (close the current window)
• Alt+D (select the text in the Address bar)

Tab Navigation

(Note: these shortcuts apply to IE 7.0 only; version 6.0 does not feature tabbed browsing.)

If you’re like me, sometimes you have a lot of tabs open at the same time. Instead of using the mouse to select between the different tabs that you have open, use the following keyboard shortcuts:

• Ctrk+Tab (rotate forward among tabs)
• Ctrl+Shift+Tab (rotate to the previous tab)
• Ctrl+W (close the current tab)
• Ctrl+1-9 (choose a number to jump to a specific tab)
• Ctrl+Alt+F4 (close other tabs)

Mouse Shortcuts

If you’re already using your mouse and it would be easier for you to use a mouse shortcut instead of switching to the keyboard, here are some quick shortcuts. Note that these shortcuts depend on whether your mouse has a scroll wheel built into it or not.

• Shift+scroll up (go to the next page in that tab)
• Shift+scroll down (go to the previous page in that tab)
• Ctrl+scroll up (increase text size)
• Ctrl+scroll down (decrease text size)

Auto Complete

While not as well known as the shortcuts above, this can be very useful.

Go to the address bar (Ctrl+L) and type the name of the site without the “www” or the “.com”. Let’s say “google”. Then press Control-Enter, and it will automatically fill in the “www” and the “.com” and take you there – like magic!

Thoughts?

I’m curious to hear whether you find these tricks useful or not. Or, maybe you have some of your own that you’d like to share. Either way, good luck as you use Internet Explorer more efficiently!

Keyboard Shortcuts

It might take you a little while to learn these shortcuts, but once you do, your browsing will be that much quicker. Here are some of the more common shortcuts:

• Spacebar (scroll down on a page)
• Shift+Spacebar (scroll up on a page)
• Ctrl+F (find)
• Ctrl+D (bookmark the page)
• Ctrl+T (open a new tab)
• Ctrl+K (go to the search box)
• Ctrl+L (go to the address bar)
• Ctrl+ (increase text size)
• Ctrl+ (decrease text size)
• Ctrl+W (close tab)
• F5 (reload the page)
• F11 (view in full screen mode)
• Alt+Home (go to your preset home page)
• Home (move to the top of the page)
• End (move to the bottom of the page)

Tab Navigation

If you’re like me, sometimes you have a lot of tabs open at the same time. Instead of using the mouse to select between the different tabs that you have open, use the following keyboard shortcuts:

• Ctrl+Tab (rotate forward among tabs)
• Ctrl+Shft+Tab (rotate to the previous tab)
• Ctrl+1-9 (choose a number to jump to a specific tab)

Here’s another neat trick: if you want to view different pages on the same website but in two different tabs, simply hit Ctrl and drag the tab (in the tab bar) to the right.

Mouse Shortcuts

If you’re already using your mouse and it would be easier for you to use a mouse shortcut instead of switching to the keyboard, here are some quick shortcuts. Note that these shortcuts depend on whether your mouse has a scroll wheel built into it or not.

• Shift+scroll down (go to the previous page in that tab)
• Shift+scroll up (go to the next page in that tab)
• Ctrl+scroll up (decrease text size)
• Ctrl+scroll down (increase text size)

Auto Complete

While not as well known as the shortcuts above, this can be very useful.

Go to the address bar (Ctrl+L) and type the name of the site without the “www” or the “.com”. Let’s say “google”. Then press Control-Enter, and it will automatically fill in the “www” and the “.com” and take you there – like magic!

For .net addresses, press Shift-Enter, and for .org addresses, press Control-Shift-Enter.

Thoughts?

I’m curious to hear whether you find these tricks useful or not. Or, maybe you have some of your own that you’d like to share. Either way, good luck as you use Firefox more efficiently!

(Note: I’m intentionally ignoring Safari in the following discussion. Safari usage is only around 2%, owing to the niche market for Apple and Mac products.)

The Background

The answer to my question is has to do with how a browser interprets the HTML and CSS code that websites are built with. (As a brief refresher, HTML is what web pages are written in, while CSS is used to separate look from content.)

An organization called the World Wide Web Consortium develops web standards to help ensure the long-term growth of the web. Amongst many other things, these include standards for how CSS and HTML should be interpreted by browsers.

So theoretically, all browsers should interpret programming language the same way, right? Yes and no. Fortunately, most browsers do so; Firefox, Safari, and IE 7.0 all display pages (i.e., interpret the coding, i.e., adhere to web standards) the same.

(Before I continue, I should note that Microsoft – makers of Internet Explorer; the Mozilla Foundation – makers of Firefox; and Apple – makers of Safari; are all members of the consortium.)

The problem browser is IE 6.0, which doesn’t adhere as strictly to the web standards (and therefore doesn’t interpret our design coding) as the others do. So designers always have some extra work cut out for them to get their websites to appear in this particular browser as it does in other popular browsers.

And, we know that this work is necessary due to the widespread usage of IE 6.0. Most computers two years old or more are likely running it. IE 7.0 is still fairly recent, so a lot of people haven’t upgraded to it yet. This is evidenced by the fact that almost 25% of Internet users in 2008 are still using IE 6.0, even though it is already over six years old, compared to around the same percentage of those using IE 7.0.

So, the problem is not going away any time soon, but fortunately for designers, Microsoft learned its lesson and is starting to develop their browsers so that they do strictly adhere to web standards.

But how did they learn their lesson? Here’s a little history lesson to help explain.

The Quick History Lesson

By the early 2000′s, Microsoft had won the browser wars (anyone remember Netscape?) to become the dominant browser on the market. In late 2003, almost 85% of Internet users were using some version of IE.

Firefox was the up-and-comer, so Mozilla had to differentiate itself to get people to notice it. That’s why you saw new innovations in their browser, such as tabbed browsing, which is a hugely popular feature. Firefox also adhered to web standards much stricter than IE 6.0 did – another reason why it became more popular with designers than IE.

Microsoft, on the other hand, was more complacent – both in incorporating new features and in strictly adhering to web standards. And why shouldn’t they have been? The vast majority of Internet users were utilizing their product, and they had no real motivation to change anything.

But since IE 6.0 was released (back in 2002), there has been huge growth in usage of Firefox as an alternative browser. In 2008, almost 40% of Internet users are using Firefox, compared to 53% who use some version of IE – and the gap keeps decreasing steadily.

So where Microsoft was once the dominant force on the browser market, now they are playing catch-up. That’s why you see tabbed browsing and stricter standards compliance in IE 7.0 when it was released in 2006, and why you will see that as well in IE 8.0, due to be released this year.

The Solution

So how do I test that my work looks the same in IE 6.0 as it does across all other browsers?

• For starters, I use Firefox as my default browser
• My computer came with IE 7.0 installed, so I have that readily available to use
• I use Safari for Windows provided by Apple
• I use a standalone version of IE 6.0 to test in that browser (the program allows me to have multiple versions of IE running on my computer with no problems)

There are also websites, such as Browser Shots, that can be used to test for more obscure browsers that aren’t as popular.

The End

So that’s the end of this overview of a problem I confront as a designer. Now, next time I tell you I’m frustrated because something won’t work right in a particular browser, you’ll know what I mean!

And, if you’re still running IE 6.0, please upgrade!