Advanced Twitter Widget
Some WordPress themes come with a Twitter widget built in, but if yours doesn’t then Advanced Twitter Widget is a simple plugin that lets you add your tweets to your site. (And while it’s true you can use Twitter’s own widgets, I prefer to style the tweets to better match the site’s style.)

Contact Form 7
Contact Form 7 is a simple but useful contact form. Lets you easily create multiple custom forms and send to various email addresses.

Exclude Pages
Exclude Pages lets you create public pages that don’t appear in the navigation. This is useful for public pages you’d like to remain hidden, landing pages you don’t want to appear in your site’s navigation, client pages, and for themes that don’t allow you to use custom menus.

Lightbox 2
Lightbox 2 automatically makes any linked image display in a lightbox-style popover, rather than just open the image in a browser window.

Widget Logic
This is one of the most useful WordPress plugins, and it gives you a lot of control over how sidebar widgets appear on your site. While many WordPress themes allow for different sidebar content for various pages, some have a single sidebar for all pages. And even for those themes with multiple sidebars, you might want more control over what widgets appear on specific pages. Widget Logic lets you control exactly what widget appears on what page. That sounds vague, but once you learn how the conditions are written it’s powerful and easy to have widgets appear exactly where you want them.

WP-DB-Backup
It’s always a good idea to make backups. WP-DB-Backup makes backups of your MySQL database and saves, emails or downloads it. You can also schedule automated backups to be sent to an email address.

WP Super Cache
John Gruber is infamous for trashing WordPress sites he links to: often such sites are overwhelmed with traffic, and WordPress can’t handle high levels of traffic very well. Enter WP Super Cache: this plugin creates cached versions of your site’s pages instead of having to hit the database each time a page is accessed. If you expect a lot of site traffic, WP Super Cache is a must-have.

WordPress SEO by Yoast
Another no-brainer plugin. WordPress SEO gives you control over page titles, descriptions, and keywords on a per-page basis. A nice feature is the “Google result preview” that shows how the page would appear in Google based on your current settings. Also, WordPress SEO generates a Google sitemap XML file as well (which eliminated the need for a no-longer-must-have plugin, Google XML Sitemaps).

Update: Daring Fireball linked to an improved version that’s a little more legible: iPad View Source Bookmarklet

The one thing Facebox didn’t do “out of the box” was automatically make links to images open in the lightbox window. To fix this, I just used a bit of jQuery to add rel=“facebox“ to any anchor tag that linked to a JPG or PNG:

// add rel="facebox" to image links for lightbox effect
$("a[href$=.jpg],a[href$=.jpeg],a[href$=.png]").attr("rel","facebox");

Enter PNG Thing for Mac. Running your Photoshop-generated PNGs through PNG Thing reduces their size: just drag your images onto PNG Thing and strips out unnecessary junk, making your PNGs smaller. (It does a better job on large files and doesn’t make much of a dent with smaller PNGs.)

Dave Shea says Fireworks does an even better job of reducing PNGs. But if you don’t have Fireworks handy, PNG Thing is a nice (free) way to go.

Forms are a way for your site’s users to contact you, place orders, complete a survey — in general, provide you with important information. So, it’s very important that forms are clear, well-designed, and easy to use.

Validating online forms is a pain from a developer’s point of view, but necessary for a good user experience. If a user does make a mistake completing a form — such as omitting a required field or entering an invalid email address  — you want to let them know right away so they can fix it before submitting the data. And it’s best to show the error right away without refreshing the page or having to user search for what might be wrong. (A somewhat-old but still-relevant article by UIE is worth a read: Web Form Design in the Wild, Part II.)

yav is Javascript form validation tool that does a great job handling form validation. It’s good for both simple validating (such as requiring a field or checking for a valid email address) and more complex rules (if your country = United States then require the State field; if your country = Canada, require province). You can even write custom Javascript functions if you need even more specific validation rules.

yav also gives you options for displaying form errors. You can list the errors in a single section above the form, which works well with shorter forms:

You can also display error messages inline, which is better for longer forms. You don’t want users to have to search for their error, so calling out the error next to the field that needs correcting makes it easy to find:

yav’s config settings let you change error message text, and you have total control over the look of the errors using CSS. The only downside is that it’s not terribly well-documented, so if you’re unfamiliar with Javascript you’ll probably require some trial & error to get things to work like you want them.

Checking my server logs, I see that only 2-3% of people visiting my sites are still using IE6 — small enough that I can probably ignore them — but for some of my clients, that number runs around 5%. For these higher-trafficked sites, I can’t just ignore these users (as much as I’d like to). The sites don’t render perfectly as designed when using IE6, but they do have to work.

So until more of these people upgrade their archaic browser, I as a web developer need to keep testing the sites I build in IE6. But I think 2010 will be the last year I do that.

Are you still using IE6? Upgrade it now — it’s free! Or better yet, avoid security issues and download Firefox or Safari instead.

Related: France Joins Germany Warning Against Internet Explorer

Update: Perhaps the end is beginning? IE6 users to be evicted from Gmail, Google Calendar

I think part of Derek’s problem was that he assumed everybody knows good common-sense web development practices. But as Danny Sullivan pointed out in An Open Letter To Derek Powazek On The Value Of SEO “the stuff that you think isn’t rocket science — that anyone knows — is indeed a mystery to others.” I’m still surprised when I see sites coded poorly — bad page titles, using images instead of plain text, misuse of (or not using) header tags — but it reminds me that what Derek (and I) consider common sense web development just isn’t to many people. This is where legitimate SEO professionals come in to help clean up a sloppy or unknowing developer’s work.

Sullivan correctly notes that “sometimes [people] can’t find that web developer who also understands SEO issues. In the same way, you sometimes don’t find web developers who are also designers.” Sites I build are SEO-friendly without calling it that, simply because it’s the right way to build websites. Of course, once the site is up it’s up to you to add the most important part of any site: compelling content that brings people back to your site.

The CSS to “hide” the text and display the logo image instead is pretty simple as well:

This styles the text and sets the height and width of the h1 tag to the size of the logo, and displays the logo as a background image. The h1 a style hides the text from the user (but not from search engines) by negative indenting the text and basically hiding it off-screen.

The result:

• very simple HTML code that’s easily read by search engines (better for SEO)
• text that provides a correct representation of the logo (no ALT tag needed)
• design elements are kept separate from the code, making future updates easier (the image can be changed simply by modifying the CSS)

If you have a floated element such as a div and you place margin-right or margin-left on that element, our most beloved Internet Explorer 6.0 will double that margin value, causing havoc in your html layout. To fix this simply add display:inline; to your floating element.

(via Jayme Blackmon)