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 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!

There were several plugin sessions at WordCamp San Francisco. Naill Kennedy, Joseph Scott and Michael “mitcho” Erlewine gave two different presentations during the morning esssion.

Naill Kennedy gave a high level overview of writing plugins for WordPress. Naill’s main points were:

Why would you write a plugin for WordPress? First of all, it can serve your own needs. Google and Salesforce.com just developed new plugins that integrated with WordPress. This allows you to improve customer engagement outside of your original site.

A second reason to write a plugin is to increase traffic back to your site. In the plugin admin center, you are given a link back to your site. While this link is not indexed by the search engines, it is a great way to drive traffic back to your site. You do get a link from the WordPress plugin directory.

WordPress Plugins can also increase your user experience. Plugins allow you to add or subtract items to a page, or add filters to a page. An example of this is on WordPress com, whenever you write WordPress with a lowercase “w” or “p”, it automatically capitolizes the letters.

Shortcodes have been integrated into WordPress for the past couple of versions. For Youtube, instead of typing in the full embed code, you would simply write a short snippet. Or, in WordPress version 2.9, you can actually just write the link, and WordPress will embed the video directly for you. This is done through the oEmbed plugin.

Joseph Scott spoke about WordPress Plugin security. His main points were:

• Don’t trust external data
• Make sure data is properly escaped.
• Don’t allow injections in HTML
• Don’t forget about the search form: as a test, enter script type=”text/javascript”>alert(‘hi’) end script and see what happens.
• Use core WP functions whenever possible
• Add caching for expensive processes
• Make use and add your own actions/filters
• Minimize DB row or options and use a unique name

Joseph also gave some don’t:

• Include wp-config.php / wp-load.php / wp-blog-header.php
• Ignore WP core options

Michael “mitcho” Erlewine was the last plugin speaker at WordCamp SF. He really emphasized borrowing, adapting and using hooks for your WordPress plgins.

We have developed plugins for our WordPress clients and intend on writing some public plugins in the near future.

Facebook social plugins are becoming a core component of social media campaigns. Facebook’s api is very robuts; however, their documentation needs some work.

If you click on the attached thumbnail, you will see that the API that Facebook is documenting is actually the API of the Lactose Free FanPage, not BigTuna Interactive’s. Make sure that you document your API number!

Another good tip is to make sure that you are using the JavaScript SDK. This will make sure that it does not conflict with any other javascript that may be running on the page.

BigTuna Interactive recently underwent a branding update. We updated our logo, collateral and this website. Above are some of the creative choices that we had to choose from.

The launch of Bing in June of 2009 was a very thought out and integrated online marketing strategy. Below are the key learnings from Tuesday, March 16’s SXSW session titled “Bing: admit it, you thought it would suck”:

Bing had a strong online marketing campaign to launch their product which emphasized an emotional connection to a brand. Word of mouth, relationship marketing provides 40% emotional proximity to the brand. Tactics to pull this off are talking to friends and family, writing for blogs, participating to the online conversation through social communities, etc.

Social Media

Bing really sought out to connect with their audience and online visitors. They wanted to be intimate with their users while providing a strong search experience. Over 72% of users who clicked on their facebook ad became fans. Through a media buy with Farmville, Bing obtained over 400,000 fans through that campaign. If they became a fan of bing, Farmville gave them 3 credits. This was a media spend done through a cost per engagement buy. Believe it or not, farmville has more users than twitter.

People often forget that “media” is part of social media! Having a paid budget for social should be a core component of your media buy.

Leverage Crowd Sourcing

Bing opened up their homepage to photo contests. This is another nice crowd sourcing approach to drive traffic and build evangelists.

Key management learnings:

• You don’t know anything: you can’t always predict with social media. Bing reached out to the key players in social media {Mashable, All things D, Web Pro News, Read Write Web, Search Engine Journal, Danny Sullivan, Search Engine Land, etc}. They couldn’t predict who would pass the message the furthest.
• Bing had their interns come up with a bing jingle contest. They offered $500 for the jingle. Not a big story, but Mashable and TechCrunch picked up the contest. The funny part is the TechCrunch author thought that it was terrible and the campaign actually went viral. Within weeks, the video winner created a video mocking the TechCrunch author and the campaign took off from there.
• Integrate across different channels. Bing had a strong traditional budget but used it in innovative ways. They bought an entire commercial time slot for the Daily Show. They showed a quick commercial and than gave Daily Show visitors 2 extra minutes for the show.

In summery, the Bing: admit it, you thought it would suck session at SXSW was my favorite panel. The speakers all had good personalities and were transparent about their campaign. Bing is a much better search engine than it was a year ago and it will only get better.

The at platform gives a platform to have you juice up your network and pull more twitter streams into the conversation.

The semantic web has been the most emerging topic in search engine optimization and the overall usability of search engines. The term semantic web has a lot of different meanings from different people. My definition of semantic web is that it is a higher level, or more concise matching the search query to the user’s intentions.

Danny Sullivan wasn’t a big fan of the term “semantic web”. His argument was that the core functionality of search is semantic and that the term is not needed. Search should be relevant and match the users intentions by default. He also brought up the point that since December, Google has been personalizing the search results pages.

A passion point of the panelists was what do you want out of your search results? Are you satisfied with the current results or would you like more detailed answers. The use of API’s to mashup (Yahoo! search monkey for example) can allow you to build some really cool pages on the fly.

In summary, you will see improvements in semantic web, but it will take a while. Faster innovations are coming up with display advertising serving up ads that are more relevant to users.

Blueprint:

• Started in 2007
• Rendered well in IE6
• One of the first frameworks for css that was created.
• Nice reset’s built in.
• Cons: framework is based on only 940px.

960 grid system:

• 12 and 16 column versions
• 960 pixels wide, hence the name 960 grid system
• Uses push and pull classes
• Cons:

Object Oriented CSS

• Uses grids – 13 lines
• Template – 14 lines
• Rounded corner boxes – 29 lines

Sass

• Enhanced stylesheet syntax
• Generates CSS
• Has variables, mixins, nested selectors and calculations already computed.

Compass

• Built on Sass
• Ports of comon CSS frameworks
• Innovative frameworks and extensions
• Advanced helpers with an open source ethos for web design.  This means that designers can exchange stylesheets from each other.

When someone is starting out and learning CSS, the panelists suggest that using a framework can help you learn hands on.  I learned CSS through Lynda.com while I built the first Ad 2 San Diego site in late 2006.  The organization of CSS has changed a lot since then, but the priciples are still the same.

Factors that go into the decision for picking the right CSS framework include how familiar you are with CSS and what the job details.  960gs can be a very good framework to whip up a quick layout.  It gives you plenty of spacing and keeps the format very clean.  If you need a more elaborate structure, Blueprint has more functionality.

In summary, if your web design can use a framework, then go for it.  There are very good pricinples from each framework that can be used to really speed up the job.

This video the shows the proper on page optimization processes for a WordPress post. It covers the correct title structure, category alignment, more tag positioning and use of the All in One SEO plugin. There are hundreds of other factors that go into optimizing your WordPress pages. This tutorial shows the basic best practices for what to do with the default settings and the all in one plugin.

We wrote earlier about best practices for wordpress on page seo. This video will show you what to do once you are logged into the admin panel. By no means is this a quick search engine optimization solution. It will point you in the right direction to using WordPress properly for SEO.

Site maps are a staple web usability feature. They give visitors a quick way to find information. Site maps are also great link juice for search engine spiders.

Since this site is managed by WordPress, I was able to use php to dynamically add my blog posts to the site map. Check out the site map and let me know what you think.