(Word of warning: what I’m about to talk is a more advanced topic intended for those who have an interest in building, or working with, Wordpresss theme files. I’m assuming that you have at least a working knowledge of HTML, CSS, and PHP in order to understand what I’m talking about.)

What are conditional statements?

Conditional statements are simply some logic that tells the Wordpress database what content is displayed (and how that content is displayed) based on what conditions that page matches.

At their most basic level, conditional statements look like this:

<?php if ( ) { ?>
<?php } else ( ) { ?>
<?php } ?>

Basically what this says is that there is a certain condition, and if that condition is met, then display whatever HTML, CSS, PHP, etc. is specified there; if that condition isn’t met, do this instead. So far, so good, right?

What conditional tags can I use?

Within a conditional statement you’ll find what are known as conditional tags. Basically, these little tags call a particular piece of information from the Wordpress database. There are conditional tags for most things in Wordpress – pages, posts, categories, tags, etc.

The Wordpress codex goes into more detail about all of the conditional tags that are available, but some of the most basic and popular ones are:

• is_page()
• is_single()
• is_category()
• is_author()
• is_home()

Using them is pretty simple – you can identify the page/post/category/author by ID number, slug (name), or title. This might make more sense with an example.

Say you want to apply a specific condition to your “About” page. That page has the database ID number “3″, the title is “About Us”, and the slug (name) is “about-us”. You could use any of those in the is_page() condition as follows:

• is_page(’3′)
• is_page(’About Us’)
• is_page(’about-us’)

The same applies to all of the other different uses. Say you want some particular links to appear in the sidebar when someone is on a particular category page – let’s say the category is “Apples”, and it has a database ID number “5″. You could use the is_category() condition like this:

• is_category(’5′)
• is_category(’Apples’)
• is_category(’apples’)

More complicated uses of conditional statements

Now that you know what a basic conditional statement looks like and what conditional tags are available to use, we can really have some fun incorporating them into your Wordpress theme.

Head’s up: this is where it will start to get a bit more complicated. But let’s go through a few examples for you to get an idea of the different ways that conditional statements can be used, and hopefully you’ll pick up the gist of how to use them.

Example #1: Multiple conditions

Let’s say that you have 3 pages on your Wordpress website. You want to display an image on one page, some text on another, and nothing on the third.. What would this look like?

<?php if ( is_page('Apples') ) { ?>

    <img src="apples.gif" />

<?php } elseif ( is_page('Oranges') ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

This is what I call a multi-conditional statement. Basically this says, “if the page is the page about apples, then display the picture of the apples; if the page is the page about oranges, then display that text; and if it’s neither, then don’t display anything”.

One note about multi-conditional statements: you can have as many different conditions as you want. If you have 20 different categories and want to display 20 different things in the sidebar of each, you can do that – there’s no limit.

Example #2: This OR That

Let’s say you want to display a particular piece of text at the top of a single post OR for a particular category page. What would your conditional statement look like?

<?php if ( is_single('Apples') || is_category('Vegetables') ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

The “||” basically tells Wordpress to display that content if the the page/post/etc. meets either the first condition OR the second condition. If it doesn’t meet either, then it won’t display anything.

Example #3: Apply the same condition to many things

Let’s say you want to display some text at the top of both the page about apples AND the page about oranges, while not displaying that text at the top of any other pages. What would your conditional statement look like?

<?php if ( is_page(array('Apples','Oranges')) ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

This will display the exact same thing as in example #1, and you’re probably asking yourself, what’s wrong with writing it the long way, like I had in that example.

Technically speaking, there isn’t anything wrong with doing it like that. It’s just that combining your conditions is the simpler way of doing things and easier to maintain. Say you want to update the text that’s displayed at the top of both pages. Would you rather update it once, or have to do it multiple times? I’d rather do it just once.

Example #4: Using variables

Variables are another way of calling information from the Wordpress database. Often used in plugins and in your Wordpress loop, you can also use them within conditional statements.

Let’s say that you want to display in the sidebar a list of links to the sub-pages of a particular parent page, and you want that list to also appear on the parent page as well. What would your conditional statement look like?

<?php if ( is_page('Fruits') && $post->post_parent=="Fruits" ) { ?>

    <ul>
    <li>List item</li>
    </ul>

<?php } else { ?>

<?php } ?>

In this case, we’re using the $post->post_parent variable to say that we’re applying the condition to all the sub-pages of the “Fruits” page, as well as the actual parent page itself, which we’ve identified with the other condition.

Example #5: “Is Not” Conditions

Continuing with our use of variables, let’s say that you want to display an image at the top of all pages that have the “Fruits” page as their parent page EXCEPT FOR the page about bananas. What would this look like?

<?php if ( $post->post_parent=="Fruits" && !( is_page('Bananas') ) ) { ?>

    <img src="fruits.gif" />

<?php } else { ?>

<?php } ?>

Here, we’re using the “&& !” to say AND EXCLUDE the page about bananas from the condition that we’re applying to every other sub-page.

Thoughts?

Using conditional statements within your Wordpress theme files is a great way to help cut down on the amount of code that you’re writing when you create a Wordpress website. This makes it easier to maintain in the long run, and is a great way to take advantage of the database-driven nature of Wordpress.

Do you use conditional statements on your Wordpress website, or when you’re creating a Wordpress theme for a client? If so, share your thoughts about them with everyone by leaving a comment below!

©2009 Addicott Web. All Rights Reserved.

Although there are lots of places that I’ll talk about where you can use your keywords, as you’re designing the website and writing the content, you don’t want to do is overload them in every available spot.

Yes, the goal is to take advantage of all the opportunities you have to incorporate keywords on your website. You shouldn’t be doing so in a way that’s going to make your website less usable though. Use your keywords in these places in ways that are relevant to your content and that improve your website’s usability.

In terms of the keywords themselves, I can’t tell you what keywords to use – that’s dependent on your business and on your keyword research. Once you have your keywords though, here are 9 places where you can put them to improve your website’s SEO.

In your header

1. Title tags

Title tags are the first places that the search engines will scan, and they are what appear as the actual link on the search engine results page. This is one of the most important places to emphasize your keywords, so make sure that the title tag on each page uses your most important keywords.

The title tag is also what your visitors will see in their web browsers, both in the title area and on tabs (if they’re using tabbed browsing). This is one of the areas where it’s tough to remember that SEO isn’t just about pleasing the search engines – it’s also about pleasing your human visitors. They will use the title tag as a primary means of identification and navigation, which is why it needs to be written well-enough to please both parties – definitely not an easy feat.

2. META description tag

Within your header, there are a number of hidden META tags that only the search engines will see, and the META description tag is one of these hidden tags. On the search engine results page, you can generally see the META description tag by looking at the chunk of text underneath the link.

When writing your META description tag, it’s extremely important to be as concise as possible. The search engines generally only look at the first 150 characters of the description tag, so you only have a limited window in which to get your keywords in. Some search engines only use a part of it before taking some content from elsewhere on the page, so it’s even more important that you incorporate your keywords right up front in your description.

3. META keywords tag

It’s still being debated how much weight the search engines give to the META keywords tag. In the early days of search, websites used to cram this tag full of any and all keywords or keyword combinations, in the hopes that the search engines would grasp onto something.

Most search engines learned from that and have changed how they weigh this tag in the search algorithm. Now it’s all about how the META keywords relate to the content on your page, which is why you need to use keywords that are relevant to the website in general and to the page in question specifically.

In your content

4. Headers and Sub-headers

One of my 10 tips for improving your titles and sub-headers is to put any keywords you’re using in them up front. Doing so not only emphasizes what comes in the content below, but is useful for people scanning through your website quickly. Just try to keep it clear, concise, and relevant when doing so.

5. Page content

Your page content is reason your website’s exists in the first place, and it’s the backbone of everything else on your website. It’s also what people link to (and links are another contributing factor to SEO) and what will draw people to your website in the first place.

One big consideration when writing your content is keyword density. While your best bet is to incorporate your targeted keyword phrase into your content as often as possible, you want to be careful not to overdo it. You’re not trying to sell your product to search engines; you’re trying to sell it to people, and if your content reads horribly, it can make a bad impression and most likely decrease the chance of making a conversion.

We’ve all seen websites where the keyword density is so high that the content reads horribly. As long as you’re simply aware of the phrase you’re targeting when you’re writing the content, you should end up with an adequate keyword density, probably within the 3-5% range. It’s alright if the targeted keywords stand out when you read through your content; after all, that’s what the person was searching for, and seeing it emphasized will reinforce that they have the information they need to make their decision.

Also remember the 1-to-1 rule: 1 page of content should be optimized for 1 keyword.

6. Link text

One of my reasons for avoiding using “click here” in link text is that it’s not SEO-friendly. Search engines use the strength of your links in their algorithm, and one of the things that determines link strength is whether the link text using specific keywords in it.

Use specific keywords in your link text helps them estimate how relevant that link is. It also helps build the relevancy of a particular page to a particular keyword phrase.

With all of the places on your website where links are, this doesn’t apply solely to links within your page content. It applies to your main navigation links, to your breadcrumbs (as I mentioned already), to your footer links, etc. It’s all about association, and you want the search engines to associate certain keywords with your website in general and with specific pages on your website in particular.

Bonus places

7. Breadcrumbs

Another common navigation tool on websites, breadcrumbs can help people pinpoint where they are on your website, as well as how to get back to where they were previously. As with any place you have words on your website, your breadcrumbs are another opportunity for you to incorporate your keywords. Just make sure that the breadcrumb links provide enough detail about what the pages are, without being overly length – 1 to 3 words at most.

8. ALT and TITLE attributes

While these attributes were created for usability purposes, they don’t have to be used solely in those ways. They can also be used for SEO purposes in the sense that they’re another opportunity for you to incorporate additional text onto your page – text that contain the keywords you’re optimizing for.

I’ve written previously about using the ALT and TITLE attributes properly, but the important point is that you shouldn’t write them with only the search engines in mind.

Keep them relevant to the element in question, and don’t use them to either duplicate content elsewhere on the page or to stuff them full of keywords to the point that they become completely unhelpful. Above all when it comes to them, think usability first, SEO second.

9. Embedded file names

What I’m referring to as embedded file names are things like web pages, images, etc. These aren’t necessarily things that people will see within your actual content – they’re just ways that you can get more keywords onto your page.

How you write file names should be a no-brainer, but it’s important that you not give them a generic or vague label. People will see the file name of a web page when they hover over a link, so using a file name that contains the keywords that the page is about is useful from usability purposes. (This is one of the main reasons why you should enable your permalinks in Wordpress; with HTML websites, you have an easier time controlling the file names.

When it comes to images, why name your image files something vague such as “image01.jpg” when you can name it something that includes a keyword instead? It’s not something that someone will see or that will really make a difference, but it’s just another spot where you can get the keyword onto the page for the search engines to see it.

Thoughts?

There are a lot of competing schools of thought when it comes to organic SEO. What are some of your practical tips for incorporating keywords onto your website? Share your thoughts by leaving a comment below!

©2009 Addicott Web. All Rights Reserved.

What is a call-to-action?

A call-to-action is the fundamental reason that you have a website in the first place. In web marketing, it’s defined as something, either a design element or some piece of content, that compels a visitor to take some specific action that you can measure to determine whether your website is working or not.

Every type of website you can think of has a call-to-action built into it, although of course some websites are better at emphasizing it than others. Calls-to-action provide focus for your website and if done right, give direction to your visitors for what you ultimately want them to do. Examples of a call-to-action include:

• Make an online donation
• Request an appointment
• Purchase a product
• Fill out a request form
• Register for an event or program

What makes a call-to-action effective?

Unfortunately there are no easy answers to that question, and there are plenty of people out there who ponder that question every day. While every website and every situation is different, there are some general guidelines you can follow when making your calls-to-action, both from the content and the design perspectives.

Also keep in mind that you should continually test whether your calls-to-action work or not. There are some free tools out there that will give you a good start at this, especially from Google. Their analytics tool will tell you what people are looking at on your website, while their website optimizer can help you test different combinations of calls-to-action in order to see what works better.

Writing calls-to-action

Using the right words appropriate to your website will drive people to take the action; using the wrong words can distract them, at best, or cause them to leave your website, at worst. With that in mind, here are some tips for writing effective calls-to-action:

• Lay the groundwork – Before someone is willing to follow one of your calls-to-action, they first have to recognize a need that requires them doing so. Telling your visitors the benefits of taking that action will help give them the motivation to actually do so.
• Use action-oriented words – Using an active voice encourages people to follow your calls-to-action, and also helps people scanning your website quickly identify what your call-to-action is about. This is also one of the reasons you should avoid using “click here” in your link text.
• Have one on every page – There should always be at least one call-to-action within the content on every page of your website – no page should be a dead-end. Ending your content with a call-to-action tells visitors what the next step is and keeps them moving on your website.
• Limit the number and keep them distinct – Having too many calls-to-action on a website can be confusing for your visitors. Limit yourself to only a few, and keep them distinct so visitors know what the primary call-to-action is, as well as what you want them to do first from the choices.
• Keep your forms short and clear – Unless someone has a compelling interest, many people see a long form asking for unnecessary information and won’t fill it out. Follow some of my other tips for writing clear instructions if your main call-to-action is a form.

You can also look through a previous post that I’ve written about improving your titles and sub-headers for some tips that are just as applicable to writing effective calls-to-action.

Designing calls-to-action

Web designers can have a lot of influence over how effective calls-to-action are. Following general usability and design guidelines help make the website as effective as possible. Here are some tips for how to do that:

• Put it above the fold – You want your main call-to-action to be visible wherever people go throughout your website – almost like your logo. The right side of your website’s header is a natural location to do that; any other lesser calls-to-action can go in sidebars, above the fold as well.
• Use images for emphasis – Images or icons get people’s attention because they get noticed by your eyes before content on a page does. Buttons also do the same thing and are great to use because they stand out against text AND imply action by their very nature.
• Choose contrasting colors – If you’re using a button as your primary call-to-action mechanism, use a color that contrasts with your main colors for maximum effect. Just don’t choose a color that contrasts so much that it becomes too hard to ignore when reading the content around it.
• Consider homepage placement – We all know how important your homepage is, which is why you need to make it as usable as possible for your visitors. Your main call-to-action should be prominently placed on it where people will really see it.
• Use some white space – The more white space around your call-to-action, the more people’s eyes will naturally be drawn to it. Crowding your call-to-action in with surrounding content will decrease its effectiveness as it gets lost in the overall noise of the page.
• Make it bigger – Size isn’t everything when it comes to your call-to-action, but making it bigger definitely makes it more likely that it will get noticed. Just don’t make it so big that it totally overwhelms the rest of the content on your website – find the right balance.

Thoughts?

Creating effective calls-to-action are a HUGE topic and business for a lot of people, so I hope that this gave some good, introductory guidelines for making your calls-to-action more effective.

Have you had any particular success working with calls-to-action on your website or on a website you’ve done for a client? Leave a comment below to share your thoughts and experiences!

©2009 Addicott Web. All Rights Reserved.

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!

©2009 Addicott Web. All Rights Reserved.

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!

©2009 Addicott Web. All Rights Reserved.

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!

©2009 Addicott Web. All Rights Reserved.

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!

©2009 Addicott Web. All Rights Reserved.

What you need to know

The way Wordpress works, it tries to view each single post using your particular theme’s “single.php” file. Normally when you’re designing a Wordpress theme, you would style that file however you want your posts to appear, and that would be the end of that.

If you want to have single posts display differently based on what category they’re in, it requires a slightly different approach. It’s very easy to do – anyone who has at least a basic knowledge of Wordpress theme files should be able to do it.

Simply put, all you have to do is create a few additional files, add in some conditional code (which you can copy from below), upload to your Wordpress theme directory, and that’s it – you’re good to go!

Step 1: Create the template pages

The first thing you want to do is create the different “single.php” pages for the posts in a particular category. The code in these should be what’s already used in your existing “single.php” file, although this is where you would style things a bit differently for each category by adding images, extra content, etc.

There are two things to keep in mind here:

• Naming conventions – Name the different “single.php” pages in a way that makes it obvious to you which category they’re associated with – “single_categoryID.php“, “single_categoryNAME.php“, etc.
• Create a default page – Call the file “single_default.php“, and then use the basic code in your template for how your posts should be displayed. This is a “fall back” page – you’ll see why in step 2.

Step 2:  Write the conditional code

What ties together the different single post pages that you just created in step 1 is some conditional code that tells Wordpress what single post page to use. Put the following (and only the following) in your theme’s “single.php” file:

 <?php post;

if ( in_category('2') ) {
include(TEMPLATEPATH . '/single_category2.php'); }

elseif ( in_category('3') ) {
include(TEMPLATEPATH . '/single_category3.php'); }

elseif ( in_category('4') ) {
include(TEMPLATEPATH . '/single_category4.php'); }

else { include(TEMPLATEPATH . '/single_default.php'); } ?>

Basically, this code is telling Wordpress to do two things:

• Check the category – Wordpress will check the post to see what category it’s under. If it’s in a particular category that you’ve included in the conditional code above,  Wordpress will display the post using the single post page associated with that category.
• Fall back to a default – When Wordpress checks the category of a particular post, if it can’t find a single post page associated with that particular category (or if you haven’t created one), it will “fall back” and use the default single post page that you had created.

Note: you can keep adding conditions depending on the number of different single post pages that you need to create – you’re not limited to just three as in the example above.

With this principle, you can also…

The same ideas that we used above to create different single post pages can also be used to create different category pages.

Say you have 5 categories on your blog, and you want each category page to have a different introduction and image on it above the list of posts in the category. According to the Wordpress codex page on category templates, all you have to do to make this happen is create separate pages for each category, and just name the files by the category ID – “category-2.php“, “category-3.php“, etc.

What’s happening behind the scenes is that Wordpress’s template hierarchy is automatically checking to see if there are different pages used to display a particular category. If there are, it will use them, and if there aren’t, it will fall back to either the “category.php” page (assuming you have it in your theme) or the “archive.php” or “index.php” pages.

Thoughts?

Has anyone tried this method of using different single post pages on their Wordpress website or blog? Or, have you just tried my method and have any questions about it (or want to share your success)? If so, share your thoughts with everyone by leaving a comment below!

©2009 Addicott Web. All Rights Reserved.

Flash banners are useful because they can convey more information than you would normally be able to if you were using static images and unchanging content alone. This is especially true if you’re looking to communicate more than one point or display more than one photo, and if you only have a limited amount of space to do that.

As the designer, it’s important that you convey to a client that while making a Flash banner is easy for you to do, making an effective one (and incorporating it onto the website) is another story.

Here are some of the content and design considerations that I talk about with my clients in order to make their Flash banners as effective as possible.

Content considerations

• Keep it short and simple – If you’re using a banner with transitioning content, keep the written words short enough so that people can read them quickly and so that you can maintain a decent transition pace. Short phrases or no more than 1-2 sentences are ideal.
• Use call to action words – Flash banners attract attention because the motion catches people’s attention. Take advantage of that and emphasize your call-to-action in your banner. Keep the content you include in them action-oriented, and you’ll definitely help your own cause.
• They’re not good for SEO – Content embedded in Flash banners can’t be found by the search engine crawlers, which only find words on a page. Make sure to emphasize any keywords or content within your Flash banner elsewhere on the page where the crawlers will be able to find them.
• Remember to style links in them – You can include links in your banner, even if the banner itself isn’t SEO-friendly. Just remember that you should style those links to look like links should – after all, how the links are styled helps make them effective and usable.

Design considerations

• Use to shorten the homepage – Flash banners are a great way to convey more information in a limited amount of visual space, which is perfect for designers concerned with homepage usability. This will help make your homepage shorter, more concise, and more usable.
• Use on the homepage only – A Flash banner on a website’s homepage is a great-looking accent. A Flash banner on every page of a website (in the header, footer, etc.) is just distracting and becomes annoying after only a few visits to the website. Use it once, and leave it at that.
• Leave long gaps between transitions – When rotating content, leave a long enough gap so that people have time to really notice what the content is saying or what message the photo is trying to convey. Slow and steady is the key – transitions that come too quickly will overwhelm your visitors.
• Use photos to match your message – Photos can say a lot about your organization or business, so make sure to use ones that really emphasize what you want to convey about yourself. You don’t have to use a lot of them – 4-6 are usually enough to make the point.
• Shouldn’t be overwhelming in size – Your Flash banner shouldn’t be so large that it visually dominates and overwhelms the homepage. Limiting the banner to perhaps 2/3 the width of the main content area and floating it to one side is enough to achieve the effect you want.

2 key things to remember

• Get it right the first time – You have, at most, one chance to get someone to watch your Flash banner in its entirety, and that’s when someone is visiting your website for the first time. Once they become return visitors, they’re much more likely to go right to the content that they’re looking for and skip your banner – or your homepage – altogether.
• Not the primary means of delivering content – While Flash banners are great as accents, they shouldn’t be a primary means of delivering content on your homepage. If you want to incorporate content or a vital link within a banner, make sure to place it elsewhere on the page. You should always assume that the banner won’t be watched in its entirety and the content in it won’t be delivered.

Thoughts?

Do you have any suggestions for how make Flash banners more effective that I didn’t mention here? If so, share them or any other useful information with everyone by leaving a comment below!

©2009 Addicott Web. All Rights Reserved.

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!

©2009 Addicott Web. All Rights Reserved.