Call: 858.952.0837

The Redesign of BigTunaInteractive.com

Date Published: May 31, 2010

After three weeks of usability testing, we are proud to officially announce the re-launch of BigTuna Interactive’s site! The features of this site are a product of our San Diego web design skills that we have advanced tremendously over the past few years.

Here are some images of the old site. Please click on them for a full screen graphic.

We used these technologies and design techniques on the new BigTuna Interactive website:

CSS Sprites

We really went nuts with CSS sprites on the redesign. Sprites are images with various usability states. These states could be either current, active or hover. Sprites are a great way to increase page speed and reduce server calls. In the past, you had to use javascript to accomplish the effects of sprites. However, you can develop them using strictly CSS today. The first sprite that you will see is our navigation.


The navigation of our old site had a drop down menu. However, after researching our analytics, we saw that the drop down navigation was not used and that we would be better off by simplifying the navigation.

The footer is also blinged out with two different sprites:

CSS sprites also increase usability by showing the visitor that they are on a clickable object.

jQuery

jQuery jQuery is a clean, unobtrusive javascript library that allows you to add flash-like interactions to your site. We are a huge fan of jQuery. jQuery allows you to pack meaningful content on a page; yet, you can still keep the layout integrity. This is great for search engine optimization. You will see jQuery interactions on the following pages:

  1. Home page
  2. Online Marketing Services page
  3. Search Engine Optimization
  4. Web Design
  5. Social Media Optimization
  6. PPC Management
  7. Email Management

The contact form on the right sidebar, the hover states for the images in our portfolio, and the fancybox image galleries are also triggered by jQuery.

Icons and custom graphics

Icons are consistent throughout the entire site. They serve as descriptive indicators of what the visitor will be clicking on. You name the page, you’ll see some icons!

We also gave each services page a custom designed header graphic. This graphic was created in Photoshop and Illustrator.

Improved Portfolio section

The portfolio section for Interactive Agencies can be one of the trickiest page to lay out. We gave each of our products a thumbnail image, and an icon to show what services we performed. You have the option to check out all our our portfolio items directly on that page, through a fancybox modal overlay image gallery, or you can click directly to that page for more information.

Contact forms

We decided to put the contact form, fixed right to the visitors browser. Once clicked on, this contact form expands to include all of our pertinent contact information. On our old site, the contact form was in the footer and was hard to find. This is an absolute no-no for web design!

All of the site forms are connected to various databases, which allow us to manage the flow of information more efficiently.

Search Engine Optimization

I often tell our clients that there are two things that you need to be successful at seo:

  1. Links
  2. Pages

This redesign allowed us to add another 30 pages to the site and create an information hierarchy that is scalable.

Please let us know what you think of the new site. Like all good websites, your job is never finished. You should be consistently conducting usability studies, checking your analytics and optimizing the site for conversions. We plan on practicing what we preach for our clients with this site!

Currently there are no comments related to this article. You have a special honor to be the first commenter. Thanks!

Leave a Comment