Strutting your stuff on the Web:
[ Welcome | What's New | Bugs | Download | Search | Woody's Dance Card ]
[ Ask Woody for help | About Woody | Woody's interests | Articles ]
Updated: Tuesday, April 11, 2000
The topic of this page is planning considerations in Web Site Design.
Because of the proliferation of applications that can produce HTML (hey - even I have written programs that can produce HTML), everyone thinks they can be a Web Master. Your friend has designed a web page that you think looks good. You put up a web page that shows your latest pictures of (Select from below):
This automatically qualifies you to make big bucks as a Web Master....right?
- Your car
- Your significant other
- Your pet
- Other _______
Wrong. Web Sites must cover, and Web Masters must consider all aspects of an Internet presence from the initial design and concept to hosting, and implementation.
Some of the considerations are:
Fortunately, many of the Server questions (or the Operating system and maintaining the server) can be delegated to an Internet Service Provider or Web Hosting provider. Unfortunately, that is the EASY part of Web Site Design. You are still left with the hard part - the design process - the planning process, the design steps, ID-ing resources etc.
- Web Hosting. Where will this Web Site reside?
- Where is the server?
- What Operating system does it use?
- How do you get to it to update pages?
- Who keeps it running?
- Who is responsible for scripts running smoothly?
- How much space do you have?
- Who is reponsible for the material?
- Who is reponsible to write the original material?
- Who is reponsible for Keeping the material up to date?
- Is there a database? Who keeps the data up to date?
- Who is reponsible for writing code?
- Debugging the code?
- Where are the graphics going to come from?
What determines a small, medium or large web site? An average sized site has 10-50 pages. A medium site is over 30 pages. Some large sites have over 1000 pages. (A page for a site is a web page linked to and maintained by the organization or Web Master, so even though I might link to www.microsoft.com, since I do not maintain that site, it is not counted as one of my 'pages'.)
The planning and considerations covered here apply to Intranets as well as Internet sites.
- The first step in developing a Web site is, at the start of the project, determining who is in charge. Who decides what goes on the page and what does not. The must be one person with the day-to-day yes or no decision authority. Without this 'final' authority, the site will become a political football. The "Web Master" will be pulled in multiple directions as each person tries to steer the site in the direction of 'their' vision.
- For a large site, you may need to determine who has the final say as to what goes on and what does not in each major department. Each of these individuals answers to the overall site coordinator who has the final say.
- The next step is the kickoff meeting. All the key players need to be there. (As an incentive to get them to show up, tell tham all agreemants reached in their absence are binding on them.) The key player being the person in overall charge of the site and the liaisons with the various departments. Accepting input from everyone will quickly make the project unwieldy. The group must be small and focused.
Notice we haven't event started talking about the design yet. We are deciding who decides!
- Determine the audience. Who will be viewing the web site. For most sites, there are three major types of viewers each with a different reason to visit the site:
- The Customer - This viewer is trying to find out about the product line or about YOU. What is your product line? What are the ingredients or what composes a certain product. How are YOU different from others purporting to sell the same item or provide the same service? Why are these people coming to your web page? Can they get that easily? Why should they return?
- The Investor - How is the stock doing? What are the current projects and plans for the company?
- Recruiting - If you want to work for us, this is whom to contact. If you want to work with us, this is whom to contact. These are the positions we are trying to fill.
Each of these viewers have one thing in common. They want to get to the information that interests them quickly. Note:Read Text intensive rather than graphics
- This brings us to the next step: Flow chart the proposed site. Generate a simple one-over-the-world (a simple un-detailed site overview.) What goes where in flow chart (pages)? What pages there will be? This chart can be used as a check list for the various pages or sub-sites as development progresses. Changes require the approval of the person in charge at each step
- The next step is to delineate responsibility and to establish controls.
- Where does information on each of the pages come from?
- Who responsible for the text? Generally, the client does most of the research and provides the textual content.
- Who is responsible for the graphics that will be used?
Many are thinking there are many readily available graphics. I can get all the graphics I need. Wrong. Many packages limit the use of the included graphics. You might be unable to use the graphics if you are trying to make a profit from the site. Some graphics are for print purposes only. Check to ensure you can post the images on YOUR web site.
- Who will be responsible for any scripts or coding for active pages? Some considerations:
- Text - how does it need to be submitted? As MSWord documents? As text? As HTML? As tables for Finance info?
- Graphics - Where do you get them? Who pays for it? Who owns the graphic, the rights to use? (If graphics are stolen, not only is the developer of the page at risk, so is the client/customer.) Simply because you were able to use a graphic on one site or once before, does not mean you can re-use the graphic elsewhere. It is possible to purchase the right to use a graphic for a specified period. Then you are purchasing the right to use the image, not the image itself. To protect yourself and your investment, you can put the credits and copywrite information on each page. Remember, even text headings that are created as graphics are copywritable images.
- Control the feedback. You may receive several calls or e-mail throughout the day. This feedback may be about placement issues or spelling. If you respond to each message immediately, you will never get to other work. Collect the feedback to one location, then process all the feedback in one session.
- Publish a list. Who owes what input and when is it due. Also next list the next step (i.e. Once we have the finance data, it can be reviewed by this date at this location.) Keep the list up to date. Let others know of slippage.
- Navigation planning is critical at each step.
Notice - we still have not written one line of code or HTML! We are still planning!
- Keep it simple.
- One site rotates the image on the front page among 5 different images. This keeps the site fresh/live, but at the same time makes it simple to update.
- Check the site using different viewers. If you design for one viewer, you will shut out a portion of your audience. (Trust me on this one. A Major development organization failed to do this - to their embarassment!)
- Use White Space Freely. While the pages do require some scrolling, each page requiring scrolling had numerous buttons to jump to back to the top of the page.
- Plan your viewing page for a screen size of 640x480.
- Avoid horizontal scroll bars.
- Now you are ready to begin coding the web pages. (Note: where the actual coding comes in - AFTER the planning!) You should generally use a three stage approach to generating the actual code for the web site:
- Coding server - do the actual coding here.
- Staging server - put the site here for testing, and feedback. On
the staging server provide a feedback link on each page. Use a script that includes the name of the page and input form. This makes applying feedback to the appropriate page easy.
- Production server - this is the site the customer will see.
- Some of the statistics about 'hits' to major sites were:
Before your 'Web Master' tells you he / she only writes using the lastest and greatest, ask yourself, "Can we afford to lose over half of our 'customers' whom we purport to serve?"
- on a live site, 25% of the viewers were using the AOL browser version 3.0 or earlier (This does not support frames or many of the HTML 3.2 standard tags.)
- Over 50% of the people gaining access to the internet are using modems SLOWER than 28.8 BPs. Plan graphics sizes accordingly.
- A good percentage of the viewers were from overseas. Many asian countries pay long distance charges for even local calls. To reduce connection times, they may turn off graphics. Plan accordingly.
- When checking statistics for hits - every item on
page downloaded counts as one 'hit' (a page w/15 images - 16 hits). For a better feel of actual hits, check ratios to see what percent of viewers are not loading images (if images are turned off, you get fewer 'hits')
- People may be coming in though other sources than your welcome page. Check statistices for other pages as well.( Some search engines may link in through other than the front page.) Check the source of the 'hits'. Where are people coming from?
- If you plan to become a developer of web sites, some pricing considerations:
- Independent developers charge $100-$150 per page. A page is up to
2-3 screens per page. This price does not include the cost of graphics.
- Most professional developers charge $250-$500 per page. Again this does not include the cost of graphics.
- There may be a design fee. Design fees can run $400 to design and another $400 to develop (for Fortune 500 Companies) (for the average client - $250 per page.)
- Developers may charge up to $90 per hour just to tell the client what the design specifications should be. (some of which may be deducted from actual development costs.)
- A typical development timeline for a 50 page site.
- Inception meeting 1-2 wks
- Navigation / look & feel 2 wks
- Publishing / 2 wks
- Adjustment 3-4 days
- Total cost of $3000-$4000
- The main source of income for the major developers in not in the initial setup and site development. The main revenue source is in the maintenance contract. While companies will fix mistakes or make minor adjustments for free (maintenance - may/may not include publishing the company newsletter) most maintenance contract specify:
- Change copy at x rate
- Change Copy and graphics y rate
- A monthly rate (# hours etc.) whether or not used
- Other design considerations include:
- Where will it be hosted (platform)?
- What does the host support? Active pages? Java? SQL connectivity? Feedback forms? Popups?
- Should you use JPEGs or GIFs?
- Gif's tend to be smaller and have a smaller pallete size 256 color
(GIF) vs 24 Bit (JPG). GIF tends to use solid colors better. GIFs can be animated.
- JPG 24 Bit images are better for photographic quality.
JPG tends to blend better than GIF. JPEGs cannot be animated.
- If you have ever noticed that some colors look good on you
computer, but over the web look grainy, you need to discover and use Web
- High quality GIFs use multiples of 51 (the hexadecimal values
of Red Green and Blue). To view the difference, change your monitor to
256 colors. Remember some of your potential audenice may still be using
- To make colors "web safe" simple change each of the rgb's to
the closest multiple of 51 i.e. 167 = 153 (max 255).
(You could also cheat and use this site for the numbers)