Web page design tips Keep a note of the
following points when designing a web site: 1. Frames:Avoid frames. Though search engines have limited ability to crawl
framesets, they have the following disadvantages: 1.1 Not all search engines have the ability to crawl and index pages
using framesets.
1.2 Google discourages using frames, and as per Google
frames tend to cause problems with search engines. If you use frames, use NOFRAMES tag to include no frames version of the
content. Don't just write "This page requires frames compatible browser, your browser does not support frames".
1.3 Even when search engines crawl and index frames,
it may so happen that a page appearing in search results may just be one frame of a frameset, and the visitor may be taken
to a bare page without header and navigation buttons.
1.4 Conceptually, a html page consists of only one
frame. When using multiple frames, it essentially mean using multiple html pages within one page. This is against the
basic concept of a web page.
2. Graphics:
2.1 Avoid excessive graphics or graphic images that
take long time to load.
2.2 Use a feature called anti-aliasing to smoothen
the borders of any text or image that you develop.
2.3 Always use alternate text field when using a
graphic. This will allow a description to be displayed on the browser screen even if the graphic display is turned off in
the browser. Alternate text is also helpful for search engines in identifying the content.
3. Theme: Use a consistent theme for your web site.
It includes layout, and design. As this is a very subjective matter, it differs from person to person. Try to use colors,
fonts, styles that complement one another. From search engine point of view, avoid excessive formatting. It is not recommended
to have HTML tags outweigh your actual content.
4. Flash: This has been discussed in another page.
Check out Flash advantages and disadvantages.
5. Meta tags: Always use Title, Description, and
Keywords meta tags. Use other meta tags as per the requirement. From Google search engine point of view, Title and Description
meta tags are very important.
6. Avoid redirects. Search engines may interpret
redirect as spam. The reason being, that a redirected page is seen by the search engine but not by an individual browsing
the site. If at all you need to redirect a page, use permanently 301 redirect. A less preferred option is to use a script
with at least 6 seconds of delay in forwarding the visitor to the new destination.
7. Keep the web page within 50-80 KB, so the there
won't be noticeable delay in loading of the web page. If the page has content that takes more time, consider splitting the
page into two or more pages. This preferred from search engines point of view as well. If the content is too long, it is likely
that some portion of the page is not indexed by search engines.
8. Use of scripts: Use scripts only if necessary.
It is recommended not to load a web page with too much of script as this is likely to confuse the search engines. Client side
scripting relieves the server from script processing, and loads the page faster.
9. Use H1, H2 tags to identify your content headlines.
10. Validate your web pages after composing.
Where do you want to go today?
I don't know Disneyland Bill Gate's house Back to bed
What kind of movies do you like?
Horror Science Fiction Romance Comedy
How many salesmen does it take to change a light bulb?
When writing for the Web you want to make sure that you get the most out of the words you choose. Web writing is different
from print writing, but many Web pages look like they've been written with a high school English teacher in mind as the audience.
Conserve Your Words We don't worry about the cost of ink or bandwidth when we write for the Web, but we must
be frugal with our text. Edit your content to remove unnecessary words.
Write to Empower, Not to Impress Web writing should serve a purpose, and get to that purpose as quickly as possible.
Limit metaphors and flowery language.
Follow a consistent Web Writing Style Guide To maintain a consistant voice across your site, you should create
a Web style guide and follow it at all times.
Avoid Unnecessary Intro Text Don't tell us what you're going to say.
Avoid Redundant Adjectives Don't use adjectives whose meaning is already contained within a noun. Some examples:
Final Outcome
Free Gift
Added Bonus
Awful Tragedy
Various Differences
Personal Beliefs
End Result
Past Memories
Unexpected Surprise
True Facts
Watch Out for Wimpy Words Some words add tentativeness rather than clarity.
In my opinion - If you're the author, readers already know it's your opinion.
Basically
Kind of
Sort of
Really
Virtually
Practically
Personally
As you already know - maybe readers know this, maybe they don't. Stop apologizing.
Replace Wordy Phrases With Single Words
At this point in time -] Now
Due to the fact that -] Because
In the event that -] If
Increase in -] More
In light of -] Because
Replace Prepositional Phrases With Adjectives The article on hepatitis -] The hepatitis article
Don't Turn Verbs Into Nouns (Nominalizations) Use verbs for action in your Web writing. Original: I saw the
improvement my daughter made in math with regular after school math tutoring. New: My daughter's math skills improved with
regular after school tutoring.
Use Precise Language Use pronouns sparingly to improve both clarity and search optimization. Use the same proper
noun to describe a person, place, or thing throughout your document.
Avram Piltch is the Senior Managing Editor for About.com and these are the recommendations he gives to About writers for
writing on the Web.
Create Web Pages that Communicate with Your Readers
When you set out to write a Web page, you might think that you don't need to consider the style of the pages, but maintaining
a style guide from the very beginning of your project will insure that it is easy for you to re-edit in the future or for
someone else to take over for you. This style guide is intended to help you create a Web site that looks the way you want
it to look, and is easy to maintain and use.
Server Basics and Housekeeping
Always provide a way to contact you. Firstly, if you've taken the time to write a Web page, you should be proud enough of your work to tell people who wrote
it. Secondly, you should give your readers a way to contact you, so that they can verify facts or just start a conversation.
Mind you, I'm not advocating that you pur yourself in any danger from viruses or anything else, but contact information is a requirement for Web pages in this style guide.
Splash pages are often very popular, but they tell your readers nearly nothing about what they're going to get on your site. Make sure
that your site home page explains the purpose of the site so that newcomers won't be confused.
Make sure your URL is useful. Sometimes you can end up with a really long URL that is hard to type in or figure out, this is fine for shopping pages,
but not so good for your home page. Home page URLs should be short and to the point.
Site Structure and Organization
The first thing you should think about when designing a site is the site navigation. The best navigation is based on something that people are already familiar with, such as chapters in a book or a timetable
in a bus station and so on. Once you've got your navigation, stick to it throughout the entire site.
Keep your pages small. Any one page should be no larger than 50KB including all images, and my recommendation is to keep the page download size
to 20KB or less per page, including all images and downloadable elements.
Keep your images small. Similar to the above guide, your images and any other items that are downloaded on your Web page (like Flash, JavaScript,
CSS, etc.) should be kept small so they download quickly.
The Pages Themselves
Make your titles meaningful. The title is used on the page, in search engines, and in bookmarks. And if the title is too "cute" or unclear people won't
click on them.
Write for all browsers. While it may be tempting to write Web pages that support specific browser tricks you're only hurting yourself and your site.
Browsers go in and out of fashion, and if your site is written for a specific browser, it will only be usable as long as that
browser is popular.
Use valid HTML. This way, Web browsers will be able to view your site no matter who they are.
Use CSS. Style sheets make it easier to maintain the look of your site, and change it when you want to.
When you write valid XHTML colors you have to use a code called a hexadecimal code or hexadecimal triplet. This means:
triplet Each color is defined as the amount of saturation in three color chanels:
Red (R)
Green (G)
Blue (B)
RGB color channels have a saturation ranging from 0 (no saturation) through 255 (fully saturated). So, to define a color
using RGB, you indicate how much saturation in each of the color channels, for example:
Red (255,0,0)
Green (0,255,0)
Blue (0,0,255)
White (255,255,255)
Black (0,0,0)
hexadecimal Once you have figured out the RGB values of the color you would like to use, you need to convert it to
base 16 or hexadecimal.
The easiest way to convert an RGB value to hexadecimal is to use a program.
Combine your three RGB numbers into a six digit hexadecimal number preceded by a pound-sign (#).
What Items Can You Color?
In Web design, nearly everything has a color from the images you post on the page to the background of the page to the
actual text on the page. But for the purposes of this article, we're going to talk about two primary items:
text - the color of the letters
backgrounds
It's easy to change the color of text, simply use the style property, color: color : #ffcc66; More on the color property.
But backgrounds are tricky because you must ask "The background of what?". There are many things you can change the background
color to, such as:
change the text color background: Use the style property on a span, div, or p element.
change a table background: Use the style property on a td, th, tr, or table element.
change the entire page's background: Use the style property on the body element.
Using color is vital for Web pages. And these hints and instructions should help you to use color as effectively as possible.
Use Colors That Look Correct No Matter the Platform
What is a Web Color Palette?
Using the browser safe color palette is a choice you need to make when you're creating a Web page or Web image. It is especially
important that you know what the consequences are for not using it.
For example, you might use the color #dddddd for the background of a table. On your monitor it would probably display as
a nice neutral light grey. But when you show it to a friend, it could look very different. Depending upon how his monitor
interprets the color it could look grey or it could look green or some other color.
What displays as light grey on a 24-bit, 16.7 million color monitor might display as a really ugly greenish grey on a 8-bit,
256 color monitor.
This is because #dddddd is not a browser-safe color. "Browser Safe Colors" are the 216 colors that can be viewed on 8-bit
PC and Macintosh monitors and look the same (or close to the same).
(And if you include the colors that Unix systems display the common colors lower to around 212.) If you use
browser safe colors, you can be sure that they will not dither on these machines and your pages will look the way that you
intended them to look.
What is Dithering?
When a computer monitor encounters a color that it can't display natively, it attempts to match it as best it can. Monitors
display elements as tiny dots on the screen, and native colors are displayed with all the dots as the same color. A dithered
color displays with some dots as one color, other dots as another color, and so on to attempt to match the color requested.
Sometimes the match will be close to what you intended and other times, it can be dead wrong. But in either case, it won't
be the same as it looks on your screen.
But don't most people have high color monitors?
Yes, it is true that most computers sold these days are sold with monitors and video cards that can support millions of
colors. However, on a lot of these systems the default setting is at 640x480 pixels on the screen and 256 colors. Many
people don't know that they can change that setting, let alone know how to do it.
Color
Symbolism
Red
China: Good luck, celebration, summoning Cherokees: Success, triumph India:
Purity South Africa: Color of mourning Russia: Bolsheviks and Communism Eastern:
Worn by brides Western: Excitement, danger, love, passion, stop, Christmas (with green)
Orange
Ireland: Religious (Protestants) Western:
Halloween (with black), creativity, autumn
Yellow
China: Nourishing Egypt:
Color of mourning Japan: Courage India: Merchants Western: Hope,
hazards, coward
Green
China: Green hats indicate a man's
wife is cheating on him, exorcism India: Islam Ireland: Symbol of the entire country Western:
Spring, new birth, go, Saint Patrick's Day, Christmas (with red)
Blue
Cherokees: Defeat, trouble Iran: Color of mourning Western: Depression, sadness, conservative, corporate, "something blue" bridal tradition
Purple
Thailand: Color of mourning (widows) Western: Royalty
White
Japan: White carnation symbolizes death Eastern:
Funerals Western: Brides, angels, good guys, hospitals, doctors, peace (white dove)
Black
China: Color for young boys Western:
Funerals, death, Halloween (with orange), bad guys, rebellion
Using Colors to Convey Meaning May Backfire on a Web Site
When is the last time you saw a Web site in black and white?
Color is vital to the repertoir of your average Web designer, and yet many designers don't realize that the colors they
choose may be having more of an effect than they realize. Colors are an element of design that people react to on a visceral
level. Often, they don't realize they are reacting to it. For example, in the U.S. many hospitals dress their nurses in light
blues and pale pinks. This is because these are calming, soothing colors, and upset patients relax a little in their presence.
Once you understand your audience make up you can create a color scheme that suits them.
When choosing the colors for your site, you need to first (as always) think of your audience. Is it a global audience?
Is it primarily Western? Eastern? Are they older? Younger? Male? Female? All of these things, and more can affect the color
choices for your site.
Colors obtain symbolism through cultural references in the culture you grew up in. Depending upon the culture, colors can
have very different meanings and actually cause problems for your site. For example, in the East, white is the color of funerals
while in the West white is the color of Weddings. If you were to design a Wedding site intended for an Asian audience and
you used a lot of whites, you could be disturbing the people you're trying to reach. Chart of Cultural Color Symbolism
Age Differences
Young children tend to prefer brighter, more solid colors, while adults tend to prefer more subdued colors. If you're writing
to an audience of children and you're using muted pastels and shades of grey, their parents might like it, but the kids will
be long gone before the page finishes loading.
Class Differences
Marketing research in the United States has shown that working class people tend to prefer colors that you can name: like
blue, red, green, etc. While more highly educated classes tend to prefer colors that are more obscure: like taupe, azure,
mauve, etc. This is why Walmart does their store logo in bright red.
Gender Differences
In many cultures, men tend to prefer cooler colors (blues and greens) while women tend to prefer warmer colors (reds and
oranges). Western men are also more likely to be color blind and so unable to see some of the differences in color on Web pages.
Trends
Colors, like everything else in design, go through ins and outs in popularity. Black Web pages were all the rage a few
years ago, and now you hardly see it at all (but it will surely come back into style as I write this). Colors also tend towards
seasonality, in other words, the designs reflect the season they were built in: winter blacks, whites, and greys; spring greens
and bright colors; summer yellows; fall browns and golds.
.
. 
.
.
