This is a somewhat detailed post about the new Otter Website Design.   The site is built on a BlogWare Blog Engine & was designed to incorporate some BlogWare Specific Features.
      We started the design process 3 months ago by setting up a test-blog on our BlogWare account that mirrored the Old Otter Design.  We switched from a 3 column layout to a 2 column layout with the narrow nav-column on the right, and settled on a fixed width of 930px to match the new Ottergroup banner at the top of the page.

The Otter Banner was set as a background image in the site Style Template for one important reason.  If it was set as a component,  we would not have been able to overlay the Quicklinks dropdown list and xml button.  Calling the banner image through the Style Template allowed us to Create a Header Component with Quicklinks & XML that sits above the banner.

For the right navigation, we created a Category for each link, so for the Company Overview link, we created a category called CompanyOverview.  Each category contains 1 blog post.  The one tricky part  with the posts in the category was removing the date, time, and posted by info to make the post look like a static page instead of a blog post.  To do this, the Category Template was modified so that date, time and posted by information would only show up in the Main Blog, not the single post categories.

We then set up components for each section of the new website, About Otter Services, Otter Speaks, Podcasts, Case Studies,  etc.  as well as the Custom Search, and Client Blog Components.

We incorporated a couple of google elements into the website as well.  Otter Speaks: Upcoming Events, links to the otter google calendar that we maintain and update through our gmail account.  We also set up a google analytics component that provides valuable data about visits to our website.

A main selling point of our redesign was creating a static front webpage that would work seamlessly with the Otter Group Blog.  Using our Test Blog, we set up a mock front page with a post that had the main page elements on it.  The main page post contains a javascript feed to the most recent post on the Otter Group Blog, as well as iframe windows with ECEO and Podcast information.

We copied the Source code for the Test Blog page that also contained the Main Page post and pasted it into a file called index.html.  Once the index.html file was uploaded, it automatically became the default test blog main page.

Once everything on the test site was set, we recreated the same category architecture and moved category posts over to the Ottergroup.com site.  The Otter site Themes were switched to the new design themes and links were rechecked.  Overall, a very smooth transition from old design to new design.  If you have any questions about the design, email me at jaime@ottergroup.com

Share This

This entry was posted on Friday, September 8th, 2006 at 7:19 pm and is filed under Main Page. You can subscribe via RSS 2.0 feed to this post's comments. You can comment below, or link to this permanent URL from your own site. Your comments will be moderated but will appear as soon as humanly possible.