Web Page Design

Web site designing is quite simple -
It's GOOD web site designing that's really tough!

That said, why is it that web designing so simple? It is because anyone who has a WYSIWYG HTML editor can easily churn out web pages one after the other without understanding the intricacies of web pages or web sites as a whole.

In this Web Page Design section, we look at certain aspects that determine a good web site and tackle some problems that you might face. This section lays the foundation for grasping the nitty-gritties of web site design and should be following by reading the web design tips and tricks section on this web site.

How is the web different from the print media?

In contrast to print media, the Web is a different ball game altogether. Here the designer has little control on the page display since it depends mainly on the browser. Though frustrating, making a web page look similar on the various browsers is great fun because it's so challenging and one ends up learning a lot!

When creating a site, the web designer has to keep the following things in mind:

• The various browsers
• The various versions of the browser
• The operating system used by the visitor
• The color depth of the visitor monitor
• The screen display area
• The availability of plugins

Know more on the variability of web page displays across client machines.

With such a number of variables governing web page display, it is not always possible to have a web page display correctly across different client machines. And like I mentioned, this is the real excitement of web design.

However, you need to bear in mind that a web site is not designed for you or boss - Just because there is a Flash intro on another site does not mean you need to have one for your web site. The take home message is that your web site has to be designed for its audience - your prospects and customers! Good web designers look at their web site through the eyes of the prospect.

For example, if you run a site which sells products for the elderly, you should make the layout easy, the font size large and the design simple. You should regularly analyse your site statistics to check which browsers the majority of your visitors use, or if they have JavaScript turned on, or the browser plugins installed on the client system etc. It is thus, of utmost importance to understand the demographics of the visitors and the technologies they use.

Optimal web page file size and optimizing web pages

Optimizing web pages is the most important aspect of web site design. An optimized web page loads quickly on the client system so your web site visitors can quickly get the information they had come for. Making visitors wait patiently while a Flash intro loads is a sure method of saying goodbye to them. Remember, the browser Back or Close Window buttons are just a click away! Does this mean that Flash intros should not be used? Now, that's a tough question... and you will find the answer in - Flash intros usage - The advantages and disadvantages.
What is the optimizal page size? I have been asked this question so many times that I have lost count. In this article, you will learn what all contributes to the file size of a web page and thus, how long it takes to load on the visitors browser.

Structuring web sites - layout or a web site

Another question that I have been asked very often concerns the use of links on a web site - should one use relative or absolute URLs?.
Web site can start off as simple set of static HTML pages and if you are serious about your web presence, your site will in a matter of a few months will grow to tens, even hundreds, of web pages. Managing all those pages is not easy especially if you were not careful from the very beginning. Structuring web sites - web site design and layout looks at how you should segregate files on a web site which will stand you in good stead when your web site grows.

Color combinations

Your web site should reflect your company image correctly. The choice of colors is an important aspect in portraying this image. For example, red is usually avoided on financial web sites. Blues and grays have always been good choices for professional web sites. Here you will find more than 100 color combinations that you can use on your web site. You should typically test a color combination and maybe fine tune it for your web site because the color combination needs to complement the colors used in your logo.

HTML color names and the web safe palette

Colors on a web page can be displayed in hexadecimal codes or HTML colour names. Using Cascading Style Sheets (CSS), you can even display colors in the RGB notation. You will also find the complete list of HTML color names along with their web safe equivalents.
The Web safe color palette was developed to provide consistency in color display across browsers. Though the idea is now outdated, it is still a good thing to know!

Web page fonts

If you have this irrestible urge to use that beautiful looking scripty font on your web site - Don't!. Read more on browser compatible fonts - which fonts to use on web pages. I get so many emails from web designers who were "appalled" at how their web site looked on another computer. Don't make the simple mistake of assuming that your visitors will have that lovely font installed on their system or worse still, that your visitors will download and install it just because you have requested them to! - Will you do it... I dont think so, and so don't expect it from your visitors.

Obviously, there is a way to still use that beautiful font for text on your web site. You can simply make an image which will guarantee correct display across different browsers... however, the image would take much longer to load and the text will not be indexed by search engines. You can use the ALT attribute but it's not the same thing as good old text!
Note: Google has decreased the relevance of the ALT attribute for ranking web pages because of so many web developers trying to spam the search engine by stuffing the ALT attribute with keywords.

HTML Character Entities and HTML Special Characters

Need to display a character not available on your keyboard? the Trademark symbol™ or maybe the Copyright symbol ©... Get the complete listing of HTML special characters also called HTML character entities.