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
- Changes Not Esthetic
- Underlying Goal
- Does Pretty Matter?
- Attracting and Keeping Appropriate Visitors
- Content Is Essential
- Some Points to Consider
- Accomodate Diversity
- Step by Step
- Browser Window Sizes
- How Standard Can You Make It?
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
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
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
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
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
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.
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
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
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:
- Reducing the number of navigation aids and other site wide elements
before the begining of the main text helps in search engine placement.
- Consistency between page title, meta keywords and descriptions and
the first few hundred visible words helps in search engine placement.
- Users consistently ignore all the standard page elements and go directly
to the unique page content.
- Most users don't know where they are on most sites.
- The most important page characteristic is download time. Faster is
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
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.
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
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
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
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 -
Copyright © 2000 - 2014 by George Shaffer. This material may be
distributed only subject to the terms and conditions set forth in
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