Over the last month, JustDreamweaver.com has been undergoing a complete overhaul. Not just cosmetically, but under the hood as well.
In designing the new site, my goal was to create a much more productive visitor experience with easier to use navigation, much better organization, and faster page loads from streamlined code. I will be the first to admit that the old site was definitely not optimized in any way, and is testament that Google really doesn’t care if your site code is a little sloppy.
The new site was created from scratch using a CSS layout generated with CSS Sculptor. This is one of my favorite extensions for creating a W3C valid CSS page structure. I went with a two-column structure and dropped the cluttered navigation bar on the left side, to make it more visually appealling and also better readability.
All the old left column navigation is now in the top menu, which was created with Horizontal CSS Image Menu. This extension is from PluginLab, and was really incredible to work with. I wanted the menus to be clearly evident what the item linked to, so I included all the little icons to give a visual representation of each item.
The home page of the site uses a different page structure than the rest of the site, the purpose being to be able to put focus on several ‘blocks’ of interest. The top flash banner was created using Image Show Pro, and I could have really gotten carried away with the different transition effects. It is a very powerful extension for creating Flash slideshows. I chose to keep it very subtle and not to startle you with a more flashy effect.
The footer on every page includes a featured template, a featured extension and a feed from our blog. I created the feed using Dreamweaver’s built-in XSL transformation function, and I pull the blog feed from FeedBurner. Here’s a good tutorial on how to include an XSL tranformation using XML data from Adobe Dev Net.
The graphics on the site have been toned down a little so as to not compete with the main content, and the right sidebar navigation is much more usable for finding top extensions and also instant notification of any current special offers on extensions.
The blog underwent a housecleaning too, and thanks to ThemeDreamer, it was quite easy to customize the WordPress theme in Dreamweaver. I started with a theme I created for a yet-to-be-published Adobe DevNet tutorial on creating WordPress themes in Dreamweaver. I then just changed out the header graphics and logo to match the color scheme on the main site, and uploaded the new theme to the blog. The old blog used to have a very similar appearance to the main site, but for the new blog, I wanted some distinction that you were one the blog and not the main site. I’m still playing with the theme a little bit, so it may change down the road.
I also revamped the way users can register and download templates. This was a big undertaking, as I wanted a reliable email confirmation process. The old system was based on my server, and confirmation emails sometimes took awhile to receive. The new system is off my server, and is hosted by MailChimp. Confirmation emails are almost instant, and the API integration allows me to retrieve email addresses for login authorization. I’ve been really impressed with MailChimp up to this point. Hopefully the occassional emails I send will go just as smoothly. I plan on notifying users more regularly when new templates are posted.
That’s a wrap on my website renovation post. I really hope you find the new site design to be much easier on the eyes, easier to navigate, and I will be posting more tutorials and templates now that I have this project out of the way.