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!

Titles and sub-headers have the ability to not only break up your text into manageable chunks, but to engage your readers in what you’re writing about. Since people scan web content quickly, titles and sub-headers are what they’ll notice first – which is why they play such a big role in whether your content gets read or not.

Below are my tips for improving your content’s titles and sub-headers – recommendations that both web content writers and web designers can implement to make them more effective.

5 tips for the Web Content Writer

Writing great titles and sub-headers is easier said than done. It’s a skill that you need to develop as a writer, especially given the unique ways that people read content on a website. Here are some of tips for how to write more effective sub-headers in your web content:

• Keep them short and concise – Your goal should be to keep your titles and sub-headers to 8 words or less. At that limit, they will be long enough to make your point, but short enough so that they don’t wrap onto a 2nd line on the page based on how the designer has styled them.
• Strive for clarity, not creativity – You shouldn’t get so creative with them that people don’t know what comes below. Rather, sub-headers should convey information quickly so scanners can get an idea of what the content below is about without having to stop and think about it.
• Don’t re-state what comes below – When you can’t come up with an effective sub-header, the tendency is often to re-state what’s contained in the content below. That’s why writing great titles and sub-headers is a skill to develop – re-stating what comes below is the easy way out.
• Move the keywords forward – Put the keywords you’re writing about at the start of the sub-header for even greater emphasis. Scanners tend to notice only the first few words, so this will help emphasize what comes below in your content. (It can’t hurt for SEO purposes either.)
• Pose a question – Another way to get your readers to read your content is ask them a question within the sub-header that they’ll have to read the paragraph below to find the answer to. If you can do this effectively, it can be a great way to get people to look at your content.

5 tips for the Web Designer

Creating effective sub-headers isn’t just the content writer’s job. Web designers play a large role by giving the titles and sub-headers the visual qualities that will best capture the visitors’ attentions. Here are some design tips that you can use to make them more noticeable:

• Make them a different color – Rather than just making them plain black, choose a color from within your website’s color scheme to make them stand out. Go for a darker color though, especially on a white background, in order to give it enough contrast.
• Make them big and bold – You should always be able to tell what the headers are based on how big they are in relation to the rest of the content on the page. Make them bigger in size – enough so that were you looking at the page in black and white, you could tell what the sub-header is.
• Move the copy in – To make the sub-headers stand out even more, considering giving an indent to the rest of the content beneath them. An indent of 10-20 pixels should do – it will be subtle, but the effect is enough to give your content the desired visual separation.
• Keep the size proportionate to importance – Page titles should use the <h1> tag, which should always be styled the biggest; <h2>’s, <h3>’s, etc. should be used as sub-headers, and should all get smaller as you move further down the list.
• Keep the fonts simple – Since people are scanning, you don’t want your sub-headers to be styled in a fancier font that might take them longer to read and interpret. Style your sub-headers in simple, clean fonts like Arial or Verdana in order to make scanning as easy as possible.

Thoughts?

Do you have any common practices when it comes to either writing titles and sub-headers, or designing how they appear on the page? If so, share your thoughts with everyone by leaving a comment below!

There are a variety of popular hosted search services available, such as Google’s Custom Search Engine, but the thing to keep in mind is this: no matter which one you choose, if your visitors can’t find the search field or it’s not very usable, it won’t do them, or you, much good.

So here are some tips for how to make your hosted search tool as usable as possible once you incorporate it onto your website – both for the search field itself and on the results page.

For the search field

• Use a search box with a type-in field – Let your visitors type in their search term right from the page that they’re on, rather than having them go to a specific search page to do it. Doing so makes the search more accessible and cuts out an unnecessary step from the search process.
• Style your search field appropriately – If the search field is too short, your visitors won’t be able to see the full search term they’re typing in. This is a problem particularly if they need to revise their term before searching. Avoid this problem and make the search field wide enough to contain multiple terms.
• Keep it in a consistent location – Your search function should be in as prominent and consistent a location as your website’s logo. I prefer either the right side of the header or in the main navigation area. The point is, visitors expect it near the top of the page, so make sure to put it there.
• Use an icon to emphasize its nature – Improve your website’s usability and make your search field more obvious by using an icon within your input field. A magnifying glass is the universal symbol for search, so use that to call attention to, and visually communicate the nature of, your search field.

For the search results page

• Limit the number of search results per page – If you have a lot of content being indexed, a large number of results might show up for certain search terms. Break the search results up into manageable chunks will help your visitors browse through them easier.
• Put a search box at the top of the search results page – This will make it easier for people to do another search should the results of the first one not be what they were looking for. You should customize the code a bit to make it look a bit larger than your regular search field.
• Have the term they searched for display in that search box - Having the searched-for term appear within the box on the results page when the results appear will further reinforce what they had typed in, and if they mistyped something and got wrong results, they’ll see what the mistake was.

Thoughts?

Do you use a popular hosted search tool on your website? If so, have you customized it to make it more usable for your visitors? If not, which of the tips mentioned above would you incorporate? Share your thoughts with everyone by leaving a comment below!

As a web content writer, the best you can do is to make sure that your intro text you serves a purpose and communicates something to your visitors. While editing your content as much as possible might seem like good advice normally, intro text does have a valid role, so you shouldn’t scrap it entirely.

Below you’ll find some reasons why you need to have intro text in your content, followed by some tips for how to write it so that it makes your content more usable.

3 reasons you should use intro text

The topic of intro text is something that I work with clients on all the time. Here are 3 reasons that I give them about why they need some introduction to their content, especially when it comes to lists:

• Tell visitors what your content is about – Yes, most visitors to your website will scan through your content quickly, but that doesn’t mean you don’t want to let people know what the content is about. If those scanners have any confusion about the content on the page, they’re likely to scroll back up and look for that intro text to help them.
• Bulleted lists look silly without it – Have you ever seen a section or page of web content that’s just a list of links or items? Something will feel a little off, and that’s because there’s no intro text telling you the visitor what the list is a list of, why it’s there, and how you can benefit from it. That’s what good intro text will do; it can be as simple as “The following ____ are/will ____:”.
• It’s unnatural to how we communicate – Try writing some content where you go right into the topic without any introduction to it. Or along the same lines, try explaining something to someone without giving them the context. Both are hard to do because not introducing something properly goes against the very nature of how we read, write, think, and speak.

6 tips for writing usable intro text

Now that you have heard some reasons for why you should write intro text, here are some pointers on how to write intro text that is both usable and useful to your visitors:

• Keep it short and concise – Good intro text should be no more than 1-2 sentences long and should concisely state what the page is about. If it makes sense to include keywords here, do so, but only if they make the sentence more helpful to the reader.
• Limit the jargon and fluff – Intro text isn’t the place to include marketing or technical jargon, but then again, no website is. (That’s another topic though.) And skip on the fluff as well – i.e., content that has no function and is only there for its own sake.
• Focus on the user – Strong intro text focuses on answering 2 questions that the reader has about your content: what will they find on the page, and why should they care about it. If you answer those in as straightforward a manner as possible, you’ll have done a good job.
• Precede it by a header – I’m not just talking about the intro text on a page of content here; the same principles apply to the intro text within a section of content. When writing a section header, the text of the header should be a phrase that summarizes what the intro text beneath it says.
• No more than 1 link max – Because of where intro text is on a page, a link in it is really going to get noticed a lot. If you follow some of these ways to make links more effective as you’re writing the intro text, you’ll increase the likelihood that people will follow the link contained within it.
• Experiment with formatting – Want to get people to pay attention to your intro text 100% of the time? Try experimenting with the formatting to bring more attention to it. Put certain keywords or phrases in bold print, put the whole intro in bold print, or try some alternate formatting within your CSS.

Thoughts?

To those who write web content often, what are your thoughts on including intro text in your content? Is it worth the space on the page, or should it be gotten rid of altogether? Share your thoughts with everyone by leaving a comment below!

I’m working on a few WordPress websites for clients at the moment, so I’ve discovered these plugins as I’ve been searching for solutions to some of their design requirements. Finding these plugins just reinforces for me one of the best things about working with WordPress – that for almost anything that you’re trying to do, chances are that there’s a plugin that already exists to meet that need.

(I also wrote last year about some of the other reasons why I want to build your website in WordPress – the availability of plugins being only one of those reasons.)

Without further ado, here are 6 more plugins that you should be using on your WordPress website or blog…

#1: Easy Contact

Easy Contact is a good plugin to use if you’re looking to incorporate a basic contact form into your website or blog. What I like most about it is that unlike the previous contact form plugin that I had been using (the Secure and Accessible PHP Contact Form plugin), the additional CAPTCHA security question is an optional choice on the form.

Why is that important to me? I used the other form for one of my past projects, and they kept telling me they were having problems with the contact form – specifically that people said they had sent a message through the form, but the client never received it. Turns out what was happening was that people weren’t answering the required CAPTCHA question, so the form results didn’t go through, even though the form page refreshed – giving people the impression that the message had gone through.

In any case, the Easy Contact plugin should help avoid that confusion (the security question is optional to display), while still enabling the basic functions that you would expect from a contact form. You can style it however you want to as well, although that’s pretty standard for most plugins of this nature.

#2: Thank Me Later

Thank Met Later is a great plugin to incorporate into the functionality of your comments area. Once you install this plugin, it will send a thank you message to people who leave a comment on your blog or website. There are a lot of ways to customize your message, from the content to when the thank you note is sent out, making it really versatile.

Why would you want to send out a thank you note to people who leave a comment? I think doing so is useful as another way for you to reach out to, and interact with, people who are coming into contact with your website in some way. Sending a little note can put a more personal face on your website, encourage them to subscribe to your RSS feed or email newsletter, start fostering relationships with your commenters, etc. – all things you want to do to help build your brand and reputation.

#3: WP-UnitPNGFix

The name may be difficult to read, but this plugin is definitely getting added to my must-install list. WP-UnitPNGFix fixes the problem that occurs in Internet Explorer 6.0, where PNG images that are supposed to have a transparent background instead have a grey block behind them.

Firefox, Safari, and newer versions of Internet Explorer don’t have a problem rendering transparent PNGs, but since so many people are still using Internet Explorer 6.0, us web designers still have to account for it in our design. (Yet another reason why I hate Internet Explorer 6.0 so much and why I wish people would upgrade already.)

#4: Thumbnail for Excerpts

On some blogs, you’ll see photos used next to the post excerpts as a way to attract people’s attention to particular posts. A great example of a blog that uses this technique is PSD Tuts – visit their website and you’ll immediately see what I mean.

I think that this effect works nicely for when you’re using WordPress as a content management system for clients, rather than just a blog post. The current projects I’m working on fall into that category, so posts are really being used as news updates about particular events. When that’s the case, having a small thumbnail photo is a nice touch that can help accentuate the posts page.

What Thumbnails for Excerpts does in particular is look for the first image within the post, and that becomes the thumbnail that’s displayed next to the excerpt. You can easily specify the size of your thumbnail, and then it’s just a matter of styling the image for how you want it to appear.

#5: Multi-Level Navigation

Drop-down menus are always a contentious topic in the web design world, but I think they do have their uses and can be an important way to help your users dig deeper into your site’s content.

The Multi-Level Navigation plugin lets you have drop-down menus in WordPress, which otherwise would involve some complicated coding in order to have.  This plugin lets you customize everything through an easy-to-use interface. You can add up to two levels to your drop-down menus (which in most cases is probably the most that you should have anyways), style it however you want to, determine the contents for the menus, and more.

#6: Embed iFrame

The reason for using the Embed Iframe plugin is somewhat obscure, and truthfully most people probably won’t have use for it on their websites. Simply put, an <iframe> is a means of embedding one HTML page in another. The projects I’m working are regional websites for a national organization, and they want to be able to include content from the national website without having to duplicate it on the regional websites – so that’s why this is coming in handy.

But there’s also another more common use for an <iframe>, and that’s if you want to include a Google calendar on your website. Calendars are certainly a useful feature to have on your website, especially if they’re used to highlight programming and events. Google calendars are certainly popular and easy to use for your users.

In order to display your Google calendar on your website, after installing this plugin all you would do is reference the URL of your Google calendar within the iframe code on your page, and you’re all set!

Thoughts?

Do any of these plugins sound like something you would use on your WordPress website or blog? If so, let me know what you think of them. Or, if you have any other WordPress plugins that you think might be useful for everyone to know about, share them by leaving a comment below!

There are a lot of resources out there for customizing your login in previous versions of WordPress, but not a lot of resources for working within WordPress 2.7+. So, what I want to do here is use my custom login screen as a way to illustrate how I achieved that look, and what files you need to use in particular.

Why customize the WordPress login?

I’ll cover how to go about customizing your WordPress login screen in a bit, but for now I want to answer the big question you might be having – why would you want to customize it? Here are a few reasons:

• Familiarity for multiple users – A lot of clients may have multiple people posting or administering content in WordPress on their website. Creating a custom login screen with the organization’s or website’s logo in it will let all of them know that they’re in the right spot when they go to post new content, while reminding them of just who they’re posting for.
• You care about their experience too – Creating a custom login screen shows your clients that by including these small touches, you’re thinking about their experiences administering the website as much as you are about what their users experience while visiting the website.
• Extend your branding – On many blogs, people might be required to log in before they can post a comment. As the person running the website, customizing the login screen extends your branding so that those people get a continuous sense of your business as they progress from the actual website through to the admin area.

If you’re looking for some inspiration, the actual design theme of the website should be a good starting point. But you might also want to check out this Flickr gallery of custom WordPress logins for some great examples of what other designers have done.

How to create a custom WordPress login

I wanted to have my WordPress login look like a natural extension of my website, and I think I achieved that look. Here is what my WordPress login screen looks like:

How did I do that? There were two things I had to do – make a minor change to the page itself, and then update the CSS file that governs how the page looks. Let’s go through each one in more detail.

(Note: the following two sections are more technical in nature than I normally write about, and are intended for WordPress designers and developers who understand this stuff.)

Step 1: Update the actual page

Normally I’m not one for updating component pages of the WordPress installation, but when I was styling my form I noticed that some of my styles weren’t taking effect as I wanted them to – in particular, the field labels in my login form. I’m labeling this as step 1 because by doing this first, the new styles that you’re implementing in step 2 will work properly.

You can find the actual login file, called wp-login.php, in your root directory, or whatever directory you have WordPress installed in on your website.

When you open up the file and scroll through it, you’ll notice that there are three separate areas within the page. That’s because this page doesn’t just show the login screen – it also shows the screen if you’ve forgotten your password or are registering as a new user.

In either case though, there is a little quirk to how all those forms are coded on the page. By default, this is how the field labels and input fields are coded:

<p><label><?php _e('Username') ?><br />
<input type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
</label></p>
<p><label><?php _e('E-mail') ?><br />
<input type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
</label></p>

The best way to explain the problem with this is to use my form as an example again. I wanted to add a few pixels of margin to the top of my input fields so that there would be a bit of visual separation between the field label and the actual input field itself. Because the <label> tag is closed after the input field, that extra margin would be visible after the input field, not after the label as I had intended.

All you have to do to fix this is update the page so it looks like this:

<label><?php _e('Username:') ?></label>
<input type="text" name="log" id="user_login" class="input" value="<?php echo $user_login; ?>" size="20" tabindex="10" />
<label><?php _e('Password:') ?></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />

See the difference? You’re closing the label tag after the actual words that will appear above the input field, not after the input field itself. Once you do that, your new styles will work properly. (You can also leave in the <p> tags if you choose to, but I don’t find them necessary because I can add in the proper margins in my CSS.)

Make sure that you do the same thing in the two other spots within the file where this is the case. Just scroll through the file and you’ll see them.

Step 2: Update the CSS

Now that you’ve made the necessary changes to the actual login page, you can go ahead and start styling it. In WordPress 2.7+, how the login screen looks is determined by the login.css file, which can be found in your /wp-admin/css/ directory.

Swap out the logo

One of the first things that I did when I created the login screen above was to swap out my logo for the WordPress logo, which appears as the default. Look for the following line within the login.css file:

h1 a {
background: url(../images/logo-login.png) no-repeat top center;
width: 326px;
height:75px;
text-indent: -9999px;
overflow: hidden;
padding-bottom:5px;
display: block;
}

So in order for your logo to appear instead of the default WordPress logo, you can either save your image as logo-login.png and upload it to the /wp-admin/images/ directory, or you can save the image under a file name of your choosing, and then just update the CSS instead.

One thing to note: make sure to adjust the height accordingly so that it reflects how tall your image actually is. Otherwise, if it’s taller than the default 63 pixels, it will get cut off.

Recommendation: If you don’t have time to completely style the login page and had to choose one thing from here to do, this would be it. By swapping out the logo, you’re accomplishing all three of the points I mentioned above, albeit in a more basic way than by completely styling the login form.

Update the page background

To update the page background, look for this line in your CSS:

body {
border-top-width: 30px;
border-top-style: solid;
font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
}

Just update it with whatever image or color you’re choosing to use as your background, and you’re all set – almost.

One thing I noticed is that when you update your <body> style, it leaves a lot of white space at the bottom of the page. I don’t think that looks good, so you need to add this into the CSS in order to get the color or background image to take up the whole browser screen:

html {
height:100%;
}

Style the login form

Once you set the new logo and background, it’s just a matter of styling the actual login form. Look for this line in the login.css file:

form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;
}

This is the code that determines how the actual form area looks, so start styling away to get it to look how you want. There are also separate styles defined for the form input fields, field labels, and field buttons, so you’ll have to style those as well to achieve the look you want.

One final thing to keep in mind

When you upgrade to a newer version of WordPress in the future, that new version will over-write these changes, and your login screen will revert to how it comes by default. This can definitely be a problem if you’re using WordPress 2.7+ because those versions will automatically update themselves when newer releases become available. But, if you save your files somewhere, you should be able to easily recreate the login screen without any problems.

Normally this problem would be solved with plugins, but I haven’t had any luck in finding any WordPress plugins that will do this. If anyone knows of one, share in the comments below.

Thoughts?

So now that you know more about customizing the WordPress login screen, if you have a WordPress-based website, give it a shot yourself and see if you have any success with it. If you want to share your WordPress login pages, leave the link in a comment below, and I’ll compile them for everyone to see.

If you’ve had any success doing this for clients, post a comment too and let everyone know how customizing the login has been received by the client.

The reason I bring up this topic is because last week, I was installing the Search Everything plugin on this blog, and had to decide how to style the new search form. I knew from the start that I wanted to include a little icon in it to convey its purpose; I had seen that done elsewhere and really liked the look of it, and felt that it would work here.

When and how to use icons

This is a nice design effect, and I believe that it could have a place on most websites, in one form or another. But here are a few pointers that I think are worth mentioning regarding when and how to use icons on your forms:

• Use sparingly – Icons shouldn’t be used within every input field in all the forms on your website. It will work best on forms with a small number of input fields – search bars, contact forms, and blog comment forms, for example. On shorter forms like these, you can use it on all the input fields without making it seem like you went overboard.
• You still need a label – You’re not using an icon as a replacement for an input field’s label – you’re using it as a way to accentuate the label. An icon can give some extra usability and design benefits, but that’s presuming that your form is already well-designed and usable to begin with. (If they’re not, you might want to read through an earlier post I wrote about how to design your forms to emphasize their usability.)

Step-by-Step Instructions

For those of you who aren’t reading this on my website and aren’t able to scroll up the page to see the search for yourself, here’s what my search field looks like:

If you’re interested in creating a similar look on your website, here are the steps I went through to make my search field look that way, complete with the styles that I used in my CSS to achieve that look.

1. Step 1 – Create the blue outer wrapper that the search bar resides in. This element isn’t totally necessary, so feel free to skip this step if you want to. (One note: I used a <div> tag here, but you could use a <fieldset> instead – it would do the same thing.)

   #search {
   width:230px;
   padding:10px;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#98afc8;
   background-image:url(images/search_bg.png);
   background-position:bottom;
   background-repeat:repeat-x;
   border:1px solid #849ab2;
   text-align:left;
   height:1%;
   overflow:hidden;
   }

2. Step 2 – Create the actual search bar. What you’re doing here is simply creating the <div> tag that the input field will be placed within; the background image for this <div> will be your icon. Just make sure to leave enough padding on the left so that the input field doesn’t overlap with the icon.

   #search #searchField {
   background-image:url(images/search.png);
   background-position:10px;
   background-repeat:no-repeat;
   background-color:#ffffff;
   border:1px solid #849ab2;
   border-radius:10px;
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   height:1%;
   overflow:hidden;
   padding:0 20px 0 34px;
   float:left;
   margin-right:10px;
   }

3. Step 3 – Style the actual input field. I want it to be seemingly invisible within the <div> tag, so I’m making both the border and background color of it white, which will match the color of the <div> tag.

   #search #search_field input {
   border:1px solid #ffffff;
   background-color:#ffffff;
   }

4. Step 4 – Create the submit button that people will click on.

   #search button {
   padding:3px;
   background-color:#da5e2a;
   color:#ffffff;
   font:bold 13px Arial, Helvetica, sans-serif;
   border:none;
   margin-top:3px;
   cursor:pointer;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   }

Here’s how the final HTML code will look:

<div id="search">
<div id="searchField">
<form method="get" id="searchform" action="http://www.addicottweb.com">
<input type="text" value="Search" onblur="if(this.value=='') this.value='Search';" onfocus="if(this.value=='Search') this.value='';" title="Enter the terms you wish to search for" class="srch-txt" name="s" id="s" size="15" />
</div>
<button type="submit" class="SE5_btn" id="searchsubmit">Go</button>
</form>
</div>

What if you want to style multiple input fields?

My approach works well if you’re only styling one input field. But if you wanted to use icons within multiple input fields, my way isn’t the best solution. You would have to add multiple styles for each icon you’re using, which would make your CSS more bloated than necessary.

Fortunately, that’s where Javascript comes in. As I was researching this topic, I came across a good article by Janko Jovanovic where he describes how to accomplish this technique using Jquery to style multiple input fields. This automates the process a bit, and helps you keep your CSS to a minimum.

Thoughts?

If you’re a web designer, what kinds of websites do you think this would work well with – blogs only, or other websites too? Do you think that it should be used selectively, such as for search bars (which you currently see), or do you think there’s a greater need for this? Share your thoughts using the comment form below!

(As a quick aside, if you’re curious about why commenting is so important and what some of the benefits are for your website or blog, read through “10 Reasons Commenting is Good for Blogs” by Chris Garrett.)

Upgrading the functionality turned out to be a bigger challenge than I had anticipated. I’ve spent the better part of the last few days trying to get everything working properly and looking the way I want it to, and I’m finally done and am quite happy with the results.

I wanted to mention it here not because I want to show off my work, but because I think that pointing out the resources I used might help others as well.

What features I wanted

I’ve seen plenty of other blogs out there, so I already knew what specific functionality I wanted to incorporate into my new comments area. In particular, I wanted to add:

• Threaded comments – Someone responds to a particular person’s comment, and it posts their reply indented within the same comment box. That way, you know which comment they were directly responding to.
• Gravatars – Globally-recognized avatars that follow you from one blog to another. You can register a gravatar at www.gravatar.com, and then when a blog has them enabled in their comments, your gravatar will display when you comment on a post.
• Author styling – When the author of the post responds to someone’s comment, it will be styled differently than a regular comment.
• Separate out the trackbacks – When someone links back to your post from their website or blog, it’s called a trackback. WordPress will count it as a comment, but if you’ve ever seen blogs where the trackbacks and real comments are mixed together, the actual conversation can be hard to follow – hence the desire to separate them out.

Once I started researching how to do this, I discovered that WordPress 2.7 (the newest release of WordPress) comes with all of this functionality already built in. You don’t have to install extra plugins or hacks any longer, which is what you used to have to do. So although I was only looking to install one or two of these functions, before long I realized that I should just overhaul of the entire comments area.

I can hold my own when it comes to WordPress coding, but I’m not a web developer who really understands what everything means, so it took some time to understand what the articles I found were talking about. But once I got a grasp on it, I was able to get everything working properly and looking how I wanted it to.

Resources that helped me

There were a lot resources that were helpful to me, but these two links in particular are the best articles that I found. They both give you the exact code that you need to use. I’ve labeled each link with the page in your WordPress theme that the article gives you code for:

• Code for functions.php (from Scriptygoddess)
• Code for comments.php and your CSS stylesheet (from eJabs)

Follow the instructions in both of those articles and you should be able to successfully upgrade your comments area. If you have any problems, you can always Google your question or try posting it to the WordPress forums to see if someone can help you out.

Thoughts?

What do you think of the new comments area? You’ll have to leave a comment in order to see the changes! (Although I suppose you can see the comments on my article from earlier this week, “Styling Your Forms to Improve Usability” – but that would be cheating, so leave a new comment instead!)

What I’d like to talk in particular today is the subject of forms and usability. Now, I’m sure many people know some of the basics of website usability, especially if you’ve been reading this blog for awhile. If you do, you know that it is often the smallest usability quirks which can create the biggest annoyances for your visitors. There is no better example of that than HTML forms.

So if you want to know how to build better forms on your website, keep reading. I’m going to discuss some of the HTML elements that you can use when building a form on your website, and then give some tips for how those elements can be used to create a more usable form.

HTML elements for forms

When it comes to creating forms, HTML gives us web designers a variety of elements to use. Some of these are used by designers more frequently than others, but they are all useful in creating a more usable form.

So what are these elements?

• fieldset – A group of related content, used to make the form easier for users to follow.
• legend – The caption to a fieldset.
• input – The actual field that you enter information into.
• label – The description found in front of an input element – “Name” or “Phone Number”, for example.
• textarea – Like an input field, except for longer answers – “Comments”, for example.
• select – A drop-down menu used to present multiple choices for you to choose from.
• option – One of the choices contained within a drop-down menu.
• optgroup – A label used to categorize a group of choices together within a drop-down menu.

Using these elements properly – labels in particular – gets you away from using tables to lay out your form. Using the HTML elements, in combination with CSS, is the more modern way of doing things, and because you’re using less code, it means that web browsers can process and load the page much quicker.

Style form elements to improve usability

All of these form elements can be styled using CSS just like any other HTML element – which is the key to making your forms more usable. When you apply styles to these elements, what are you really doing? You’re visually separating them from the surrounding content in order to make the form appear more organized and less confusing to the user.

Whenever I create a form for someone, I try to keep the following things in mind, all of which relate to how the form is laid out and how the form elements are styled.

• Use fieldsets to group similar content together – Fieldsets can be used to separate content in your form so that it seems less lengthy and more logical to the user. The bonus is that by going from one section to another, it also gives a sense of progression as they fill out the form. In terms of styling, most often you’ll see fieldsets styled with a border and/or background color combination. Again, the goal is to visually differentiate the form from other content on the page.
• Labels should always go above the input field – Eye-mapping studies have shown that people are best able to associate labels with particular input fields when the label is above the input field. This also gives you room if your label and/or input fields in question are long(er). In that instance, they won’t appear scrunched up, which might happen otherwise if the label is to the left of the input field.
• Labels should ask for the exact information needed – If you’re looking for information in a particular format, or a particular answer, then make sure that your label says exactly what it is that you want the user to type. For example, when it comes to phone numbers, there are various ways that people type those into a form. If you’re looking for the phone number (or any information) in a particular format, then make sure that your label specifies that.
• Give the user breathing room to type - I add a few pixels of padding to my input fields so that the text isn’t crushed up against the edges of the field. This helps give the form a much cleaner and modern look to it – intangible qualities that can help give an overall positive impression of your website.
• Don’t forget to style the input fonts – Another nice touch for your form fields is to specify the font that will be used when someone types into one of your input boxes. It’s not necessary to do it, but if done right further contributes to the clean and modern appearance mentioned above.
• Color your input fields to make them stand out – By default web browsers render input fields as a white box with a black border, making them hard to notice.  Giving them some color can help them stand out from the surrounding content. There are two things to keep in mind though: use colors from within your color scheme, and use colors with enough contrast against your page background.
• Show the user what input field they’re on – If you’ve colored your input fields already, you can provide even greater visual distinction by styling the particular field that the user is currently filling in. Just use “input:focus” in your CSS, and style accordingly.
• Don’t forget the submit button – I’m sure you’ve seen the standard way that most web browsers render form buttons. The look is definitely a bit outdated, so if we can do better, why shouldn’t we? How you style these all depends on the overall style of the website, but if you use a gradient background image or a color, it will do wonders to making your forms look even nicer.

Want to see examples?

Now that I’ve gone through some tips for how to style your forms, you might want to see some examples of forms that were created using some of the techniques I just mentioned.

Smashing Magazine has put together photo galleries of well-styled and innovative forms. You might find some good ideas for your website by looking through these two posts:

• Web Form Design: Modern Solutions and Creative Ideas
• CSS-Based Forms: Modern Solutions

If you’re interested in the common practices of other designers when it comes to creating forms, Smashing Magazine also ran a design survey where they asked some well-known websites for all sorts of information how they styled and designed their forms.

• Web Form Design Patterns: Sign-Up Forms – Part 1
• Web Form Design Patterns: Sign-Up Forms – Part 2

Thoughts?

Now that you know how to create forms in ways that improve their usability, what do you think? Are there some tips that I gave that you agree or disagree with? Do you do anything differently with your forms, and if so, what is it that you do? Share your comments with everyone by filling out the comment form below!

Design Observations

The vast majority of the websites have sharp, modern looking designs. I really liked the lifestyle channels in particular – HGTV and the Food Network have very simple, clean, and functional designs. You can tell which ones have a focus on usability vs. a focus on multimedia content.

E!’s website is in a blog format – the only one that is like that. That surprised me, but for their audience, maybe it works.

Only one channel was guilty of still having a website that looks like it has been around for more than 5 years (that would be you, HBO). And only one (for Bravo) was downright awful – which is a shame because I love “Top Chef”, which is one of their shows.

Let’s Surf!

So without further ado, here are is a look at the websites that I found (in alphabetical order)…

A&E

ABC

Bravo

There are so many things wrong with this website, I’d be here until New Year’s going through them all. It’s definitely my least favorite, but not by much, unfortunately.

CBS

Comedy Central

Discovery Channel

E!

ESPN

ESPN is coming out with a new website soon – they’re previewing it on their website for ESPN Insiders, of which I am not one. But, from the image on their homepage, it looks like it will be a big leap forward!

Food Network

Fox

HBO

Yikes! I could go into a long rant about this website, and it’s easily my second-least favorite of the bunch. There are all sorts of problems with I have with it, but the one saving grace it has over Bravo’s website is that at least it has a site navigation.

HGTV

History Channel

I’ll forgive that the main content area is left-aligned on the page, because overall I really like this website. And, it doesn’t have the same problem that TBS has (see below).

NBC

Showtime

Spike TV

TBS

If it looks like a duck and quacks like a duck, then it must be a… chicken? I really like this website – it has a clean, modern design and is very usable. But with the main content area being aligned to the left, I was a little suspicious of the design. Sure enough, it turns out that the website is still using tables to lay out their design, rather than CSS – so get with the picture, TBS! (And no, I was not intentionally trying to rhyme.)

TNT

USA

VH1

Your Thoughts?

So, what do you think – do you have any favorites or thoughts about any of these websites? Are there are any that you were disappointed with? Or maybe there are some that you visit frequently and really like? Let everyone know by commenting on my website!