I always like to start the New Year with a little cleaning and organizing of my browser bookmarks. The fresh clean New Year seems like the perfect time to go in and review all those handy links I just knew I needed, but didn’t take the time to properly categorize or describe.

I’ve spent several hours this morning going through my bookmarks, clicking each link to make sure it was still live, and sorting them into proper categories. As I do each year, I came across some fun and useful things I had forgotten I had, and I thought I would share a few of them with you. I tried not to include too many of the links that, while good quality, can be found easily enough on your own with a quick search, but some were just too good to leave out.

CSS Stuff

Based on the number of links I had on the subject, I seem to have an obsession with 3 column layouts, although frankly I don’t design many sites that use them, so I can’t imagine why I’m so interested. Here are some of the better resources on the subject.

• CSS layout techniques: 3 columns, the holy grail
• CSS-P 3 Column Layout
• A List Apart: In Search of the Holy Grail

The quest for equal height columns creates another CSS layout issue that plagues developers. The best, most elegant solution I’ve found (I used it in the layout for this site) is one laid out in a Sitepoint forum post by Dan Schulz. His passing last year was a tragic loss; this layout technique is just one of the many gifts he gave the online community.

• Sitepoint Forum: Equal Height Columns by Dan Schulz
• Projectseven.com – Tutorials: CSS Equal Height Columns
• Position is Everything: Equal Height Columns

CSS and Browser Compatability

Every web designer who uses css-based layouts has spent many an hour tearing their hair out over trying to get their layout to work properly in all browsers. Here are a few handy references, and one interesting idea for managing browser issues using .htaccess.

• Sitepoint: An Introduction to Browser Specific Hacks
• Hack Free CSS for IE
• Web Browser Standards Support
• Miva Merchant Forum: Serving Targeted Browser Stylesheets via .htaccess

PHP and MySQL

These resources are bits and pieces I’ve picked up in my travels as I’ve expanded my php skills. They are mostly aimed at php beginners, and are in no particular order.

• PHP/MySQL Tutorial (good beginner’s tutorial)
• Bytes: Understanding PHP Sessions
• roScripts: Understanding PHP Security
• PHP-based .pdf Generator (for use on servers that don’t have PDFlib)

Javascript

I confess. I hate javascript. I have a lot of respect for its ability to expand and enhance the user experience on the web, but working with it makes me crazy. Nevertheless, I have, over the years, found some nifty uses for it, a couple of which appear below.

• Diller Design: Javascript Library for PNG Transparency Support in IE6
• JQuery Cycle Plugin
• Replacing <noscript> for accessible javascript

Bits & Pieces

• Apache Rewrite Cheatsheet
• List of Free Photo and Image Editing Software
• Create Your Own Web 2.0 Buttons
• Bulk Rename Utility

And finally, because no one should work all the time, one of my favorite brain squish breaks: Mr. Picassohead.

But I have a few handy little apps of my own that I’d like to add to the lists out there…because after all, you just can’t have too much of a good thing. Some are free, some are not, some are probably found on every other designer’s list, but all of them are well worth checking out.

HTML and CSS Tools

TopStyle – I own several html editors, and I admit I use them all for certain things, but my html/css/php editor of choice is this compact, easy to configure application. It has some terrific tools that make troubleshooting coding errors a snap (the tag matching feature is a must-have) and even has handy helpers for choosing color palettes, cleaning up your css, and overall site management. And best of all, with its intuitive menus and great built-in help files, you can set it up and learn to use its features in no time.

Firebug – This Firefox add-on is a must-have for troubleshooting layout issues, tweaking designs, and getting things downright pixel-perfect. One of my favorite ways to use it (aside from troubleshooting) is for trying out different design versions without having to create multiple mockups of a page. You can swap out colors, images, borders, change placement of elements, etc with just a few clicks, and see the results instantly on the screen.

Image Editing and Color Tools

Irfanview – Handy little photo editor that allows you to quickly resize, crop and do basic touchups on your photos.

Pixie – I’ve tried several color selection tools, but this tiny application is a fave. Need to match the colors in a logo to the colors in a site? Just launch this little helper, mouse over the color area on the screen, and you’re done. Simple and brilliant. I often use Pixie in combination with this Color Palette Creator to get a range of shades of a given color for use on a site.

Fireshot – This is another add-on for Firefox. With Fireshot, you can create quick screenshots of your browser window, or the entire web page. Add notes, text, drawings, shapes, crop, edit and save, email or simply copy the result to your clipboard. Great for quick tutorials on using a web application’s admin features, pointing out a section of the layout that needs tweaking, etc. And I have to admit…I’m a sucker for the camera shutter sound effect.

File Management Tools

Bulk Rename Utility – I recently worked on a project where an ecommerce site owner discovered he would have to rename in excess of 400 alternate product view images in order to get them to work with a custom script. He was not a happy camper until I shared this free utility with him. With just a few clicks, we were able to rename all of the photos in a matter of minutes. The flexibility of this utility is simply outstanding — with a little creative thought, it can handle pretty much any renaming needs you might have.

Dust Me Selectors – Over time, any large web site accumulates css styles that become obsolete, but are still cluttering up the stylesheet. Dust Me Selectors is a Firefox add-on that creates a list of selectors that aren’t being used. Great for cleaning up an overgrown site.

HTML Link Validator – We’ve all done it. You play with different versions of a page, and in the process wind up uploading index-test.html, index2.html, index-new.html to the server. Or, you’re updating a file, and want to preserve the original version as a rollback option if needed. So you end up with file.php, file.php.orig, file.php.bak, file.php.032009 and so on. Or, if you run an ecommerce site, you may have products that have been inactivated, but the images are still on your server. If you’re careful, you remember to clean up those files, but all too often, they get left behind on the server as orphans. Over time, the number of orphans on even a well-maintained site can get overwhelming. This handy tool will browse your server and find those orphaned files so that you can delete them.

One of the best things you can do to help your company compete on the web is to be informed about the hows and whys and ways your shoppers think, act and react to web sites.

In their recent newsletter, Practical Ecommerce highlighted an article containing some excellent reads to help you re-think your web site, and the way you approach your online business.

Even if you only snag one of the books on Mat Greenfield’s list, you’re bound to be a better web site owner as a result, with plenty of ideas for ways to improve conversions and increase sales.

So this year, when your friends and family ask you what you want Santa to bring, point them to these “Great resources that can alter how you think about the web“

1. Slayer Office Tools This handy little tool allows you to put in a base color and get blended versions of the base color. The default blend colors are black and white, but these can be changed to suit your needs. Output in both hex and rgb. Great for when you like a color, but need it just a shade or two darker or lighter.

2. Color Schemer This is a nifty one for when you are looking for quickie complementary colors to accompany your base design. Input via hex or rgb, and you can lighten or darken the resulting palette.

3. Color Palette Generator This is a fun one. If you’re inspired by an online photo that you like, you just enter the url, and this cool tool will generate a list of colors taken from the photo. Along the same vein is Color Hunter, which allows you to upload a photo, and to see palettes generated from other peoples’ pictures.

4. Web Site Design Resources Directory If you’re looking for some color combinations that are a little out of the ordinary, but that pack a punch, check out the color scheme combinations that have been put together here. There’s also some very good reading in the accompanying Guide to Using Color in Web Design.

5. Color Wheel This handy color generator creates a palette of complementary, analogous, split complementary, monochrome and triadic colors for use on your site.

6. Donald Peterson’s Notes on Color This isn’t really a tool, except in the sense that it’s valuable reading for any web designer who wants to make better use of color. The articles are simply invaluable in understanding the importance of color in design, and gaining a fresh perspective on how to make the most of it.

One of the big challenges in web design is creating a layout that displays the same way in different browsers and on different platforms. You work and work and tweak and adjust, and get your layout looking juuuuuust right…and then you see the results of all your hard labor in a different browser, and holy horrors, it looks awful!

So, just like the three-way mirror in the dressing room, I’d like to share a nifty little tool to help you to get a look at your site from multiple angles. The browser list isn’t comprehensive, but it includes the main platforms and most common browsers, allows several refinements, and best of all, it’s free!