I just put our new Web site online this Sunday, and since it was the product of quite a lot of thought and a few hours of HTML coding, I thought I'd pass on some of the things we considered and learned in the process.
Our previous Web site evolved, as many early sites did, organicallyShow full article
Hide full article
I just put our new Web site online this Sunday, and since it was the product of quite a lot of thought and a few hours of HTML coding, I thought I'd pass on some of the things we considered and learned in the process.
<http://www.tidbits.com/>
Our previous Web site evolved, as many early sites did, organically. We had launched MacHTTP and needed a default page, so we put one together on the spot. As time went by, we thought of additional pages we needed, so we created them and linked them in, often right from the home page. All of this was well before HTML 3.0, much less the current HTML 3.2, so there wasn't much we could to jazz it up visually while retaining the structured nature of good HTML (and avoiding Shockwave, JavaScript, loopy animated GIFs, background music, and 3-D Surround Smell). In addition, design that seemed reasonable two years ago now seems as stale as a month-old bagel and not much more edible.
So, this summer when we were driving to Ithaca, New York for our friend Oliver's wedding after Macworld Boston, Tonya and I went over the site in our minds, jotting down notes about what pages we had versus those we wanted, what we wanted our site to do versus what it did then, and so on.
That sort of a brainstorming session is a necessity in any good Web site redesign. Think carefully about what message you're trying to convey, and what visitors to your site both expect and will want to do. In the case of TidBITS, it seems quite clear that we publish a weekly electronic newsletter, so if someone visits our Web site, they're probably interested in finding out what's in latest issue. In the past, that required at least several navigational clicks, so we placed a copy of the issue blurb and table of contents right smack on the home page. Along with those two items, we created a simple Web form to make it easier for people to subscribe to the TidBITS mailing list and a line of links to provide quick access to the translations of TidBITS into a variety of languages. Again, those two items seemed to answer the question of "What would I want to see when I visit the TidBITS Web site?"
Those then are the primary elements of our home page, along with a TidBITS graphic and a plug for my book. However, since visitors' questions don't stop at "What's in this week's issue of TidBITS?" and "How do I subscribe?", we try to address other common questions as a textual navigation bar at the top of the home page. The navigation bar, which is repeated on all other pages, contains two lines. The first provides a direct link to the home page and a link to a page of links about TidBITS; the second line contains links to past issues, to a search engine for searching back issues, and to the page listing our many translations.
In the past, we had links to many of the less-important pages right on the home page, which provided too many choices to visitors and was a rather haphazard organization. The About TidBITS page one level down from the home page now takes over those duties, offering a centralized collection of information about TidBITS. If you're wondering about who works on TidBITS, how it earns money, where it's posted, or how to contact us, the answer should be an obvious link from the About TidBITS page.
On a number of pages, including About TidBITS, the page listing our translations, and the page listing the places you can find TidBITS, I adopted a "text block button" design that I feel works quite well. The goal was to avoid the confusion of graphical buttons, which are easily misinterpreted, especially by people from other cultures, and the overhead of creating and transferring additional graphics. Where possible, we stick with text (being writers, not graphic designers), so the combination of an unordered list inside a two-column table gives the visual impression of a button object with the clarity of a brief textual description (which carefully avoids saying "Click here..."). And, of course, the text block button design repeats where appropriate, unifying the list pages on the site.
Another unifying element I worked on for quite a while is the textual navigation bar. On the home page (and on the page that will provide access to TidBITS issues in the near future - it has to be merged with Geoff's distribution automation), the navigation bar is on the top of the page because we felt that placing it on the bottom tended to hide it and make it more difficult to get into the site. It's entirely likely that someone will want to find out where to get TidBITS on America Online, for instance, but will only know the URL to our home page. Placing the About TidBITS link at the top of the home page makes navigation easier. For all the rest of the pages, we felt that the user would have to read the entire page to know what was there anyway, so placing the navigation bar on the bottom of the page was more appropriate (and better graphically).
Many Web sites suffer from a lack of repeat visitors, and although I haven't tried to analyze our Web logs to that extent, I suspect that our previous site had that problem. An excellent method of ensuring that people return is to have content that changes at regular intervals. Since we have a new issue of TidBITS each week, placing the blurb and table of contents on the home page not only provides what many visitors undoubtedly want, but also gives us the opportunity to change the home page on a weekly basis, thus encouraging people to visit regularly.
I'm sure that with all that Tonya has written about HTML authoring tools, WYSIWYG and not, that at least some of you are curious about what we used. The fact is that Tonya's been extremely busy writing a magazine article about that very topic, so I went ahead and did all the work myself. I'm comfortable with HTML, but I haven't done all that many pages in the past. Even still, since I had a good idea of what I wanted our pages to look like (white background, banner graphic, text block buttons, textual navigation bar), I decided that it would be easiest for me to work in a familiar environment, which for me means Nisus Writer with its HTML macros. It might not be the latest and greatest, but it does the job and I was able to use the Find/Replace across all open files whenever I discovered that I'd screwed up the relative URL to some page in the ubiquitous navigation bar. I would have appreciated an internal link checker, since I moved a lot of the pages from the root level into a sub-folder during the redesign, and that screwed up a lot of links. Still, I never quite found time to install Adobe SiteMill, and if I've made a mistake or two, I'm sure we'll hear about them and fix them soon enough.
So take a look and see what you think. Let me know if you have some expectation of the information contained on the site that's not met, if it fails to answer a question you may have. The answer may simply be the kind of thing we don't publicize, or it may have slipped our minds when redesigning the site, at which point I'll try to add it in. We do have additional work left to do, including the constantly updated page listing all the TidBITS issues and perhaps some new graphics, but the bulk of the changes are here until they too start to harden like an aging bagel.
