Web Design Principles

I make no claim that this is the best-designed website in the world. I would need far more time, and much better tools, to be able to ensure that every page complied with all the relevant accessability standards, guidelines and good practices. But I do try to focus on getting the key basics as right as I can.

I am, however, both a seasoned IT designer and a frequent user of many other sites on the web, both commercial and enthusiast-run, and I know what makes a site good or bad from my own perspective as a user. The most important things, in my experience, are the following:

1. Minimise the clicks required to surf. A key principle of good user interface design is to keep the number of clicks, keystrokes or other actions needed to access your facilities to the absolute minimum. This, incidentally, is why I eschewed the commonly-used thumbnail indexes when designing my photo pages. Most people know how to use scroll bars, and now that mouse wheels are all but ubiquitous they offer an easy means of browsing longer pages. Though I acknowledge this means dialup users have to download quite a lot of data to see some pages here (see (5) below), most browsers now optimise this so the images at the top are loaded first, and this style is almost certainly more convenient as the majority of web surfers use broadband links.
2. Forget 'click here to enter' Intro pages. This is just a specific case of (1) above. Few things are more annoying, when I'm in a hurry, than arriving at a homepage and finding I have to click another link to get to where I originally wanted. Sure, many people, particularly younger surfers, do appreciate nice videos or other introductory sequences. But a good number of your visitors will also be people like me for whom time is an important factor. Please don't make us have to click again from an Intro page to access your main site contents. If you want a nice snazzy intro, put it on a separate page with a button or hyperlink from the main page so that anyone wanting to view this can do so without delaying those with different priorities.
3. Support large screen sizes properly. Different people have different screen resolutions on their monitors, and some prefer to view pages with their browers maximised and others not. Please design your site, as far as possible, to make full use of larger window sizes. My PC has a large (19") monitor which I run at 1600x1200 resolution - quite important for when I am doing image editing. It is really annoying to visit a site and find it has been designed to run at a fixed, smaller resolution and duly confines itself to a small block in the middle of my screen, often with miniscule-looking text. This not only strains my eyes, but reduces the amount of content you can fit onto a single screen. At least two websites I regularly visit have been "revamped" at some stage into fixed-dimension styles, and in both cases I far preferred the original versions!
   This is also the first good reason why video-based technologies like Flash are not the best platforms on which to base an entire site (see also (4) below).
4. Use animations with caution. Whilst videos and other animations are often a great way of communicating, there are many people, myself included, who find any (unsolicited) flashing items on web pages really annoying. This is particularly true if the item is irrelevant to their reason for visiting your site. Worse still, people with certain medical conditions can quite literally be made ill as a result of flashing items. Far better to offer surfers links they can click voluntarily to display animated content. This is the other main reason it's not smart to implement your whole site in Flash.
   Where you are including animated content (above and beyond animated GIFs), Flash is probably the most widely supported standard, followed by Windows AVI format. Avoid QuickTime if possible as many surfers won't have the plug-in, and some of those won't even be able to download it if they are surfing from work and their PCs are 'locked down' by their employer's IT provider.
5. Remember that not everyone has always-on broadband. Though broadband is steadily spreading, outside the USA a good number of home Internet users still only have dialup connections, and this is likely to remain so for a few years yet. And don't forget a lot of mobile users with laptops can only use broadband connections from some places, such as their base offices. So don't go overboard on extensive graphics or other in-line objects for solely cosmetic reasons. Small background tiles, a logo or two and a few nice-looking touches are fine, but try and do as much as possible in CSS and keep a keen eye on the overall download sizes.
   There is a trade-off between supporting broadband and dialup users, this is something I regularly agonise over myself (see (1) above). If the graphics are actually the principal content of the page, you can probably push it into the hundreds of KB if this offers compensating advantages to broadband users - but give it careful thought. A 56K modem link corresponds to about a minute for every 300KB.
   See also (8) below re supporting offline participation in forums.
6. Use Frames with care. If your site uses Frames, with only part of the window allocated to displaying your main content pages, think about whether other webmasters may want to include links from their sites to individual topics of your own. If this is likely, for example if yours is a directory portal with pages for individual bands or topics, then ensure that the main URI in the user's browser changes each time a new topic is selected.
7. Avoid changing the addresses of your content. Following on from the preceding point, if you are doing a major re-design of your site, ensure that the URIs of each topic don't change between versions. Otherwise you may find a large number of irate webmasters out here with broken links from their site onto yours!
   The most recent convention is to leave the file/object type extensions like ".htm" out of page-level URIs completely, though this isn't something I've yet been able to achieve for this site. For example, this page would just be addressed as http://www.roscalen.com/musings/webdesign, leaving the server to fill in the ".htm" extension automatically, just as it assumes the main file in a directory is "index.htm" or "index.html". This allows you to change your site in future to utilise different object types without breaking links made from other sites.
8. Design communication facilities carefully, and recognise the importance of email. Design of good messaging features seems to be one of the weakest areas of many websites, even professionally-built commercial ones. This has happened partly because of the hype that has been applied specifically to "the web", giving it undue prominence as compared to complementary technologies such as email. The following are the main areas in which I often find websites wanting:
   • Don't expect surfers to visit your site every day just to see if something new was added. Offer them an email news list to subscribe to. While some visitors will be happy to check back regularly, others like me visit hundreds of sites every week, and just don't have time. Unlike email, web is not a 'push' technology, so offer surfers the choice of using one.
   • Please don't invent yet another web-only discussion forum. Interactive discussions, and the online communities they form, are one of the greatest treasures of the Internet. But the current fashion for every other site to have its own internal web-only bulletin board simply isn't sustainable. Again, busy users simply don't have time to visit potentially hundreds of sites to join discussions. At the very minimum, if yours is an online community portal where interactive discussion threads between users is a key feature, allow users to submit postings via email as an alternative to using your web interface. Otherwise, you will significantly inhibit the growth of your communities. In the past I have seen new web-only discussion forums destroy lively online communities that already had email chat facilities, because the users then split into 'webbies' and 'mailies' with neither group retaining the nececessary critical mass. In many cases, purpose-built sites such as Yahoo! Groups offer the best solution as they offer the choice of web or email participation. I am one of many who finds it only really practicable to join in email discussions. Not only are the messages then delivered to me in a single place, but I can also compose postings offline whenever it's convenient. This is not just for the benefit of dialup users - mobile laptop owners also need to be able to do as much as possible without being connected.
   • Don't send "lazy HTML" emails, ie messages whose HTML content includes embedded images or other objects that have to be downloaded from your website (rather than being included as attachments in the email itself). Apart from being inaccessible when reading email offline, commercial email clients like Outlook no longer display these images by default anyway, as they also pose security issues.
   • On the other hand, don't include so many embedded graphics that your emails become excessively large. About 100KB is probably the maximum acceptable size for email circulars to existing customers who have opted in to receiving these. Same principle as with designing your website to be friendly to dialup users.
   • Don't send HTML emails containing scripts. They will not get run. Again, they raise security issues.
   • Allow recipients of email circulars to reply or unsubscribe by email. Again, it is really annoying to receive someone's announcement, and be reading it offline, only to discover that to respond or unsubscribe I have to dial up again just to visit their website. This is probably the commonest single issue I have with commercial websites - and more than a few have lost business from me as a direct result of it. If I am having to go on the web anyway I might as well use Froogle, or something similar, to see if anyone else is offering the same product at a better price!
   • Always email everyone a copy of his/her submission if your site uses web forms as its means for users to contact you. Otherwise, it's maddening for organised people who want to keep records of their correspondence.
9. Don't stop surfers saving downloaded samples for later. If your site is offering free samples for download, for example excerpts from your songs, don't make it hard for surfers by designing your site so these can only be played in a 'captive' player which tries to prevent them saving the files on their hard discs. They simply may not be able to play them immediately when downloading. I am a case in point: I have a broadband connection at work, but this is in an open-plan office where playing sounds just isn't on. So forget the clever technology, such as streaming media, and just give me a plain hyperlink to an MP3 file (or whatever). Then I can simply right-click the link and use "Save Target as...", and play the sample later at my own convenience.
   After all, if you're offering samples intended to tempt people into buying CDs or other products, I imagine you'd actually like as many people as possible to be able to see or hear them. So why make it hard for surfers to copy these files around freely?
10. Include the pixel dimensions of all grapical items in the HTML tags. This allows the browser to determine the final page layout as soon as it has loaded the page, and thus position the text at its final destination without waiting until the graphics (or other embedded objects) have been downloaded. This prevents the irritating experience of text jumping around each time another object is loaded because the browser has to keep re-computing the page layout.

Further Accessability Guidelines that should be followed to ensure your website meets key accessibility criteria for people with disabilities - and for users generally - can be found at www.w3.org/TR/WCAG10/.