Basics of Web Design

Basics of Web Design

By Jennifer Kyrnin

Graphics

1.

Think small, like 10-12KB per image. Yes, depending on the source, the number of broadband users is going up. But slow pages are still really annoying, e en if you!re on a "1. #nd huge images are a primary cause of slow pages. $t!s easy to optimi%e your images. #lways use graphics that fit the content. &ust because you ha e an adorable photo of your dog doesn!t mean you should ha e it on your 'eb site about 'eb (esign )sorry, *hasta...+. "he main e,ception $ would make to this is for -design- images. "hese are photos or graphics that help make up the design of the page, and are not intended to illustrate the content. Do not use images that blink or mo e or change or rotate or flash or do anything on your page. /r use them sparingly. "here ha e been many studies that show that flashing graphics are distracting and annoying to people. $n fact, in one focus group $ watched the browsers actually physically co er up flashing graphics so that they could read the rest of the page. Layout

2.

..

4.

Stick with standard layouts . $! e seen some pages that use 0 or 1 frames on one page. #nother site used a layout where you had to scroll to the right to read e erything on the page )but you ne er had to scroll down+. "hese layouts are cute, and you might find them fun to build, but they will dri e your readers nuts. "he reason that the .-column layout is so popular on 'eb sites and newspapers is because it works. You might think it!s boring, but you!ll keep more readers if you stick with something simple that they can understand. 'hitespace is more than the 3** property, it is a function of your layout. You should be aware of the whitespace on your pages and how it affects how the content is iewed. Whitespace is just as important in a Web layout as it is in a paper layout . Use your graphics as elements in your layouts . 4raphics can be more than 5ust graphics when you use them as actual elements in your layouts. #n e,treme e,ample is when youwrap te,t around an image, but any image you ha e on your site is a layout element and should be treated as such. Fonts

2. 0.

6.

1.

7.

Serif for headlines and Sans Serif for te!t. $f you! e taken any type of print design, this might be e,actly the opposite of what you were taught. But the 'eb is not print. *ans-serif fonts are much easier to read on computer monitors because the screen resolution is not as high as in print. $f you use serif fonts for normal te,t, the serifs can blur together on the screen making them hard to read. Your printer friendly page should use the opposite fonts )serif for headlines and sans-serif for te,t+. Limit the number of different fonts. /ne of the best ways to make your 'eb site look amateurish is to change the font o er and o er. *ure, it!s possible to do, but limiting your page and site to 2 or possibly . standard font families is easier to read and looks more professional. Use standard font families. Yes, you can choose to use -8ockwood 9" *tandard- as your font on your page, but the chances that one of your readers will ha e that font as well is pretty low. *ticking with fonts like :erdana, 4ene a, #rial, and ;el etica may seem boring, but your pages will look better and the designs look correct on more browsers. "d#ertising

10.

Don$t be greedy. $f you ha e any control o er the number of ads on your site, be aware that your readers are not coming to read the ads, they are coming for the content. $f the ads o erwhelm the page content, many readers won!t stick around long enough to read your purple prose. Yes, it!s important to make money from your 'eb site, but if your ads dri e people away, you!ll ultimately lose money.

11.

Treat ads as you would any other image. Keep them small, a oid blinking<flashing, and keep them rele ant. &ust because you can ha e an ad on your site, doesn!t mean that you should. $f the content is rele ant to your readers, they!re more likely to click on the ad. %emember &our %eaders

12.

Test your pages in multiple browsers. 'riting 'eb pages that work only on the most modern browser is both stupid and

annoying. =nless you are writing a 'eb site for a corporate intranet or a kiosk where the browser ersion is completely fi,ed, you!ll ha e problems with people not being able to iew your pages. 1.. The same is true for operating systems . You can!t assume that 5ust because your page works in $>2.0 for 'indows it will work in $>2.0 for ?acintosh. 1@. Write content that they want. =nless you!re writing a site purely for yourself )and if you are, why is it posted to the 'ebA+, make sure that your content co ers topics that your readers want to read.

8eferenceB httpB<<webdesign.about.com<od<webdesigntutorials<a<aa06020@.htm