"Linux Gazette...making Linux just a little more fun!"

Web Page Design under Linux

By Matus Telgarsky

The "web" started out as a small project in which data was to be easily accessed by different people. In modern times, the web has filled the role of a worldwide storehouse of data and communication. Most companies have a location with which they may now be accessed on the internet. Everybody and anybody has a web page nowadays. A good web page can captivate the readers and relay information easily. Remember; there are 2,000,000 other web pages discussing a topic identical to yours; but you want to attract people with a well laid out web page. If done right, you can even get people who do not know you interested about you. This article will outline how to create an attractive webpage under the best of OSes, Linux.

Introduction to Web Page Design

Building an informational and interesting web page can actually be difficult. First off, a web page must be aesthetically pleasing. It sounds kind of funny, but that is the plain truth. People will enjoy what they are reading if what they read is well laid out. Also, a web page cannot suck up too much bandwidth. You want to appeal to many people; not just those who have an OC3 to their house. Sometimes it may be nice to offer a higher and a lower bandwidth version of your page. If someone looking for information comes to your page and has to wait a long time for it to come in, they will leave. Also, eyecandy can be bad. Two thousand little things moving on a screen and sharp bright colors will distract and more importantly annoy the reader. I know that if I go to a page which annoys me or is too slow, I will go to the next that I found! Lastly, be expedient and terse. Modern HTML provides many splendid ways to provide data in a small clean manner. For example, tables look really nice in newer versions (see www.gnome.org for a nice example). Unordered and ordered lists are an easy and effective way to lay out info. Well those are the simple basics; now let's get to work.

Editing the HTML

A true web page is made by hand. If you wrote a cgi script which cranks out html, it was all done by hand (and if a computer did it automatically, it was most likely incredibly inefficient). The html should be indented and spaced for clarity. Important however is to have a program with which to edit HTML, and linux offers many.

A editor for html is vim. The newer versions automatically detect what type of file you are editing and will load in key words accordingly. Vim will automatically color code certain words, and with different colors, alert you to some mistakes, etc. Vim can be attained from www.vim.org, and some neat mods for it can be received from ftp.mandrake.net. Another editor is Xemacs. Xjed also does the job. Both can color code and do all the other nice tricks, all in an intuitive and attractive X interface.

HTML editors may seem a superficial thing, however they really help in reading code, understanding errors and building web pages quickly, efficiently, and cleanly.


A web page needs graphics. I don't mean gaudy backgrounds and huge logos; I mean images which mesh with the text and other aspects of the web page seamlessly. Once again, linux offers many ways to create, edit, and view graphics.

Simple graphical elements may made with xpaint and played around with and viewed with xv. For the real stuff however, one needs the GIMP (if you don't have it, run to www.gimp.org by all costs!). For those who are unfamiliar with the GIMP, it is the free photoshop for Linux. Most photoshop users will agree that this free software app is easily better than photoshop. And it runs on Linux. In any case, with the GIMP, logos, transparent images, animated gifs, and a million other things can be made. With the GIMP, a background that looked too caustic can be modified to be perfect. An image that just doesn't seem to fit can have the edges faded into transparency and other neat tricks. The GIMP is the comprehensive tool with which to create attractive web page graphics. For some creative ideas of what you can do with the GIMP, refer to www.gimp.org, contest.gimp.org, and to some older linux journal articles.

Graphics must be made to mesh seemlessly with the text and other information in a web page. With the GIMP and other tools, professional quality graphics can be made quickly and easily. Remember; people will stay at that pretty homepage, and if you create nice graphics that go well with the rest of the page, than you have a winner.


Other areas of multimedia are also common on the web. Animations can be made with the GIMP, and viewed with xanim. The use of midi seems to be dying down and so really doesn't seem important. It bugs a lot of people, anyway.

A note on backgrounds. Don't make backgrounds that hurt peoples eyes, are 2 meg jpegs, or just mess things up in general. Sometimes good backgrounds can be a very simple pattern (slashdot.org, just plain white). Backgrounds should be interesting, but should not render the text unreadable. Newer versions of HTML can make tables look very pretty; one approach taken is to have the text in a table on a background (www.gnome.org). Remember; if people can't read the page, they'll leave! One of the reasons why slashdot.org is so popular is because it is very beautifully and easily laid out (kudos go to Rob). A rule of thumb is to have a background which is just one color or an image without much color variation. One idea would be to emboss what you wanted to use as a background and then play with the color balance to give it the color you want. But this isn't absolute; don't get me wrong, you can break this rule, it is just that this is a rather safe approach if nothing else seems to work. Backgrounds are actually an extremely tough issue in web page design.

As far as browsers go, there are many possibilities. Netscape/Mozilla is pretty much the staple now, especially since it is free and source code is distributed (cheers). KDE also has a pretty nice one. Many are being developed for GTK/GNOME, and can be looked up at www.gnome.org. Even though they are "in development," don't be scared to use them; they will definitely make up their shortcomings by being twenty times faster than netscape.

Experiment! It's amazing how many ways there are to create informational and well outlined web pages! A few examples of good web pages are www.gnome.org, www.gimp.org, slashdot.org. Notice that in all of these there are no readability problems, no nuisances on the screen, terseness, etc. If you notice an HTML trick you like, check out the source code and note down the page (bookmark it).

The End.

So now you are ready to make neat wepages fast, right? Right. Always keep the basic rules in your head. Remember that you want people coming to your page. Necessary grpahics and text editors are easily and freely available for linux, and browsers to view your products with shouldn't be a problem. Above all else, have fun, make a web page you like, and ... use Linux =).

Copyright © 1999, Matus Telgarsky
Published in Issue 39 of Linux Gazette, April 1999