“Every battle is won before it is ever fought.” – Sun-Tzu

“He who fails to plan, plans to fail.” – Proverb.

Notice the trend? No one wants to lose their website battle. Certainly no one plans a website failure. Errors of this magnitude not only can destroy your on-line presence, they may sink your business. This is the last post of our Website Design Error series. Here we examine errors that occur when you fail to plan how you want to organize your site.

Error 1 – Basing Your Website Layout on the Structure of Your Company.

Creating your website based on the structure of your company, rather than the needs of your customers. Customers don’t care about a picture of your CEO on the home page, or whether they have to click on the ‘sales’ tab or ‘marketing’ tab to find what they are looking for. Think of why people may visit your site, and build the information architecture based on that! What are you trying to accomplish for your business? Sales? Leads? Awareness? Viral marketing? -Scott Bornkessel, owner of Springkeeper

Error 2 – Not Managing Your Website ROI

The purpose of a website is usually to make money in some way. Either through it’s marketing value or through actual sales on the web site. Companies are always interested in ROI. Any kind of work is an investment. Before making an investment, a good businessman (or woman) would estimate potential ROI. That means, if you can predict (or see in your stats) that your customers use 80% IE, and 18% Firefox, you shouldn’t invest into making your site look good on other browsers or portable devices, unless these 2% remaining can generate enough revenue to cover that investment. -Zoran Pucar

For more articles examining the Return on Investment of websites, check out are two related, and popular articles Are Blogs Worth the ROI for Small Business? and Better Website ROI.

Error 3 -Lack of Website Objectives and Planning

If the website has no clear purpose then what is the point in starting one? We see so many websites that are built ‘because we thought we should get one’ and they are not generating any kind of revenue for their owner. For business sites especially, there needs to be a purpose/objective to be achieved so you can actually measure how that site is performing. -Patrick Porter, Creative Director, Jade Creative

What common website planning or organization errors do you see on the net? Add your thoughts below.

Imagine your website is a person. How healthy is it? Are there strong vital signs (web traffic)? Is it active and vibrant (lots of user interaction and communication)? Are other websites attracted to it (in-bound links)? Or do they shun it like a leper (Google doesn’t know your name.)

If any of those maladies afflict your website, there’s good news; each website can be easily cured with strong, regular doses of quality content. Here are several common website content illnesses and their cures.

Empty Suit Sales Syndrome

Symptoms: Pretty e-commerce website lacking in product details.

Cures: Add straight-forward, customer-focused, informational text in product descriptions.

Expert Opinions:

How many times do you see it? You go to a web page and still have no answers to your questions. The site seems promising; design is nice and runs smoothly. But then you read the text and just get confused! Sell trust, sell experience, or sell benefits, but lay off the features and how proud you are of your product and all the nuts and bolts and hours you spent creating it. Make your site customer focused, it is all about the visitor not you! Patrick Porter, Creative Director, Jade Creative

Without good content, all the planning, strategy, cross-browser usability, the correct technology, pleasing design and color won’t help a bit. Emery Jeffreys, Owner, ByteWriter.com

Fat Content, Little Jacket

Symptoms: Too much information or content crammed into one web page.

Cures: Break information into standalone concepts and link to related material.

Commentary: The web was created by the need to link related documents together. If you have a lot to say, that’s great! Massive distribution of content and associated materials is exactly what a websites were built to do. But remember, you don’t have to say it all in one place! Space your thoughts and concepts out. Link to other pages.

‘Surplus of Content’-ititis.

Symptoms: Posting content just because ‘you already have it’, instead of rewriting it for the web.

Cures: Re-write brochures, speeches, and all other content specifically for your web audience.

Commentary:

Scott Bornkessel, owner of Springkeeper first brought this malady to our attention. We know this is a crime of laziness. Take the extra time and effort to tailor your message to the web and how people digest content there. There is no reason for you to copy ‘see page three’ from your brochure on to your website.

Search Engine Deficiency

Symptoms: Producing content that does not take into consideration the largest audience: search engines.

Cures: Use keyword-rich text with appropriate headlines and meta tags.

Commentary:

Writing content that does not include phrases and keywords your customers use to find your products or services will ensure that your online presence will not be a valuable part of your business. -Scott Bornkessel

Age-Induced Obsolescence

Symptoms: Website displays content that has not been updated in years.

Cures: Add new content regularly. Try installing a Content Management System with a blog so you can quickly and easily add new content and update existing web pages.

Commentary:

Without compelling content, visitors won’t return. That means updating the site frequently to give users return on investment of time to come back again. – Emery Jeffreys

Style Impairment

Choose language that fits with your product or service and make sure the copy is well-written. Less is often more – say what needs to be said in the tone and context that gets your message across. Depending on the site, if you’re the web equivalent of an irritating store sales assistant, the technical expert no-one understands, or the boring neighbor who prattles on regardless, you won’t be doing your audience any favors. Tracy Willis

Sadly, these are just a few of the most common illnesses we see in modern website practices. More do exist. Share your experiences, and cures in the comment section below.

ve you ever seen a website that just made you say ‘Ugh?!’ You know, the ones with all the style and taste of a trailer park yard sale? It makes you wonder, with all of the time and effort put into making websites, why couldn’t they make it pleasing to look at? And, if not pretty, at least not ugly?

Maybe the problem is that ‘beauty is in the eye of the beholder.’ With such a subjective standard are there any hard and fast rules even the aesthetically-challenged can adhere to? Hoping to gain some insight, I turned to the group mind and asked several web professionals about the worst aesthetic web design errors currently on the net.

This is part of our Website Design Errors series. Check out the entire Web Design Errors series here.

Aesthetic Design Layout

There are many schools of thought on what a website should look like. And that’s great! I love to see stylish, new and innovative ways of conveying information on-line. How boring would it be if everyone used the same layout? Here are some things to avoid at all costs.

Scrolling

-Avoid pages that scroll down forever. A well designed web-site says what it needs to without lots of scrolling, unnecessary pages or useless content. – Tracy Willis, Directeur de SwF Customer Front End Systems, Group IT at Orange-France Telecom Group

-Horizontal scrolling. People are much more accustomed to seeing pages scroll down than to scroll left to right. Keep with convention and keep all of your content on one page.

Whitespace is Good!

-Be sure to keep a certain amount of spacing between your visual elements. There is no need to fill up every corner of a website with words, video, pictures, or any other content.

Music

-Playing music on your site for no apparent reason! Especially if it’s an old MIDI-file, and if there’s no mute button or if it is hard to find. Søren Sprogø, Owner at Afdeling 18

Popups and widgets

-Use of JavaScript pop up windows and JavaScript widgets – pop up windows are for Netscape in the 90s. They should be extinct by now. And don’t place those useless JavaScript clocks or counters on your Web pages! Jonathan Cheung, Web Developer at Sony Electronics.

Note: Many browsers have pop-ups blocked by default or users may turn this on as a security feature. What may seem to be a good use of technology to you may be considered an error to others when your pop-up doesn’t ‘pop.’ This also goes for hyper links that open browsers in new windows.

Graphics

-Low quality, irrelevant or inaccurate graphics. Take a look at the glossy photos on some hotel sites, and then compare them with real travelers’ photos on Tripadvisor. All of these really detract from a website’s attractiveness and inaccurate graphics will quickly lead to complaints and poor credibility. Tracy Willis

-Ugly! Cluttered, bad colors, bad photos, distracting backgrounds, THE BLINK TAG, etc. If I can’t bear to look at your site it isn’t going to do its job of communicating your message. David Kennel, Systems Administrator at LANL

What elements make a website ugly to you?

Contribute to the conversation by adding your comment below.

Technology. It can be a wonderful thing. It makes the lights go on, my beer cold and my coffee hot. It also runs my website, my blog and my business. But there are rules to the tools, my friends. Make nice and play by this list. Part of my Web Design Error series.

Wrong Tool for the Job

You wouldn’t let a carpenter remodel your kitchen with a chainsaw, right? Why not examine the tools that go into the development of your web site? Choosing the wrong technology for the job is a prime killer of many websites. Don’t get locked into a coding language (PHP, Java, ASP, C#, etc) just because your designer does it well. Be sure that you do your due diligence and select the right tool for the job at hand or you may not get the product that you want.

Before you build a site ask yourself; ‘What web design tool am I using and why is that one the best choice?’

Bloated Code

Bandwidth has skyrocketed in the past few years. Still, that doesn’t mean that we can afford to be lazy when optimizing website response time. Carefully consider what code you are using and why. Do you really need all of those library calls? Can you consolidate any CSS? Does every page need to include each library? Can images be optimized at all?

David Mark, CEO of Cinsoft listed the following 4 killers when I asked about top technical web design errors. Does your site make any of these mistakes?

• The use of huge, inefficient and incompetently written browser scripting libraries (e.g. jQuery, Prototype.)
• Flash and the browser sniffing scripts that come with it.
• Too many http connections, usually for marketing purposes
• Script errors

Lack of Standards

While the stereotype of the maverick unshaven web designer clad in shorts, sandals, and cafepress t-shirts might still stick around in pop culture, when it’s time to code, standards must be our guide. Web standards help make your content available to all audiences and your website needs to follow them.

Technically the site needs to be sound and up to current web standards. It needs to be built to suit the target audience as well as be viewed in multiple browser/operating systems and internet connections. The site has got to be fast and reliable or users will lose trust. For starters, don’t get the best friend of your partners brother who taught himself how to use Dreamweaver. Well, you can but it depends on the results you want! – Patrick Porter, Jade Creative

Sketchy Semantics

By semantics, I mean the markup tags of HTML. Some browsers are more forgiving than others but excellence pays in this business – especially in terms of accessibility and SEO. Remember, Google, Yahoo, etc don’t read your site, they read the markup underneath. You want to be on top of your markup code game to maximize your web site’s exposure.

Step 1: Learn what each HTML Tag does and where it needs to go.

Bad use of markups – Use correct markups depending on your data (list, paragraph, heading), semantic naming of elements and use CSS to style them. Correct use of markups will take care most of the accessibility issues. – Jonathan Cheung

Step 2: Optimize that HTML for Search Engines.

Building SEO-unfriendly HTML. It is amazing how many web sites are built without the basics, which, when done right, will do 90% of the SEO work for you. For example, use semantic HTML (<h1>, <p>, <ul>, etc) and fill out the 'alt' and ‘title’ parameters on img and anchor tags. – John Reeve, Web Developer and owner at Pelago

He’s Not Flying; He’s Falling Gracefully

“If something goes wrong, help your visitor! Custom and helpful error messages with meaningful information are a huge asset and often forgotten about.” – Mike Donohoe.

Mike’s right, build a custom 404 page. Remember, 404 errors happen for several reasons – typos, server response issues, or even bored surfers that change your url stream just to see what happens. You’ll want to build a reliable catch-all to handle these scenarios.

Security

Security is a real issue on the internet for all surfers. It dominates the concerns of shoppers. Take the time to incorporate the kind of technology that keeps both you and them safe. For example, I use Paypal and display their 3rd party seal of approval on my site. Customers can click on it and see that I’m verified. On e-commerce sites using HTTPS and appropriate encoding is essential. You may want to consider encrypting your backend databases.

Putting your customers at ease so they buy in confidence will pay big dividends.

Thoughts? Anything we missed? Add your contribution below.

“If a website goes live but large numbers of people can’t access it, will anyone on the internet hear it?” This take on website interoperability is part of our Website Design Errors series. And while it might not be as sexy as web design aesthetics, or as motivating as website content, website interoperability is something that anyone running a 5 star site needs to pay attention to. What follows is a brief-yet-essential list to help you bring out your site’s A Game.

Not Everyone Uses Windows

It’s true. Not everyone does. Personally, I love Firefox but others dig Safari. Soon, we might all be using Google’s new browser. Any way you slice it, multi-browser testing is a must. There is absolutely no reason why a page cannot be coded to standards and perform well displaying consistently in all browsers.

Your Site is Only as Good as Your Most Stripped-Down Browser

You have downloaded a series of services and browser plug-ins over the course of time. Let’s call this combination of technology along with your browser type, settings, etc your Browsing Footprint. Chances are some of your audience have narrower Browsing Footprints than others. The best-run sites will cater to them all. Don’t forget the narrow footprint.

The number of sites that are unusable on anything but Windows is insane. Yeah it may look cool in IE 7 with all the bells and whistles installed, but it’s completely non-functional in Firefox with no Java and the no-script plug-in that many use for security’s sake. – David Kennel, Systems Administrator at Los Alamos National Laboratory

What’s Plan B?

Some users forgo certain browser technology for security reasons. Others cannot use it for reasons of visual impairment. If you do decide to make use of browser plug-ins or options like Flash, Active X, JavaScript, etc, then be prepared to code up an alternate display for everyone who does not have that technology installed or activated.

Some Assembly Required

Jenna Tollerson, a Web Developer and Consultant at Famous Web cites websites that require additional software to see the information you are looking for as a common interoperability design error: “Providing PDF reader (or .doc, or other format you need a new application to open) files for online reading. If you can’t be bothered to format it to HTML, you’ll often find that your end users can’t be bothered to read it.”

So there’s your interoperability checklist. Now go to work. Or, leave a message at the sound of the beep.

I’d like to also thank Jonathan Cheung for contributing to this article and for a great email exchange about deep-linking and url path variables (that’s a conversation to share on another day).

–Beep–

There are few things more frustrating on the web than not being able to find what you are looking for on a website. After all, you came there with a purpose, invested your time, clicked your mouse. The least the website designer could have done was provide a cogent, intuitive layout for you to follow!

This is part of our Website Design Errors series. You should be able to see the entire Web Design Errors series.

No one expects you, the website owner, or your designer to be mind-readers. But there are a certain number of best practices you can use to make sure your site helps your visitors and keeps them happy. Here I break them into Navigation errors – the getting from place to place.

Top 5 Ways to Poor Website Navigation

1) Missing ‘Home’ button, or Menu Bar
Nothing more basic than this. Sometimes your user will follow a link and be directed to the exact content they were searching for. Sometimes they won’t. Be sure to provide a way for them to access the top hierarchical content of your site with a home page link and other core resources. Key pages are also great to have on a single, persistent navigation bar. Whatever your method, keep the navigating consistent across all pages. There is no reason to make a user re-learn how to use your website because they are in a different section.

2) Broken back button
Like we just covered, sometimes you click on something by mistake and you want to go back to your previous page. Everyone is trained to click the back button. Some power users navigate by using the keypad. It is very frustrating when the back button does not work. A prime example of this are flash-based websites where, because of the nature of flash, no matter how deep you are into the site clicking the back button brings you all the way back to the beginning! Flash is evil.

3) No Search Functionality
Any website with even a moderate amount of pages will not be able to serve every viewers need immediately. Why not cut to the chase and offer a search box so the user can find exactly what she is looking for? If your website visitors cannot find what they are looking for immediately, they will leave.

4) Broken Links
Not much to say here. When you click on a link, you expect it to take you to a new page. Broken links look unprofessional and interrupt the user’s flow. Find your broken links and fix them with .htaccess or metatag redirects.

Be sure to include an automated 404 error so your website handles broken links gracefully. Michael Donohoe, a developer for the NY Times agrees. “If something goes wrong, help your visitor! Custom and helpful error messages with meaningful information are a huge asset and often forgotten about.”

(Note: If you are unsure what a 404 page is or how to set one up, drop a note and I will create a ‘How to’ page.)

4a) Suspect Links

Each link you have leading away from your site can be considered a vote for the integrity of that site – both by your users and by search engines. Make sure your links are helpful and trustworthy.

Consider your audience – if you’re trying to sell a quality product, don’t include links to other sites (no matter how tempting) unless you know their product or service is at least as good as yours. People make assumptions and if you link to another site, they’ll assume you recommend it. If that leads to a bad experience, it’ll reflect badly on your site not just the linked one. -
Tracy Willis

5) Silly Introduction Pages
Give the user what they want. Your Home Page should be a like a point guard – assessing the situation and passing the user off to where he wants / needs to be. When the front page instead shows a time-consuming flash presentation or video, the distribution of information becomes inhibited. How many NBA point guards will be sent to the bench if they can’t pass the rock?

Siddharth Sethi, the CEO InfoBeans put it to me this way: “I think a flash introduction that adds no value is a total let down for me. Using flash to create a splash page only to have 90% users click the skip button is a waste of everyone’s time.”

Bonus Error – The Unnecessary

Again from Tracy:

Anything that gets in your audiences’ way – intro’s, irrelevant pop-ups, too many adverts, poor content, unnecessary ‘extra’ pages. People go to websites to do something – whether its shopping, interacting with friends, watching films, researching a product/service etc – they go with an intent in mind. If you randomly put unnecessary ‘stuff’ in the way, you won’t hold their attention for long or you’ll irritate them. Either way its not a good experience.

Summation

In the end, it is all about making it as easy as possible for a user to get from point A to point B, and remain happy in the process.

Thanks to everyone who sent input to this article. If you didn’t get a chance, here’s your shot. What kind of poor website navigation design (or lack of design) drives you to distraction? Let us know, below.

A good website design will position your business in front of a multitude of contacts in an incredibly positive light. A bad website design….. well, the damage can be extensive. I asked a range of professionals ‘What are the top 5 web design errors you see today?’

Their answers were so overwhelming that I had to make several different posts to cover the topic. Those will becoming out as a series of posts through out the next week covering topics ranging from Aesthetics to Navigation to Content. You should be able to see the entire Web Design Errors series. For now, here’s my list:

1. Poor Planning.
Like many constructive endeavors, website design takes time, effort, and money. It pays to get it right. Choose a message, choose a delivery vehicle, and create a plan! Scattershot, anything goes websites drive me to distraction!

2. Not Browser Friendly.
A website should look as good in Firefox as it does on IE. I should be able to use it on my iPhone and my clients should be able to use it on their Blackberries.

3. Wrong technology.
Sure, Flash looks pretty but it’s kind of annoying and when it comes to SEO, just plain worthless. Choose the right tools for the job at hand.

4. Bad Color Scheme.
Tacky is as tacky does.

5. Too many Ads
Whitespace is a good thing. There is no need to commercialize every pixel of space.

Have any website design pet-peeves? Let the world know below!

Flash is pure, unadulterated evil to your business and it has little to no place in your website design plans. It is evil because it loses your company money. Keep reading to see how and how to fix it.

Flash is to Website Design as ex-Girlfriend’s Name is to Tattoo

As a leading website design company in Charlotte, we get a lot of requests for website designs built with Adobe Flash. We get nearly as many requests to remove Flash from small business websites. It could be that Flash is the website designer’s equivalent of tattooing your high school girlfriend’s name on your arm. It might make sense at the time, you think you’ll have it forever, but very soon you want it gone and to never return.

What is a Flash Design?

A Flash Website is a very pretty, very dynamic website built with specialized web development software. At first glance it looks great. Unfortunately after a bit of usage it begins to grate on you.

A great quote by SEOResearcher illustrates Flash beautifully:

Then why are there so many Flash sites? They look pretty with all those neat vector graphics, gradients, animations and cool sound effects. Flash is the favorite toy of big designer studios and numerous amateur graphic artists alike. Flash is visually attractive, and in general attractive websites are more successful than the ugly ones (notable exceptions: craigslist.org and plentyoffish.com). But this is not the case of Flash websites. All the benefits of the nice outlook are overridden by the disadvantages in terms of SEO and usability.

How a Flash Website Design Loses you Money.

Here’s a list of reasons not to use a Flash Website Design:

Business Issues

• Search Engines ignore Flash! If you want great organic search engine results, Flash is not the way to go. The webcrawlers like Google and Yahoo that evaluate the information on your site literally cannot ‘see’ the information in a Flash-designed website. With search engines referring so much business these days you cannot afford to have them ignore your website!

Usability Issues

• Flash takes over your browser. You can only go where the designers let you. The Back button does not work in flash.
• Visited Links do not work. You know when you visit a website and click around on a bunch of different links the ones you have already clicked on are a different color? That doesn’t work in Flash. Flash uses an entirely different technology than the HTML your web browser displays.
• Useless for users with disabilities. A competent HTML designer can easily create a website that is useful for users with many types of hearing and visual impairments. Flash does not give you that capability.
• Internal Search does not work for Flash pages. What good is content on your site if people can’t find it?
• Flash gets old very quickly. While it might look cool to have all of those graphics on the splash page the user sees when they come to your site, by the second visit it is annoying.
• Users need proprietary plug ins.

“If the user hasn´t installed the plug-in (which many don´t) then at best, their experience is diminished, at worst, the site doesn´t work at all. Web sites should not force the user into using any proprietary systems.” – Inspired eBusiness

Maintenace Issues

• A web designer is needed to redo the entire site every time you want to update Flash. If you have a Content Management System, you can update the content yourself. Updating flash to keep current with your business takes time, money and resources that are better spent on your business.
• Flash takes bandwidth. All of those nifty graphics take a lot of space and bandwidth to send to your potential clients. What if they are using dialup or have a slow connection? Do you think they will wait around for the sit to come up or will they just go to your competitor?

Design Abuse

• Animation for the sake of animation? Just because you can animate something, should you animate it?
• Security Issues. Flash is an application that is vulnerable to hacker attacks.

And it is not only me. Some of the best website designers, search engine optimization specialists, and internet marketers are against Flash. I borrowed heavily from the following excellent articles:

• Flash is Evil: 5 Big Reasons not to use Flash
• Search Engine Journal basically echos SEOResearcher’s 5 points here.
• Belfast Website Designer, Inspired EBusiness
• Tailored Website Design: Top 10 Mistakes on the Web

If those are not enough, check out the following Flash criticisms in Wikipedia.

In Summary:

Jakob Nielsen, a web usability expert, a said it best in the following quote:

“Although multimedia has its role on the Web, current Flash technology tends to discourage usability for three reasons: it makes bad design more likely, it breaks with the Web’s fundamental interaction style, and it consumes resources that would be better spent enhancing a site’s core value.”

And if your Charlotte-area website designer insists on using Flash? Well, take Brendon Sinclair’s advice:

If your designer suggests the use of Flash on your web site, get rid of him. Using Flash is a huge mistake.

After you get rid of them, give Charlotte Web Development a call and we’ll build you a great site that you can be proud of AND makes your business money.

Marc Broussardplayed The Neighborhood Theatre last night and it was a great show. Friends and I had been talking about the show for 2 weeks and planned a whole day around it. At the last minute we almost didn’t get to see it because of one crappy website and inept management.

Neighborhood Theater is off the corner of 36th street and North Davidson in Charlotte – a place better known as NoDa. You can see their woefully inept website here. Keep reading for an object lesson in business mismanagement at every level.

Act 1: Broken Website

We tried getting tickets to the show over the Neighborhood Theater website but failed due to system failure. The ordering process is bizarre, cumbersome, and broken. We went to plan B – buy the tickets in person at a nearby store the website said would have them.

Act 2: The Website Lies to us

The store we we referred to, Sunshine Daydreams, is closed for vacation. No tickets there.

Act 3: Management are Idiots

Wait in line outside of the venue to purchase tickets. This is where management showed their true colors – and those colors are stupid, stupid, and stupid. To spare you the horrific details, I will just summarize the salient points:

• No line management – will-call, ticket holders, and ticket buyers are all mixed together. Also, no clear starting point to line up. The actual line started 50 yards away from the ticketing booth – which wasn’t used.
• Inept management – at regular intervals we were told what to do and where to go by the same Neighborhood theatre managers that contradicted what they said 5 minutes ago. My favorite exchange was the following: “They’ll start selling tickets at 7PM.”  “It’s 7:40 right now.”
• Zero ticket management. They had no idea how many tickets were sold or to whom. Will-calls were promised tickets that might not have ever existed. Management had no idea how many tickets total were in existance, how many were sold on-line (I bet zero), how many seats they had in the place or what the difference was between them.

You can see this was a frustrating experience. Here are some website design lessons we can take out of this ordeal:

There is absolutely no design for the website- odd when you consider NoDa is Charlotte’s artist community. This should have been my first clue that management doesn’t care about customer experience.

Lesson #1: Have great website design. Take a look at Marc Broussard’s website and then compare it to Neighborhood Theatre’s. Which one is more professional? Which one are you more likely to buy from?

The website was not functional. It simply didn’t sell the tickets. Why have a website that doesn’t sell?

Lesson #2: Have a website that does what your customers want.

Lesson #3: Back your website up with phenomenal service.

OK, that’s enough of a rant about poor website design and business management. On to more positive things. I think I’ll start by listening to a recording I bought from last night’s show. Good things!