Website Design Tenets and Thoughts

I've 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 next paragraph.

- 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):

Cyclofiend.com: Notes: Web Design: Images: Photographs: Optimizing Photos:

so 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 automatically redirect.

- 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.

There 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.

One 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 it out.

Jeffrey Zeldman Presents

WebReference - A Great Website - this is a bit dated, it seems, but has some decent info.

A List Apart - for people who make websites

WebMonkey - more advanced stuff, but good info

Perry Bessas is an iBob and designer with a deft touch - check his stuff out.

Back to the top of this page