We’ve released a new version of SeboMarketing.com!

Old Site

The old version of SeboMarketing.com had a number of problems with it. Many of these problems fell into “The cobbler’s children have no shoes” category—as Internet marketers, we know better than to make some of the mistakes that were being made, but we’ve been so focused on our clients’ sites that we neglected our own.

Click to Enlarge

Table-based Layout, Invalid HTML

Our site was put together with a dated version of DreamWeaver, and so the layout was based on a series of nested tables and the HTML was awful. The use of CSS was limited, and the code was bloated and full of presentational elements and markup.

Too Little, Stagnant Content

The overall size of the site was less than 30 pages. The content hadn’t been updated to show some of our new clients, any news from Sebo Marketing, or even new copyright dates.

Insufficient Navigation

Perhaps the greatest sin for a site that is meant to have a clear conversion path and to present Sebo Marketing in a good light is the fact that its navigation was confusing and inadequate. It was difficult to find the client bios or case studies that had been placed on the site, and it was nearly impossible to know what part of the site you were on.

New Site

The new version of SeboMarketing.com is much improved over its predecessor. Besides a visual update, we have made the following improvements:

Click to Enlarge

Valid HTML, CSS Layout

Because it’s a new site, there are probably some few mistakes left lurking in the HTML of the site, but overall SeboMarketing.com is now 98% valid. The layout and presentation have been effectively separated with the use of stylesheets. Maintenance and the next visual update to the site should be a breeze.

Updated Content

We updated and added a lot of content. We have all of our clients whose sites we’ve completed listed, and we have case studies to show the success we’ve had since we last updated our site. We’ve also posted some informational articles about different aspects of Internet marketing.

Clear Navigation

The navigation on the site is leaps and bounds better. A more complete list of options is presented, and a highlighting scheme for showing the visitor where they are on the site has been put in place.

Additional Credibility

Finally, since we last updated our site, Sebo Marketing has been recognized as an Adwords Qualified Company by Google. Pay Per Click advertising is an important facet of our service offerings, and being an Adwords Qualified Company strengthens the trust that our clients, both current and potential, can have in us.

In conclusion, we’re happy with our new site, and we’d love to have you come take a look sometime.

The page ranks on my site have been “inverted” for quite a while and only just now have they begun to shift towards what’s more normal.

Inverted Page Rank? What’s an Inverted Page Rank?

A normal web site usually has page rank concentrated on the home page, followed by the main category pages, and finally the normal content pages. So your site may have a page rank of 4 on the home page, 3 on each of the category pages, and from 2 to 0 on content pages.

DiamondLime.com had (what I consider) a rare case of page rank distribution—it was almost totally inverted from the normal hierarchy in the paragraph above. The home page had a page rank of 2, category pages had a page rank of 3, articles had page ranks anywhere from 4 to 0, and the site map had a page rank of 5!

How Did My Page Rank Get Turned Upside Down?

I’m not entirely sure how my page rank got to be so strange, but here are a few of my theories:

• Heavy Deep Linking

  My site has been linked to in an unordinary fashion—I have a few pages and blog posts that are far more popular and linked to than most of my main pages. More people link to my post on ChaCha, The BYU Blog and Web Site Directory, or The Lime Blog than the home page. All these links’ page rank is getting poured into my site further down in my navigation hierarchy.

• Page Rank Bleeding

  One page that should have had a high page rank and didn’t was my blog. I think that this is because there were many links on my blog page to other sites that were bleeding page rank like mad.

• Links Per Page

  The Lime Blog and the home page of DiamondLime.com both had many, many links to other pages, effectively distributing all of their page rank away from themselves.

How Can I Un-Invert Page Ranks?

I did a few things that have helped even my page rank out. To fix the deep linking that was turning my page rank upside down, I tried (within reason) to make sure those pages that were heavily linked to also linked to many other pages to spread their page rank around. I changed how my page rank bleeding happened by reducing the number of off-site links that were on main pages and shifting these links to a links page (I still want to link to my friends and to valuable resources, so I couldn’t just remove them. Moving these links helped make things more organized, too). Finally, I added a few links to emphasize pages that I wanted to give higher page rank to.

These efforts seem to have worked—instead of ranging from 0 to 5, my page ranks recently became 4 for all the main pages except the main page of my blog and 3 for most everything else. The lesson is that you can influence how your “Google Juice” or page rank is shared around, even if the bottle is upside down and making a sticky mess.

I was just browsing the November ‘06 CSS Reboot screenshots to see if I could pick up some cool new site design ideas or spot someone I know. I came upon a site that had done a pretty good new design for its reboot, only the site didn’t have a screenshot for the earlier design. I was really curious to see what the earlier site looked like because the site owner said the new design was 100 times better than the old design. I wanted to see “100 times better than what?” So how do I get a glimpse of what the site looked like earlier?

Enter The Wayback Machine.

Periodic Site Snapshots

The Wayback Machine is run by web.archive.org as a free public service. The Wayback Machine has a crawler (actually, probably several) that goes out on the web and takes “snapshots” of web sites which it stores in its archive. The crawlers typically visit several times a month so that the archive is updated (hopefully) with each important web site change. All of these snapshots are available for curious visitors to browse through and laugh at bad old designs or get all sentimental about earlier, sometimes better, versions of web sites.

The Wayback Machine has records from as early as 1996, so it’s very easy to see the earlier site designs of just about everything—the vast majority of web sites have come online after 1996. There are even a few entries of DiamondLime.com, although the snapshots kind of got a little bit hacked, and for some reason the crawlers stopped taking new shots after May of 2006. It’s especially fun to pick a big web site that has been around for a long time, like Yahoo or Apple.

Because the information is sometimes a little patchy, and because The Wayback Machine stores snapshots instead of full web sites, it’s mostly an interesting visual/design tool—but that doesn’t mean it isn’t fun or useful. For example, I came away with a deep feeling of appreciation for how far web design has come after looking at a few sites from 1996!

I recently had a fun experience—Michael Eagar and I sat down to talk about web design, coding, and templates. He asked me to show him some of the things I was talking about, and so we opened up a text editor and I started to write the code for a basic two column template from scratch. I didn’t refer to my normal templates or previous designs other than for a few hard-to-remember strings (like the text for my XHTML Doctype).

I had an amazing time and I produced amazing code.

By starting from scratch with my web design and doing my best to teach Michael some best practices, I was able to focus on the best way to do things, not just the way that everything was already done on my site and that would be a pain to change.

We cranked through the HTML and CSS, including personal instruction and most of the visual layout (sans-images) in less than two hours.

Visually Starting From Scratch

Avalonstar, SimpleBits, and others have recently toasted the CSS file for their sites and thrown all their presentation out. They did this as a kick in their own pants to get them moving and working on a new design that they will (hopefully) like better than the old one. Both Bryan and Dan talked about how liberating it was to start fresh on a new design for their site.

Mini-Paradigm Shifts

Coding from zero, or designing from a blank slate, isn’t always what’s necessary. In fact, be very, very careful not to discard all the things you’ve learned from your previous designs. However, being willing to question or let go of previous designs, methods, and ideas about web design can be liberating and trigger a mini paradigm shift—you may discover new ways of doing things that will increase your productivity and your designs’ effectiveness. So take a step back every once in a while and examine how things are done. If you really are doing things the best way, then you can be confident in the current system. If you aren’t, then you’ve found (and can begin to remedy) a potential problem or bottleneck.

There is a somewhat recent movement in the web development world that is surrounded by quite a furor—the web standards movement. With the advent of browsers that do a half-way decent job of supporting CSS, many web developers claim that it is possible to build web sites that effectively separate presentation from content. This would allow you to write the HTML for your site once and update the appearance as much as you like without changing the code for the site.

Unfortunately, the separation of content and presentation is a myth.

For now.

The problem is that the capabilities of CSS are limited enough at the present moment that it is often hard to have enough “hooks” or HTML elements to apply CSS styles to, presenting web designers with a dilemma—either limit the range of achievable presentations or clutter page code with some non-semantic, presentational/layout HTML tags.

Web Design Heresy

There are many supporters of the web standards movement that would beg to differ and would call me a heretic. However, I am one of the strongest supporters of the web standards movement. I strive to separate my content and my presentation. I read about every method of overcoming browser deficiencies and inconsistencies that I can find. I wish that browser support for standards was better and that all designers would (eventually) throw away the use of tables for layout purposes. I would agree that separation of content and presentation has come a long, long way. I simply chose to present a controversial point of view in order to prove a point—there are times when it is impossible, or unreasonably difficult, to achieve certain presentations without more CSS “hooks.”

Extend the Power of CSS

Our pie-in-the-sky dream is that one day, hopefully sooner rather than later, CSS will have new abilities and powers added to it and supported in browsers that will make the separation of content and presentation and the creation of killer designs easier. Rounded corners. Equal-length columns. Minimum widths. No more hacks.

That day, however, may be a ways in the future. So what do we do in the meantime?

Those who fight the web standards movement usually claim that web standards supporters are over-idealistic and don’t focus on the practical issues of every-day web design and site building. I would strongly disagree. I code within the limitations of day-to-day, deadline driven, limitation riddled web design every day. I know many others who do as well. We have found ways, in a manner similar to those who started using tables for layouts, to cope with web design problems.

The Separation of Content, Presentation, and Layout

Because certain presentations, especially when it comes to layouts, are currently impossible or unreasonably difficult to implement using semantic HTML and CSS alone, many web developers have begun to separate their layout elements from their content and presentation. This allows them to achieve design goals and still make easy changes later. There are many ways to do this, including the following:

• Class-name-based Search and Replace

  By naming each layout-specific element carefully, developers can do global search and replaces to make changes to layouts. Obviously, this is a very cumbersome and error-prone solution, but it allows developers to achieve the necessary presentation and move on with some kind of prayer that they will be able to modify all their layout elements should change be necessary later. Also obviously, use this solution as a last resort.

• JavaScript Insertion

  Clever JavaScript coders have written scripts that will identify certain elements and then wrap them in non-semantic layout code. Some argue that this isn’t true separation of content and presentation, but it counts—the presentation is only meshed to the content at the browser level (not in the content source file), and the JavaScript can be turned off, leaving perfectly semantic code. This is a pretty good stop-gap measure to put in place while we wait for CSS and browsers to improve.

• Inclusion of Layout Elements

  This is the server-side version of JavaScript Insertion—files are “included” at key points in the content source. These files contain the layout and presentational, not always semantic, HTML and CSS. They can be changed later to reflect improvements in CSS and browsers.

• CMS-based Templates

  Templates are easily the most poweful method of separating layout from content. Because the system takes care of the leg-work of changing the pages based on a certain layout, these pages will be super-easy to modify and to update with more compliant HTML and CSS later.

These methods all rely on HTML and CSS for layout purposes. We don’t need a new technology to make this possible—I would simply say that there is a third class of information that needs to be considered. We have Content, which is what the elements say. We have Presentation, which is what the elements look like. And now we need to have a more robust system for Layout, which is where the elements are.

The Persistence of Separation of Content, Presentation, and Layout

There will always be some kinds of wrapper elements in HTML—these wrappers give semantic meaning to the HTML. They define what elements belong together. These wrappers can be used for layout purposes as well. But if the relationship of wrappers to elements ever changes, then it is very beneficial to have a method for easily updating the layouts of web pages. That’s one reason CMSs have become so popular. A web standards-compliant CMS or template system is basically a must for anyone building a site with more than 3-5 pages per layout or more than 10-15 pages total.

Because the locations of elements will change (independently of their content or appearance), HTML and CSS for layouts need to be managed separately, just like content and presentation are separated. Separation of content, presentation, and layout will further improve the power and robustness of web design, making site creation and maintenance easier and freeing up precious time for other important things.

One of the first things I do to evaluate a client’s needs is to assess his or her existing site for strengths and weaknesses. We then work on a new site plan that compensates for the weaknesses without compromising the strengths. I’ve recently been working with a new client on a site redesign and noticed something that would be helpful for all site owners to keep in mind.

The weakness that stands out the most for this particular new client is the complete lack of a sense of place—you don’t know where you are when you arrive at the site. There is no information regarding what the company does, why it is unique, or why you should choose this site over any other. There are no separate areas to the site—all of the functionality of the site is linked to from the home page, without any explanation of what each of the items is. There is not enough content to convey the site’s personality to its visitors. There is nothing about the site that would help you to understand what it is for or to make it memorable.

This site needs some index pages—pages that categorize, highlight, and explain the parts and features of the site like a tour guide pointing out historic sites on a bus ride—”On your left you’ll see the products section of the site where our fine products have been sold since 1996…”

Index Pages Make It Memorable

By grouping the site’s functions and content into a handful of areas or categories, you can help your visitors to quickly find what they are looking for and avoid “analysis paralysis.” Visitors are more likely to remember how to navigate the site and find what they are looking for if the number of (initial) options they have is reduced to a more managable number. People remember lists of between 3 and 7 items the best. Check out iKaput.com for memorable, easy navigation.

Index Pages Tell You What It Is

Once the areas or parts of your site are defined, an index page provides you with a perfect place to explain the purpose and features of a particular section of your site. By describing each of the features, you reinforce your visitors’ sense of place—they know where there are, what they are doing, and what your site is about. A good example of this principle is the education section of WhiteCanyon.com

By organizing, highlighting, and explaining the features of your site, your visitors will understand and remember your site better—just like tourists who have had a tour guide show them the sites of a city that make it unique and memorable.

When you are redesigning your web site, first take stock of the goals and functionality that you want your site to meet or have. When you know your goals and necessary functionality, you can then determine the structure of your site—the navigational structure, various site paths, and links between pages.

Think About Conversions

A conversion occurs when your site visitor takes one of the actions that you want him or her to take. These conversions, and the multiple steps (mini-conversions) that lead to them, are the whole purpose of your site. If you run an e-commerce site, the main goal is for your customers to add products to your cart and complete the entire checkout process. A forum wants users to sign up, read and make posts, and return frequently. Informational web sites want people to return and read or listen often. Some sites are designed to generate leads for salespeople.

You want to structure your site so that it is as easy and as desirable as possible for visitors to complete the desired actions—to be converted.

Think About Spiders

The easier you make it for a search engine spider to get around your site, the more pages it is going to find, index, and (hopefully) rank. If you make the link “tree” simple and easy to follow, you stand a better chance of pleasing a search engine spider.

Think About Confused People

No one is going to know your site as well as you do—click paths for actual visitors can make it seem like your visitors are drunk, lost, or just plain silly. Trust me, though, they usually (and hopefully) aren’t any of those things. They just won’t know your site very well from their initial visit. You need to make the structure or your site intuitive enough that your visitors can understand it quickly without hand-holding.

Another major problem I have seen as I have designed or redesigned web sites is that often the navigation structure is inconsistent. Inconsistency is worse than complexity. Imagine, you land on a site, click to go to a product description, click to the features page, and then want to go back to the product description. Now, though, instead of being first on the list of navigation links, it’s 4th and it’s called “product outline” or “product overview.” Huh? You will lose and confuse your visitors if navigation paths aren’t consistent.

My Basic Process

After designing many sites, I have a basic process that I follow for designing a site. Here are the main steps that I follow:

1. Define Main Areas

   Luckily, you’re not starting from scratch when you start to define the main areas of your site. In fact, there will usually be at least one area for each of the main functions of your site.

   For example, KindredLearning.com has five main functions that it’s supposed to have: store, newsletter, articles, company news, and general company information. After looking at all the different pages that we wanted to include on KindredLearning.com, we decided on six main areas: Four Year Plan (the main selling point for Kindred Learning’s entire business), Products, Newsletter, Articles, News/Updates, and About Us. We added only one area, and we did it in order to make certain educational materials on the site more prominent.

   These main areas make up the “main level” navigation of your site. Your visitors can see the main things they can do or learn about on the site in a glance from anywhere on the site.

2. Assign Pages to Areas

   The next step is to make a list of all of the pages that need to be on your site and then assign each page to one of the areas. Most of the time, it will be clear in which area a page belongs, although you will occasionally have a page that seems to belong in more than one area. It can be really tough to decide where to finally assign this page. You can make every page accessible from many places on the site, but you need to assign every page a “home.” These associations can be changed, but changes need to be made with GREAT care—changes to associations and navigation menus are the number one way to introduce navigational inconsistency into a site.

3. Set Up Levels

   Once you have all your pages assigned to the different areas, you’re ready to impose a little further structure on your site. Some pages will naturally belong to certain sub-areas or categories. You can group these pages together and then create a new “index” type of page to link to each of these pages. You can also link to pages right from the main area page. These groupings, indexes, and assignments create a hierarchy for your site, one which is hopefully clear, natural, and easy to follow.

I usually perform the task of structuring my site on a white board, a large piece of paper (the same way that Carolynn Duncan solves big problems), or an Excel spreadsheet. It usually ends up looking something like this:

Click to Enlarge

You can see the areas along the top (I really like tabbed navigation at the main level), the pages and indexes below them, and the sub pages below them. The hierarchy has worked out clearly and is usually no more than about three levels deep.

At this point, you’ve succeeded in determining the goals of your site, deciding on the functionality necessary to achieve these goals, and mapping the functions and information to a navigational wireframe.

Finally, go through the structure of your site and think about conversions, spiders, and confused people again. If your structure satisfies these needs, then you’re good to go.

What is the frequency of site redesign?

The Optimal Case

Assuming you’ve built a good looking site with solid content based on compliant code, how often do you redesign? There are many other factors involved, such as whether you are a design fanatic with a personal blog or a major corporation with a company site, but assuming that you were a company that didn’t enjoy redesigning, how often would a site redesign be necessary?

Chances are that the visual appearance of such a well constructed site would have to be updated to be current with modern design trends every 4 or 5 years. The hope is that only the visual appearance would be changed—the content would still be useful and the markup would still be valid.

Sub-par Cases

There are, of course, an infinite number of sub-par cases. Many of these involve low quality, inane, or incorrect content, invalid or inaccessible markup, all manner of proprietary scripts and features, or management whims.

It’s conceivable that, under such conditions, a site could be so bad as to force a redesign as often as every 9 to 12 months and could use a redesign every single month until someone finally got it right.

The Costs Involved

Clearly, redesigns that are 5 times as frequent and that require much more effort to perform are more than 5 times as expensive. Even if redesigns were skipped and the site limped along for five years in a broken state, the lost revenues would far exceed the cost of developing a better site. It would therefore be worth at least 5 times the up-front money to get a site right the first time.

The Smart But Realistic Case

The smartest thing to do, then, would obviously be to shoot for the optimal redesign case. Do everything you can to build a site that will require very little maintenance and virtually no redesigning for 4 years or more. Skimping on site design isn’t really a good idea—solid design may (or may not) cost you, but it will pay itself back in the end, whereas skimping will only hit you with redesign fees over and over.

Make sure to do your research—many fantastic, cutting-edge firms charge about the same as crappy, out-of-date firms in order to compete. You may need to learn a little bit about site design and web standards in order to distinguish between different firms. If you are a developer, be or become one of those good firms that builds sites the right way!

Because doo doo happens, however, be prepared for changes that can take place. If you’ve properly separated design from content, it should be much easier to make updates to layout and design than it would be otherwise.

What other tactics do you know of to mitigate the impact of or to remove the need for frequent site redesigns?

At this point, I should put on a lab coat and shout, “It’s Alive! IT’S ALIVE! Hahahahaha!” Bringing stuff back from the dead will do that to you.

I’ve been working with some clients lately who have asked us to “bring back” some dead sites—sites that are not ranked for any terms in search engines and which get few visitors.

Learning Experiences

Two of these sites in particular were learning experiences. My coworkers at Sebo Marketing and I went through our typical site (re)building process—we made a list of keywords, we had a graphic designer come up with something contemporary and professional, we coded the site in standards-compliant code, we optimized our pages for search engines, and we provided plenty of what we like to call “spider food”—lots of pages with good link structure and content that spiders love.

And then we waited.

We’re still waiting, more than 6 months later.

External Links

One of the main weaknesses of these two sites is that our external linking campaigns were weak. They were the kind of sites that people wouldn’t mind visiting but weren’t likely to link to, even if you asked them nicely.

Spider Visit Frequency

Our biggest mistake by far was that we didn’t find out when search engine spiders visited the sites last. As it turns out, both sites had been dead and not visited by search engine spiders for over a year. The content hadn’t been updated and the sites had sucked for so long that the spiders haven’t been back and haven’t seen the wonderful redesign we did.

Let this be a lesson to all of you excited site renovators out there—if the site hasn’t been visited by a spider in a long time, and if an external linking campaign promises to be difficult, please proceed with caution, or at least a LOT of patience.

It may be better to start over on a new server (update the domain name to point at the new server) and get sandboxed by Google and then get out—six months in the sandbox is better than a year between spider visits!

After you have decided on the goals of your site, you can begin to determine how you will reach those goals—you can plan the functionality that needs to be part of your site in order to accomplish your objectives.

Functionality Should Be Tied to Goals

This is the part of web design that can really get messed up, whether by accident or by rationalization of mistakes. It’s easy to forget to (sufficiently) implement some important features, or to add features to your site that aren’t really necessary and that don’t contribute to your core objectives.

The functions of your site must satisfy two criteria before they can be considered for implementation: 1) They must be tied to at least one of your goals and 2) they must be measured. Most website functions are very measurable, and a few, like “general appearance” and “ease of use” are more difficult to measure but are critical to your site and must at least be evaluated and monitored.

The Functionality of KindredLearning.com

To illustrate, here are some of the main functions that kindredlearning.com will have:

• Online Store

  The most important function of kindredlearning.com is to provide site visitors with a way to purchase Kindred Learning’s products online. Kindred Learning is located in a remote area, doesn’t have a strong distribution network, and serves a nation-wide audience, so an online store is critical to Kindred Learning’s success. Its current store is functional, but not stellar, at helping users comfortably browse products, add them to the cart, and check out. KPIs for the shopping cart include conversion rates and average order value.

• Newsletter Opt-in Form, Archives, and Syndication Feed

  Kindred Learning’s monthly home school newsletter is a powerful way to communicate with its target market. Offers, news, and articles are distributed to subscribers through the newsletter. Archives and a syndication feed (RSS) would be very powerful for driving traffic and improving search rankings. Opt-ins, opt-outs, open-rates, and the number of subscribers are all measurable indicators of how this function of the site is doing.

• Home School Articles

  Home school articles would be great “spider food” for attracting traffic to the site, and useful articles would provide a helpful service to site visitors. Traffic, conversion rates, and keyword rankings are all measurable indicators of how well home school articles are doing.

• Company News

  Information about new products, product updates, sales, and visits to home school conventions is very important to Kindred Learning’s target market and provides a strong incentive for visitors to return to the site. Company News could also be published using an RSS feed and measured accordingly.

• Information About the Company

  Because most of the traffic to the site comes from search engines, kindredlearning.com needs a very well-done information section to acquaint visitors with the company and its unique selling points. This is one of the functions of a site that is difficult to measure. One way to measure it could be to compare the conversion rates of paired pages—one with and one without corporate information, testimonials, or other credibility elements.

Some functionality that may be added to the site later includes a message board or other community features, a home school cooperative locator tool, product reviews, and a blog run by a member(s) of the Kindred Learning staff.

How the Functionality is Tied to Goals

Each of the above functions is tied to one of Kindred Learning’s goals. The online store is the primary method of driving sales for Kindred Learning. The newsletter and its archives and RSS feed primarily drive sales and nurture relationships with customers. Home school articles attract new leads and serve current customers. The company news section improves communication in one direction, from the company to the customers. Information about Kindred Learning helps reassure prospects that it is a good idea to become a customer.

Conspicuously missing from Kindred Learning’s initial strategy is a method for customers and prospects to communicate their desires to Kindred Learning. The information section will obviously list an e-mail address, but this may not always be the preferred method to elicite customer responses. A message board, product reviews, and/or a blog that allows comments would be great ways to interact with customers and get their feedback. Kindred Learning, however, already knows of many things it can do to improve and has other, non-web-site feedback channels established, so feedback functionality on the web site can wait for a little while.

Hopefully this example will help you to see how the functionality of a web site is determined by its primary goals. Remember, if it doesn’t contribute to your site goals or it is very difficult measure, it may be smarter to leave it off your web site.