Basic Guidelines in Designing your Web Page
Every visitor that goes into your page is a gift. With the competition just a click away, your goal is to keep this precious visitor to linger for a while and see what you have to offer. The design of your website plays a very important role in keeping or driving away a visitor.
Here, we will look at some basic technical considerations you should take when designing a webpage.
|
One of the most important things to consider when designing a site is the resulting file size. The smaller the file, the faster it loads. Put yourself in your visitor's shoes: would you wait more than 10 seconds for the page to load?
Keep in mind that your site can be viewed globally where people have different Internet speed and bandwidth. Web developers suggest a maximum size of 50kb per page for fast loading. This means that your homepage, especially, should not have so many images or plug-ins.
However, if you know that your site caters to more technical-savvy users who enjoy faster connection, you may play around with this rule a little bit.
|
Since it is almost impossible to leave out graphics, just keep in mind that your graphics' resolutions should not be more than 72 dpi. A simple rule to remember, the deeper the color, the bigger the image.
Unfortunately, fonts is one of those variables in the net that we have no complete control. This will depend on the availability of fonts in the visitor's computer. Let's say for example, you wanted to use "Impact" for your page but your visitor does not have this font. Your visitor's browser would then use his default fonts to display your page. This will, of course, affect the overall visual appeal of your web page.
The best way to go around this limitation is to use fonts that are universally accepted by browsers. These are the browser-safe fonts:
The Sans-serif family
Arial, Verdana, Geneva, Helvetica, sans-serif
The Serif family
Georgia, Times New Roman, Times, serif
The Monospace family
Courier New, Courier, monospace
Note that typefaces Georgia and Verdana were designed specially for the Web screen. They render very well and is much larger compared to the other fonts. However, when printed they can look overwhelming. Times New Roman is safe for both screen and paper viewing.
Webmasters often use a combination of serif and sans serif type of fonts in their web pages. You can use Times New Roman for the body text and use Arial for headings. You may also use a single font family and simply use different sizes for more consistency. What you should definitely avoid is using too many styles in a single page. This looks untidy, amateurish and unprofessional.
During the early days if the Internet, web developers were very careful in selecting their colors as they were designing for computers that can only accomodate 256 colors. This limitation resulted in what is called the web safe palette. The Web Safe Palette consists of 216 colors, which are displayed correctly on both Windows and the Macintosh.
However, as users become more sophisticated web developers had more freedom to use more sophisticated colors and images. Your target market and your visitors will determine largely if it is safe to use more complex colors. If you know your targeted visitors do not have the latest technology in monitor, it is best to play safe and use the we safe palette.
|
Hexadecimal code
|
RGB code
|
| |
#000000
|
0 - 0 - 0
|
| |
#000033
|
0 - 0 - 51
|
| |
#000066
|
0 - 0 - 102
|
| |
#000099
|
0 - 0 - 153
|
| |
#0000CC
|
0 - 0 - 204
|
| |
#0000FF
|
0 - 0 - 255
|
| |
#003300
|
0 - 51 - 0
|
| |
#003333
|
0 - 51 - 51
|
| |
#003366
|
0 - 51 - 102
|
| |
#003399
|
0 - 51 - 153
|
| |
#0033CC
|
0 - 51 - 204
|
| |
#0033FF
|
0 - 51 - 255
|
| |
#006600
|
0 - 102 - 0
|
| |
#006633
|
0 - 102 - 51
|
| |
#006666
|
0 - 102 - 102
|
| |
#006699
|
0 - 102 - 153
|
| |
#0066CC
|
0 - 102 - 204
|
| |
#0066FF
|
0 - 102 - 255
|
| |
#009900
|
0 - 153 - 0
|
| |
#009933
|
0 - 153 - 51
|
| |
#009966
|
0 - 153 - 102
|
| |
#009999
|
0 - 153 - 153
|
| |
#0099CC
|
0 - 153 - 204
|
| |
#0099FF
|
0 - 153 - 255
|
| |
#00CC00
|
0 - 204 - 0
|
| |
#00CC33
|
0 - 204 - 51
|
| |
#00CC66
|
0 - 204 - 102
|
| |
#00CC99
|
0 - 204 - 153
|
| |
#00CCCC
|
0 - 204 - 204
|
| |
#00CCFF
|
0 - 204 - 255
|
| |
#00FF00
|
0 - 255 - 0
|
| |
#00FF33
|
0 - 255 - 51
|
| |
#00FF66
|
0 - 255 - 102
|
| |
#00FF99
|
0 - 255 - 153
|
| |
#00FFCC
|
0 - 255 - 204
|
| |
#00FFFF
|
0 - 255 - 255
|
| |
#330000
|
51 - 0 - 0
|
| |
#330033
|
51 - 0 - 51
|
| |
#330066
|
51 - 0 - 102
|
| |
#330099
|
51 - 0 - 153
|
| |
#3300CC
|
51 - 0 - 204
|
| |
#3300FF
|
51 - 0 - 255
|
| |
#333300
|
51 - 51 - 0
|
| |
#333333
|
51 - 51 - 51
|
| |
#333366
|
51 - 51 - 102
|
| |
#333399
|
51 - 51 - 153
|
| |
#3333CC
|
51 - 51 - 204
|
| |
#3333FF
|
51 - 51 - 255
|
| |
#336600
|
51 - 102 - 0
|
| |
#336633
|
51 - 102 - 51
|
| |
#336666
|
51 - 102 - 102
|
| |
#336699
|
51 - 102 - 153
|
| |
#3366CC
|
51 - 102 - 204
|
| |
#3366FF
|
51 - 102 - 255
|
| |
#339900
|
51 - 153 - 0
|
| |
#339933
|
51 - 153 - 51
|
| |
#339966
|
51 - 153 - 102
|
| |
#339999
|
51 - 153 - 153
|
| |
#3399CC
|
51 - 153 - 204
|
| |
#3399FF
|
51 - 153 - 255
|
| |
#33CC00
|
51 - 204 - 0
|
| |
#33CC33
|
51 - 204 - 51
|
| |
#33CC66
|
51 - 204 - 102
|
| |
#33CC99
|
51 - 204 - 153
|
| |
#33CCCC
|
51 - 204 - 204
|
| |
#33CCFF
|
51 - 204 - 255
|
| |
#33FF00
|
51 - 255 - 0
|
| |
#33FF33
|
51 - 255 - 51
|
| |
#33FF66
|
51 - 255 - 102
|
| |
#33FF99
|
51 - 255 - 153
|
| |
#33FFCC
|
51 - 255 - 204
|
| |
#33FFFF
|
51 - 255 - 255
|
| |
#660000
|
102 - 0 - 0
|
| |
#660033
|
102 - 0 - 51
|
| |
#660066
|
102 - 0 - 102
|
| |
#660099
|
102 - 0 - 153
|
| |
#6600CC
|
102 - 0 - 204
|
| |
#6600FF
|
102 - 0 - 255
|
| |
#663300
|
102 - 51 - 0
|
| |
#663333
|
102 - 51 - 51
|
| |
#663366
|
102 - 51 - 102
|
| |
#663399
|
102 - 51 - 153
|
| |
#6633CC
|
102 - 51 - 204
|
| |
#6633FF
|
102 - 51 - 255
|
| |
#666600
|
102 - 102 - 0
|
| |
#666633
|
102 - 102 - 51
|
| |
#666666
|
102 - 102 - 102
|
| |
#666699
|
102 - 102 - 153
|
| |
#6666CC
|
102 - 102 - 204
|
| |
#6666FF
|
102 - 102 - 255
|
| |
#669900
|
102 - 153 - 0
|
| |
#669933
|
102 - 153 - 51
|
| |
#669966
|
102 - 153 - 102
|
| |
#669999
|
102 - 153 - 153
|
| |
#6699CC
|
102 - 153 - 204
|
| |
#6699FF
|
102 - 153 - 255
|
| |
#66CC00
|
102 - 204 - 0
|
| |
#66CC33
|
102 - 204 - 51
|
| |
#66CC66
|
102 - 204 - 102
|
| |
#66CC99
|
102 - 204 - 153
|
| |
#66CCCC
|
102 - 204 - 204
|
| |
#66CCFF
|
102 - 204 - 255
|
| |
#66FF00
|
102 - 255 - 0
|
| |
#66FF33
|
102 - 255 - 51
|
| |
#66FF66
|
102 - 255 - 102
|
| |
#66FF99
|
102 - 255 - 153
|
| |
#66FFCC
|
102 - 255 - 204
|
| |
#66FFFF
|
102 - 255 - 255
|
| |
#990000
|
153 - 0 - 0
|
| |
#990033
|
153 - 0 - 51
|
| |
#990066
|
153 - 0 - 102
|
| |
#990099
|
153 - 0 - 153
|
| |
#9900CC
|
153 - 0 - 204
|
| |
#9900FF
|
153 - 0 - 255
|
| |
#993300
|
153 - 51 - 0
|
| |
#993333
|
153 - 51 - 51
|
| |
#993366
|
153 - 51 - 102
|
| |
#993399
|
153 - 51 - 153
|
| |
#9933CC
|
153 - 51 - 204
|
| |
#9933FF
|
153 - 51 - 255
|
| |
#996600
|
153 - 102 - 0
|
| |
#996633
|
153 - 102 - 51
|
| |
#996666
|
153 - 102 - 102
|
| |
#996699
|
153 - 102 - 153
|
| |
#9966CC
|
153 - 102 - 204
|
| |
#9966FF
|
153 - 102 - 255
|
| |
#999900
|
153 - 153 - 0
|
| |
#999933
|
153 - 153 - 51
|
| |
#999966
|
153 - 153 - 102
|
| |
#999999
|
153 - 153 - 153
|
| |
#9999CC
|
153 - 153 - 204
|
| |
#9999FF
|
153 - 153 - 255
|
| |
#99CC00
|
153 - 204 - 0
|
| |
#99CC33
|
153 - 204 - 51
|
| |
#99CC66
|
153 - 204 - 102
|
| |
#99CC99
|
153 - 204 - 153
|
| |
#99CCCC
|
153 - 204 - 204
|
| |
#99CCFF
|
153 - 204 - 255
|
| |
#99FF00
|
153 - 255 - 0
|
| |
#99FF33
|
153 - 255 - 51
|
| |
#99FF66
|
153 - 255 - 102
|
| |
#99FF99
|
153 - 255 - 153
|
| |
#99FFCC
|
153 - 255 - 204
|
| |
#99FFFF
|
153 - 255 - 255
|
| |
#CC0000
|
204 - 0 - 0
|
| |
#CC0033
|
204 - 0 - 51
|
| |
#CC0066
|
204 - 0 - 102
|
| |
#CC0099
|
204 - 0 - 153
|
| |
#CC00CC
|
204 - 0 - 204
|
| |
#CC00FF
|
204 - 0 - 255
|
| |
#CC3300
|
204 - 51 - 0
|
| |
#CC3333
|
204 - 51 - 51
|
| |
#CC3366
|
204 - 51 - 102
|
| |
#CC3399
|
204 - 51 - 153
|
| |
#CC33CC
|
204 - 51 - 204
|
| |
#CC33FF
|
204 - 51 - 255
|
| |
#CC6600
|
204 - 102 - 0
|
| |
#CC6633
|
204 - 102 - 51
|
| |
#CC6666
|
204 - 102 - 102
|
| |
#CC6699
|
204 - 102 - 153
|
| |
#CC66CC
|
204 - 102 - 204
|
| |
#CC66FF
|
204 - 102 - 255
|
| |
#CC9900
|
204 - 153 - 0
|
| |
#CC9933
|
204 - 153 - 51
|
| |
#CC9966
|
204 - 153 - 102
|
| |
#CC9999
|
204 - 153 - 153
|
| |
#CC99CC
|
204 - 153 - 204
|
| |
#CC99FF
|
204 - 153 - 255
|
| |
#CCCC00
|
204 - 204 - 0
|
| |
#CCCC33
|
204 - 204 - 51
|
| |
#CCCC66
|
204 - 204 - 102
|
| |
#CCCC99
|
204 - 204 - 153
|
| |
#CCCCCC
|
204 - 204 - 204
|
| |
#CCCCFF
|
204 - 204 - 255
|
| |
#CCFF00
|
204 - 255 - 0
|
| |
#CCFF33
|
204 - 255 - 51
|
| |
#CCFF66
|
204 - 255 - 102
|
| |
#CCFF99
|
204 - 255 - 153
|
| |
#CCFFCC
|
204 - 255 - 204
|
| |
#CCFFFF
|
204 - 255 - 255
|
| |
#FF0000
|
255 - 0 - 0
|
| |
#FF0033
|
255 - 0 - 51
|
| |
#FF0066
|
255 - 0 - 102
|
| |
#FF0099
|
255 - 0 - 153
|
| |
#FF00CC
|
255 - 0 - 204
|
| |
#FF00FF
|
255 - 0 - 255
|
| |
#FF3300
|
255 - 51 - 0
|
| |
#FF3333
|
255 - 51 - 51
|
| |
#FF3366
|
255 - 51 - 102
|
| |
#FF3399
|
255 - 51 - 153
|
| |
#FF33CC
|
255 - 51 - 204
|
| |
#FF33FF
|
255 - 51 - 255
|
| |
#FF6600
|
255 - 102 - 0
|
| |
#FF6633
|
255 - 102 - 51
|
| |
#FF6666
|
255 - 102 - 102
|
| |
#FF6699
|
255 - 102 - 153
|
| |
#FF66CC
|
255 - 102 - 204
|
| |
#FF66FF
|
255 - 102 - 255
|
| |
#FF9900
|
255 - 153 - 0
|
| |
#FF9933
|
255 - 153 - 51
|
| |
#FF9966
|
255 - 153 - 102
|
| |
#FF9999
|
255 - 153 - 153
|
| |
#FF99CC
|
255 - 153 - 204
|
| |
#FF99FF
|
255 - 153 - 255
|
| |
#FFCC00
|
255 - 204 - 0
|
| |
#FFCC33
|
255 - 204 - 51
|
| |
#FFCC66
|
255 - 204 - 102
|
| |
#FFCC99
|
255 - 204 - 153
|
| |
#FFCCCC
|
255 - 204 - 204
|
| |
#FFCCFF
|
255 - 204 - 255
|
| |
#FFFF00
|
255 - 255 - 0
|
| |
#FFFF33
|
255 - 255 - 51
|
| |
#FFFF66
|
255 - 255 - 102
|
| |
#FFFF99
|
255 - 255 - 153
|
| |
#FFFFCC
|
255 - 255 - 204
|
| |
#FFFFFF
|
255 - 255 - 255
|
|
To continue, click here
| 
