For the last three weeks, I’ve been busy completing a total redesign of Shirtaday.com. The site was originally created in early 2006 and was extremely simple at the time.  During the next three years, it progressively grew new features and each of these features were bolted on without keeping a consistent object model or design.  It turned into a maintenance nightmare.  Also, the design had several cross-browser issues with Google Chrome and Internet Explorer 6.  It also looked poor at smaller screen resolutions.  These are just a few of the issues…I could go on forever about things that I hated about the site.

The goal of the new design was to resolve all of those issues mentioned and to really just make the site much easier to maintain.  Previously, if I changed something, I never really knew for sure just what that’d affect on the rest of the site.

A few of the things that the redesign accomplished:

1. Better SEO. On the old site, the links to shirts and pages in the warehouse were built using query parameters such as “shirt.php?id=1″.  Most modern search engines completely ignore the query parameters, so our 700+ shirts were being treated as essentially one page.
2. Paged Warehouse and Shirt Listing.  At one point, the warehouse contained over 120 shirts.  All of these were loaded on the single warehouse page when the user viewed it.  That was a lot of data to load and display, and if you were on a slow connection, it was painful to wait for it all to come down to your browser.  The new design incorporates paging of each list and allows the user to search through the lists using some new search functionality that we built into the site.  For instance, if you want to buy a black, large shirt for less than $10, you can narrow your search to this so that only shirts relevant to your criteria are displayed.
3. Better design. The original design was table-based, and some tables had tables within them that went three to four layers deep.  Ouch.  What a nightmare that was to maintain.  The new design is completely css based and is much more straightforward to maintain and enhance.  New pages and sections can be plugged in or move around extremely simply.
4. Better navigation. The main goal at shirtaday is to sell t-shirts and i think the new design helps shirtaday reach that goal better.  I believe it’s more intuitive for a user to come to the site and get through a checkout with a shirt they like.  Purchase options are emphasized with bold print and highlighted colors.
5. Ajax and jQuery. The new site utilizes ajax and jQuery for many things like voting for your favorite shirt or adding an item to your cart.  This, in my opinion, really enhances the user experience at the site.

Visit Shirtaday

1. New Brand and Logo.  It’s sad to say, but the old site was brandless.  The logo consisted of a cool background and a cool font, but not much more than that.  I’ve had an idea of the logo I’ve wanted to use for Halfslide for years now but never sat down to take the time to actually implement it.  The new site now is using that logo that I had in mind and I’m much happier with it.
2. Better CSS-based design.  The old site was built using a mish-mash of tables and divs with some styles actually declared on the elements themselves.  It really was not the ideal layout and became a bear to maintain even though it was a small site.  The new layout is much better in terms of table-less design and I believe it will be much easier to maintain over time.
3. Better browser compatibility.  Other than IE6, all the browsers that I’ve tested my site on render a consistent look and feel.  I have no desire to make this site work with IE6 and won’t waste my time on a browser that’s almost 10 years old now.  I know there are several rendering issues with IE6 including the transparent PNGs and I refuse to fix them.
4. jQuery only.  The old site used a combination of several javascript frameworks, each doing their own part on the site.  Scriptaculous for effects, prototype for utility, lightbox for image popups, and ExtJS for a few small components.  The current site utilizes jQuery to do everything and it makes it much easier to maintain all the scripts.

Other than the items above, I think the new site brings a much more provides a much more pleasing aesthetic.  It’s one of the few sites I’ve done in the last few years that I was completely happy with and excited about.  I was glad to be able to incorporate client testimonials in a better way and want to thank all of my clients for their excellent feedback and for allowing me to use their quotes on the site.  I’m sure that I’m not done tinkering with the site, but this will be the last overhaul probably for a few years.  Once HTML 5 is out, I’m sure I’ll want to take full advantage of those new features.