Posts Tagged 'CSS Web Design'

Get It In Writing

requirementsI just finished reading Startup Daddy’s post, Starting A Business: Define Your Definite Major Purpose & Envision Your Desired Outcome. The post focuses on the concept of defining one’s purpose, as in what’s your purpose in going into business. It speaks about the importance of defining one’s goals, both personal and professional, and how that helps in selecting your niche.

New web entrepreneurs often ignore this step when building a new website. You need to establish your site’s purpose. If you don’t, you risk a lack of focus that will cascade throughout your web presence, inhibiting SEO planning,  online marketing efforts and many times delaying site completion. You can’t select the best keywords, write good ad copy or build effective conversion paths without site focus.

Just like your business, your website needs a sound plan. That plan should be built before you ever speak with a web designer. In business its called a business plan. In the techie world, we call that plan a requirements document.

Building the Document, Then the Website

Start your document off with a purpose– literally.  Write down a few sentences about your business. In this summary include what you do, how you do it and your market segment. Don’t forget to include any differentiators.

Follow this with a short paragraph about the reasons you desire a website. Try to match your need for a website, with the summary of your business. This purpose will provide scope to your web project.

Determine Required Site Sections

List out all the sections that need to be included in your site. If you can diagram them using Visio or some other tool, that would be great.

Next you want to describe the pages to be included in each section. The ‘Services’ section of your site will have a Services landing page, and most likely a page for each Service you offer. 

Now list what you want included on each of the pages listed under each section. Include images, cross promotion, forms or widgets.  For forms and widgets, be specific about what functionality should be included.  For forms list the fields that should be included, what to do with the form information and designate required fields.

Add the Icing

Now list pages, content or functionality that would be nice to have, but not mission critical. This might seem like wasted effort, but it helps to understand future goals when designing your current website.

Now You’re Covered

Your requirements document provides insurance on your design investment. When working with a professional web designer or firm, you have more security. Get the designer to sign the form, recognizing it represents what will be delivered.  This prevents confusion with billing. It also helps recuperate penalty fees for missed deadlines.

Advertisements

10 Tips for Better Forms and Qualified Leads

formtips2Finding good leads make or break a salesman. The better the lead, the easier the sale.  This concept has a name— qualified leads.

Generating leads via the web presents its own set of challenges. The online form works day and night, gathering information about potential customers. The form constrains us, due to its finite nature, limiting us to a fixed set of questions. In the end, we act on faith more than assurance that leads will be of any substance. 

Creating good forms, forms that create qualified leads, requires a trial and error effort.  Here are ten ways to increase qualified lead generation via online forms:

1. Ask For the Right Information.

The basics:

  • Name
  • Email Address
  • Company Name
  • Visitors Title (helps to establish buying decision power)
  • Phone Number (distinguish between work and cell)
  • Reason for the Request/Type of Request (just looking or ready to buy)
  • Market Identifiers (ask questions that will define segment of market)
  • Influencers (who else will be involved in the decision)
  • Anything specific to your industry or product

Obviously the Name and email should be required.  Don’t be afraid to require a phone number, especially for services. Required phone numbers will fend off the casual visitor. In addition, get the phone number type, work or cell. A work number indicates a more qualified lead.

2. Use Dropdowns
  • Use drop down menus to isolate prime targets in your market
  • Drop downs allow for more flexibility, while keeping control of the provided information
  • Drop downs are easier to answer, allowing you to squeeze in two or three more questions
  • Two or three well thought out drop downs are worth one big additional notes text field
3. Generate Specific Forms for Specific Conversion Paths
  • Users in different roles have different needs, cater to the roles in your forms
  • Use specific forms for specific products or services
4. Give Up Something to Get Something
  • Requiring a form for a whitepaper has a less salesy feel
  • Require a form to get pricing
  • Utilize form completion for user group membership
  • Add a private users section to your blog, requiring registration
5. Make Forms Convenient
  • Make sure form questions are easy to read and understand
  • Put forms in the margins of high traffic pages
  • Make text in links to forms real marketing copy, not ‘get more info’
6. Make Specific Forms for Requesting a Phone Call
  • Create a form specifically for people wanting a sales call
7. Strong Validation
  • Make sure you validate important form fields (name, email, phone, etc)
8. Keep the Number of Fields to a Minimum
  • Too many fields can run off potentially good leads
9. Always Follow Up Form Submissions
  • Unreturned requests can harm your company’s reputation
10. Implement a Conversion Rate Optimization Strategy

Optimizing form conversion rate via testing, should be you top priority.  In order to find the best form, you will need to test.  A form completion is a funnel goal. Its a link the visitor clicks that has potential value for your business. You’ll need to test various combinations to get the form that produces the most submitals, as well as the best qualified leads. Multivariate testing provides the best way to optimizing success. If you don’t test, you will waste valuable time and resources, while losing business to your testing competitors.

Build a Web Presence, Not a Website

webconstructionI spoke with a friend looking to put her business on the web. She stated that she only wanted two or three pages.  I asked, “What do you want from your website?”.  The response was a moment of silence– followed by a not so clear response.

This happens to many small business owners looking to build their first website. Often, the push to get on the web, overshadows the more important need for effective planning.

The Internet: Just Another Business Tool

Websites are business tools.  With all the buzz concerning the web, there exists a false expectation of the internet’s return on investement and websites. Entrepreneurs are better served viewing their website as a very useful and flexible business tool— one that can benefit the business in numerous ways.

A business owner should treat a website in the same manner as their phone, their computer or their word processing software.  Each has a purpose, you thought about your desired benefits before investing.  You could clearly elucidate the reasons you need a phone— to contact customers quickly, to be accessible to customers, to conduct business remotely. 

Make Your Website Work

You should take the same approach to your website.  Think about specific objectives of owning a website, just as you would when choosing a physical location for your business. The new office location would need to posses enough offices, electrical outlets, network wiring and room to expand as you grow. In fact don’t call it a website, but a web presence. Using the term forces you to think dynamically– your presence means you’re participating in the internet medium.

Taking this approach inherently means you’re investing in the long term benefits of the internet. You can start with one or two pages, but you also have built the foundation as your needs expand. Putting together an initial web presence can be difficult, simply because the internet allows you to do so much. You can minimize the pain of building a web presence by following “The 6 P’s”— Proper Prior Planning Prevents Poor Performance.

Useful Site Building Tips

I’ve provided some tips that others have used to help develop an initial web presence.  Obviously this doesn’t represent the end-all list, but hopefully it provides a good foundation upon which to build:

Define a Successful Site Visit

  • From your businesses’ perpective, define what a successful visit means to you.
  • Service based companies may desire qualified leads, maybe a request for quote.
  • Product based companies may be seeking a sale. For big ticket items you might want an appointment request.

Your Site is a Funnel

  • Site visitors start at the home page, decide what end point in their visit benefits you the most.
  • Prioritize information from the most essential to buying details. Make sure your essential information makes the first version of your site.
  • Identify the most important buying objections and questions. You can start to answer these in your secondary site pages.

Identify Your Visitor

  • Define the demographics of your target visitor. It plays an important part in how you design your site.
  • Estimate the knowledge level of the visitor concerning your product or service.  That helps determine what types of content you need to include in your site.
  • Understand how visitors in different roles benefit from your product or service.

Hire a Web Site Designer, Not a Graphic Artist

  • Find a designer that understands more than just web graphics.
  • A Flash developer is different from a web designer.  Flash developers can build web sites, but there exist some drawbacks to this. *see my post regarding search engine web crawlers
  • Make sure your site designer is committed to building your web presence over the long term.

Think Long Term

  • Determine how often  you believe the site will need to be updated.
  • Develop a schedule for writing new site content. This will help when talking about maintenance agreements with your site designer.
  • Plan a schedule for site features you don’t need now, but expect to incude as time goes on.

Additional Resources

Website Magazine
Very comprehensive advice from a business perpective on web design.

Web Design Library
Lots of general advice, with a lean to the more technical side.

Web Design From Scratch
Very plain advice, focused on results oriented web design. 

Internet Retailer
Practical advice for ecommerce based web design.

Putting Your SEO Strategy to the Test

Many small business owners in 2009 will decide to take a do-it-yourself approach to SEO. I say go for it! In fact, marketing trends indicate moving SEO duties in-house has become the smart thing to do.

If you’ve already started your efforts, you quickly discovered that executing a good SEO strategy takes a great deal of time. Your next thought– “I hope all this work pays off”.

The top ecommerce companies test and retest their SEO strategies to find out what works, and what doesn’t. You will want to do the same thing. This article will help you get started.

First let’s look at some of the tools required to test how well you’ve done. Then we can look at a simple five step plan to start your SEO testing strategy.

Analytics Provides the Foundation

First you’ll want to start with a good analytics package. If you’re going it on your own, utilize Google Analytics (GA).  GA offers a feature rich web based tool at no cost. The tool provides an extensive set of metrics and reports without any setup. Because its widely accepted in the industry, you’ll find lots of support across the web.  Start with the Google Analytics Forum. 

Multivariate Testing: The SEO Proving Grounds

Multivariate testing allows users visiting the site, to each view different versions of the same web page.  Your testing application tracks how users respond to each page. 

Google provides a great multivariate testing application— Google Web Optimizer for free. Again it’s easy to setup, and comes with the support of  a large user community.

How to Implement Your SEO Testing

Below I’ve provided a few suggestions on setting up your testing methodology.  I’m assuming you’re using the Google Analytics and Web Optimizer package.  If you decide to go with something else, it most likely will provide the same functionality, just with possibly different names and locations.  If your package doesn’t provide the abilities described here– scrap it, and go with GA.

STEP 1:  Place the GA Tracking Code on Your Web Pages
If you have a large site, this may take some time, but it’s worth the effort.  If you don’t feel the page merits tracking, then the page probably doesn’t need to be included in your web site.  Not tracking pages leaves you in the dark.  Not knowing what appeals to users costs you money– in either lost conversions or wasted effort.

  • Write down the file names of the pages included in funnels you want to track.
  • This is also a good time to make copies of these files as you prepare for multivariate testing.

STEP 2:  Setup Goals Tracking
Goal tracking allows you to guage the efficacy of the various funnels within your web site.  

  • Start with your most important landing page, and determine where you want the user to end up.
  • If your funnel includes a form, be sure to include the thank you page.
  • Include product display pages from your shopping cart.
  • Include the registration pages for your cart.
  • Your cart funnel should also include the thank you page.
  •  For keyword advertisers pay attention to the  landing pages that result from advertising clicks.

STEP 3: Setup Multivariate Testing
Now you can find ways to optimize your funnels success.

  • Create multiple copies of the same landing page.  Start with your busiest landing page. 
  • In each version of the page, things like graphics, page copy and page layout. 
  • With keyword advertising, test how various pages work with different ad copy.
  • If you’re advertising via print, radio or tv, set up specific landing pages.
  • Remember to that you can use different page versions to alter funnel flow.  Test if one flow works better than others.

STEP 4: Review Goal Tracking Results
Determine how well your funnels worked.

  • Utilize conversion percentages to establish baselines. These will be useful for future testing.
  • Look at visits as compared to visitors.  This will give you an idea of how often users converted on their initial visit, or on a return visit.
  • Also make note of referring web sites.  Knowing where users came from can help improve efficiency with marketing budget.

STEP 5: Review Multivariate Testing Data
Go back and compare your goals with various landing pages in the funnel.  

  • For a very successful funnel, use the best variations as a model for other pages.
  • Remember to note unsuccessful variations as well.  Try to analyze why the page failed. 
  • Take the most successfule variations from each page, and put them together in one funnel.
  • If variations all had similar success rates, take a good look at your goal conversions. Poor goal conversions may indicate an offer with little appeal to visitors. 

Going Forward

Don’t stop testing.  It will take consistent effort over the long haul to truly gain the benefits of SEO.  Don’t let early successes lull you.  Remember that the Internet and user behaviours change constantly.  What worked in January, doesn’t always hold true in June.  Attempt to run tests on at least one funnel per month.  This will require planning, but don’t let the additional work dissuade you.  The benefits will be worth the effort.

CSS Web Design, A Top to Bottom Approach

Take it from the top.  A familiar phrase used to mean start from the beginning.  In terms of CSS web design and SEO, you want to start your web pages with the most important content at the top of your web page.  We’re not talking about the visual page, but the coded HTML behind the scenes.

Though you may not have put much thought into it, you would probably assume the search engine parser crawls the page from the top down.  We generally ignore how that fact impacts our SEO strategy from the web page coding level. 

With proper CSS design, the style sheet dictates layer positioning on the visual browser page.  That allows the designer to put keyword rich content at the top of the HTML code to be crawled first, without regards to the visual layout in the web browser.  It also allows for the placement of important links where the web crawler will be sure to find them.

Keyword Primacy and SEO

Don’t discount keyword positioning when implementing your SEO web design.  The paradigms of SEO require us to provide descriptive page titles and meta tags.  Take note of where those elelments exist in your page’s HTML code— at the very top.  Web crawlers take into account primacy when indexing your page.

The concept of primacy relies on the logic that the most important information will be presented first on any particular web page— like the title and keywords.  Once the crawler moves past the meta tags to your content, it assumes the subject focus for your page should soon follow.  If it doesn’t, your page indexing and ranking will suffer. 

The logic of primacy falls in line with search engines’ goals to provide reliable search results.  We’ve all seen the old internet bait and switch, particularly in emails.  So making sure that page content is relevant to the page title, and vice versa, plays a role in the indexing alogrithm of most search engines.

Top Down CSS Design Tips

1. Keyword Rich Content First
Layers containing keyword rich content should be the first layer after the ‘body’ tag.

2. Menus and Important Links Come Next
Put your main menu, and any other important links after the keyword rich content.  This assumes you have parsable links.  If you utilize Flash for your menus, this doesn’t matter— we’ll get to Flash in a moment. Parsers find text the easiest to crawl, so putting important links immediately following the most parsable content, increases the crawlers ability to index all of your site’s content.

3. Place Alt Texted Graphics After Links
The important thing to remember is alt texted graphics.  If you have aesthetic graphics that don’t have alt text—  either get rid of them, or find an appropriate alt text entry.  This doesn’t include Flash content.

4. Flash Files Go Last
Put your Flash based content at the very bottom.  The crawler can’t do anything with it anyway, so put it at the very end so it doesn’t get in the way of good content

The SEO Big Picture

In the grand scheme of SEO, our CSS design won’t put us at the top of the ‘charts’ so to speak.  Yet bad design can hinder any good SEO effort.  If you’ve invested in professional SEO consulting, you want to ensure maximum value for your investment.  So look at CSS web design as that leaky faucet that slowly drips, and over time wastes resources you would rather use in more important ways.

Parsing SEO From the Ground Up – Part 2

parserpart2ajaxSEO and Dynamic Content

In our last post we talked about SEO and its relationship to web design.  In particular, we looked at how web crawlers parse pages.  The parser’s functionality provides a guideline as to how your web designer should approach constructing your website.  In this post, let’s focus on some specific web technologies like AJAX, Dynamic Pages and FLASH, to determine how they may effect your website’s parsibility.

Dynamic Pages

The modern website relies heavily on up-to-date and accurate data.  The solution has become dynamic pages such as ASP, JSP and PHP.  These technologies allow for the retrieval of data, that’s not only accurate, but specific to the needs of each site viewer.  They’ve also become the foundation of many content management systems, which rely on storing content  in databases (we’re going to talk about CMS in another post).  Dynamic page data doesn’t become content until the browser requests the page.  The underlying code retrieves the data, and then integrates the content with the existing html– that’s the good news.  Parsers crawl dynamic data, just like any other data.   That fact does imply that your designer must ensure the integrated html utilizes parser friendly coding– using such things as ‘div’ tags rather than ‘table’ tags to arrange data.  You must also be aware of how your links are created. 

AJAX and SEO

So dynamic data parses fine, as long as we follow good CSS design rules.   As part of your CSS design audit, you will want to review page links.  If your links call functions, not urls, you’ll be back in the parser dead zone.  Parsers can’t run script, they look for urls.  So if your links are script driven, the likelihood exists some content won’t get parsed. To figure out if your links are script driven, open your browser to any page.  Mouseover the different links.  At the bottom left hand corner of your browser window, you’ll see the link destination.  If this destination doesn’t contain a url, but something that looks like computer code, bet on the parser skipping that link. 

Look for URLs when mousing over links in your browser.

Look for URLs when mousing over links in your browser.

The Web 2.0 trend has fueled a rise in scripted links.  That’s because more and more websites utilize AJAX.  AJAX is a great technology.  In short, it lets the browser retrieve data from the server without reloading the web page.  The down side of AJAX in relation to SEO– AJAX links generally require scripted links.  The answer is to utilize scripted links only when necessary, or provide an alternative linking system if possible.  If you use AJAX to generate pricing pages for your business’s different offerings, you’re probably fine.  If you utilize AJAX to generate marketing pages containing large amounts of text, you may be better served just creating new pages.

FLASH: The Buck– That Is Parser Stops Here

FLASH provides dynamic content better than any other web technology.  For that reason, it will always have a place at the web design table.  But just like anything else, too much of a good thing can be bad.  FLASH resides on your web page as  a separately compiled program. In simple terms, the parser treats FLASH content like an image– it realizes it’s there, but any text contained in the image isn’t parsed.  You mean I can’t use FLASH? Yes you can, but utilize it strategically.  Avoid FLASH based menus, or presenting core content important to SEO in flash components.  Unfortunately the parser has no way of reading the content.  If you rely on a FLASH driven main menu, the parser can’t follow the links– those are pages that don’t get ranked in the search engine.

There may be reasons you want to keep your FLASH based content.  No problem, just make sure you provide some traditional linking system to access the data in a non-FLASH format.  This is a good idea anyway, as you’ll also make your site more 508.b compliant.

The Great Technology Divide

Web 2.0 and dynamic page technologies are here to stay.  There’s no reason to not utilize these tools to enhance your website.  Just keep in mind when and where to use them.  Understand how they effect search engine parsing, and keep an open dialogue with your web designer concerning parsibility.

In tomorrow’s post we’ll talk about ways to validate that your content is being parsed.