Mistakes what Web designers Do!

What affects your online presence most, either as an individual
or as a company, is, perhaps, your Web site. Your home page is
the one thing that defines you most, for the millions of strangers
online. Today, with so many free options for Web hosting, it’s almost
a crime not to have a functional and regularly updated site. In this
chapter, we walk you through the basics of designing a simple site.


You need to decide where and how your site will be hosted. . All the millions of options you have can be cate-gorised into either free or paid solutions. Once you’ve decided on
the type you want (or will settle for), you can go ahead and start
planning the look of your site.
First up, if you’re planning on designing your company’s Web
site, you need to ensure that you have the very basic things such as
a logo, company colours, and so on. If you only have a company logo
on your letterheads and visiting cards, and no copy of it in digital
format on your computer, you need to scan the logo from a card or

letterhead, and clean it up a bit using software such as Photoshop.




The beauty of the Web is that you never need high-resolution
images for content. A resolution of 72 or 100 dots per inch (dpi) is
more than sufficient. Not only does this simplify your work when
cleaning up images in image editing software, it also means the
file sizes will be much smaller, and thus easier to upload or e-mail.
If the site you are designing is for a company, you need to
match the site and design with your company’s colours. For
example, since the Digitlogo is red, and the Jasubhai logo is
blue, the logical colours for our Web site are red and blue.
However, you need to be careful to match the exact colours of
your logo with your corporate identity and the products you
sell. By and large, a white background with black text is univer-sally considered the most readable—and you shouldn’t mess
with tradition!
Even if you decide to go with a coloured background, make
sure the site uses dark text on light backgrounds. Of course,
there are exceptions, such as www.skoar.com! Here, since SKOAR!
is a gaming magazine, light text on dark backgrounds fits bet-ter, since most games have a dark setting in order to make char-acters stand out or contrast more.
Once you’ve decided upon a very general idea for your design
theme, you can move on to the more complex design aspects.
Unfortunately, many designers make simple, yet very noticeable,
mistakes when designing their sites. We figured that the best way
to make our point was to start off with what notto do…
You can either choose to have light texton a dark background, or vice versa,
depending on the corporate colours of your site

Web Design Mistakes

Sometimes, designers get carried away by technology and the
options at hand. Just because an option exists doesn’t mean it has
to be used.
Frames
The simplest example we can give here are frames. Five years ago,
frames were the in thing—they let one or two parts of your site
remain constant, while only one frame changed. This idea caught
on like wildfire, and every second designer, at one point, was design-ing sites with frames. However, when content on the Web started to
grow, search engines became more popular, and the concept of
bookmarking caught on. Frames didn’t gel well with bookmarks.
In the context of search, the concept of frames is itself flawed:
it uses one HTML page that gets content from two or more other
pages and places the content in pre-defined parts of the page.
Though this sounds like a good idea, search robots will visit the
index page and catalogue it as the content of your site—ignoring
all the HTML code that refers to other pages. This led to sites with
frames dropping rapidly in search engine rankings. This was per-haps the major reason why frames are no longer popular-after all,
Search Engine Optimisation (SEO) is a full-time business now, and
is also a major aspect of Web design.
A second flaw, but perhaps less influential towards the dis-continuance of using frames, is that frames make it virtually
impossible for a visitor to bookmark a particular page in your site.
Since the current page is always the home page, and only specific
frames within the page change, when a visitor chooses to book-mark the page, the browser always bookmarks the home page.
Now, if visitors navigate a considerable amount within your Web
site to get to where they are, and bookmark the current page only
to return later and find that they have to navigate from your home
page all the way back to where they were the first time, they are
not going to be pleased!

Misleading Or Useless Page Titles

This is the text that is supposed to describe the current page, or at
least your site as a whole. This text appears between the ‘<title>’
and ‘</title>’ code tags in an HTML page. Sadly, most amateur
designers fail to notice the importance of titles, and leave it as
“Welcome to xyz.com”.
Again, this is very wrong when you take into account the way
search engines display results: almost all search engines make the
link to the results the page title. Even if a search throws up your
page as a result, all a potential visitor sees is the text “Welcome to
xyz.com”, and a few lines from the site. The page title is what will
draw a visitor to your site, and as the latest generation of Net
surfers are quite at home with search engines, they have learnt to
ignore sites with such title tags.
Let’s say you’re in the business of selling computer hardware,
and your site is called ‘xyz.com’. Another company also sells IT
products, and has a site called ‘abc.com’. Let’s assume a potential
visitor or customer searches for “computer hardware vendor
India” in a search engine and gets the following results:
Welcome to xyz.com
We believe in finding the right solutions for your pocket.
Whatever your budget for computer hardware, we have a configu-ration that will fit your needs. Vendors of…”
www.xyz.com/52K-8 Aug 05....... Cached - Similar pages
Something.com
Your source for in-depth computer hardware info.
www.something.com/524K-10 Aug 05....... Cached - Similar pages
Abc.com
The best computer systems in India at unbeatable prices
“ABC is the leading computer hardware information resource on
the ’Net. We have all the information you need about computer
hardware, including vendors...
Abc is a renowned computer hardware vendor based in
Mumbai. We deliver anywhere in India within 48 hours, and have
over 1,000 service centres located at…”
www.abc.com/24K-10 Aug 03....... Cached - Similar pages
Even though your site, xyz.com, may show up first, chances are
potential visitors will click on the link to Abc.com, only because
the title tag matched what was searched for. In an age where Web
users estimate relevance based on a quick scan of content on
search engines and Web sites, the wrong title tag could kill your
chances of getting hits.
Huge Pages
Considering that India is still to achieve the mass adoption of
broadband, sites with large file sizes for pages are frowned upon.
When you get data transferred to you at around 5 KBps, the aver-age 100 KB page takes 20 seconds to load. This is already too long
in terms of visitors’ patience, and the only reason most sites get
away with is because here in India we’re used to waiting for pages
to load. However, if you have a site that has a 500 KB start page, this
translates to a minimum of 100 seconds of waiting for the page to
load-unacceptable!
On an average, try to keep pages as small as possible-less than
100 KB. This will ensure that users have a better experience at your
site. One site that overwhelms you with huge page sizes is
www.bengalboy.com, where the average page is over 4 MB.
This PG13-rated site has ridiculous quantities of images, and
ends up taking over 15 minutes to load on dial-up connections—
preposterous.
Flash Designs
Although the use of Macromedia Flash has revolutionised the way
content can be stored on your site and displayed to visitors, it is
another bandwidth hog. Since Flash is generally used to compress
videos or animations to display on Web pages, the file sizes are
always large. Even simple button animations can add a few KBs
here and there, which can total up to a lot.
You also need to remember that text almost always loads
before graphics, and most users will scan through whatever
appears on your site first and decide whether the content is what
they are looking for. Even though you may have relevant content
neatly displayed using a fancy Flash links menu, many users may
not stick around long enough to see this.

Most importantly, however, you need to remember that in
India, the majority are on dial-up, and will not be patient enough
to wait for your menus to load, or for a Flash intro to complete.
Even if you feel that your site is not complete without a Flash
intro, make sure to prominently display a ‘Skip Intro’ option, for
visitors who do not want to wait for the intro to finish loading.
Also, if you just have to use Flash menus, make sure the same
menu instance is used throughout your site, so that browsers will
be able to cache the item and not reload it for every page.
Gaudy Colours

Some Web sites give you the idea that the people who designed
them are colour-blind! You will come across many sites that are
likely to drive you mad, or make you blind, if you spend too much
time on them. This is mainly due to a very bad sense of colour
matching. There isn’t much to explain here—with millions of
colour combinations available, it’s purely up to you to decide what
combinations are just not right.
Browser Support

Most designers don’t seem to care about whether their sites work
on browsers other than Internet Explorer (IE). In fact, it’s not just
site design you should worry about, you should also choose a host-ing solution that is compatible with most browsers. For example,
Microsoft’s ASP technology is largely targeted at IE, and browsers
such as Opera and Mozilla Firefox often run into trouble with
some ASP pages.
The best way to check the functionality of your site is to check
it using the most popular browsers. We suggest you start with
Lynx, the popular text-based browser in Linux, to see what your
site will most probably look like to a search engine bot, and then
work your way through IE, Mozilla Firefox, Opera, and others.
Balanced Content

Sites with only text, or even those with only graphics, can be very
irritating to view. Even if your site has only text, try and make the
text layout look good. Can you imagine yourself reading this book
if it didn’t have a picture or paragraph breaks to lend visual relief?
The same holds true for your site.
You should never substitute text with graphics, such as making
an animated GIF image with changing text. Doing this only
increases the size of a page, and also takes away people’s ability to
resize the text on the page according to their needs. It also almost
always results in a low-resolution image that shows very poor
quality text.
A good rule of thumb is the ratio of 80:20—80 per cent text to
20 per cent images. This means that when you look at the pages
you design, no more than 20 per cent of the screen area should
be images.
You also need to remember that Web sites have depth, and
there’s no reason to try and cram everything you offer into your
home page. Divide up your content into little piles, study your
existing as well as target audiences, and then tag your content in
decreasing order of importance or interest to this audience. The
top 50 per cent of your content should be easily accessible from
your home page, and the rest can either be distributed lower down
on your home page or stored in lower levels (different pages)
of your site.
Navigation


Very often, you come across sites that lead you to a page best
described as a virtual dead-end. Somehow, visitors might get stuck
at a place, and have no clue as to how they got there. This usually
results in a visitor clicking on the little [X] on the top right corner,
banishing your site from their screen forever! The entire reason for
taking pains to design sites is to avoid this from ever happening…
yet it does!
So what causes this problem? Simple. Bad design!

All the pages your site contains should at least have links to
your home page and major sections. The easiest way to do this
would be to have a constant navigation bar that has a fixed posi-tion on every page of your site. A good rule to follow is the three-click rule: no page in your site should be more than three clicks
away from any other page.
Being Over-Creative

Sometimes, designers have delusions of grandeur, and think they
would make good copy writers or visualisers in advertising agen-cies. This leads to sites that are cryptic to the common man. Such
sites might be acceptable if the business or individual is attempt-ing to show off their creative prowess—as might be the case with
an actual copy writer or advertising agency, or perhaps an artist’s
home page. However, most often, such sites are a big no-no for
the majority.
The problem lies in the fact that as the creative juices flow,
the results often become more cryptic than creative. Take the
site www.1amp.com. A visit to the site will have you waiting for
a few minutes for everything to load at first-it’s Flash-based. Once
that’s done, you see tiny links at the bottom of the Flash anima-tion. Each link takes you to a cryptic Flash page, which will con-fuse you with its unorthodox link placement. To make matters
worse, at the end of everything, you will have gone through the
whole site and, at best, only be able to guess what AMP as a com-pany does. Having to guess is bad! The only time people like
guessing is in games—every other instance of guessing makes
people uncomfortable and irritated.
Our guess is that AMP is an advertising agency, but the
fact that we’re still not sure is proof enough that their site is a
failure. Now, such a site for a company not dealing with creativi-ty as a product would be sheer madness. 1amp.com won the dubi-ous distinction of being used as an example for “The biggest
Web design mistakes of 2004” at the popular site www.web-pagesthatsuck.com.


Outdated Pages

Nothing is worse than having a site that has outdated content.
Sites that contain content on the home page that was last updat-ed over a couple of months ago are often considered ‘neglected’,
and are ignored by visitors.
This holds true especially if you add a News section to your site
and start updating it regularly, and then somewhere along the
line, falter and stop updating it.
No Resizing
Web pages that cannot be resized are a big no-no. Often, people
browse Web sites without maximising their windows. If half your
content is not visible because your site does not allow for resizing
windows, you have a problem on your hands. This also holds true
for text resizing: nothing is more irritating than text on a page
that visitors cannot increase or decrease the size of by using their
browser’s text resize option.
Moving Text And Images
Let’s face it—scrolling text marquees are ugly! They are not consid-ered good design any more, and you should avoid putting in scroll-ing text as far as possible. The only form in which scrolling text is
acceptable is as a ticker on your site, such as a stock quote ticker,
news ticker, or Shout box, where visitors can leave a message for
other visitors. Basically, only if you need to dedicate a very limited
space to content that changes rapidly, or is input by visitors, should
you consider scrolling text.
Animated GIF images, too, are now considered amateurish.
Most often, only jokes and ads contain GIF animation. Web users
are accustomed to seeing GIF animations as advertisements, and
have learnt to ignore them at sight. This means that all the effort
you put into animating an image will be wasted on the majority of
visitors. If you have to include moving pictures, make sure the ani-mation is done well and flows smoothly, otherwise it’s likely that
you’ll make your site look unprofessional.
Design Tips

Now that you know what not to do, it should be pretty simple to
understand what is acceptable. Just avoid making any of the mis-takes mentioned here and you should be fine