Here is a quick overview of Part Four, which covers how to have a successful small business website design:

You already know why having a website is important. You’ve gone through and Read More »]]> Part Four of The Small Business Website Guide for Business Owners

This is the fourth episode from the Small Business Website Guide series. The series talks about why websites are important, how to plan for a website, whether you should hire a designer (or do it yourself) – and today we’ll be talking about what a successful website is made of. Later in the guide we’ll be going over other fun things like how to get started with online marketing.

Here is a quick overview of Part Four, which covers how to have a successful small business website design:

• Defining the word “Success”
• Discovering your flux capacitor (what makes Success happen)
• Building your flux capacitor (preparing for Success)
• Modifying your flux capacitor (improve your Success)
• Ignoring anything but the flux capacitor

You already know why having a website is important. You’ve gone through and made a plan for your website. You’ve even decided to make the website yourself.

You’re confident and cool.

There’s a caveat that you may not know about yet, though. There are a whole lot of options out in the world of the web. A lot of distractions. It seems a new technology is being released every day.

How do you stay focused on the one thing that matters? How do you know what’s going to work? By building your own flux capacitor of course!

“Wait, what? I’m not an engineer, buddy,” you say, “I can’t build one of those.”

Okay, okay – let’s start from the beginning.

The beginning so happens to be the goal of your site. Whatever your specific goals are, the platform that everything else stands on is SUCCESS.

So, what is success to you? Have you questioned your definition?

Here are some example definitions:

• Success is… having over a 1,000 visitors every month.
• Success is… a 75% visitor to lead conversion rate.
• Success is… a 25% visitor to customer conversion rate.
• Success is… increasing overall customer retention by 50% from pre-website era.

See how success can be different for everyone? Now, state your success. Ask yourself these questions about your definition:

1. Can I sum up my definition in a simple, easy to understand sentence?
2. How will this definition directly make my business better?

If your definition can be simplified, then simplify it.

If your definition of success neither states the benefit within itself, or if you can’t answer why that definition will directly benefit your business, then pick another definition.

Rinse and repeat until you have a clear definition of success for your website.

What is your flux capacitor?

If you don’t know what a flux capacitor is, first of all, welcome to Earth – I hope that you come in peace.

That said, the flux capacitor is from the classic movie Back to the Future. The flux capacitor is the crucial piece that make the time machine successful. Ah, can you see where this is headed?

The flux capacitor represents what makes you successful. Since we just discovered what success means for you, you’ll have a lot more clarity when making decisions on how to make your website successful.

But how to build success with my own flux capacitor of success? How do I know if I should make a certain modification?

Every single time you want to add an element to your website ask yourself:

“How is this going to contribute to my success?”

If you feel like you’re overreaching to justify an answer, scrap it. Just don’t do it. If you can’t prove your answer, scrap it.

Here’s a scenario:

“I want a dog dancing on my home page welcoming my visitors.”

How does this contribute to your success?

“People love dogs! They will show all their friends!”

Can you prove this?

“All my friends love dogs!”

That seems like a reach to justify, but can you show me proof this is going to contribute to your success?

“I ran a user test and just found out everyone clicked away the instant they saw the dog dancing.”

See? You tried to prove to yourself a dancing dog is what you needed on the home page, but when you looked at the data of real users visiting your website, they didn’t like the dancing dog and left your site.

Finding success with your small business website takes the following steps:

• An idea to change or update your site
• Forecast whether the idea will contribute to your success
  - Apply common sense
  - Ask knowledgable sources
  - Research the data from similar situations online
• If the forecast is good, test the change
• Modify based on test results

As you continue to run everything through this process, you will find that your flux capacitor – your key to success – is looking pretty good.

But what about all the latest web trends? I want the shiny, exciting stuff!

The truth is that you don’t need the shiny, exciting stuff. Not always, at any rate.

Since you already planned your website, you know who your target audience is. Does your average grandma care if you have the shiny new CSS3 generated button? Probably not. Do you run a tech blog? Then maybe the newest, geekiest thing is important to have because they’ll be looking for that.

If it won’t help you build your flux capacitor, then don’t add it to your site. Use what adds to your success, and get rid of everything else.

Stay tuned for next week!

Photoshop is the most expensive program you need- but you will want this piece of software. There are a lot of different image editing tool but this is the industry standard. Sometimes you can get a student discount, or even get your company to buy it for you.

Mac

If you don’t have a solid understanding of using lists for navigation, then you may want to review that concept before tackling the single-background-image rollover.

Download the example to follow along.

You have, for instance, a navigation bar (vertical or horizontal, it doesn’t matter). Very simple. There are only four buttons but you can obviously change and edit this concept to fit your own site.

Well this is what the HTML in the example ... Read More »]]> Everybody is looking for lightweight code with a maximum effect. JavaScript rollovers just don’t cut it anymore- they take too long to load, they’re kinky the first time you rollover, etc. etc. and CSS using multiple images can be kinky if you aren’t using an image pre-load. The solution? CSS image rollovers using only a single background image.

If you don’t have a solid understanding of using lists for navigation, then you may want to review that concept before tackling the single-background-image rollover.

Download the example to follow along.

The concept

You have, for instance, a navigation bar (vertical or horizontal, it doesn’t matter). Very simple. There are only four buttons but you can obviously change and edit this concept to fit your own site.

How is it done?

Well this is what the HTML in the example looks like (using lists, of course):

<ul>
<li id="home"><a href="index.htm">Home</a></li>
<li id="about"><a href="pages/about.html">About </a></li>
<li id="portfolio"><a href="pages/portfolio.html">Portfolio</a></li>
<li id="contact"><a href="pages/contact.html">Contact</a></li>
</ul>

What? Impossible? Not so much.

When I first learned this technique, I was not aware that you can position the background image by location and pixels. It’s all very controllable through CSS. So, moving right along…

The beauty of CSS

So what does it take to make this work? Well this is what the CSS looks like in the example to make this turn out right:

* {
 margin: 0;
 padding: 0;
 }
 body {
 background: #1B78E2;
 }
 ul {
 background: url(nav-sprite.jpg) no-repeat;
 width: 600px;
 height: 50px;
 list-style: none;
 }
 li a {
 display: block;
 width: 150px;
 height: 50px;
 text-indent: -999px;
 float: left;
 }
 li#home a:hover, li#home a:active {
 background: url(nav-sprite.jpg) 0 -50px;
 }
 li#about a:hover, li#about a:active {
 background: url(nav-sprite.jpg) -150px -50px;
 }
 li#portfolio a:hover, li#portfolio a:active {
 background: url(nav-sprite.jpg) -300px -50px;
 }
 li#contact a:hover, li#contact a:active {
 background: url(nav-sprite.jpg) -450px -50px;
 }

First of all, I’ve set the padding and margin to 0 by using the wildcard * command. That way it will be more likely to look correct in every browser.

Then I set the width and height of the entire navigation by setting the ul.

Next, I set the commonalities of every li: display block (allows you to get rid of the text later as well as the width and height), set width and height, as well as using text-indent to move the ugly text off the page so we can see the pretty typography of the navigation images without losing SEO friendliness.

The rest of the CSS simply sets the background and position of the same background images. When setting a background position, keep in mind that the first number represents the way it moves horizontally (negative numbers will move it left, positive numbers will move it right), and the second number sets the vertical position (negative moves it up, positive moves down).

li#home a:hover {
 background: url(nav-sprite.jpg) 0 -50px;
 }

Be sure that you are selecting the correct link and link/hover/active/visited state for full support in all browsers.

Go forth and write navigation

This simple trick will help you develop quick loading sites that don’t jump or hiccup when using rollovers. No need for JavaScript or slicing and saving 25 individual rollover images! Saves production time AND creates better usability for your sites.

Good luck coding!