There is a difference between a “web designer” and a “Web Marketer”. A web designer can make a web page pretty. A web marketer can make a web page pretty compelling. Although a list of tips is no substitution for a web-savvy marketing professional, there are certain industry best practices that every business can use as a guideline or “check sheet” to avoid some campaign killing mistakes.

Scrolling, Paging & the Fold

Scrolling is the point on a web page where a visitor would have to scroll down to see the rest of the page. If the visitor isn’t intrigued at first glance, you will never even get to show them what is below the fold.

• Do NOT make text-copy columns too wide or fonts too small just to keep content above the fold.
• 10-12 point or larger fonts / no more than 50-60 characters (including spaces) across.
• Women ages 34-45 are more likely to scroll, read more info and     click onto additional pages than men.
• Above-the-fold info must contain enough convincing data to will over the short attention span visitors.

Navigation Bars

It is very tempting to make sure that no information about your company is left out; however the truth is that most people just don’t care at this point. Keep in mind what your goal is… if it is to get visitors contact information, you will have plenty of opportunities to educate them as you build the relationship.

• You will have plenty of opportunity to tell your customers how wonderful you are.
• Would you tell an attractive stranger your life history when you are just trying to get them to agree to a first date?
• The objective is to not encourage the visitor to wander “off-point”

Landing Pages with Links to Other Pages

Use discretion when providing links to other pages or websites from your landing page. You may be tempting the visitor to wander off-point. In some cases it may be permissible or even desirable to offer the visitor an opportunity to lean more as long as each link returns the visitor back to the sales funnel.

• Eliminate any clicks to irrelevant pages or advertisers
• Minimize font size of links to privacy and legal information
• Make the ENTIRE area around a link clickable
• Make the first 3 words of a link descriptive
• Make your Hero shot clickable and open in a separate window of information so the visitor does not lose the main landing page (Hero Shot is a single picture that tells the story).

Color Choices

Believe it or not, color choices have remarkably little influence on the effectiveness of a landing page. However poor color choice that impacts reading comprehension does have a negative effect. Keep in mind that a higher percentage of the population than you probably realize is color blind and may have trouble with the contrast of certain color combinations.

• Copy: Black (or dark) text on a white (or light) background
• Headlines: Large enough to be readable in most colors, so largely irrelevant.
• Hotlinks: Blue until clicked and then turns purplish. Designer colors are OK…but test first….
• Branding Colors: OK if branding is more important than copy. 

Typeface Fonts

It is hard enough to get a visitor to actually read your copy, so don’t make it any more difficult than necessary. Generally small font sizes “look” better because they mentally form a block which is a convenient design element. However, effective trumps pretty every time.

• Make copy easy to read as possible. Many visitors will bail just because the page “looks like work”
• Use 10 point or larger font. Consider a larger size if you are targeting children, adults or if you have very long copy
• Captions, form field names, legal and some tech-specs can be smaller
• Smaller texts promotes slower reading and a drop-off in comprehension
• Text should never run more than 52-60 characters across the screen. People can’t comfortably read long or wide columns.

• Keep columns at a fixed width (no liquid designs)
• Use “Web-safe fonts” to control the appearance of the page. (http://www.efuse.com/Design/web_fonts_basics.html#WebSafeFonts)
• With the possible exception of one-line headlines, all text should be flush left and NOT centered.
• Headlines should be significantly larger and possibly bolder. Sub-headlines should be close to body copy size and bold

How many elements should be on a page?

The correct answer is…. As many as necessary… no more no less….
These are just some items that MAY go on a landing page. It is not meant to be a checklist of items that should be on every landing page.

Trust Icons

Data and Case Studies prove conclusively that trust icons do make a difference in conversions. Multiple icons may help even more. Make sure you place the icons above the fold and at critical decisino points such as form submissions or transaction point in a shoping cart.

Consider using the space around your logo to identify it with a trust image and slogan  like the Kelley Blue Book logo to the right Notice that Kelley Blue Book awarded themselves their own trust icon, however it gives the appearance of an award or certification.

Video on Landing pages

Video can be a powerful tool or an unwanted nusance depending on how it is used. NEVER start playing the video automatically when the visitor arrives on the Landing Page!!!

No one lieks a commercial forced on them. The visitor just may not be prepared. In fact visitors might be in the work place and might bail as soon as unexpected sounds start blaring from their computer. They may want to scan the page before investing in the video, or simply adjust their speaker volume. The quikest way to shut down an unwated video is to close the web page. That is the last thing ou want.

There are many reasons to use video; to educate, to demonstrate, to entertain and become viral… One of the more successful commerisal applicatoins of video on a website is the “As Seen on TV” scenario.

• The purpose is not to sell, but to brand and reassure the visitor that they are in the right place
• Use a shorter version (30-seconds or less) than the original TV version
• Typically works best on the top left side of the page or in a featured area

Video Testimonials are very powerful. There is eveidence to support that amature video of a real person is more credible than professinal video of a model. Not all video should intentionally be poor quality, but in the case of testimonials, or product demonstrations, it does give it a sense of realism.

Response Devices

Unless you are cultivating a branding only web presence, you are probably trying to elicit a particular response from your visitors (remember your goals). It’s important to consider that different personality types prefer to communicate using different media. Some people prefer to pick up the phone for the comfort of a human voice, others prefer the anonymity of email.

Phone Numbers:

• Bigger is Better….don’t be shy
• Some consumers just prefer to call
• Some consumers just want to be reassured there is a real person available (even if they never intend to call)
• Put phone number on EVERY page, not just the Landing page or Contact page

Buttons
Next to Headlines, button copy, color and shape as the most important element on the page. Don’t be afraid to test; Red vs. Gray… Round vs. Rectangular. Wording is important as well. You may get different results from “Buy Now” vs. “Try it Now”.

Different buttons work for different audiences

But don’t get too cute with the labels….say what you mean!

Registration Forms

As a rule the less you ask for, the more likely you are to have people fill out the form. Go on the premise that you will have future opportunity to get the rest of the information as you build a relationship with the visitor.

Be patient. Ask for only what you need… you will have more chances to get the rest. Roughly 40% of visitors may answer a few extra questions on the “Thank You” page for example.

On certain occasions however, you may actually want to use a longer form as a screening or “qualifying” tool.  You might want to trade volume for quality if there is a cost associated with following up.

Copy Tips

• Use half the copy that you would use in printed material
• Headline should exactly match the headline that got them there
• Stay on point…. Headline match Body Copy
• Nothing more than needed…nothing less than needed
• Don’t waste valuable real-estate with “Welcome…”
• “You” and “Your” trumps “We” and “Our”
• People read only the first few words of bullets and paragraphs
• People read the tops and bottoms of lists…not the middle
• Keep your first few paragraphs short and inviting
• Alternate long and short Paragraphs
• Paragraphs shouldn't be longer that 4 or 5 lines long
• Numerals have more impact than written numbers

Long Copy vs. Short Copy

Face it, the USA Today newspaper is written at a 6th grade reading level for a reason. Attention spans and motivation to invest time reading is contingent on the demographic of the visitor, and the nature of the product or service. Long copy works well for….

• Expensive Products & Services
• Money related products and services
• Health related products and services
• Older consumers
• Reading related products
• Technical products

Organizing the Project for the Graphic Team:

This is actually the responsibility of the project manager or creative director. However you as project owner must take an active role. You have the ability to get the project off to a quick and accurate start by making a few simple design decisions upfront.

Start with the Basics:

Top v. Side navigation: Possibly the single most impactfull aspect of the design. Determine this first. Everything that the designer does will be predicated on this decision. Ultimately it is a personal choice.

Color preferences: You may have personal preferences, or your colors may be pre-ordained by virtue of your logo or other existing collateral material.

Existing marketing material: To help maintain your “brand” consider your existing marketing materials. The web design should integrate seamlessly with your existing brand image…or redefine it. Be prepared to give your project manager samples of any pre-existing materials. Digital samples are always best because they can be easily reproduced.

Examples of existing sites: Nothing helps a designer more than visual examples of existing websites. Be prepared to share your thoughts on other websites that you like or dislike. These examples may not necessarily even be in your industry. In fact there may only be a single aspect of the site that you really like. Make sure that you tell your designer specifically what it is that caught your eye.

The last thing that you want to happen is for your graphics team to burn expensive, project delaying time offering comp after comp hoping that you will like what they do. Voicing your preferences upfront and establishing a dialogue with the project manager can seriously cut development time, save you money, and result in a project that meets your expectations.


Your responsibility:
As the project takes shape the development team will have certain expectations of you. Chief amongst this is the content and timely accurate feedback.

Content: Typically that means images and text. Unless otherwise specified you can expect to provide these items yourself. However most good design teams will offer a library of stock photos, and many have access to quality copywriters and photographers. Note that the single largest project delay is often associated with the client. For the design team to format individual pages they will need to know what they have to work with. If you do not have the time or resources to provide the page content, consider asking your project manager to assign a copywriter to your project.

With the exception of business specific images your design team should be able to provide appropriate stock photos.

Feedback:  Most development teams work in phases where they complete a pre-determined phase of the project and await feedback before they make changes or proceed to the next phase. They typically assume feedback will be forthcoming within a few days and they plan accordingly. It is not uncommon for excessive delay in receiving feedback to result in longer delays as other projects usurp your scheduled production time.



What is Bad Design?

Too much Flash: Improper use of flash is gratuitous and may detract from the purpose of the website. Make sure that flash is used judiciously and not just as “eye candy”.

Pages that are too long: Long pages are subconsciously interpreted as too much work to read. It is much better to break content into multiple, well organized pages.

Pages that are too cramped: Not everything has to be seen all at once to be appreciated. Too much collocated information is in itself a distraction.

Unnecessary repetition: Give your visitor a little credit. Convenient navigation is one thing, but force-feeding it to your visitors is something else.

Too many attention getting devises: If everything is highlighted, then nothing stands out.
www.websitesthatsuck.com (just in case you need additional clarification).

First off, I want to go on record by stating that scrolling is not inherently evil… or disastrous. In fact it may be infinitely more desirable than trying to fit 10lbs of crap into a 5lb bag.

Over the years I’ve had several clients that understood what the “Fold” is, and proclaimed that “Nothing must be below the fold!” (The “Fold” is the point on a web page where a visitor would have to scroll down to see the rest of the page.)
The difference was that some of those clients weren’t willing to shorten or sacrifice some content to make it happen. Instead they directed us to “fit it all in”. The end result was a lot less effective landing page.

In fact, I have the dubious distinction of developing perhaps the worst landing page ever created (all be it under duress).

The client had us pack it above the fold with so many attention getting devices (animation, bright colors, too many graphics, etc.) in an effort to avoid scrolling, that all those elements canceled each other out. We had to use a complex structure of nested tables (tables within tables). Not a very sound structure for a variety of reasons… but the design was so compact, that we discovered a typo, and by adding one additional letter “e” to the end of a word, it tore the entire design apart.

That might be a hint that your page may be a little too crowded.

No matter how sophisticated your visitors are, they probably have the attention span of a 6 year old. You only have 2-8 seconds to win over your visitor, so above-the-fold info must contain enough convincing data to win over these short attention span visitors.

The truth is that people WILL scroll down to see something they are interested in. The trick is to get them interested immediately. Scrolling isn’t exactly a laborious activity; you just have to convince your visitor that it is worth it.  How do we do that?

Headlines… Images…Bullet Points...Minimal Distractions!
In other words, info that can be digested at a glance.

Tips:

•	Concentrate on a headline that is large, intriguing and descriptive.
•	Make the first paragraph particularly engaging and unintimidating.
•	Make sure that any “Offers” or call-to-actions are above the fold (supporting info can be below).
•	Make sure that any images serve to brand you, or to tell a relevant story.
•	Repeat important info below the fold so now the visitor doesn’t have to scroll back up in the other direction.
•	Realize that different people have different screen resolutions, so the fold is in different locations for different people. Cater to the lowest reasonably popular screen resolution. For now it may be safe to assume if you can see the pertinent info at a screen resolution of 1024 x 768, that almost everyone will see the info that you want them to see.

     

Summary: Don’t sacrifice functionality and common sense for the sake of scrolling! As long as the important stuff is visible at a glance, interested visitors will make the effort….

Regardless of how visually appealing or uniquely original the graphic look and feel of a website is, it is meaningless if it does not meet the expectations of the target market. Is your site about branding? Is it about sales? Is it to be used as a tool to support off-line activities?

Start by defining your target audience and their purpose for visiting your site. A web solution that is designed for a manufacturing company whose target audience are information seeking engineers will have a different “flavor” than a branding site designed for the 18 to 24 year old hair care demographic. Whereas the hair care crowd might be impressed by MTV-like sound and graphics, the engineers would most likely be more impressed with the ease in which they can find the information they are looking for with minimal distractions.

Ask yourself “what is the image I am trying to convey to my customers?” 

Professionals in the financial, medical or legal fields might consider a more conservative approach that conveys a sense of confidence and reassures the consumer that their issues will be handled with the utmost dignity. On the other hand, creative specialists such as advertising agencies, graphic designers and entertainers have the luxury to experiment with a more flamboyant design, whereas printers may want to lean toward a more colorful, graphically intense style without the hype.

Consider your existing collateral material…brochures, mailers, advertising media. What does that say about you? Does your existing material (and that of your competitors) effectively convey the right attitude? If it does, that might be a great model to begin with. Ultimately your website design must stand on its own merits, as does your other marketing material. If any of these pieces do not visually convey the right message about you it may be worth reexamining your entire brand image.