Red Rocket recently redesigned the web site for our blog hosting product, Blogzerk.com. Behind all the great design is some cool technology.
Templates
For the original site we used the PHP Smarty template system. This had served us well in the past to allow us to separate our code and content and make quick changes either to individual pages or to common elements like headers, footers, and navigation. This also made it easy to implement and test our site redesign before going live as well as flicking the virtual switch to go live with the new look.
Since we used separate template files for our header, navigation, and footer it was easy to make copies of these and test them on a few copies of our content pages. When we were satisfied we had everything in order, we only needed to back up the old template files and then replace those four files with the new ones. In case of emergency, we could revert back to the old files.
CSS
We used CSS on the original site which made updating our CSS for the new look easy. We changed a few styles, removed some we didn't need, added a few new ones for some added layout elements, and we were good to go.
Flash
We used Flash on the home page to rotate three (currently) different images. We used the JPG Rotator component from Jeroen Wijering. This was quick and easy to implement and has some nice transition effects and timing options.
JavaScript
While we usually stay away from client-side scripting, we had an opportunity here to use it to enhance the user experience and we could ensure that it would degrade gracefully for anyone not using JavaScript. In the header of the site, we used the script.aculo.us JavaScript library to make a hidden DIV with our control panel's login form appear with a nice fade in effect and fade out if the Cancel button is clicked. If the visitor isn't using JavaScript the link will take them directly to the control panel's login page.
If you are looking to have your web site redesigned (or a new site designed), please contact us for a quote or more information.
