This section has web
information – how to design
web pages. It applies to any website including ecommerce and small
By web site design I mean
designing the actual
look and feel of the site, designing the navigation system, and
deciding the way your content will be laid out.
the time you
come to the design stage you need to have your site concept nailed
down, a good idea of your ideal customer, and have planned out your
content, because your site design has to relate to all these things.
here if you wanted to learn how to build a web page
Design Isn't Everything
design books I've seen would have you believe that design is the major
part of building a website.
Design is important, but
content is more important. A superb design still won't make your
are looking for information. (For this page, it's web design
information.) Even for e-commerce sites, if you provide useful and
helpful information you'll be miles ahead of your competitors, with
happy, willing-to-buy visitors.
Don't get me wrong.
You do need a
functional design that is tidy, easy to use, easy to read and that
doesn't put people off. Visitors need to be able to find what they're
looking for, and your site does need to reflect the values of your
target market. Making it attractive is a definite plus.
don't need to spend a fortune on graphic designers and interface
experts to have a respectable design, and you don't need to be a
talented designer yourself.
my favorite sites, www.mysuperpc.com/ has a really basic design. Even
the links to other pages are just text links at the bottom of each
page. It's nothing fancy but it is easy to use. It has a Google page
rank of 4/10 which is respectable, and its Alexa score puts in in the
top 0.2% of sites for traffic which is excellent.
design that has made the difference, but the content. The site has
superb information written by someone who obviously knows what he is
talking about, and it is really helpful.
sites with poor design simply because they have superb information that
helps me, that I can't get anywhere else. Of course if I found the same
info on a better designed site I would go there.
is, superb info with poor design will outgun poor info with superb
design. Superb info with good design will outgun superb info with poor
What You Need In Your Web
- Your web site needs to be tidy and
easy to use.
- Navigation needs to be
- Text has to be easy to read,
even for people without 20/20 vision.
page should be within two clicks of the home page.
design needs to suit your target market.
need to load quickly.
- Personally, I don't like web pages that span the whole monitor as
it makes reading hard with wide screen monitors. I make my web
pixels wide, which is a common width.
Web Design Shouldn't Have
Your design absolutely
cannot afford to turn people off so:
use a flash page. Thats a really nice-looking home page that is nothing
but an enormous graphic that takes forever to load. I normally hit the
back button before they are loaded.
have flashing icons, they distract from your message.
you have animated gifs, only have them cycle three times. They're
- Don't have too many
colors. You should be able to count all the colors on the fingers of
- Preferably don't have a
background like a watermark that shows through the text. It makes text
harder to read.
There is a wide variety of web design
software you can use ranging from free to expensive.
KompoZer (an update of Nvu)
is free and quite adequate for most web sites. I've used Kompozer
and Nvu quite a lot, and while it isn't perfect there are workarounds
for the minor problems I've come across, and the price is right.
Frontpage is very
popular. I haven't used it at all, but my sister (who is not a geek) is building
her first website with it.
is excellent but it is expensive and I've found that I haven't used
anywhere near its full capabilities. It's more for professional or
semi-professional designers rather than someone out to build one
(SBI) has a built in block by block web page builder that is a bit
clunky but does the job quite adequately. It's far easier to learn to
use than any other web page editor I've used, and it also teaches the
fundamentals of good page design.
has all the other tools you need for a successful web site, plus it
automates the tedious time consuming tasks.
If you do
a search you'll find lots more web design software.
opinion? Go for Site Build It. It has everything you need, it will
simplify your site building, it'll save you time, and it's cheaper than
buying everything you need individually.
On Your Site's Look And Feel
need to design your web site to suit your target market. A site for
four-wheel-drivers would have a different and more casual approach to a
site for chartered accountants.
You can use your
common sense and
come up with a successful look and feel. Probably a better way is to
check out other sites in your niche, particularly ones that are ranked
highly. Browse a few of them and get a feel for how they are designed.
you find one that is representative and that appeals to you, use it as
a starting point for your design. Don't copy the
design, that just isn't right. Particularly don't copy the source code.
Use the design as inspiration.
Out Your Site's Navigation
can use navigation systems and menu bars (navbars) that are as simple
as left hand text links, or as complex as drop-down or fly-out menus
If you're building your own page template
probably want to use a simple navbar because it's a lot easier to make.
Before you start building a navbar though, you have to know how you'll
be organizing your content.
You really need all your
accessible within two clicks of the home page because it's easier for
visitors to find what they're looking for and because it's easier for
the search engines to find and index your pages.
organizing your content into three levels with your home page as level
one, which links to level two pages through the navbar. Level two pages
then easily and naturally link to level three pages through links in
the content itself.
For example, if your site concept
Meals For Time Challenged Moms” level two may be soups, chicken dishes,
rice dishes, etc and level three might be quick vegetable soup, tomato
soup, stir-fry chicken etc.
Navbars Can Do The Job
can use a drop-down or fly-out navbar, but you'll probably find it
difficult to build it yourself unless you're a programmer.
more simple left-hand navbar like the one on this site is all that is
needed. It does the job fine and it is quite acceptable to visitors.
probably get away with text links on the navbar for a lot of sites, but
buttons do look better, particularly buttons that change when you move
the mouse over them. Of course, that takes more work.
my own template, I put the navbar in a virtual include. That's a
separate page that only contains the navbar, and that is called up and
used by all the other pages. That way when I add something to the
navbar I only have to change one page, not fifty or a hundred.
To Make Text Readable
It takes effort to get lots of targeted
web traffic, so don't lose your visitors because your content is hard
People read differently online, and it is also
harder to read online.
tend to skim to find what they're looking for, so use lots of headings
and make sure they tell what you're talking about. Don't use cryptic
headings that make people guess what they mean, because your visitors
will head off to another site that's easier to use.
headings don't have to be boring. Make them generate interest and get
your targeted visitors to read on.
lots of white space because it makes for easier reading on a computer
screen. That means short paragraphs with space between them.
best fonts to use for online readability are sans serif fonts like
Verdana and Arial.
should use dark text on a light colored background. Black on white is
easiest to read, but a light colored background is okay.
I don't like page backgrounds with a washed out watermark-like image
behind the text. It can make the text hard to read, and just because it
looks fine on your monitor doesn't mean it will
look like that on everyone else's monitor.
To Make Changes Easy
happens if you've just built 50 pages and then decide that your all
your page headings should be red instead of purple, and that they
should be in a Times New Roman font instead of Arial? It can take a
long time to change 50 pages.
The best idea is to use
which thankfully is a lot easier than it sounds. All the styles are on
one page that is then called up and used by every other page. If you
want to change the text font,or a heading color, you just have to
change that one page.
let you change an item on a number of pages at once. They're excellent
can use them for footers as well if you want the same footer on every
page. Or if you want an advertisement on a lot of pages you can do that
as well. Then if you want to change the ad it's dead easy. Change the
virtual include and every page that uses it will change.
When your web site design is worked out it's time to
Use tables to lay everything out and position things where you want
software will let you save the page as a template, or you can save it
with a name such as mytemplate.html and use that to build all your
other pages. All you have to do is plug in the text, title, images,
meta-description, meta-keywords etc. and save it under its proper file
name e.g. quick-vege-soup.html.
Your Website Or You May Lose Visitors
browsers can render the same page differently. Make sure you test your
website at least in Internet Explorer and Mozilla Firefox. If you have
access to a Mac, check on that too. Also, you should run your page
through an html validator which will highlight any errors.
big problem I found was that IE and Mozilla were not case sensitive
with hyperlinks, but Mozilla Firefox was. I built my pages with Mozilla
Composer, checked them in Mozilla and IE and they were fine. Months
later I started using Firefox, and it would not find some of my pages
because I had capitals in my filename but not in the hyperlink. Big
problem! So check in as many browsers as you can, particularly IE and
Check For Usability
know how your
website works, so it can come as a real surprise to find that visitors
have trouble with it. If visitors struggle, you need to change the
design. It will pay off.
So get family or friends to use the
see how they go with it. If they have problems with the navigation or
any other aspect of the site, change the design to make it more user
Way To Design Your Web Site
This is a simple two step process
that can save you days of work and give you a professional look and
1, Check the other websites in your niche,
high ranking sites, and get a feel for what suits your target market.
Then use a template that suits your market. www.templatemonster.com has
templates from about $60 up. Site Build It has templates as part of its
complete suite of web tools. Or, do a search on the search engines.
The problem with flash sites.
See why flash sites are probably not for you, and how they lose
For website designing and development, search engine optimization and software development in Ghaziabad.
Design Information to Building A Web Site