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)

As a developer, one of the biggest challenges with testing across browsers is Internet Explorer: some of your visitors will have the most recent version (currently IE8) but there are still a lot of people who haven’t upgraded and are still looking at your site with IE7, and even (horrors!) IE6.

Since Microsoft only lets you run a single version of IE on your Windows machine at a time, this can be a challenge. Enter Internet Explorer Collection: It contains multiple IE versions which are standalone so they can be used at the same time, making it easy to see how your site appears across different versions of IE. (You probably won’t like how IE6 treats your code…)

I’ve looked at many different content management systems (Joomla, Drupal, WordPress, TextPattern, to name a few). One thing they had in common was very powerful and customizable templates. Unfortunately, this also resulted in more complex administrative tools. These small business owners want to spend their time actually running their business, not learning a new application to manage their website…and then sometimes re-learning it when they want to update their site weeks or months later.

The Quick.CMS admin tool makes it extremely easy for people to edit and update their site. It’s not the most powerful CMS platform, but it gives site owners the control they need. I’ve trained clients on the Quick.CMS admin tool in less than 30 minutes, after which they were already editing and adding new pages.

However, one of my complaints about Quick.CMS is the lack of polish. The default template isn’t very good and the add-on templates aren’t much better. Luckily it’s highly (if not easily) customizable, so with some work I’ve been able to change it to do what I need from a layout and design standpoint. The administrative tool UI is also very basic-looking — nothing flashy or fancy at all, perhaps a little dated. However, my clients who have used it have been satisfied with it…and they’re more concerned with how their customer-facing site looks more than then admin tool behind it.

You can download and try Quick.CMS from their site, or contact me about getting your own site designed.

Luckily, the fix turned out to be an easy one (I needed to re-upload my custom template files, which were deleted with the upgrade). But from now on I’ll proceed with caution before clicking any automatic “update” link.