Design Tenets and Thoughts
ended up trouble-shooting and giving feedback on several websites
over the years. Not my full-time job, but enough of a sideline that
I've formed some opinions. Several things seem to come up each time,
so I've listed them here. They aren't radically insightful or anything,
and most of them probably come up in chapter 1 or 2 of a decent
web design manual. If they are helpful, great.
"You aren't doing that right..." - The greatest thing
working against web designers is that many feel that the way people
will deal with their website will be in exactly the manner they
do. But, visitors to your site will rarely, if ever, move through
it in a "logical" manner, instead following whims, tides,
different threads and shiny objects. Therefore you need to do a
couple things - (1) let people know where they are and (2) give
them the opportunity to get where they want to go next. In two words,
your website must be flexible and robust. That means it should have
a consistent way of getting around, so if I follow someone's link
and start in a deep and obscure section of your website, I ought
to be able to figure out where I am and how to go somewhere else.
Otherwise I'll just jump away.
Avoiding "Dead Ends" - The most common issue on most
websites - when you get down to the bottom of every page, where
do you go? I usually set up two things on every page: 1 - an anchor
tag at the very top of the page called, curiously enough topofpage.
Then I can drop in "Back to Top of this Page"
href's which will pop the user back to the top, where my tricky
navmenus reside and are visible. 2 - a duplicate set of site navigation
links at the bottom of each page - these should probably just be
a text version of the main spots on your page
There's No Place Like Home - Another convention I use on commercial
sites with a logo - use the logo at the top of the page to link
back to the "Home" page. Just put an href to the top level index
page. That way, no matter where someone is, they can always get
back to the home page. On these pages, as I haven't gotten around
to creating a logo, I just used a bold text name for Cyclofiend.com.
It appears as the lead in the navigation scheme described in the
Handling "deeper" navigation - It's nice to know where
you are on a website. I tend to set up a redundant set of links
on the top of the page, so as I go deeper, the site tells me where
I am. That way a user gets the sense of location and how to go "back"
(and not everyone uses the "Back" button on their browser,
even though you do). If you look in the upper left of this page,
you'll see a simple version. If for example, I added multiple sub-categories
to this page, I'd do something like this (each would be a live link):
Notes: Web Design: Images: Photographs: Optimizing Photos:
you would be able to click back up the thread without having to
use your "Back" Button .
Further Refinement - Use the color of your navbar to indicate
where you are. If you are using a navigation bar/menu that has "mouseover"
and "down" colors, use the "down" color to indicate
where you are. I don't have an example from this site, but an old
"personal" page here should give you an idea. You
are in the "Bicycles" section, and if you click on "My
Bikes", that reverses color to say emphasize location. Again,
this is more important as your website expands, but a good idea
to start off with this convention.
Welcome to my site - now go away - This always cracks me up
- those sites (small retail sites seem particularly fond of this)
which give you all these links to other sites (usually vendor/manufacturer
websites) on their front pages. Suddenly, I'm deep into the manufacturer's
site, with yours probably forgotten forever. Once someone finds
your site, keep them there!... Generally, if I'm sending someone
away from my site, I'll use a target="_blank"
attribute inside the href
command. That causes the link to open in a new window, leaving
your original open as well. There are other more elegant ways to
do this, but this is gets it done.
Other design tenets - Recently, I've been moving my site architectures
to folders - if you create a "products" folder, web browsers will
immediately look for the "index.htm" or "index.html" file without
being prompted. That's why you can use the link - http://www.cyclofiend.com/cc
to get to the main Current Classics page. which is http://www.cyclofiend.com/cc/index.html
It lets you reference cleaner links in emails, for example. But,
as a site expands, it helps to keep you sane - you end up with logical
nested folders which present themselves in easy to follow links
where all you have to do is lose the last "/" item to go up a level.
In my North American
Handmade Bicycle Show page, I hope to expand that over time,
so I created the nahbs folder. In that folder, there is an
index.html page which has an automatic
redirect to the 2006 show folder. In that folder is the
index.html page you see. If I add a 2007 report, all I have to do
is replicate the 2006 folder, then rename it as 2007. Then I redo
the /nahbs/index.html page to branch to either year, rather than
Less keystrokes = less carpal issues - As a practical matter,
I've been stopping the use of capitals - too many websites, and
/products.html is different than /Products.html and I couldn't recall
which I used where
Websites Look Different - Unlike printedt mediums, website appearance
varies by machine, by browser, by screen resolution and monitor.
If you designed it on a Mac, take time to look at the page through
a Windows box. (Just talk slower so you don't confuse the inferior
machine...) For example Windows uses 96 lines per inch, so your
images will render differently. This can cause somethings to look
quite different. While I'm on this, remember too that most people
have older browsers, so take a look through previous versions, if
you have access to them.
Finally - For goodness' sakes, have someone else sit down and
use your site while you be totally quiet and just watch what they
do - see what they click on that does nothing, observe where they
get stuck, pay attention to their body language - squints, pursing
of lips, shifting feet are all signs of frustration. Take notes
and redo those areas that cause problems, make graphics into links.
Then ask them what they liked and didn't like. Remove your ego from
the responses - they aren't right and you wrong. Instead they were
trying to use the site in a way you hadn't considered and were unable
to do so.
A Final Warning: Blinks, Animations, Floating avatars, Gratuitous
Music - Please don't. If you have the chops to do them well, you
probably aren't reading this.
are a million references for design and organization on the web.
This short list is a few that helped me over the years. These are
the ones which I don't see referenced too frequently elsewhere.
I'm also and always a big fan of looking at what you like and asking
why it works for you.
of the web-design (in the sense of organization and presentation
of information) sites which I found helpful was - believe it or
not - WebPagesThatSuck.com.
It's funny and presents explicit examples of what not to do. Check
- A Great Website - this is a bit dated, it seems, but has some
List Apart - for people who make websites
- more advanced stuff, but good info
Bessas is an iBob
and designer with a deft touch - check
his stuff out.
to the top of this page