Well Designed Homepage?  .... What does it really take?
By Mikko Aarnio

Designing Individual Page

Once you've got a general understanding
of how to organize your entire site,
it's time to focus on individual pages.
While many aspects of Web page design
are similar to those of any other
media, some variables make the Web unique.

Now, in this lesson, we'll look about Web pages sizes, layout and backgrounds. In addition to size, a page's layout and background all need to considered when designing for the Web. Read this lesson for any tips on creating pages that look good, don't take forever to load, and are clear and easy to read.

  1. Limit each page's total file size.
  2. Use your browser's caching.
  3. Keep your pages short
  4. Put the most important information at the top of the page.

1.Set an upper limit in kilobytes for the size of each page - that is, the sum of the kilobytes of all graphics on the page, including background patterns if you're using them. What this limit should be depends what kind of audience you have: Is there mainly some hotshots who have T1 or is there just regular people with 14.400 bps modems. For the T1 elite, 120K isn't so big, but for commoners just 30K of graphics can take about minute to load. So, if you don't want to lose a big audience, you may have to sacrifice large, intricate graphics for simpler efforts that don't take as long to load.

2.Today's browser use caching. That means that the browser saves files to your hard drive, so the browser doesn't have to download them more than once. It's a very good idea to use the same graphics whenever it's possible on your site; doing so generally saves downloading time for your visitors and eases the traffic on your server.

3.Set up an upper limit to the amount of text you put on each page; somewhere between 300 - 600 words per page is reasonable. (I know, I know... here's too many words!) You can always continue long articles to the next page. Of course, you don't need page numbers!!

4.If you think of a Web page as real estate, the most valuable land is near top. Everyone sees the top when they "land" to your page. Visitors might have tiny screen, a sore wrist, a crancy disposition, and an "I'm not going to scroll" attitude; if you don't want to lose them, you'd better put everything important at the top of the page.

So, done reading? Not yet! Here comes some tips about making backgrounds!

  1. Solid background colors.
  2. Background patterns.

1. Solid background colors are made with HTML. Yes, that's right! HTML! But how? You simply add the BGCOLOR=#FFFFFF to the BODY tag at the top of each page's code. The colors hexadecimals and (I think) that the letters are for RGB table (you didn't get it? Let me show an example: if you want color which has 0 of Red, 0 of Green and 255 of Blue, you just look what's 255 in hexadecimal (use Windows calculator). It's FF. Now just try it: let's write some text with color #0000FF (0 of Red, 0 of Green and 255 of Blue in hexadecimals): Is this Blue?? Yes, it worked! So background color is determined by the RGB table.

2. High-contrast background patterns can make Web pages difficult to read. In general, you should aim for limited contrast in the background pattern itself and greater contrast between the pattern colors and the text.

Wow! You're going to the Lesson 3 already! Just click Next!

<= Back | Next =>

Introduction Entire
Site
Style
Guide
Individual
Page
Creating
Graphics
Construction
Web DeSiGN