A lot of people dread nothing more than friends and relatives showing them photos from their last holiday. That sort of thing gets even better on the World Wide Web. The things that you can accommodate on your own homepage: self-portraits, holiday snaps, loved ones, children - and pets, of course.
But seriously: if you place value on your pages or on your company's pages not looking unpleasant, then you can easily make sure they don't. Along with some WWW document components, that can almost be called standard, there are plenty of tips and tricks. This article is to ensure that beginners (going up to those who are to create a site for a small company) make sure they avoid the worse pitfalls and create pages that have something of your own without too much effort.
There are warnings against the biggest evils on - where else - the Internet. Sun's user interface design guru Jakob Nielsen and also several other authors have outed the worse things (see Help yourself). But first to the basics of an individual, usually personal, page; because different rules apply here to sites with lots of content distributed over lots of files.
Before starting the first Web page you have to above all clear up whether all (graphical) browsers should be able to see your own page, or whether it's worthwhile using special features of a particular product. The minimum standard is HTML, tables have now been generally accepted, but not all Web browers can display frames.
Everyone creating WWW documents should make sure that the pages can be recognised/understood without the picture material. In view of slow network connections more and more users don't even load the images at all.
There are a few things that should never be excluded: title and a heading, date of the last change, who's responsible for the page and how you can get in touch with that person. If you're using the psgml-html mode in Emacs that partially happens automatically when a new page with a .html ending is called up. The basic framework of an HTML document typically looks like this:
Graphical browsers show the text enclosed in the <TITLE></TITLE> tags in the window's frame. Therefore the title shouldn't be a long sentence, but a description that's as concise as possible. What Emacs asks for and writes in the document, lands in both the title and in a big heading displayed with <H1> (the biggest).
Search engines such as Alta Vista emphasise the page title; therefore it's important for anyone who wants to be found on the Web under a sensible name.
However, there can be variations. It's possible, for example, to automatically put the date of the last change in by server side includes (SSI) - see the following listing. With personal homepages though, that requires the normal user being able to execute commands, something that the Web master to explicitly allow.
Different heading sizes (<H1> to <H6>) can be used to divide up the document. The same applies for different types of list (<UL>, <OL>, <DL>). By and large though, HTML tags divide a document more logically, rather than to highlight details (letters etc.). Instead of marking a section of text as italic (<I>), representatives of the pure trade prefer to use emphasis (<EM>). As shown in the Tendency to layout box, things are going in the direction of author control.
There are comparisons to desktop publishing here: sample files en masse and an amateurish mix up of fonts are the writing on the wall. On the Web the following rule also applies: few changes of font type, limiting yourself to one list type if possible and not using all the header sizes lead to a clearer layout.
Even for the smallest Web projects you should be clear about why others could be interested in it, et cetera. That basically means doing an analysis before carrying out the design - something that coincidentally sounds like software development. Because there is code behind even the smallest sites: either in HTML or in a script language like Perl or Tcl. In the case of multimedia experience environments with Java applets or VRML (Virtual Reality Modelling Language) worlds that's even more valid.
To draw even more comparisons to software development: adding comments to documents (by enclosing text in <!-- and -->) makes it easy to work on them, especially when various authors have to work on them. And just like software, before publishing your own pages you have to test them and let them be tested - with as many browsers as possible.
HTML is currently still not a language which can be used to control the appearance of text right up to the last character. However, the developers of Netscape have thought of a few things for Navigator 3 which cause HTML purists to shriek but which thrill designers. These things are: font type control, vertical and horizontal spacing, for example indenting the start of a paragraph (for information about that see Tendency to layout). Even the announced version 3.2 of Hypertext Markup Language allows for a little text design. An initial can be created easily with help from <FONT SIZE=+3>
<FONT SIZE=+3 COLOR="AA0000">
Instead of AA0000 there could be any combination of hexadecimal values (the example is a medium red, as you can see above). Under Unix one of the 750 colours, most of which are listed in /usr/lib/X11/rgb.txt (like WhiteSmoke or MintCream), can be chosen, which Netscape also shows under Windows 95, but the X11 colours are generally not known. So it's better to stick with RRGGBB.
When playing around with the font colour you should take note that reading text is best as black on white (or light grey), especially when it's just more than a few words. Colourful combinations such as pink text on a green background don't increase a page's access statistics.
Robert Tolksdorf's (see his book about HTML 3 [[#literature 3]]) idea for putting any size of bar on Web pages uses a very simple method. Using xpaint (ftp.forwiss.uni-passau.de/pub/unix/graphic/xpaint) making a graphic that is only 1×1 pixel big is very quick. The shareware graphics program xv (ftp.uni-duisburg.de/pub/X11/xv) has a window for colour modification; you can modify the red, green and blue values, for example. Tools such as giftrans (ftp.uni-stuttgart.de/pub/comm/infosystems/www/tools/ imaging/giftrans/giftrans-1.11.1.tar.gz) can be used for making one of the colours transparent, so that the graphic looks as though it's growing out of the background.
A transparent pixel, on the other hand, can, if used properly, take the effect of changing text and its location on the page; above all if you make the pixel bigger. <IMG SRC="1pix.trans.gif" WIDTH=15> at the start of a paragraph causes the first line to be indented by 15 pixels (as shown in this paragraph). Using the HEIGHT attribute you can force a horizontal gap in the same way.
Text design only becomes interesting with tables. And that's using the little 1×1 pixel file (43 bytes) just mentioned too. With help of the transparent pixel, the effect mentioned above can be achieved, and the content provider can also decide right down to the exact pixel how wide the text should appear.
The listing shown above contains a table which is set to take up 100% of the viewer's width. By dividing the table up horizontally and using the transparent pixel in each outer column the text in the middle column is forced to be narrower, according to the width of the browser in pixels. In such an instance it makes sense to give the WIDTH attribute in IMG an absolute value, rather than a percentage, because as the picture is in a table cell, the design would go out of the window: every percent value given would refer to the cell.
In longer documents either the second cell (<TD>) has to contain all the text, or individual paragraphs/chapters are each in their own line (<TR>). For the latter it's necessary to add the ROWSPAN attribute to the two cells containing the pixel file, and this attribute has to be set to the value of the number of cells. With six units starting off with <TR>, the tag for the data cell would like <TD ROWSPAN=6>.
Personal Web pages are considerably different from commercial or institution Web pages. People with Web pages usually have a photo of themselves on the page. One. Because one of the deadly sins of page layout is having too many pictures and graphics on a page. And not every little picture really needs to have 256 colours just because the original image was created by a graphics artist on a Mac with PhotoShop. Less is definitely more.
One of the less sensible ideas for graphics on the Web is GIF pictures with colour runs. They are rarely good because the run with 256 colours looks like a run of autocratic colour jumps. And the thing to do instead of displaying the 50 Kbyte graphics file would be to have a smaller version of the picture linking to the acual picture (see the listing 4).
If the graphic is to flow around the text then the graphic has to be set to either left or right: ALIGN=right, for example. Some browsers (Netscape, Spyglass) recognise the CLEAR attribute for the <BR> tag which takes the effect of ending the wrapping around the image. You can also decide between left and right (plus ALL) here.
Two of the IMG tag's attributes are provided to give text flow around graphics some horizontal and vertical spacing. Without the VSPACE and HSPACE attributes used in listing 4 the second paragraph would really start directly under the picture.
Logically, if not obviously, copyright often applies to picture material and it can only be used for a not necessarily low fee. There are lots of free picture collections (see page Help yourself), but if you want to create something individual then you can't avoid creating your own graphics.
In her study ([[#literature 2]], page 177), Debra Cameron found out that the first 24 lines of a Web page shouldn't contain any links to other sites: after all, you want to keep the public at your page. In addition, in view of the size of the Web now, pages of long lists of URLs have been "out" for long time. Morris and Hinrichs ([[#literature 3]], page 63) are of the opinion that the most important things on a Web page should be in the first 300 vertical pixels.
Companies have it easy when it comes to Web content, because they want to at least introduce their own products. The same applies for universities and other institutions. Private pages should be short and concise - or actually have content.
Individuals usually provide some information about themselves: along with a photo that often means a sort of CV; really in the sense that potential employers can get an idea of what someone can do. In addition, anything interesting goes (for whoever), as long as it's not banal.
There should be no mistakes, particularly with the spelling - although such bugs crop up in every newspaper. But in contrast to there, an orthographic mistake on the Web can be corrected easily. And that should be done as quickly as possible. The same applies for foreign language texts. Nobody's perfect, but if you're producing pages in a different language, because customers can be anywhere in the world, you should find someone whose mother tongue is that language or who can at least halfway perfectly speak and write it. Mistakes like in the diagram at the side won't further any reputation.
Disappointed expectations don't satisfy any surfers. The most popular expired errors links that no longer work (after all, you can't check everything every three days) and the link that doesn't lead to what it promises. The starting page of Heise Publishing contains links which predominantly suggest references to the online articles of the respective magazine, but just lead to the hompages of c't, iX, Gateway, ELRAD or Telepolis.
|
Wrong plurals can keep coming back |
Another thing that Web authors do that gets on surfers' nerves is causing them to have to use the horizontal scrollbar to see the full width of documents too. Continual reading at the computer with continuous text is taxing. If the Web browser has to be maximised to the size of the whole screen for a single Web page to be viewable, the author of that page has done something wrong.
With text, preventing the escalation of the information to the right is easy: <BR> (forces a line break) or <P> [
] </P> (encloses a paragraph) are enough prevent the page bursting its seems due to lines being too long. The following listing ensures that the viewer breaks up the text appropriately - and after the third "Text" a new line starts; three times.
The Neckermann homepage (see right) is a good example of what to do wrong. When the page is loaded up the company logo is only partially on view (of course, you can use the horizontal scrollbar) and the racing text in the ticker can only be read by someone with eyes that can race with it.
A tiled background like on the Neckermann page is optically nice, but you don't have to increase the window to 150% because of it. The mail order company's WWW authors have sensibly worked with tables, but they've used absolute values instead of limiting the total width to that of the viewer. <TABLE WIDTH=100%> would have been one possibility, but with that it's conceivable that graphics could be distorted. After all, that 100% could represent the full width of a maximised Internet Explorer or Netscape window.
<BLINK> is evil. Likewise <FRAME>. With the former, a few short glances at a page which have implemented this mistake are enough to recognise how annoying it is that as a visitor you're not be allowed to find out the most important part of a Web page for yourself. In the second instance, that's the view of Jakob Nielsen, user interface specialist at Sun, where he publishes a column on his subject (see Help yourself).
Nielson is of the opinion that frames confuse the user, amongst other things because pages are difficult to bookmark. Additionally, no one knows anymore what happens with the next mouse click. Plus, with frames you're dependent on which Web browsers support the feature. Working with frames certainly requires exacting design. Links taking the user away from a server shouldn't display the linked page in one of the sub-frames. Instead they should take up the whole screen, otherwise it annoys users. TARGET="_parent" or TARGET="_top" in the linking <A HREF
> overcome the frames.
But they're enticing for anyone who wants to have three to five components in the Web surfer's view, and if not all of them should change if someone clicks on something. A company logo top right and a contents list on the left are classic examples of this. Rainer Klute's article has the details (see [[#literature 8]], also online in English).
Another way to predetermine the layout for a group of documents is by using style sheets. The W3 Consortium has fostered the specification for so-called cascading style sheets (CSS). They allow you to - or they will in the future, and nobody knows exactly when - determine how, for example, a horizontal rule (<HR>), a heading or every paragraph should look on all of the documents. Microsoft Internet Explorer and Amaya from the W3 Consortium can apparently work with CSS, but in reality that isn't the case. Style sheets will be covered in detail in their own article in the next issue of iX.
URLs with online introductions to Web design which don't crop up in the literature are listed on the iX server.
Literature
[1] Tim Berners-Lee; Style Guide for online hypertext
[2] Debra Cameron; The World Wide Web; Strategies and Opportunities for Business; Charleston, SC (Computer Technology Research Corp.) 1996
[3] Mary E. S. Morris, Randy J. Hinrichs; Web Page Design; Mountain View, CA (SunSoft Press/Prentice Hall) 1996
[4] Jakob Nielsen; The Alertbox: Current Issues in User Interface Design; published monthly
[5] Robert Tolksdorf; Die Sprache des Web: HTML3; Heidelberg (dpunkt) 1995
[6] Lynda Weinman; <designing web graphics>; How to Prepare Images and Media for the Web; Indianapolis, IN (New Riders) 1996; im Web mit einem zusätzlichen Kapitel
[7] Stefan Mintert; Tabula rasa; Noch nicht im Standard: Tabellen im Web; iX 2/96, pp. 152
[8] Rainer Klute; Made of frames; Netscape's specific features: frames and target windows; iX 5/96, pp. 156
[9] Hubert Partl; HTML-Einführung; Hypertext Markup Language; die Sprache des World Wide Web; Universität für Bodenkultur (Wien) 1996
[10] Ben Benjamin; elements of Web design; c|net 1996 (www.cnet.com/Content/Features/Howto/Design/)
| iX-TRACT |
|
Dieser Text ist der Zeitschriften-Ausgabe 11/1996 von iX entnommen.
iOS, Android, Windows Phone 7 und HTML5 - das neue Sonderheft von heise Developer führt Einsteiger und Profis in die Programmierung mobiler Geräte ein.
