A Beginner's Article on Web Design
Killersites Newsletter Archive: January 7th, 2004
This week's newsletter is targeted at the total beginner. I introduce some basic concepts while sneaking in a few tips for those budding web designers.
I am just putting the finishing touches on an editorial piece discussing CSS and the recent CSS movement. This article is a little different than what you typically see here, with a different style and approach altogether. It will be posted to the website in a day or two.
Finally, next week we will get back to some hard code with a 'Quick Start' tutorial on hand coding your first HTML page. This article will not just be great for people new to web design, but it will also be useful for experienced web designers who never really got their heads wrapped around HTML and the proper page structures that web browsers and search engines prefer. The interesting part about this article (at least in my mind) is that I will be presenting only up-to-date information, and steering you clear of dated practices and techniques that still plague many websites and books.
A Beginner's Article on Web Design: The Tools
Forward
My goal with www.killersites.com is to provide to-the-point information on the subject of website design and development. There are more than enough white papers and redundant recantations of the specifications; I wanted to present the ideas from the perspective of an in-the-trenches developer/designer like myself.
The technologies and tools I comment on are technologies I have used, and (many times) been abused by!
What hardware do you need to start designing web pages and web sites?
You don't need any special hardware to create web pages, just a standard computer and an Internet connection so that you can put (upload) your websites onto the web, assuming you want to get your websites on the web.
Fortunately, web design is not like 3-D animation, where you need the latest and most powerful PC's to be competitive. These days home computers are so fast that even three or four-year old PC's are more than enough to handle all your web design needs. If you're not convinced and you still want to spend a couple of thousand on a new PC, give me a call! :)
Before you go out and spend your cash consider these points:
HTML pages are just simple text documents
Web design is more or less about creating HTML pages. Html pages are just simple text documents that use special 'key-words' called tags. To make a long story short, simple text documents are so easy to create and manipulate that hand-held devices can easily view them. Oh, and just in case it's not clear, even the most powerful handheld PDA's (personal digital assistants) only have a small fraction of the power/speed of the slowest of desktop computers or laptops.
At this point, some of you are crying out that web pages are not just about text and HTML; there are images that have to be created and inserted into your pages, and we all know that image manipulation can really take a lot of juice (computer power). This is true in print work (where images have to be much heavier) but it doesn't apply to web design because images used in web pages (Gif's, Jpeg's, and PNG's) have to be made really light so that they don't take forever to download. In a nutshell, what this all means is that images only need a lot of juice if they are heavy images.
For those graphic designers out there who know print, images used in web pages (and all screen graphics, by the way) need to be reduced to a PPI (DPI) of 72 to 76, a big contrast to the usual 300 DPI when working in the print world.
What do I mean when I say images have to be 'light'?
Now that you are getting into the web game, you are going to hear a few things over and over again. One of these is the expression: making your images and your pages 'light'. You will hear people say, 'keep your web pages light', or 'keep your images light'.
What the nerds are talking about is the size of the images in terms of file size; we are not talking about how bright an image is.
So how big (or better yet, how small) do images and pages have to be, to be considered 'light'?
The last several years of web experience has shown that if people have to wait more than 10 seconds to see your page, you can kiss most of your traffic goodbye. High speed Internet access is growing, but sadly, still too many people are using dial-up connections.
Last stat I heard puts the number of people on (slow) dial-up connection at about 60%. This number of course will vary from place to place, but the bottom line is that you should expect to have many surfers hitting your web pages at 56k or less.
56k is the speed of the fastest of dial-up modems you can expect, and 56k modems download at a speed of about 5.6 kilobytes per second. With this in mind, and the 10-second rule I just mentioned above, you can see that shooting to create pages under 60k (kilobytes) is a good idea.
The best way to keep your web pages 'light': image optimization
The heaviest aspects of most web pages are the images. Following the old 80/20 rule, we should concentrate on making our images as light as possible without making them look ugly. The process of 'lightening-up' an image, is commonly referred to as 'optimization'.
How to optimize your images
Just about all the image editing programs out there (programs like Adobe Photoshop, Xara, Macromedia Fireworks) have the built-in capability to output/create images that are as light as possible. These programs have special export filters that are designed to produce web-optimized images. When you start using image-editing software (and you will, if you are designing web pages) you will find that the process is pretty painless, though you will probably have to tweak things as you go along.
A little common sense can speed up your pages
Besides using these tools, there is no substitute for a common sense approach; one day, you may have to ask yourself if you really need that image that takes up half the page! Big pictures that take up a lot of space on the page will typically be pretty heavy.
Remember that unless you are National Geographic, Playboy, or Disney*, people are probably less interested in nice graphics/photos and more interested in the information/service your web site provides.
Conclusion
I hope that it is clear that, when it comes to web design, heavy-duty computers are not needed and are just a waste of money. In part two of this beginner's article, I will talk about your choices in terms of software, which ones are best and why?
* I wonder if Disney will sue me for putting their name beside Playboy? :) Now that I think of it, they may actually own Playboy!
If you liked the article and you want to see more let me know!
Stefan Mischook.