blog | Redesign Complete - Announcement post

Redesign Complete - Announcement post

Wednesday February 25 2009

I’ve completed the redesign of my portfolio site as well as this blog. I’m much happier with the new look. The old look was put together in a rush when I first got into freelancing as I had clients before I had a site ready. Nothing to complain about, but still I felt the need to get a site up and did a rush job in hacker black—screenshots at the bottom of this post.

When designing the new version I took my time in photoshop and designed each section of the site. My primary goals were to have a site that is cleaner, brighter, more inviting and ultimately more informative to clients. I feel that I have succeeded on all of those points. Of course there is always room for improvement and any suggestions are very welcome.

Technical stuff

This site is of course powered by ExpressionEngine. Third party modules, plugins, & extensions include:

Modules
1. Tag Module—powering tags on this blog as well as the features for each portfolio entry.
2. FreeForm—powering the contact page
Extensions
1. LG Better Meta
2. Multi Drop-down List—used for Role on portfolio page
Plugins
1. TruncHTML—used for all the summary links
2. Gravatar—Avatars on this blog

I also have used some jQuery for the portfolio—the cycle plugin on the individual items to cycle through screenshots and on the sidebar of the About page and this blog to cycle through portfolio thumbnails. On the Portfolio page the testimonial is truncated with the jQuery plugin truncator. I couldn’t use the EE truncHTML plugin as the testimonial is a single custom field with multiple paragraphs and things got funky with the show/hide. Using this jQuery plugin everything works smoothly.

Additionally on the contact page I used a jQuery plugin for form validation. This works a charm requiring minimum character counts, valid email, URL and also restricting file types accepted for upload. If the user makes a mistake the entry field is highlighted in red with an explanation. All very user friendly.

This is also my first site to be built using 960.gs. Layout in photoshop was simple. I was a little thrown off by the actual template provided being 1020px wide but once I realized that I needed to stay in the guidelines everything was good. Using the CSS classes took a bit to get used to (about 10 minutes), but made html/CSS coding real smooth. I know it saved me a ton of time troubleshooting because I didn’t have any errors in IE7 at all and only a few in IE6 which I’m not even going to fix.

Overall alot of improvements to the site. For comparison the old site is below.