GeodSoft Web Site Redesigned to Emphasize Content and Improve Accessibility

To emphasize unique page content over standard navigation aids and global features, improve accessibility for the visually impaired and text based browsers and for better search engine results.

Power of Scripted Site Maintenance

From before I started to work on this site one of my goals was to attempt to make it an uncompromising model site, which in my view is not about traditional graphic design or the latest Javascript coding tricks. As I learn more about how surfers use web sites, what previously seemed good sometimes needs changing and adjustments. Because this site is maintained by scripts, once desired changes are settled on, implementing those changes is usually minor. The most recent changes did require some moderately serious program adjustments because I've done some things that I've never done before.

After any necessary script programming changes have been made and tested, all the pages on all three sites can be changed in less than ten minutes even though there are over 120 pages per site now. This is the power of a script maintained site. Including systematic checking of the results, the real time is much longer but there is no comparison with any manual maintenance method or even a template based approach like Dreamweaver uses. Dreamweaver can apply changes rapidly but the pieces changed are static and do not adapt to the document's location in the directory tree and other related documents.

Database driven web sites would be roughly comparable or somewhat quicker in the time and difficulty, provided that the development tools include the necessary abilities. If a database driven web site lacks desired capabilities you have no choice but to hope the vendor includes the wanted features in a new release.

Typically the hard part is figuring out what changes to make. Making cosmetic changes, including even extensive addition, relocation or deletion of fixed components, is trivial. If the core functionality of the navigation system is changed then there may be some serious programming work.

If you count the designs that lasted only a day or so, the first four GeodSoft web site designs required no significant changes to the script even though the visual appearance of the site changed dramatically. These changes required little more than adding, moving or deleting a few HTML code snippets and changing a few filename references. When graphics were changed, it was the graphics changes themselves that were time consuming. Switching the graphics linked to on the various pages was trivial. This latest design, though in some ways subtler than previous changes, required some serious logic adjustments to the script.

Changes Not Esthetic

These latest changes are not driven by esthetic or cosmetic concerns. Each time you do a design there is not only a time investment but also an emotional investment. Designers, whether they are computer programmers or graphic artists want to think they've done their best on each job and re-doing something you've done not long before is an admission that it wasn't the best. It may have been very good but there was still room for improvement.

Besides achieving new insights into the workings of the web, the passage of time may allow you to achieve emotional detachment and new perspectives. Sometimes, something that was not done because it seemed too difficult may later appear to be worth doing.

Underlying Goal

Hopefully any significant investment of time or money is goal driven. In this case they are the same goals that drive every other web site created by any company or organization: the desire to sell more products, services or ideas. Though e-commerce has been the trade press rage since 1998, it's worth remembering that many sites are selling ideas. The ideas can as simple as this is a company worth doing business with or complex political or social agendas.

Does Pretty Matter?

The difficulties in using many web sites suggests they are driven by a different set of goals. The reaction of management and marketing types may be along the lines of "Our web site looks great." Page download time may be greatly hindered by bloated graphics or core site features may be hidden behind meaningless images until the mouse moves over the image. Such sites are personal or collective ego trips. The organization as a whole may be unaware that because of the negative impact on site visitors, such sites cannot achieve meaningful business goals as well as more mundane sites. It's no coincidence that no major web site in terms of traffic or sales volume looks like it was designed by a graphics designer.

Selling more products, services or ideas is such a high level and universal goal that it's not particularly useful in guiding anyone towards the specifics of web site design. It is however important to never forget the ultimate goal as more specific goals are set.

As an example, suppose someone says it's important to make a web site attractive. It's worth asking why. Does this necessarily help sales? Is this an assumption or is it supported by some empirical evidence?

With my arts background I'd say of course its desirable to make a site attractive if everything else is equal. The problem is that everything else never is equal. If making a site attractive is at the expense of other desirable features such as fast download speed, it may not be as important as many are inclined to think it is. If there is in fact a trade off between these two attributes, it's also worth remembering that download speed can be measured with some precision where there are few attributes more subjective than attractiveness.

Attracting and Keeping Appropriate Visitors

In trying to formulate more specific goals than "selling more" one thing is certain. No web site can sell anything to someone whose never been there nor can a sale be made if a potential customer doesn't stay around long enough to complete the purchase. For the purposes of this discussion please keep in mind that when I use customer and sale that I'm using these in a very broad sense which is definitely intended to included the communication of ideas.

To make more sales on the web, a site needs to attract visitors, keep them for meaningful amounts of time, and get them to come back. If it cannot do these things, it will never be successful. A web site needs to attract the right audience. A web site could never succeed selling luxury automobiles to juveniles or heavy metal music to senior citizens.

Content Is Essential

There is no formula that guarantees attracting or holding an audience. If there was, someone would get rich selling this to those who would then get rich building the successful sites according to the formula. There is one thing that almost everyone who has commented on the subject agrees on and that is successful web sites have content or more specifically good content. That might be the right mix of price, selection, service and convenience or it might be useful, timely and accurate information.

Without good content, no amount of design or organization will bring and hold visitors. With great and unique content, visitors will tolerate some very poor site designs. If your content is good but not extraordinary then you have to wrap in a site that makes it easy to find and use or your competitors will.

Web professionals can't tell their clients or employers what good content is. That's what the clients or employers should be the experts in. Each business or association should have it's own mix of products, services or information that has value to an audience which the organization should understand. What the web professional should do is to insure that their client makes effective use of their resources on the web by doing things that bring audiences to web sites and avoid doing other things that keep audiences from coming to or returning to web sites.

Some Points to Consider

Here I'm not going to try to present a comprehensive or systematic list of do's and don't's but rather focus on what triggered the redesign. As GeodSoft.com became nearly ready for search engine submission, I began researching search engine submission and learned several things which prompted additional design changes and this page describing those changes. Several items, not necessarily directly related to search engines, triggered the redesign. The key points were:

1. Reducing the number of navigation aids and other site wide elements before the begining of the main text helps in search engine placement.
2. Consistency between page title, meta keywords and descriptions and the first few hundred visible words helps in search engine placement.
3. Users consistently ignore all the standard page elements and go directly to the unique page content.
4. Most users don't know where they are on most sites.
5. The most important page characteristic is download time. Faster is better

Five has long been a point I've made whenever I had the opportunity. Since it has been a key page criteria from the earliest designs, it did not actually prompt these latest changes but can never be forgotten when making web page design changes. It can't be over emphasized.

The others were to varying degrees new or less familiar. One and two are really different ways of saying the same thing. Three was new as stated but quite consistent with the proposition that it is desirable to get as much content as possible "above the fold" or within the area that displays when a page is first loaded without having to scroll to see it.

From my earliest designs, I've used color change to indicate the general area of the site you're in. This is not immediately obvious and if three is true, most users aren't paying attention to it anyhow. Since the last redesign, I'd been thinking about indicating current area and page in a manner similar to the way Yahoo does it so you always have a visual indicator where you are in the site hierarchy. Because the indicators are also active links, you can click at any time to move up to any menu page between your current location and the home page.

Every new page I've designed for the past three years has put the navigation aids and standard page elements at the top and or left of each page. This works against the first four points. When a search engine scans a document and the standard components are at the top or left, all the navigation aids and standard pieces come before the main content.

Thus, much standard visible text separates the title and tags from the actual page content. Carefully chosen keywords in the meta tags don't match well with what the search engines see as important page content. If your standard components are extensive they may use all the visible text that the search engine treats as important.

You also have no control over what your search engine listings look like when your standard components are above or to the left of the unique page content.

Accomodate Diversity

Virtually from the day I learned HTML, I've been a proponent of HTML as a page structure description language and not a page layout language. I've always tried to make my pages adapt gracefully to the widest possible variety of browser window sizes and shapes and variable monitor resolution. The more of the top and left used for standard page components, the more likely a user is to need to scroll both vertically and horizontally. In small browser windows, the standard navigation aids remain visible while the contents the users have come for is off the screen.

Not only have I tried to accomodate different browser window sizes but I've also tried to accomodate text based browsers (I periodically test with Lynx) and the visually impaired. With the standard top and left navigation aids, even if they are text based or have good ALT tags, there is a large amount of non content material that precedes the actual page content.

In all my designs the site map can grow quite large in the lower levels of the more content rich sections. With the previous design and the Lynx browser, page specific content didn't typically appear until the second or third screen of each HTML document, in the areas with the larger site maps. These standard components would also present similar obstacles for screen readers for the visually impaired since screen readers access the pages in a linear manner. Accessed this way the top and left come before the page content.

Step by Step

I didn't do a single redesign but rather several related but separate steps before arriving at the current design. The first change was to switch the left and right columns to place the standard navigation aids on the right.

Less important links were removed from the page tops. Terms of Use is at the bottom of every page and in the site map and the Privacy Policy is in the site map. Further these pages come at or near the top of the search results if you search for them. The Book doesn't exist yet so was just a place holder wasting valuable screen space. The Sample Site won't be of interest to anyone unless they are seriously considering me as a consultant. The site map entries and small blurb on the Home Page should be sufficient for those who may be interested. It didn't seem necessary to have a link to the Home page while on the Home page.

This left three links out of an original eight, that I thought would be of the most interest to site users: the Style Sheet section, What's New and About GeodSoft. Some visitors may not be interested in the main page of "About GeodSoft" but that is a primary reason for the site, so it will always be given some prominence.

My capsule biography was moved from the Home Page to the About page and replaced with short descriptions of key site features that may interest a wide audience.

Briefly, the three remaining links were left at the top of the page but were then moved to the right side standard search and navigation bar. They were replaced by a variable set of links starting with Home and followed by links to the menu pages between the current page's location and Home, such as "Home > About > Making > color.htm".

Next these were moved to the top of the right side search and navigation column. This move was primarily to reduce the amount of standard text not directly relevant to the current page that will appear in most search engines as the page description.

This left only the logo and site title as a standard page header. Thus the site title, which at the time of this writing is simply "GeodSoft Website Consulting", is the only visible text before the page specific content. As such, it should begin most search engine page descriptions and be directly followed by the first page specific header and some of the first text paragraph.

In addition to the redesign, I've also been changing page content on many of the more important pages. I've often added a one to three line summary, the first part of which should now appear in search engine results pages. Even menu pages that have started with a list of links have had these brief descriptions added before the links. Over time, I'll try to revisit every page with significant content or that I hope might show in search engine results. In each case I'll ask myself if the page will show well in a search engine results page. If the answer is no then the page contents will be adjusted accordingly.

Most of my objectives were accomplished at this point but the page top was now a rather large expanse of mostly empty dark blue. I put the logo and site title inside what appeared to be the page text content box and liked the result. The overall page appearance was further simplified. More important, the standard search and navigation column was raised by what had been the height of the page header bringing approximately one more element into view regardless of the browser window size. This did require a logo with a different background color.

At some point the standard type size was increased from -1 to the default size. I thought the -1 looked just right on my PC but had been aware that it was uncomfortably small on some browser and monitor combinations. Still, the standard size just looked too big to me on my PC. When I read that some search engines won't index text smaller than the default size, that settled the issue and I increased the -1 fonts throughout the site to the default size. Once I got used to the result, I had to admit it was more legible on all browser and monitor combinations.

Browser Window Sizes

Besides moving page content around to get the unique page content as close as possible to where both users and search engines can quickly use it, several adjustments were made to the way the pages adapted to various browser window sizes and proportions. Previously all widths were as dynamic as possible allowing the browser to fit content based on what was present and the browser spacing defaults. The text field in the search form and platform graphics were fixed width elements that could not shrink. With these on the left, the text cell with the page contents would shrink as much as it could and then scroll out of the browser window to the right.

Flipping the left and right columns immediately changed this so that as window sizes shrunk it was the standard search and navigation components that scrolled out of small browser windows first. This was not sufficient. The one negative in this redesign was that the standard search and navigation column gained more content and had to be widened.

The left column, now mostly text, would compress until the longest string of characters with no spaces established a minimum width. Each page had a different minimum width depending on its specific content. Typically the left column would squeeze until it was too narrow to be practical to read.

To create a standard minumum column width, I used a long row of HTML, non breaking spaces (" "). This worked but getting a satisfactory minimum width was pure trial and error. Subsequently I used a wide, one pixel high transparent .GIF image. Setting the image width allowed the minimum column width to be set directly to any value desired. 350 pixels was used which allows for approximately the number of words in a newspaper column.

At the other extreme, a full screen browser on a high resolution monitor created lines that were too long to read comfortably. By placing a fixed width on one of the table cells, Internet Explorer (IE) used this as a maximum width for the cell and enclosed table. Netscape Navigator completely ignored this width attribute. Thus, over a very wide range of browser window sizes, the text column that is each page's primary content is always fully visible on the screen without scrolling and is neither too long nor short to read comfortably. (With Netscape, in very large browser window sizes the lines become too long.)

In this newest design, GeodSoft.com is actually usable in a browser window only 400 pixels wide (outside dimension). Starting from about 400 pixels where a sliver of the search and navigation column is just visible, as the browser window is widened, the text column remains the same width and more of the search and navigation column becomes visible. Once the full width of the search and navigation column is visible, the text column gets wider as the browser window grows in size. Up to a certain size IE and Netscape are resonably similar. Beyond 600 pixels in IE, the text does not get any longer but the right margin of the left column grows. In both IE and Netscape, after a certain browser window width is reached the right column also begins increasing in width.

How Standard Can You Make It?

Now that nearly all the links were over white backgrounds, I was able to let them all revert to the default colors for links, improving GeodSoft's interoperability with other sites. One of the other points I'd encountered in my research is that all users spend more time at other sites than at yours. To the extent that your site works like others, users have no learning curve. The more ways it differs, the larger the learning curve. Many users won't spend time learning to use new sites and simply move on to other sites if it's not immediately obvious how to use a new site.

The only feature on the GeodSoft.com site that is not entirely standard is that the links are on the right and not the top or left. If the browser window is narrowed so these are hidden, most of the main pages can be negotiated as traditional HTML pages that preceeded "standard navigation aids". They are just text with links. Some pages have sets of links at the top like a traditional menu page. Others require moving into the text to find links to related matter.

Since the site as a whole was built with the expectation that standard navigation aids would be the primary movement mechanism, not every page is set up as a traditional HTML menu linking to lower level pages. To reach some areas conveniently the navigation aids on the right are needed but unless an unusually small browser window is being used the standard navigation aids are visible. In a full screen 640 x 480 browser window the text column is a comfortable width and the navigation column fully visible. Anyone using a smaller window will be used to scrolling and I know of no site that works as well in small browser windows.

It's my hope that this design is a zero learning curve site design. Those who arrive at the home page will be able to reach the major areas without recourse to the navigation aids. Those who enter other pages via search engines should have the content they have come for immediately present, and if they stay to read, will often soon encounter additional relevant links. As a practical matter, nearly everyone will be using a browser windows size that shows the entire search and navigation column. The links are entirely standard and will show in the default underlined blue which changes to purple after the link has been visited. I don't see how the fact that they are on the right could present any meaningful usability issue.

The only feature that could possibly confuse anyone are the previous and next links that appear in those areas that have sequential sequences of pages. Since these areas also open with completely conventional hierarchical menus of links, the previous and next links should merely be a convenience feature for the more advanced user. Once a user has focused on these links, the ones near the page tops can be used to very quickly scan an entire area reading only the first paragraph or so of each page. Those who actually read full pages will find convenient links at the bottom of each page to the next and previous pages.

Regarding the placement of the search and navigation aids on the right, GeodSoft is not the first site to do this; I have seen a few others. Persons from most western cultures are used to reading left to right, top to bottom and expecting contents and menus at the begining of an area. We are so preconditioned by years of print experience, that few have thought about whether this really makes good sense in a web context. I think it's clear this is an area that the print metaphor does not and should not apply and hinders web design efforts. See also The Myth of Electronic Publishing.

Hopefully others will spend a little time here and see the obvious advantages of clarity and usability in breaking with what is currently a convention of web page design. Within a year or so I think right side navigation aids and global site features will be common place. The biggest obstacle will be that most sites simply don't have the management tools to change their sites in such a fashion without a massive amount of work.

Top of Page - Site Map

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in http://GeodSoft.com/terms.htm (or http://GeodSoft.com/cgi-bin/terms.pl). These terms are subject to change. Distribution is subject to the current terms, or at the choice of the distributor, those in an earlier, digitally signed electronic copy of http://GeodSoft.com/terms.htm (or cgi-bin/terms.pl) from the time of the distribution. Distribution of substantively modified versions of GeodSoft content is prohibited without the explicit written permission of George Shaffer. Distribution of the work or derivatives of the work, in whole or in part, for commercial purposes is prohibited unless prior written permission is obtained from George Shaffer. Distribution in accordance with these terms, for unrestricted and uncompensated public access, non profit, or internal company use is allowed.