One of the most celebrated battles in history occurred in central China in 208 AD: the Battle of Red Cliff. It was later recounted in the classic Chinese novel The Romance of the Three Kingdoms, and retold in the 2008 movie Red Cliff. The warlord Cao Cao built an army to crush his two southern rivals, Liu Bei and Sun Quan. Liu Bei and Sun Quan allied together to fend off Cao Cao’s invasion. Desperately outnumbered, the Allies couldn’t rely on sheer manpower to repel the warlord’s forces — they instead had to rely on the skills and talents of the people on their team.

So who were some of the people on their team? There was their commander Zhou Yu, who trained their armies and led them through the battles. There was the brilliant military strategist Zhuge Liang, who devised ingenious military tactics to use against the enemy. There was the princess Sun Shangxiang, who infiltrated the enemy camp disguised as an enemy soldier and sent spy reports back to the Allies. There were the generals Zhang Fei and Guan Yu, able to face off by themselves against a battalion of enemy soldiers and emerge victorious — they provided much of the brute muscle. Zhou Yu and the Zhuge Liang made a plan to attack the enemy’s navy with fire in order to counterbalance the enemy’s numerical advantage. But in order for their fire attack to be successful, they needed to wait for a change in the wind — otherwise they would end up burning their own navy instead of the enemy. Zhuge Liang, through his understanding of nature, was able to predict the exact hour when the wind would change.  But they were running out of time — the enemy was planning to attack before the wind changes.  So Zhou Yu’s wife Xiao Qiao traveled to the enemy camp to distract their commander through feigning surrender and preparing an elaborate tea ceremony for him, delaying the enemy’s invasion until the winds changed and the Allies were able to successfully mount their attack.

Through the successful combination of the different roles of the people on their team — the Commander (Zhou Yu), the Mastermind (Zhuge Liang), the Spy (Sun Shangxiang), the Muscle (Zhang Fei and Guan Yu), and the Femme Fatale (Xiao Qiao) — the southern Allies emerged victorious and defeated the warlord Cao Cao.

So, what does all this have to do with us today? What can a modern, cutting-edge online marketing agency learn from the dusty old tomes of ancient Chinese history?  Quite simply, we can learn that teamwork is key. One person alone cannot hope to have all the skills and specialties needed to bring marketing success to their clients.  Instead you need a team of people with distinct yet complimentary skills and abilities. Here are some of the people you need:

• The Commander: This is the person who works with the client, determines the current state of their marketing, and makes a plan for them to achieve their marketing goals. Then, like Zhou Yu in the battle of Red Cliff, the Commander leads the team in executing that plan to achieve those goals and bring success to the client.
• The Engineer: This person is the nuts-and-bolts, ones-and-zeros programmer who gets excited about obscure terminology like MySQL and Document Object Model. The Internet runs on technologies like these, so if you don’t have someone on your team who understands it, then your online strategies will never get beyond the digital equivalent of the kiddie pool.
• The Artist: If your website looks like it was built in 1997 by your 15-year old nephew, your target audience will go running in the opposite direction. When your website looks like the work of an amateur, your company will too. You need a graphic design mastermind to design and deliver a sharp, eye-catching, high-end website that displays professional credibility and that people can’t help but be drawn to.
• The Scribe: If your website doesn’t have anything interesting to say, then nobody is going to read it, and consequently, nobody is going to buy from you. The Scribe produces the web pages, blog articles, e-books and other content that captures the attention of your site visitors and leads them to wonder how they ever managed to live without your company and your products or services before.
• The Optimizer: Let’s face it — if your website isn’t being found, then it might as well not exist. The Optimizer is a mastermind in the workings of the gatekeepers of the internet: the search engines. Optimizers spend their days poring over keyword lists, search traffic reports, and back-link spreadsheets. They follow all the latest updates in the behaviors and algorithms of the search engines. They use only ethical, “white-hat” SEO methodologies and avoid spammy, unethical, “black-hat” methodologies. A good Optimizer on your team is invaluable.
• The Communicator: Whether it’s Facebook comment threads, Twitter streams, YouTube channels or other online mediums, this person lives and breathes social media. They want to find the conversations people are having online and jump into them. For many companies, this person will be the public face of the company in most of their interactions with their clients and prospects, so it’s crucial that they get the right person for the job.
• The Entertainer: Sometimes you just need showmanship. If your marketing content is about as interesting as a presentation on the Dewey Decimal System, don’t expect people to stick around to learn why they need you. The Entertainer draws a crowd, makes your company exciting, and keeps people talking about you for days.
• The Analyst: Time to bust out the spreadsheets, folks. The Analyst sifts through the mountains of traffic analytics, conversion statistics and other data to find out what’s working in your marketing and what’s not. These are the people who find out how you’re getting a return on your marketing dollar, and work with the Commander to plan out how to increase that return in future marketing efforts.

Over the course of our work, these are the skillsets we have found to be indispensable for any online marketing effort. Of course, every team looks different, and it’s quite common for some people to have several of these skills, or for several different people to overlap in these skillsets. That is totally fine — what matters is that your team has “all the bases covered,” so to speak. If your online marketing team is missing some of these talents and skills, be forewarned — there’s some chinks in your armor that will likely end up hurting you. But if your team has all of these skillsets covered, then fear not — like the alliance of Sun Quan and Liu Bei at the Battle of Red Cliff, you’re ready to hit the ground running and achieve success.

Free e-Book: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

“Three Brothers” and “Sun Quan” images in this post are public domain and courtesy of Wikipedia.
“Lessons from History” image © 2011 Chris Strom, LLC.

Steamers coffeehouse & Wine Bar is a for-profit coffeehouse and wine bar in Arvada, Colorado, dedicated to hiring people with developmental disabilities.  They are expanding their facilities and operations and wanted to update their website as well.  We worked with Steamers to rethink, redesign and rebuild their website from the ground up.

Steamers Coffeehouse's previous website

We started out re-organizing the site’s information architecture.  The original site was flat — that is, the page hierarchy was only one level deep.  Since we were expanding the website and adding additional content, we couldn’t continue to use this site structure.  So we changed it to a two-level page hierarchy, with all the site sub-pages still easily accessible through drop-down menus and sidebar menus.  We consolidated the breakfast, lunch and coffee menus under a “Menu” tab, we expanded the content listed under “Services” to multiple pages, we added an “About Us” tab for content such as a staff gallery, company history, and company partners, and expanded the Location page into a “Contact Us” page, with sub-pages holding contact forms, address info and embedded Google maps.  We kept “In the News” as its own tab on the main bar.

The Steamers Coffeehouse facilities have wonderful interior design, utilizing a bright red/orange/green color scheme on the walls, natural materials for the furniture, and extensive framed pictures on the walls.  When we were building the website, we wanted to emulate the colors and textures of the coffeehouse itself.  Thus, you can see a similar bright-yet-mellow color scheme in the website’s visual design, along with extensive visual textures to add interest.  In fact, this is one of our favorite website visual designs to date.

The Steamers Coffeehouse facilities

A sample of some of the colors and textures used on the new website

Steamers Coffeehouse prominently features a “staff picture wall,” showing framed pictures of all of their employees, and they wanted to do something similar on their website as well.  So we designed a Flash-based picture slideshow to feature prominently on the website’s homepage, cycling through both formal portraits and candid shots of the coffeehouse staff.  The slideshow is powered by an RSS feed from Steamers’ Flickr Photostream, making it very easy to maintain and update.  We also designed the slideshow to look as if it were an actual picture frame hanging on the wall, to further match the visual motif of the coffeehouse facilities.

The Flickr-powered slideshow on the homepage

Finally, we built the entire website on a custom content management system.  Our content management system gives Steamers employees the ability to easily update the text and pictures on their pages, and to add, delete and re-arrange pages with a visual drag-and-drop editor.  This will give them the ability to maintain and manage their website long into the future.

It was a pleasure working with Steamers Coffeehouse throughout this project, and we’re very proud of the results.  Steamers has a great group of people, great facilities, and some of the best food and drinks around.  Working with them was a great opportunity to produce some very high-quality work, both on a visual and a technical level.  We wish Steamers the best of luck going forward in their business, hope that their newly revamped web presence serves them well.

You can find Steamers Coffeehouse’s new website at www.SteamersCoffeeShop.com.

Free Download: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now

We kicked off the new year with a new website launch for Chaput Rootmaster, Inc, is a Denver-based plumbing, heating and cooling company.  They’ve been in business for 65 years and are very well-respected in their community.  They had an existing website, but it was unsatisfactory for many reasons: aesthetically lacking, technologically out of date, and difficult to maintain.  Realizing this, they approached us to give their site a top-to-bottom redesign.

Chaput Rootmaster's existing website homepage

We started off by analyzing Chaput’s marketing objectives for their website. Who was their target audience? What are their needs? What should their target audience know about Chaput Rootmaster? When visitors come to the Chaput website, what is their desired action?  After discussing this with the Chaput Rootmaster employees, we analyzed and refined the site’s information architecture to align the site content with their marketing objectives. We also planned out wireframe layouts for each page, determining what content needed to be on each page, and where it would be placed.

Our wireframe for the redesigned site's homepage

After we had the site structure and page layouts determined, we worked on the site’s graphic design and look-and-feel.  We decided upon a silver, blue and orange color scheme, with extensive use of brushed-metal texture, to fit the semi-industrial image of the website’s subject matter.  We also placed prominent calls to action on every page of the site, with a prominent phone number and a link to an online appointment-scheduling form in the header of each page, and with an additional appointment-scheduling form placed on the right side of all the body pages of the site.

The website's page headers, showing the blue and brushed-metal color scheme, and the prominent calls to action

We coded the site on a custom content management system based on SilverStripe technology. This allows the Chaput Rootmaster employees to easily update and manage the site content themselves, rather than having to manipulate HTML code or outsource site maintenance elsewhere. We also coded the website to be extremely flexible, with the page menus and interface designed to handle a page hierarchy up to four levels deep.

As we coded the site, we made extensive use of jQuery functionality.  This is most immediately obvious on the homepage, where we used a heavily customized version of the jQuery cycle plugin to create the “Featured Services” slideshow at the top of the page.  We also used jQuery in more subtle ways as well, such as auto-formatting date fields and form validation on the input forms on the site.

jQuery auto-formatting for this form's date input field

jQuery form validation alerts the user if they forgot to fill out a required field on a page form

One particular challenge in development was displaying a map with an overlay showing Chaput’s service area in the Denver metro area.  We wanted to use Google Maps to accomplish this, but we were limited by their terms of service: you are allowed to display screenshots from Google maps, but are not allowed to alter that screenshot in any way.  What we ended up doing was creating the map and the service area overlay as two separate images, with the service area overlay positioned to lie on top of the Google Map screenshot.  Thus we could still visually illustrate Chaput Rootmaster’s service area without violating the Google Maps terms of service.

The Google Map screenshot and the separate overlay image layered on top of each other in the web page

We launched Chaput Rootmaster’s new website on January 5th.  Since then, both us and the client have received a lot of very positive feedback.  Several people have told us that it’s “the best-looking plumbing company’s website [they've] ever seen.”  We’re glad to hear all the positive responses to the new website and we’re happy to have the opportunity to help out this well-respected company.  We’d like to congratulate Chaput Rootmaster on their first 65 years in business, and we hope their newly-launched website will be a great asset for their business both now and into the future.

To see Chaput Rootmaster’s full website, please visit www.ChaputRootmaster.com.

Free Download: Search Engine Optimization Fundamentals

You have a website, but is it getting found? Find out what you need to know about search engine optimization in our free e-book.

Download Now

Balaam’s Donkey is a Denver-based classic rock band, and they commissioned us to produce a logo for their band.  The logo imagery was to be, not surprisingly, a donkey.  In keeping with the light-hearted, cheeky personality of the band, we decided to create a logo with a bright, cartoon-like feel to it.  We started out by making several pencil sketches of the donkey until we had a sketch that we were satisfied with.

Our finalized donkey sketch

After we had a finalized sketch, we scanned it into the computer and traced it out in Adobe Illustrator.  First we drew it out as a series of fixed-stroke-width lines.  Then we converted the stroked lines to solid shapes so that we could refine the line thickness.  That way we could transform the chunky, single-thickness line drawing into something a bit more elegant, as you can see in the below example for the lines of the donkey ears:

The donkey ears before and after we manually adjusted the line thickness

We worked on the Illustrator drawing like this until we produced the final black and white version of the logo, seen below.

The finished logo in black and white

After that we started adding in color and shading…

Added the background…

And finally added a subtle drop shadow between the donkey and the background to give the illustration some dimension.

After this was finished, it was time to choose an appropriate typeface to match the illustration.  In logo work, when the lettering is such a prominent part of the visual design — and indeed sometimes the only component of the visual design — finding an appropriate typeface is of utmost importance.  We needed a typeface that was both solid and easy to read, but still with a bit of a whimsical flavor to it.  It took a lot of experimentation to find an appropriate typeface, and we looked at many different typefaces side by side.

Some of typeface finalists that we considered

Finally, after choosing an appropriate typeface, we had our finalized logo.

Balaam’s Donkey was very pleased with their new logo and will be using it on all their official band materials from here on out.  We enjoyed working with them and wish them the best of success in their musical endeavors.  Whenever Balaam’s Donkey needs additional graphic design and web design work in the future, we at Chris Strom, LLC will be happy to work with them again.

Free e-Book: Social Media for Business

Download our free e-book to learn how to derive real business value from social media tools.

Download Now

Our finished Cavendish Scott website redesign

Cavendish Scott is a Denver-based company that specializes in ISO management system consulting, auditing and training.  They have a large client base and offer a wide range of business services, and needed a correspondingly large website overhaul to match the scope of their business activities.  Their previous website had become very dated both visually and technologically, and years of hodgepodge maintenance by many different people had left it in need of a comprehensive restart.  When we took on this project, the first thing we did was plan out an overhaul of the site’s information architecture, breaking it down into four categories:

• Our Services
• Our Company
• About ISO
• Contact Us

As we were planning the information architecture, we noticed that most of the current site’s content focused mostly on talking about the company itself, with little written about how they could help the customer.  So we made sure to boost the amount of content in the Our Services section as well, to increase the focus on serving the customers’ needs.  The “Our Services” section was further divided down into three separate categories, based on the company’s three main areas of business: ISO consulting, ISO auditing and ISO Training.

After we had the site’s new information architecture planned out, our redesign process followed our standard web design workflow: Visual design, followed by XHTML/CSS template construction, followed by development and implementation.  We focused heavily on the homepage during the visual design page.  It would be fairly content-heavy: there would be a company introduction, a recent news section, a newsletter signup form, a Featured Services area, and more.  We worked heavily on taking this information and presenting it in a visually effective manner, with a clear hierarchy of information — something that would draw the site visitors in to learn more, rather than overwhelming them and turning them away.  We made an eye-catching introductory paragraph and accompanying graphic at the top of the page, along with a prominent portion of screen real estate dedicated to Cavendish Scott’s current featured services.  We focused heavily on featuring strong calls to action — a large percentage of the page’s prime real estate is dedicated to quick-links to featured areas of the site.

Strong calls to action on the site's homepage

Another key consideration during the visual development phase was the appropriate use of color: we focused on achieving the right balance between using enough color to balance out the site’s text-heavy content, without making it look excessively bright and loud — this was a professional business-to-business site, not the Cartoon Network.

Effective use of color livens up the text-heavy content

The site’s development and implementation was similarly involved, with the site needing a good amount of custom functionality.  The homepage’s newsletter signup form was programmed to plug directly into the client’s iContact.com newsletter software API, with built-in form validation and confirmation emails to the client.  The website’s News section is powered by a WordPress engine, with a custom homepage script to pull and display headlines from the several most recent postings.  In addition, we built custom functionality into the training schedule page, so that users could quick-link from every class listed on the training schedule right to either its accompanying class registration form or to an appropriately auto-completed contact form to request more information.  On the training registration form, we used AJAX functionality in order to dynamically update the available course dates as users changed between the different training courses offered.

Quick-links to the appropriate auto-completed signup and contact forms

AJAX functionality powers dynamically updated input fields

The finished project was a resounding success and a huge upgrade to the company’s website presence.  We were pleased to be able to work with Cavendish Scott on such a seminal project for their company, and look forward to continuing to work with them in the future.

You can see the finished site here:

www.CavendishScott.com

Free e-Book: Website Fundamentals

Download our free e-book to learn what you need to know about building effective websites.

Download Now