Chapter 4 Website Design 4.1 General Design of E-Business Website For many, the thought of building a web site is a daunting task. But really, it's pretty simple (in terms of the process). Here's what you can expect (in order): 4.1.1 Defining the Task Once you have decided to hire [COMPANY], the first step is to define the project very carefully and very thoroughly. It is critical to put down on paper what is and isn't included for the agree-to price. We call this the "Statement of Work" and include it as part of our proposal. For us to prepare this document, we're going to have a lot of questions to ask. If you haven't done so already, please review (and fill out) our free estimate form: [URL]. This form collects the basic information we need to begin developing the Statement of Work. Of course, we will have more questions and will want to talk with you about the details. But this form lays out the basics. Chapter 12 [COMPANY] will prepare a full proposal for you at no cost or obligation. These are not template documents where we change out the executive summary and fire them off en mass. We often have dozens of hours (sometimes much more!) into a single proposal because it is this document, and this document alone, that will define our entire relationship. Some section headings you can expect to find in our website design proposals: Executive Summary, Primary Objectives, Statement of Work, Technology Platforms, Maintenance Terms, Search Engine Rankings, Production Process, Timelines, Deliverables, Fee Breakdown, Terms of Service, etc. 4.1.2 Negotiating Price As mentioned, there are no set rules as to how we determine price since everything we do is so customized. So yes, the good news is that there is always room for negotiation. But [COMPANY] isn't into playing pricing games. Our price is primarily based on how much work we have to put into your website, so our idea of negotiation is to discuss how to accomplish the objectives within a budget--not to simply toss around numbers. Sometimes there are sacrifices and compromises that must be made by both [COMPANY] and the client. 4.1.3 Beginning Production Once the proposal is agreed to and the price is set, [COMPANY] will begin production. We don't ask for a deposit or any kind of advanced payment. We don't ask you to sign a contract. We will work completely at our own risk so that at every step of the process, we still have to earn your business. We build everything out on our live development servers ([URL]) so that our clients can monitor our progress in real time. During production, expect to be in contact with [COMPANY] at least every other day (and usually more often than that.) We want to make sure we're always on the right track, so we'll touch base with you often. 4.1.5 Develop the Design & Layout. The first phase of production involves building screenshots of what your project will look like. If you ordered a logo, this would be the first thing to produce. The screenshot is a static image that essentially determines the template by which we will build the rest of your website's pages. 4.1.6 Build the 'Alpha Site'. The 'alpha site' is a skeleton of your web site. At this point it is no longer static. The navigation works (but only leads to empty pages.) This stage gives us a chance to really see how the site will function before we plug in all the content and any bells and whistles. 4.1.7 Build the 'Beta Site'. When everything is approved with the alpha site, we begin adding your content. This is where the web site really takes on its final form and comes together. For ecommerce and other functional sites, many clients opt to begin accepting a few 'beta testers' to use their site with the understanding that there may still be some bugs to work out. 4.1.8 Final Acceptance. When the beta site is complete, everyone spends some time looking over the site, testing, tweaking, revising, etc. When the client is completely happy with everything, we ask him/her to sign a 'Final Acceptance Agreement' as well as a 'Contract for Professional Services.' (Click to view samples.) These documents do several things. The Final Acceptance Agreement basically states that the project is completely done and that the client is satisfied and agrees to pay. After signing this document, any additional requests for work must fall under the maintenance agreement or will incur additional fees. The Contract for Professional Services is a very standard legal contract that defines ownership, liability, indemnification, and all that other legal mumbo jumbo that is a necessary evil. 4.1.9 Payment & Launch. Our only rule is quite simple: when we get paid, you get your work. We take a big chance by not requiring any payment or contracts from our clients from the outset. Most of our peers think we're nuts to operate this way (though never in our history has a client every taken us up on this unconditional satisfaction guarantee!) So the only protection that we have against mal-intending clients is to own and possess all the work until payment is received. Not invoiced. Not in the mail. Not when contracts are signed. When your money is in our bank, THEN AND ONLY THEN we will turn everything over to you. At that time we upload and install everything on your infrastructure (or whatever infrastructure has been decided upon.) We turn over all development documents to you, including the raw files we used every step of the way. When we're done, you own everything you paid for. 4.1.10 Maintaining the Website. Every client has different needs when it comes to keeping their web site up-to-date. Some require daily or weekly updates. Some just need typos fixed here and there. Some clients can dabble in their own HTML. Some wouldn't want to go near the stuff. Whatever your situation is, we can accommodate you. Every maintenance contract is custom tailored to your specific needs. In general, the way it works is this: We set a minimum number of hours per month that we agree should cover most maintenance work. In exchange for guaranteeing that minimum number of hours, we drop our hourly rates substantial (in half or more!). If you don't use up your full allocation of hours, we spend the balance doing web site promotion (because you can never spend too much time promoting your web site!) If you go over, you're locked into the reduced rate that we've agreed to. Anything more than about 5 hours overtime will be quoted as a 'mini project' with a fixed fee. 4.2 Software and Hardware for Website Design 4.2.1 How to choose an Internet service provider (ISP) An Internet Service Provider, or ISP, is a company that provides its customers with access to the Internet. Customers may connect to their ISP through dialup (telephone), broadband (including DSL, ISDN and cable modem services), or wireless connections. There are countless national and regional ISPs, and a great many websites exist to help you locate the best one for you. The Internet holds a huge amount of information about any conceivable subject. You can read the daily news, check your bank balance, monitor share prices, listen to the latest music releases or even watch trailers for the latest movies. The most common use for the Internet is email. This allows you to write a message on your computer and post it to a friend or relative instantly. It is also possible to use the Internet to chat in “real time” with your friends or relatives. This can be by typing, speaking or even videophone. Other facilities exist for obtaining updates and information on your software, testing new software . 1．What restrictions do Internet service providers (ISPs) have when accessing the Internet? There are four limitations when using an ISP: the speed of the connection. the reliability of the connection. the volume of information you can download, measured in megabytes (MB) per month. the time you can be connected to the Internet (hours per month). Each ISP will have a selection of plans and prices from which you can choose the best value for money to suit your needs. 2．The difference between ISPs Some ISPs will have added advantages, including access to more information, more accessible (user-friendly) information, or parental controls that can shield you from unsavoury information. Some ISPs can be set up immediately with a credit card; others may require visiting a shop. Some ISPs expect you to commit for a 12-month period, some three months, but most are monthly. Some ISPs have good customer service; others have none or expect you to wait on the telephone for a long time. Some ISPs have only a limited number of phone lines, you may try to connect to the Internet and get an engaged tone. Some ISPs have only a small connection to the outside world, which restricts the speed at which you can download information. Some ISPs have local numbers allowing you to connect from different locations around Australia. Look for 13, 1300 or 1800 numbers. This is useful if you own a portable computer and travel. Some ISPs allow you to check your email online (from any computer). 3．How can you access the Internet? Home-users access through a “modem” (an electronic box that converts your computer signal into a voice signal) down their telephone line. This is known as a “dial-up connection”. This is the easiest and cheapest option to connect to the Internet. Consider this option first. When you know more about the Internet, you can also use DSL or ISDN, cable or satellite. These are more costly to implement but have faster speeds and do not tie up your phone line. This is only recommended for the more advanced users. 4．Which plan should you choose? How regularly do you intend to use the Internet? You can estimate the time you are likely to spend on the Internet, and the volume of information from the following guide: Low use: eg, checking bank balances, the weather or specific items every few days. Medium use: eg, daily reading of the newspapers, daily checking of email or news groups. Heavy use: eg, chatting to friends, downloading a few songs, downloading a few pieces of software, playing online games Very heavy use: eg, downloading videos, video chatting, downloading lots of songs or large pieces of software. Low users should consider a plan of 10 or 20 hours per month, 300MB download per month (but be careful of additional charges mentioned below). Medium users should allow more time on the Internet, around 50 hours per month. A 300 MB download limit should still suffice. Heavy users who wish to chat online (by typing, not by voice or video), or who are heavily into research should consider a plan where you can stay on the Internet for an unlimited time. A 300 MB download limit should suffice. Very heavy users downloading large files (music, video etc) should consider a plan allowing about 1000 MB (called 1 gigabyte) or unlimited downloads. Plans of 100-150 hours per month should suffice. 5．Be careful of “additional charges.” Most plans, regardless of the agreed usage, allow you unlimited access. The ISP will charge you for any additional time over your agreed limits. Be careful of choosing a plan that is too small, as additional charges may soon increase your bill. For example, you may take a plan at $10 for five hours use with an additional $3 for each hour you step over the limit. Another plan may exist for $15 allowing you 50 hours per month. If you take the first plan, you may accidentally leave your computer connected when you go to sleep, or get embroiled in a good chat and be unaware of time passing. The charges will soon mount. After seven hours usage, you are paying more than the 50-hour plan. If you can afford it, consider the slightly larger plan. Some ISPs will allow you to convert the plan mid-month if you realise you are overstepping the mark. Other ISPs will allow you to rollover the unused hours to the following month. Be sure to check before signing up. 6．Free trials: are they worth it? Sometimes you will obtain a plan offering “free trial”, usually for a month. This is an excellent way of testing how much you may like to use the Internet. Be careful of two items. Firstly, check how you cancel if you do not like the Internet. Do not provide payment information without knowing a telephone number for customer service. (Some ISPs ask for an email to confirm your cancellation, but if you never managed to get email working this is not really a good option.) Secondly, you will get an email address for everyone to contact you. When you change your ISP, this address will change. Avoid sending out this address to your friends before you know you are happy with the service. 7．Should you use a large or small company? If you are likely to get frustrated when the Internet is not available, you may need to consider a major supplier. Your ISP’s computers may require maintenance and your connection to the Internet will not be available all the time. A major supplier will keep this “down-time’’ to a minimum but you may experience longer delays with a smaller ISP. There is also the small risk that you can lose email. Larger companies will be able to offer a higher quality of service in terms of reliability and connection speed, allowing you to browse faster. Usually, however, they charge more or have more restrictions for their plans. Customer support is vital. If you have a problem, you may need to know how to restore access to the Internet. A local supplier or one with a reputable customer support department would be better placed to help you. 4.2.2 Web-based database application services This is the newest--and perhaps the most intriguing--type of database product, these are database programs that reside entirely on the servers of an "Application Service Provider" (ASP) company. There are several nonprofit-oriented donor/member database services that have started up in the past year. The one with which we're most familiar is e-Tapestry. You purchase e-Tapestry as a service rather than as a product. There's no software to purchase or install on your machines--all you need is a Web browser and an Internet connection (56k works fine, although obviously a high-speed connection is better). The cost depends on the number of records in your database, and starts at FREE for databases with 1000 records or less. For groups with 1000-5000 records, the cost is $99/month. There are a number of additional services that can be added as well. While the program can be customized quite a bit, the fundamental workflow can't be modified as extensively as ebase can permit. However, because e-Tapestry is a hosted application, it is upgraded often, and upgrades are automatically and seamlessly rolled out to all users. E-Tapestry is a very new product, but we've been very impressed by what we've seen. It's particularly attractive to groups with <1000 members, as it's completely free to small groups, and requires absolutely no hardware or software purchase, and no database expertise to administer or maintain. Another significant benefit of ASP-hosted database products are that they can be accessed by multiple users in multiple locations--something that is quite tricky with any other type of database solution. For groups with more than 1000 members, the cost of e-Tapestry is significant, but that cost has to be weighed against the time and expense of developing your own system or even that of customizing a low up-front cost system such as ebase. If you don't need the total customizability of ebase or a custom solution, and would rather spend some cash than your precious time, then e-Tapestry might be worth investigating. Another prominent ASP-type database product is Social Ecology's DonorLinkIT product. While we haven't reviewed it in-depth, it has features and functions that are roughly similar to e-Tapestry, and a similar pricing model ($99/month for organizations with under 5000 records). 4.2.3 Web Site Security Successful attacks on websites can result in a great deal of bad publicity, especially when an official site is replaced by pages presenting the host organisation in an unflattering light. Damage to political and government web sites has made the national news, but defacing any website is likely to harm its owner. Internet image increasingly influences attitudes in the real world too, especially for organisations with customers around the world. For many prospective students or sponsors your web site will be their first, and in some cases only, contact with your institution. All web managers should therefore be concerned with security to ensure that the content and conduct of their site remains under control. Attacks against web servers are not usually motivated by dislike of the owner organisation. Some people just wish to publish their own views and will use any well-connected server for this; others are simply looking for powerful computers with good connectivity to distribute pirated software or to mount attacks on other Internet sites. A web server on a high-speed network like JANET is likely to be a good choice for either type of activity. Although running a web server may make a machine a more attractive target for attackers, it is unlikely to make it significantly easier to break into. Web server software is generally reasonably secure already: successful attacks are usually achieved through errors in configuration or vulnerabilities in the underlying operating system. There is no point in securing the web function if the rest of the machine offers open doors to intruders. There are three basic rules for securing any system: Offer as few services, to as few people, as possible. Extra services will, in any case, affect the machine’s performance as a web server as well as providing possible routes for break-ins. Keep the system up to date. New vulnerabilities are discovered every week, and are exploited soon afterwards. Check log files for warning signs. Each of these should continue throughout the life of the server. Although this requires effort, the procedures are well known. Few people have the ability to discover and exploit new vulnerabilities so the vast majority of security breaches result from well-known problems that could have been avoided. Prevention may seem expensive until you consider the alternative cost of repairing the damage after a breach has occurred. There are three categories of damage that may result from a security breach: loss of service, loss of information and loss of control. Loss of service generally happens either by accident or through hostile intent, and is usually caused by overloading the server with requests. Unfortunately it is very hard to protect a public web server against this kind of “denial of service” attack: a web server’s function is to respond to requests from browsers and it is almost impossible to distinguish between a busy day and an attack. No vulnerability is being exploited except the finite capacity of any system, so no amount of preventative work can help. The best solution is to ensure that your system still has spare capacity when “normally” loaded and hope you can handle requests faster than your attacker can generate them. An attack at this level will be highly unpopular with the originating network, as well as your own, so should be stopped at source before too long. JANET-CERT can help in tracing the origin of attacks, and can also advise on blocking problem hosts. Loss, or strictly leakage, of information is, in one sense, a rather paradoxical concern on the web. The web was, after all, designed as a publishing medium for public content. As a result there are few effective controls on who can read your content from the server: passwords and restriction by source address can both be defeated by a determined thief. Beware especially of using the same password on a web site as on other, more secure, systems. Before you put truly secret information on a public web site, consider first whether this is really appropriate and if so protect it with some off-line encryption method such as PGP. There is, however, a serious concern that a web server may give away information about the system it runs on such as usernames, configurations or password files. These could be useful to a hostile person planning an attack on the machine. Such leaks are usually caused by bad design, either in the server program or, more usually, in its configuration. CGI scripts which allow readers to fetch any file from the server are a long-standing favourite with the hacker community, still being actively and successfully exploited. Any program to be installed on a server should be checked very carefully by someone other than the author. Writing safe scripts is hard and even commercial examples have been known to have problems. The most serious consequence of a security incident is loss of control. Once an intruder has gained the ability to run commands on the server it is usually impossible to determine what changes have been made. In particular most intruders take the precaution of installing another method for gaining access to the system, so that even fixing the original problem does not prevent them coming back. In this situation the owner can no longer to be sure what the machine contains or what it may be doing. At any time the web pages may be replaced or the server launch an attack on a US corporate target, for example. With meticulous preparation before the event it may be possible to repair a compromised server but more often the whole system needs to be re-installed. Either option will involve a lengthy period of down time, considerable inconvenience and possibly lost work for publishers, readers and administrators. Such incidents can only be prevented by careful design, maintenance and use of the system. Users too must be involved, especially if they can log in to the server from remote locations to maintain their pages. “Borrowing” the account of a legitimate user is one of the easiest ways to gain access to any computer. Some sites have decided that maintenance and publishing should be separated: the public machine then becomes a secure “read-only” site which can be tightly secured. Pages and scripts are developed on another server, which is not exposed to the Internet, and copied to the public site under strict control. This design can also isolate internal readers from the consequences of an external denial of service attack, though it does not protect against hostile or careless users within the organisation. In conclusion, it is possible to keep a web site secure but it is not easy. The design, maintenance and use of the server must all be carefully planned and executed to reduce the risk of incidents. In particular, claims of “ease of use” should be treated with caution in case they make life easier for the intruder as well. A web site can be a major asset for an institution and should be protected according to its value. Protection is not easy, but a reasonable level of security is not impossible. There is ample advice available on the web and among the community: some useful documents are listed below. Finally, for JANET customers, remember that the CERT is available to help in preventing incidents as well as curing them. 4.3 Website Content Design 4.3.1 Domain Names Because most people have trouble remembering the strings of numbers that make up IP addresses, and because IP addresses sometimes need to change, all servers on the Internet also have human-readable names, called domain names. For example, www.howstuffworks.com is a permanent, human-readable name. It is easier for most of us to remember www.howstuffworks.com than it is to remember 209.116.69.66. The name www.howstuffworks.com actually has three parts: The host name ("www") The domain name ("howstuffworks") The top-level domain name ("com") Domain names within the ".com" domain are managed by the registrar called VeriSign. VeriSign also manages ".net" domain names. Other registrars (like RegistryPro, NeuLevel and Public Interest Registry) manage the other domains (like .pro, .biz and .org). VeriSign creates the top-level domain names and guarantees that all names within a top-level domain are unique. VeriSign also maintains contact information for each site and runs the "whois" database. The host name is created by the company hosting the domain. "www" is a very common host name, but many places now either omit it or replace it with a different host name that indicates a specific area of the site. For example, in encarta.msn.com, the domain name for Microsoft's Encarta encyclopedia, "encarta" is designated as the host name instead of "www." 4.3.2 Home pages All Web sites are organized around a home page that acts as a logical point of entry into the system of Web pages in a site. In hierarchical organizations, the home page sits at the top of the chart, and all pages in the Web site should contain a direct link back to the home page. The World Wide Web URL for a home page is the Web "address" that points users to the Web site. In many cases, home page addresses are used more than home and business street addresses. The thirty square inches at the top of a home page comprise the most visible area of the Web site. Most readers will be looking at your site on a seventeen- to nineteen-inch monitor, and the top four or five vertical inches are all that is sure to be visible on their screens. The best visual metaphor here is to a newspaper page — position matters. It's nice to be on the front page, but stories "above the fold" are much more visible than those below. In sites designed for efficient navigation the density of links at the top of the home page should be maximal — you'll never get a better chance to offer your readers exactly what they want in the first page they see: Home pages perform a variety of functions. Some designs primarily take advantage of the high visibility of the home page; it's the most visited page of your site and is therefore ideal for posting news and information. The high visibility of the home page also makes it the ideal place to put a menu of links or table of contents for the site. Navigation schemes in sites that use the home page for news and menu listings are often centered on the home page, using it as the "home base" for most navigation through the site. Other home page designs use the home page as the first opportunity to steer audiences into subtopic or special interest areas of the site. The following Figures are the most common home page design strategies.  www.yale.edu/physics Figure4-1 General home page 1. Menu home pages Menu-like lists of links dominated the design of most home pages in the first few years of the Web, and this remains the most common type of home page. Menu-style pages need not be dominated by plain lists of text-based HTML links — graphic imagemaps are often more space efficient, packing the maximal number of links into every square inch of the page. Sophisticated designs combine graphic imagemaps and blocks of text-based links. Text links offer less visual impact but are much easier to change on short notice.  argus-acia.com Figure4-2 Menu home pages 2.News-oriented home pages The home pages of such organizations as the New York Times and CNN (Cable News Network) are obvious examples here, but many organizations take advantage of the high visibility of their home pages to make announcements to both employees and the larger Web audience. Live information makes a home page more attractive and more likely to generate repeat visits. Many home page designs reserve one or more areas for late-breaking news, calendar events, or alert messages. If you choose this approach, standardize the location and nature of the news areas within a general page framework that remains stable over time. Readers will be disoriented if your home page changes too much from week to week.  www.salon.com Figure4-3 News-oriented home pages 3. Path-based home pages Large Web sites offer so much information to so many audiences that it can be impossible to represent the depth and breadth of the site content in a single home page. In addition, readers often come to a Web site with specific interests or goals in mind. In such cases it is often advantageous to use the home page to split the audience immediately into interest groups and to offer them specific, more relevant information in menu pages deeper within the site.  www.iastate.edu Figure4-4 Path-based home pages 4.3.3 Web Design Tools Topstyle - A popular CSS editor for simple creation of cross-browser style sheets. WebSpeed Optimizer - A great little utility that throttles back the data transfer within your computer. Just set the controls for 56kbps and watch your site download from your hard drive to your screen at the same speed most of your visitors will receive it. Drumbeat 2000 (our full review) - Macromedia ASP software for sophisticated database management. The eCommerce edition goes all the way to the shopfront. A JSP (JavaServer Pages) edition is also available. Style Master 1.2 Style Master is just the thing for anyone unfamiliar with the syntax and rules of CSS and for anyone wanting to get CSS to really rock and roll. ECware Pro Version 4.0 - Comprehensive eCommerce solution (registration required for download). Splash! Web Authoring - Using a drag and drop environment and a full range of HTML-oriented features, SPLASH! gives you the ability to create web sites without any programming or HTML knowledge within minutes of installing the software. Includes java, form and table wizards, easy text formatting all in a no code environment Advanced Template Package - If you do CGI programming in Perl, then this is something you may have been waiting for -- using templates in Perl scripts. Transit Central and HTML Transit - Template-based automated Web publishing software. Ozzino Studio - "Let your web pages come alive with exciting animated interactive java applets. Easy to use interface and no programming required.Tons of functionality:- instant animated 3D objects from static images; rotating applets in same location; add interactivity to animated objects and animated gifs; spectacular drop-down menu bars; and much more." Calendars for the Web - "The software creates HTML Table and/or Image Map calendars. I've downloaded many competing calendar programs and I think my software is much, much better." FlyPage Content Editor - Allows any exsisting or new web site to update content through the web browser (no html, no ftp). It gives developers a tool to involve their clients in the timely task of updateing key content areas, such as scheduled events, inventory, announcements, scores, etc. InstantOnline - Tool to database enable a web site. You can read information from a database and present the result as an HTML table or as a free-form HTML pattern, and store information submitted by a user through an HTML FORM. You define all database query parameters and HTML properties with familiar HTML-like tags to fit your exact needs. Internet Crossword Creator - Create crossword puzzles and place them on a Web page with a Java applet for interactive solving. AuthorIT - An object-oriented document development tool that creates hard copy, Windows help and HTML from a single source. 4.4 Budget of Investment on Website With years of experience in website design, I’ve worked with clients from all walks of life. Some have deep pockets, know what they want and don’t mind paying for it, and others are on a very tight budget and have been mislead a few times and don't know where to turn with their last few bucks.? As many of you with a website may already know, price shopping can be a fatal error that costs much more than that "spectacular deal" was supposed to. To help you avoid this and get a better return on your investment, I’m providing a few tips that will help you to keep your website development within your budget without throwing your money away little by little. First, figure out what you want your website to do in terms of functionality. Don’t consider your budget in this process, just brainstorm and list all the features and functions of your ideal website. Do you plan to sell products?? Do you want your customers to to interact with things like forms and polls?? Do you need a live support chat installed?? Then take that list and prioritize it from most important to least important.? Ask your website design company to break down the prices if needed for the various functions rather than giving you a set fee for the whole deal. From there, you can decide which features and functions are completely necessary and which ones you can afford. If the website development company is well-versed?and they understand your long-term goals, they can take care in preparing the original design so that it will be expandable and the features you want in the future can be added later, when you can afford it, without starting over. If you don’t do this, or if your website design company doesn’t understand the ins and outs of programming and expandability, you will likely end up disappointed in the near future and will have to invest even more money to get what you want. You see, there are certain features that are most important in providing a desirable return on your investment. You can usually get a website slapped together without paying much but programming is key. If the site isn’t programmed right, it doesn’t work right. It produces errors and bugs, and when that happens potential customers leave your site.? Suddenly your cheap website design isn't such a good deal anymore. Don’t settle for an offer from a cheap website development company. It is much more important to have a company like The PSI Website Design Company that is built on trust, can meet your deadlines, and won't quote a cheap project if it can't be done properly.? Our main concern is client satisfaction, not only at the time of delivery but throughout the life of your website.? This cannot be upheld by cramming together a cheap website. If you need to compromise because of budget restraints, PSI can help you be sure the compromise is in the best interests of your company! References: http://www.psisolutions.com/inexpensive-design-052704.html http://www.webdevelopersjournal.com/software/web_design_tools.html http://www.psisolutions.com/professional-design-060804.html http://www.itrainonline.org/itrainonline/english/design.shtml http://computer.howstuffworks.com/web-server6.htm http://computer-dictionary.bloodhoundnetwork.com/isp.htm http://www.techsoup.org/articlepage.cfm?ArticleId=261&topicid=6