Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

General Design Tips

Information Overload

A significant number of users now have wide screens, although very many more still do not. With this in mind, there is a tendency among some designers and sites to try to fill all the available space on a user’s screen. We discuss the problems of page width elsewhere in the Design Tips under Layout, but there is an issue which goes beyond the technical considerations. Just how much information should you put on one Web page? How full should you try to fill your users’ screens? This is not a question to which there can be a correct answer, but as a Web designer you nevertheless have to answer it every time you design a new page or site.

Although we cannot offer a definitive answer to this, we can suggest a few things you should bear in mind. It is generally acknowledged that many people in the contemporary world are already suffering from information overload. There is just too much going on all the time, and people are having difficulty coping with it all. Sometimes this leads to irritation and frustration when they are confronted with yet more information to sift through. So don’t contribute to that overload unnecessarily. The faster and easier it is for visitors to interact with a site, the happier most of them will be, and the more successful the site will be as a result.

Generally it is simplicity and not complexity that leads to fast and easy interaction. Usability should always come before any thought of filling a space just because it’s available. Sighted users should always be able to get a good general impression of a page with just one glance – but this requires adequate spacing of elements rather than cramming as much in as possible. It should be possible to see exactly what’s going on on any page without having to puzzle over it or search for something for longer than a moment. Divide textual content up into chunks and make sure each chunk is presented with a clear heading or distinguished by other obvious means (like a different coloured background, though this can be problematic too). Use a visual hierarchy to show the relative importance of the elements on the page, by means of size, font weight, and so on.

Omit everything superfluous. If your text can be made more concise without loss of essential content, cut it down. (There is an unbelievable number of words published on Web pages, but how many of them are worth reading?) If you have images that do not really serve a useful function, get rid of them. (Naturally if the purpose of a page is to display images, then their function is simply to be seen.) If you have to carry advertisements on a page, try to place them so the ads do not interfere with the main content and the main content does not interfere with the ads. (You may not always have the final say on this.) Always put player controls on video and sound; don’t force your visitors to watch or hear something they would rather not. If time-based media does play automatically there must be an obvious means of stopping it.

If you have a large number of items to present, which happens frequently with e-commerce sites, contributory sites, search engines and others, then you should always give the user some control over how many items they see on one page. This of course will be determined by how many items you have available to display. For example, if a search on an e-commerce site returns 40 items, it is possible that the user will want to see all 40 on one page, and scroll down. Or they may wish to only see 10 at a time. In this case you should provide options so that the user can control how many items are displayed per page. But if a search at a search engine returns 437,000,000 results (the number returned for a search on “web design books” at Google today), you do not offer the user the chance to view them all on one page. Even in this case, however, it would be appropriate to allow the user to choose between a range of sensible options (20, 50, 100,…).

Finally, don’t cram too much onto each page. A site can expand to accommodate all your material. Although it’s said that users don’t like to click, it is not only simpler but also much quicker to click for another page than to try to sort through an excess of material on a single page.

Server Logs

You can glean a lot of useful information from the data recorded in the server logs for a Web site. The raw logs themselves are hard to read and navigate, but most hosting providers offer summaries and other reports, presented in a more readable way. If you are hosting your own site, or your hosting provider does not offer these summaries, analog is a free program for analyzing log data and presenting summaries.

The log summaries will enable you to identify problems with your site, such as missing files or broken links, to assess the volume of traffic, and to see which browsers visitors to your site are using, so you can decide whether you need to support older browser versions. The log data is derived from information sent in HTTP requests, so what you can learn from log reports is limited to what can be derived from that data. You cannot, for example, obtain an accurate count of the number of different people using your site (and don't trust any software that claims to tell you this). Log analyzers often summarize the countries in which visitors to the site are located, but although it may give a broad picture of where people are coming from, this data is unreliable, being based on the IP addresses and domain names of visitors computers, which are not physically tied to specific locations.

One of the most interesting pieces of information you can find in log files consists of the search queries that people made to reach your site. Knowing what people are looking for and why they are coming to the site can help you improve its content as well as its visibility on the Web, and encourage more people to visit. Google Analytics is a free service provided by Google that focusses on tracking visitors for this purpose. Using it entails adding some JavaScript code to every page you want to track, but if you are prepared to do so, the service will generate charts and analyses that show how visitors are finding your site, and what they do when the visit it.

Software Tools

Choose your tools carefully, you will be spending a lot of time with them.

You must determine priorities when deciding what software to use for the various tasks a Web designer must undertake. Is your top priority becoming employable in a design agency? In that case, you must be familiar with the industry-standard tools. In particular, if you have anything to do with bitmapped graphics, you must know Photoshop, even if you would rather support an Open Source project such as Gimp instead of paying a substantial amount of money to Adobe. Similarly, you are likely to find it easier to get a job as a Web designer if you are familiar with Dreamweaver than if you have only used Nvu or Freeway. This applies to freelancing as well as full-time employment, as you will often need to fit in with a team, or provide your work in a form that can easily be taken over by others. You might also have to work on a project somebody else started, and you will need to be familiar with the software.

If you intend to run your own Web design agency you have more freedom, and should choose the tools that serve you best, provided they enable you to fulfil your contracts. (For instance, a client may provide you with original artwork as Photoshop files, so you need to have software that can open such files.)

You should always remember that, if you are self-employed, the packages you use for creating Web pages are essential to your livelihood. Don't cut corners and use free software or, worse still, programs that are designed for consumers and other amateurs, because you don't think you can afford professional tools. If you are a professional, you will have to find the money. You will also have to invest time in learning how to use the tools to their full potential. A little effort in mastering the advanced features of a program can save you many hours later on.

Specialization

Anybody who reads all of Web Design: A Complete Introduction will find some bits more interesting than others, and feel more able to pursue some aspects of Web design than others. Naturally, if you are good at programming but don't have a very good visual sense, you will want to specialize in server-side programming and not in layout design, and vice versa. This is fine, and most design agencies will have room for specialists, but it is important not to let specialization turn into narrow-mindedness. Web design is perhaps unique in the way that visual design and technology are intimately combined in the creation of pages and sites. This means that specialists must be able to talk the language of other specialists, and to appreciate their concerns and their work. Graphic designers cannot just ignore the way that browsers display pages, and insist on pixel-precise layouts and specific fonts. Programmers cannot expect visual designers to come along after the programming is finished, and make everything visually appealing and usable. Specialize in what you are good at, by all means, but know as much as you can about every aspect of Web design, and respect the knowledge and ability of other types of specialist.

Third-Party Code

You can't always maintain complete control over what goes into the pages on a site that you create. The Web is interconnected, and its interconnections go further than hypertext links between pages. Sometimes, in order to take advantages of services, you need to insert markup into pages, which has been specified by a third party. For instance, if you sign up to the Amazon affiliates programme, in order to earn commissions on sales you must add a code fragment given to you by Amazon. Similarly, to take advantage of Google Analytics, you must paste in some JavaScript supplied by Google. These third-party bits and pieces of code may not always be written to the same standards you work to yourself. For example, some of the types of Amazon affiliate links use the iframe element, which is not part of the strict DTD, so any documents you have written that declare XHTML 1.0 Strict as the DTD will fail to validate if this code has been added. Frequently, third party code will be HTML, not XHTML, so you may have to tweak it to maintain the validity of your documents. Clients are liable to insist on features such as this, if they believe that they will bring in revenue, so you must be prepared to live with them. Always inspect third-party code and clean it up if necessary.