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!

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!

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!

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

The Background

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

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

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

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

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

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

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

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

The Quick History Lesson

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

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

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

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

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

The Solution

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

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

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

The End

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

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