The New ‘New’ Corporate Website

Your prospects don’t care about you. They don’t even care about what you do. They care about what you can do for them. I am fond of saying this to, well, anyone who will listen. It not only encapsulates exactly what B-to-B buyers are thinking, but also pokes a little fun at the ego with which so many marketers think of their own marketing materials.

Tom Marin blog website design illustrationYour prospects don’t care about you.

They don’t even care about what you do.

They care about what you can do for them.

I am fond of saying this to, well, anyone who will listen. (I believe it’s the phrase on which my now-16-year-old daughter perfected her eye roll.) The reason I’m fond of the this saying, aside from it’s slight snarkiness, is that it not only encapsulates exactly what B-to-B buyers are thinking, but also pokes a little fun at the ego with which so many marketers think of their own marketing materials.

To avoid this trap on your company website, you must keep the focus pointed outward, not inward. The language you use will be a big part of this focus, but the site’s navigation and organizing structure are important, too.

In other words, the About Us and What We Do pages aren’t nearly as important to your prospects as you think. You should de-emphasize those pages and/or rethink them in favor of pages that explain the benefits of what you do and the impact what you do can have on your prospects’ businesses.

With that in mind, you should make sure that About Us finds its rightful home, which is not as the first item on your main menu. That first item, which can have any number of titles, should be an entry point into the ways you can help prospects improve their businesses.

(About Us should, in most cases, be the second-to-last item on your main menu. Having the Contact page occupy the last spot has become enough of a convention that you should not mess with your audience’s expectations.)

On your home page, talking about yourself and your products or services beyond a basic introductory paragraph is a waste of valuable screen real estate. That screen space should be used for three (give or take) calls to action that draw visitors deeper into your site.

Once you have your navigation and structure properly focused, you should review your site’s copy – both its focus and its language. In addition to being all about “you,” the prospect and not “we,” the marketers, it needs to provide value to your target audience.

Your site should include tools, tips, and thought pieces. You should have landing pages devoted to your key audience segments. And your materials should be timely and relevant to the issues your prospects are facing – exactly the things that About Us and What We Do nearly always aren’t.

To be an effective marketing tool, your site has to bring the benefits of what you do to life. Content has to include useful tools and tips and how-to guides that provide value to your target audience. The marketing value is driven home as prospects come to think of you as a knowledgeable and valuable resource on whom they can rely when they move from exploring an issue to seeking a solution.

Does Flat Design Forsake Response?

When I first became aware of the Internet, I was running the Toronto office of direct marketing agency Cohn & Wells (later purchased by EURO RSCG). I had met a young guy (with purple hair) who worked down the hall and when I asked what he did, he introduced me to the World Wide Web. It was 1995.

Converting Website Visitors to Sales OpportunitiesWhen I first became aware of the Internet, I was running the Toronto office of direct marketing agency Cohn & Wells (later purchased by EURO RSCG). I had met a young guy (with purple hair) who worked down the hall and when I asked what he did, he introduced me to the World Wide Web. It was 1995.

Our largest client, Bell Canada, was launching a campaign to defend itself against telecommunications deregulation and I wanted to include a website as a response mechanism in order to support their position as an innovative industry leader.

The URL? http://www.belladvantage.com/save/2c.html — not exactly easy, intuitive or consumer friendly but the page itself took advantage of known visual cues that would stimulate response: Skeuomorphism.

Skeuomorphism is the idea that early computer interfaces would be more intuitive to users if an object in software mimicked its real world counterpart. For example, a “trash can” and “file folder” are two of the most recognizable skeuomorphic objects.

As the web matured, designers spent hours on designing and testing skeuomorphic buttons, adding curves and drop shadows as non-verbal cues to indicate that, yes, this is where you should click to take the next action. In fact, if you Google “best color of button for conversions” you’ll get over 1.3 million results. Article after article about not only colors, but shapes, sizes and shadows, and how they’ve been tested and refined for maximum response. For our Bell Canada landing page, the buttons were indeed large, colorful and action-oriented.

But now, the world has gone to flat design. For the most part, buttons are now no more than a simple rectangle. Some research suggests that rounded corners enhance information processing and draw our eyes to the center of the element, but that insight seems to have been tossed out the window.

Color seems to be optional as well — or color appears after you hover over the button. That seems counterintuitive to me, as the sole purpose of the button is to draw your eye to the action area and to click — if the button is lacking any color, it’s not grabbing my attention in the first place!

Other advice from experts is to clearly label the button with a message of what happens after the click/tap or indicate what it does using action verbs. As a dyed-in-the-wool direct marketer, I know buttons should be labeled with “Learn more” or “Add to cart” or “Download now,” but apparently others don’t find this the least bit important as I’ve spent many a confused minute or two unsure how to proceed on a website when the button was labeled “Awesome!” or “Got it.”

I’m also a strong advocate of the action arrow. That little “>” icon that is one more visual action cue. In my mind “Learn more >” is far stronger than just “Learn more” — especially when the button is flat.

For those of us who have grown up in the direct response world, we have studied, tweaked and tested our way to maximum direct mail response rates. Neuromarketers helped us study how the brain responded to various stimuli and we began to apply it to every aspect of marketing design from pricing to color choice. So why throw all that insight away and use a flat button?

I’m sure readers will tell me that it’s because everybody already knows it’s a button. But I beg to differ. “Everybody” doesn’t always include that older adult who may not be as web savvy as you are. And I, for one, don’t want to lose a single response. So with all of our energy spent on studying and testing conversion techniques, I would encourage someone to test a skeuomorphic button against a flat button and share the results with me. I truly believe there may be an “a-ha!” moment on the horizon.

3 Reasons GIFs Have a Place in Your Marketing

We’ve all seen the GIFs of yesteryear: Flashing letters. Hokey cartoons. The dancing baby. Today, these are distractions and lack a certain classiness. Kind of like using WordArt. Now that doesn’t mean you can’t use an animated GIF, it just means you need to use them in a more sophisticated way and with an appropriate animation.

Okay, before we start, is it tomato or tomahto? Potato or potahto. Is it GIF or JIF? The creator of the format called Graphics Interchange Format, Steve Wilhite, says “jif” like the peanut butter. I’ve always said GIF with a hard “g.” The battle over how it’s pronounced is documented very well in a NY Times article “Battle Over ‘GIF’ Pronunciation Erupts” … but I’ll still say GIF.

The GIF format created in 1987 was popular due to its wide support across browsers and email clients. And in the early days, the animated GIF was one of the primary ways to add movement to a Web page.

We’ve all seen them. Flashing letters. Hokey cartoons. The dancing baby. Today, these are distractions and lack a certain classiness. Kind of like using WordArt.

7 Up SpotDrudge Siren Dancing Baby gifEmail me mailbox openUnder construction gifMy advice: Don’t do this today. Now that doesn’t mean you can’t use an animated GIF, it just means you need to use them in a more sophisticated way and with an appropriate animation. An animation that will enhance your message, not distract from it. Here are three reasons to consider the use of an animated GIF in your marketing messages:

1. Instructions/Training

Macaw demonstration gifIn this example, software company Macaw uses this GIF to demonstrate one of the features in its software. This is an excellent way to show a feature without forcing someone to watch a video or have to scroll through three to four static pictures. It quickly shows functionality.

You can use this type of animated GIF in an e-newsletter, too. Imagine showing a feature for a new version of software as Sprout Social has done below. It’s a case where the animation enhances the message.

Sprout Social gif2. Subtle Sense of Reality

Headscape homepage gifHeadscape, a digital media company in the UK, has a very subtle animation on its home page featuring an office scene (I highly suggest checking the site out via the link, since the image above is static and not animated … we weren’t able to capture the GIF). Notice the subtle movements of the pen and the person sipping coffee. I find these wonderful surprises.

Taking this one step further, you can create a cinemagraph, an animated GIF usually made from high-end photographs. The next two examples show how you can enhance a photo with either dramatic movement in the case of the Tokyo GIF or the more subtle Taxi Reflection. In both cases the animation enhances the viewing experience in an elegant way.

Tokyo cinemagraph
Cinemagraph courtesy of reddit user eatrob
Taxi cab window cinemagraph
Cinemagraph courtesy of Ann Street Studio. This studio produces wonderfully subtle cinemagraphs.

3. Enhance an Offer

You can use animated GIFs in fun ways to enhance an offer. The GIF can physically highlight the offer or simply bring attention to it.

5 CTA Button Design Best Practices

Take a close look at your call to action (CTA), particularly the design of the CTA button. It’s an element that many designers do not give enough attention, but they are one of the most important elements to consider. If you get them right, your results will improve.

The Art & Science of Writing Calls to ActionYou’ve designed the perfect landing page, product page, email or home page. Are they converting leads, sales or generating incoming traffic? Could they work harder?

You need to ask questions like these every time you review the results of your marketing efforts.

One way you may be able to improve these results: Take a close look at your call to action (CTA), particularly the design of the CTA button. It’s an element that many designers do not give enough attention.

Unfortunately, there’s no universal template or design style that works across the board. What works for one email or landing page site may not work for you.

But there are some elements that have been tested which may be able to help you improve your results. The key word here is “tested.” I present this information for you to consider, but like anything, test everything as it relates to your CTA buttons.

After all, there are a many factors that contribute to improving results. CTA buttons are just one ingredient among many. Effective web pages and emails don’t depend on the CTA button alone, but upon a lot of factors, both in the realms of design and copy. If you get them right, your results will improve.

Parts of a Button
There are two parts to a CTA button — the design of the button itself and the copy within the button. Both have a critical role to play.

Button design is all about directing a viewers eye and answering the question: Where should I click?” Button copy, on the other hand, answers the question: “Why should I click this button?”

I’m going to focus more on the design aspect of CTA buttons, but you need to think clearly about these as a team and they must work together.

1. It’s a Button
Pay attention to convention. No need to reinvent the wheel here — CTA buttons are buttons. Make it clear that it is a button. The call to action is so important, you should not attempt to make anything but a plain button. It can be different shapes, but remember, it must clearly be a button.Try It Today CTA ButtonSave My Seat CTA ButtonSubscribe CTA Button

Join Now CTA Button2. Make It Stand Out
Contrast and position are the key words here. No matter how wonderful your product, your information or your offer, if your CTA is not easy to find it’ll be lost. The two things to do:

• Use contrasting colors: I’ve read that green and orange work better, but in reality there’s no magic color that works better than another. Every page, email and site are different, and testing your button color is critical.

Critical Mention website
Example of good contrast
Evernote website
Example of poor contrast

• Place in an obvious place: This may seem logical and obvious, but you’d be surprised how many times people place their buttons poorly. Even though your button my have contrasting color, if you place in the wrong place, it’ll be difficult to find. Even Apple makes this mistake.

Hubspot CTA
Example of good call-to-action button placement
Apple CTA
Example of poor call-to-action button placement

3. Make Your Copy Active
Many designers don’t pay much attention to the copy on a button. That’s a big mistake. Making your button say more than:

REGISTER
SUBMIT
ENTER
FOR MORE INFO
DOWNLOAD

can make a dramatic difference.

How to Find and Edit Meta Tags: Titles, Descriptions and Headers

Although SEO continues to evolve and change at a seemingly lightning pace, the fundamentals like HTML titles, meta descriptions and headers remain just as important as they always were.

HTMLAlthough SEO continues to evolve and change at a seemingly lightning pace, the fundamentals like HTML titles, meta descriptions and headers remain just as important as they always were. All three are buried deep within the HTML code for your website.

If you, like many business owners, are not fluent in HTML, you might have no idea how to find and edit these meta tags. Here is what you need to know for each one.

Title Tag
Each Web page’s title is displayed in the browser, but not actually on the page itself. To see the title of a particular page, bring the page up in your browser and read the name of the tab it is in. However, tabs often cut off titles. To view the entire title, or to edit it, open up the HTML code for your Web page, which is much easier than it sounds.

With the page open in a browser on a Windows computer, simply right click with your mouse anywhere on the body of the page. Select the option that reads “View Source” or “View Page Source.” A new page will open with all of the HTML and other code for the page in question. If you are not familiar with HTML, it might look like gibberish.

Near the top of that page of code, look for the bracketed word “title,” like this: <title> and </title>. All of the text between the opening and closing title brackets is your Web page’s title. Make sure it is less than 55 characters and attention-grabbing, and the keyword phrase you want to rank for is present.

Meta Description
A Web page’s meta description is like an ad, or preview, of the page’s content. It does not directly influence Google rankings, but it helps to generate more clicks when viewers read it in search results. However, the meta description does not appear anywhere on the web page. To access it, again you’ll need to “View Source” or “View Page Source” following the instructions above.

On that page of code, look for a line that begins with <meta name=”description” content=”…”. There might be some other words in the code as well. Regardless, look for the text in quotation marks following the content=. That text is your Web page’s description. Read it over carefully, keeping in mind that the purpose is to convince searchers to click on your website rather than someone else’s.

Headers
Headers are the Web version of newspaper headlines. As a general rule, each Web page should have one <h1> tag that serves as the main headline for the entire page. Progressively smaller headlines (<h2> and below) can be used to highlight individual sections of the page and main ideas within each section.

Your headers will display on your Web page as slightly larger, bolded text lines that look like headlines. To view it in your source code, use the same instructions above. Look for lines of code that begin with <h1>, <h2>, <h3>, etc..

Now that you know how to find these key elements on your page, it’s time to edit them. Editing can be a bit more complicated depending on how your website was created. Unless you’re familiar with HTML code and you’re comfortable making edits, I recommend leaving this to a professional webmaster. It’s actually quite easy to screw up your entire website if you’re not careful when you edit your pages.

Although they seem relatively minor, these three elements can make a real difference in your search engine rankings and the number of clicks you receive from SEO. Regardless of whether you do your own editing or employ a professional, make sure your titles, meta descriptions and headers are set up properly, or else you’ll struggle to get your website ranked high.

Want more SEO tips? Get our Ultimate SEO Checklist