Website Design

Phils Online offers a complete turnkey package for the design of an effective internet presence. This design process also ensures that the web site will be effective for promotion in the major search engines and directories. For step by step details of how we design a web presence, read below:

Step 1 - Demographics Factors 

The theme and content of your web site will need to be appropriate to the demographics of your intended audience.

What is the age, income and profile of your target visitors?

Are they local, within one country or truly global?

What kind of information or features are they likely to expect from a web site ?

Knowing this information accurately allows a web site to be tailored to best meet the expectations and requirements of your target audience.

At this point a couple of technical questions arise. Let's start with one we believe is critical, the Lowest Common Denominator..

Step 2 - Lowest Common Denominator

This is one of the most overlooked aspects of web site design that we strive to emphasise:.:. It's of utmost importance.

Fact is that in order to reach the widest possible audience we must design your web site around the lowest common denominator.

For example: You live here in Asia, where connection speeds are often slow and the computers used may be several years old. Sites should be optimized to load fast and function properly in this environment or lose a lot of potential visitors. Of course a visitor with a fast connection and a new Computer will not encounter any problems. 
Numerous studies have shown that if your main page takes more than 40 seconds to load completely, then you will lose roughly 40% of visitors as they click and go elsewhere. On a 28.8K modem this equates to no more than 60Kb in total for the home page with all html and all the graphics on it.

Fortunately with a bit of planning this can be achieved.

We also insist that sites function properly on a Pentium 100, with 32MB of RAM, 256 colors or better and connected to the internet by a 14.4Kbps modem. There should be little or no difference when viewed using a similar size and a Macintosh  Mac.

This combination caters for 92% of the typical viewing audience.

Browsers are another consideration. Have you seen sites with buttons telling you they are best viewed with the latest Netscape or Explorer browsers? Do you change your browser or update the version to oblige? Not likely...

This situation is compounded by the fact that what started out as a universal markup language for web pages, 'html', has now had a lot of extra tags added called Netscape or Explorer 'extensions'. Put simply, these commands only work properly on those browsers. At best they are ignored by others, at worst they can make a page look awful.

Again, with the browser market shared between Netscape and Microsoft, do you want to look good on only some of the browsers out there?

We use only tags and commands that are universally recognized by all browsers - 'pure' html. The finished pages must look and function identically on Netscape 3.0, Internet Explorer 4.0 or later versions of these browsers. Again, designed for the widest possible viewing audience.

From time to time we encounter sites with very specific audience demographics and needs that allows us to relax the guidelines a little, but these situations are very much the exception.

Think just as hard before installing java scripting, or multimedia, audio or video files that need special viewers or plug-ins.

Step 3 - Gathering Information

The next task is the process of structuring the content of your web site in a manner that makes it logical and predictable for a visitor to access.

The first step is to identify and list all the information you want to make available. Don't worry about sorting it or ranking it at this stage - just make one long list of anything and everything you feel would have a place there.

Just some of the types of information could include:

profile of your company
profiles of company divisions or departments
history of your company
key staff
products you offer
services you offer
technical product information
online ordering forms
information or software download page
online newsletter or 'what's new' page
previously published newsletters or archived articles
newsletter subscription page
web site search facility
web site guestbook
customer feedback / inquiry forms
company contact details
Don't forget that 'something of value for free' we spoke of in Step #3...
In the same manner as brainstorming, don't critique anything just yet, this is the next step. For now just get everybody involved and collect ideas. For a larger organization, ask every department what they would like to see integrated into the web site - not just the sales and marketing team.

Step 4 - Evaluation of Information

Now we get to start sorting through this 'wish list' we've just created to make it into a logical framework.

Start by breaking it down into a number of basic categories, each containing similar information. For example there would be information on the company grouped together, information on the products or services, news related information etc. etc.

Inside each category you would then list, in order of priority, each of the items you would want to present. How do you prioritize this? Simple - what would visitors want to see first.

This is also the time to determine what items on your list are not going to be used and should be deleted.

Keep refining and condensing until you have the information you want to place on the web site condensed down to no more seven key groups, ideally less. These will be the major sections of the web site and could be something like this:

The Company
Products
Ordering
Newsletter
Contact Us
With the task of grouping the information complete we now turn our attention to how this is laid out and accessed on the web site itself.

Step 5 - Choosing A Format
Now we have a clear picture of the information we will present, we can determine exactly how this will be laid out, what buttons will go where and how it all fits together.

Notice by the way we keep talking about 'information' and not the graphics we intend to use? That's because web sites, particularly business web sites are all about information. It's the information on your site that will bring visitors - not your great art. But we'll cover that in detail a little later...

There are many ways to lay out your web site but these can be placed into three main groups:

The linear, or storybook approach. This is not a good lay out since you have to proceed and go through step by step or page by page, rather than choosing the topic that interests you most and go there directly. After all, who would have the time to read all in detail?

The tree, or hierarchical presentation. This is where you have major groups leading into subgroups - this is the way you find it here on this website.

The random, or exploratory environment where users dart about all over the place (and unfortunately sometimes get lost!)
Most of our sites follow the tree format so we'll use this as a model from here to keep the process practical to describe. The method we have just used to collect and group our information yields a result that is perfect for this model actually.
Let's take this then and make a typical tree format web site layout.

Step 6 - Your Proposal

OK, now we have covered all of the steps outlined we can finally draft a proposal. Ideally after all of the work at this stage the client will accept this and proceed! Fortunately, 90% of our clients do...

The proposal comprises a complete project quotation and schedule and providing the client proceeds serves as a template for the project.

With such a potentially vague entity as a web site this ensures that both the client and ourselves share the same vision and can move forward together with minimal risk of misunderstanding.

Aside from a detailed description of the number and type of pages, tools and other features, the style and appearance of the web site is detailed and a clear timeframe established. The timeframe will include project milestones as well as making clear what input from the client is required and at what stage for the project to run smoothly to completion.

A detailed breakdown of costs is also provided along with the total project cost inclusive of domain name registration, hosting, maintenance and updates. For small to medium sites we generally request a 50% deposit on commencement, with the balance payable upon completion.

Ownership issues of any creative work or intellectual property are also covered at this stage as well as whether or not we can be given credit for the work in the form of a small link at the bottom of each page.

Finally, we provide the details and contact information for the team leader assigned to the project to allow immediate access regardless of time zone differences between the client and ourselves.

Step 7 - Tables
Tables, with clearly defined cell sizes and positions allow us the maximum control over where images and text will appear across the widest variety of browsers and operating systems.

That is why the logo and buttons line up neatly down the left, we have some dividing white space on the right of these and then our banner logo and text follows neatly in the middle of the screen.

The important point to grasp here is the difference between a printed document and a web site on the internet. With a brochure, you have total control of how the finished product appears when you mail it to your clients. With a web site page however, the html tags in the code give instructions to your browser that allows your browser to assemble the files into a viewable page. This is why some pages will look differently on different browsers - they literally interpret the html tags slightly differently.

Our task is to try and maintain consistency to as wide an audience as possible and using tables is a good start to achieving this aim.

This format is also quite effective in making a page 'friendly' to the various search engines that visit.

The next issue to cover is navigation...

Step 8 - Navigation

Navigation is an important design consideration if you want to keep visitors in your site and ensure they find what they are looking for.

According to a study by the Georgia Tech Research Corporation, two of the main reasons visitors leave web sites are that the sites are perceived as confusing and/or the visitors cannot find what they are looking for.

Makes clear navigation pretty important right?

The type, size and structure of the site will impact the style and techniques chosen here, but most importantly, take the lead. By this I mean YOU decide where to lead and guide the visitor.

For example, statistics show that even with the link buttons on the left hand side, visitors have a reluctance to return to the top to click on one. A recent study showed that buttons or links placed at the bottom to guide visitors to one or more selected pages will increase follow-on by 294%

The web site may be 'passive' in nature but the designer still has a lot of control on the flow of traffic!

Also, going back to our 'lowest common denominator' or 'lcd' mentality, don't be shy to say the obvious. Some time ago I read an article by a web site 'expert' saying that links saying 'Click Here' insulted the visitor's intelligence and were to be avoided. So I followed this advice and was surprised by the number of clients, who when viewing their new web site, did not recognize the blue underlined text as a hyperlink.

Now we make sure every visitor knows to 'Click Here' by saying so!

Step 9 - Starting The Works

Now that we have a green light to proceed we need to access the raw information, the text, images and various other files. We may have viewed much of this in fax or printed form in order to make a proposal but now we need the real article in the following formats:

Text

Where we are going to use a lot of client generated copy from existing brochures, manuals, price lists etc., it is a great help to have this in electronic form. Ideally this in MS Word, MS Publisher, Adobe Pagemaker or other popular format that can be sent to us as an E-mail attachment. In a worst case scenario we can always retype the text by hand if necessary.

Images

For high quality web site images we require high quality originals. Ideally, sharp clear photographs, as large as possible so that we may scan these to a high resolution for editing and touchup. Logos can be scanned from letterhead and then touched up if there is no other option but if these have been created electronically then it helps to send us these in their native format as an E-mail attachment.

Other Files

Any other files required should be provided as early as possible, either as an E-mail attachment or by mail..

By collecting this information early in the project we can identify any deficiencies and take action to ensure the timeframe is still achieved.

All your materials will be sent or handed over to a local representative who will forward all to us in USA.
At this point we also need to secure the domain name(s) and hosting...

Step 10 - Visual Design and User Interface

The visual design and user interface issues can now be addressed with the aim of creating a page to be used as a template for all other pages. By keeping to a standard layout, with the same logos, buttons and other images used on each page, loading will be fast from page to page as most information will already be in the browser's cache.

Of course, going back to the principle of the lowest common denominator, all design will be made effective and fast for the widest possible audience.

If you were to browse through our client sites you would probably see a lot of similarities in terms of layout. Many are like this page, with a logo in the top left corner, another banner logo across the top, navigation buttons down the left and the text and images that form the page content down the middle in a band of around 400 pixels width.

Does this apparent lack of 'creativity' on our part cause us concern? Absolutely not. Our experience is that creativity, more often than not, is an indulgence on the part of a designer to try something new and unproven.

Would you rather be part of an experiment in creativity or have a web site that works and is  from proven techniques and strategies?

OK - off the soapbox and back to the explanation...

The reason for the 400 pixel limit is simple. The human eye does not like scanning a long line of text to the right and then looking for the start of the next line on the left. It's hard work for the eye and the brain - that's why your daily newspaper is set into narrow columns of type. We simply ensure that columns of text are not too wide to be easily read. Scrolling down a page of interesting content is not going to detract an interested visitor.

This layout will completely fill an 800 x 600 pixel screen, the most popular setting used by more than half of the browsers on the internet. The information however will be contained in the left hand 640 pixels to avoid annoying left to right scrolling on this screen setting.

Whilst a lot of layout is similar, the style will vary to fit the demographics of the viewing audience and their perceived preferences - conservative, high-tech, teenage or whatever.

Wherever possible the web site will be matched to existing client themes, styles, logos and colors so as to be consistent with existing materials. In this regard the web site should be an extension of the client's existing image and marketing endeavors.

Colors also need careful consideration...

Step 11 - Colors

As mentioned before, colors are selected to match existing client colors and artworks. Rather than making an exact match, in most cases, we opt for a very close color, again to fit our lowest common denominator target.

Many computers, particularly in lesser developed economies, do not have 16 or 24 bit color screens but display only the 256 color Windows palette. There is also a difference in how Netscape and MSIE use these palettes, resulting in a table of only 216 colors that can be used on all browsers and platforms under 256 color mode.


On a 256 color screen, colors outside of these will 'dither' and look odd or unpleasant. So we select colors that are in the 216 color palette, in most cases so close you wouldn't notice if we hadn't told you!

Colors are also critical when it comes to text and/or any background images you may want to use. We advise not to use more than 3-4 different colors on the whole of your site, even less. Too many colors make a website look funny and at the same time confusing. Supposed the color red should be chosen for underline an important message, what sense would it possibly make to use a red-alike color as orange as well? It would only be confusing and distract visitors to be alarmed by the red color and to accnwledge same as important.

Step 12 - Background Images & Text Styles

Many web sites use colorful background images that were designed to impress the visitor or enhance the corporate image by means of a logo repeated to fill the screen.

Marketing and advertising statistics show that for maximum readability you should use black text on a white background. This works the same on screen as it does in print. Any deviation from this will reduce readability and this will result in a loss of traffic. Given that a web site is designed to convey information, why would you want to impair this ability just to have a 'cool' background image? We may use a background with a graphic 'column' under the buttons on the left, but the text will always be black on a stark white background.

The same thinking prevails with the font size and selection for both human and technical reasons.

The human factor is again derived from intensive studies in the advertising industry as to what fonts are most readable. There are two types of fonts, 'serif' types and 'sans serif' types.

Serif types have the little leading and trailing edges that lead you from one letter to the next and make reading easier. This typeface should appear on your browser as the serif type 'Times New Roman', the common default on most office applications as well.

Sans serif types, such as the Arial used in our logos and buttons, do not have these leading and trailing edges. Many people like it in body text as it looks 'cleaner'. It is however, harder to read. The most readable text is this Times New Roman - that's again why your daily newspaper is probably using it.

On a technical level we again reach the issue of browser and platform compatibility. The web page designer can specify that text should be 14 point Verdana, but if you run a Windows PC and don't have that font installed it can only default to your browser’s default font type and size. (Fortunately this is usually Times New Roman)

Text should also be broken down into smaller paragraphs, using sub-headings where necessary for visitors to scan the page quickly looking for relevant content.

With the page layout, themes, colors and text taken care of the images to be used need to be examined...

Step 13 - Logos, Images and Other Graphics

Your logos, images and other graphics should all serve a useful purpose. The often used term 'eye-candy' has no place in an effective web site. Images take time to load and so should be used sparingly and in a manner that has them load as fast as possible.

Logos can be made visually attractive AND fast to load by choosing the right colors, the right file format and the right compression, as can other buttons and graphics used.

Don't feel that you absolutely must fill the page with graphics and images just for the sake of it. Images MUST serve a purpose or they shouldn't be there. For some sites the generous use of more white space can actually enhance the appearance.

Once we have selected the right graphics and prepared these in the most effective format possible for fast loading we code the html so that the text will all load first, leaving the pictures to load last. This way the browser can access the information in the text, the real reason they probably came to visit, waiting for the images to load only if they choose.

We've all suffered those sites with the Michaelangelo graphics that take forever to load (and all probably left them to try and find what we need elsewhere). This does not need to be the case...

Finally, there are a few items to be included

Step 14 - Essential Items
Contact information should be available on the contact page, either in its entirety or via a button to access a 'Contact' page. Again, don't you love those sites that offer you a product or service but don't give you any phone, fax or E-mail address to respond to? They're out there!

If there are autoresponders to provide information then these should be accessible from any page relevant to their content.

Response forms and e-mail adresses and other tools should likewise be accessible from any page appropriate.

The next step is to produce a draft copy of the web site, or at least some typical pages, in order to ensure these are acceptable to the client...

Step 15 - Producing a Draft

A draft copy of each of the main pages or areas of the web site is now constructed and loaded so that the client can examine these. The beauty of the internet is that our client can be on the other side of the globe and it makes no difference.

We also explain why certain techniques or styles have been used to ensure the client understands why and how they contribute to effectiveness.

Following feedback from the client we can then edit and change the pages to what is mutually agreed upon and continue completing the remaining pages ready for final production and loading...

Step 16 - Final Production and Loading

With a complete web site that both we and the client are totally happy with we can then now load all the files onto the host server in the USA. This is all done in USA, using the American host server.

The cgi scripts or other tools used also need to be loaded ready for the testing process. Testing involves checking that every page loads complete with images, that all links within or outside of the site work, and that all scripts, forms, mailboxes and the like are functioning 100%

Up to the point of final approval, all of this is done 'behind the curtain' where although the files are on the host server, they will not be viewable to anyone surfing by (behind a so-called firewall!).

Now we can raise the curtain and start the promotion process!

Step 17 - Maintenance and Changes

We include 6 months of maintenance and updates for no cost with every web site we design and promote. This covers both the hosting of the web site and the written contents itself (text only, no graphics, styles, buttons, layout)..

We will make reasonable changes to update the content of your web site throughout the first 6 months at no charge. Reasonable changes include changing contact details. It does not include adding a new section or doubling the number of products you have on sales. We will happily quote for such additions on a rate similar to the original price you paid for the initial design of the web site.

As a lot of new business comes to us these days as referrals from happy customers we're obviously being quite fair in this regard!

At the end of 12 months you will need to pay for another 12 months hosting for the price contained in the initial proposal. There are no surprises here. After 24 months you will need to pay $35 per year for each domain name you have registered. Not really a king's ransom.

© 1998-2002 Charisma Web Inc.  All rights reserved. Privacy Policy

12625 Frederick St., Moreno Valley, CA. 92553,  U.S.A.

: (909) 653-1342