Website Design

• Ensuring that the site is easy to build and easier to maintain
• Helping you avoid doing unnecessary work on a site
• Confirming that your Web site is built according to industry standards
• Making certain that you have the right people involved in the site development at the right time
  

Step One: Develop a Site Content

Before you can build a site, you must have a mission and purpose for it. This process involves asking yourself and your colleagues a number of questions about whom you’re trying to reach and why.

Understanding Why People Build Web Site

Step Six: Test and Deploy Your Site

Before you can launch your site, you need to test it. Although test plans vary depending upon the sophistication of the site, here are four good things you should do when testing your site:

Check your site on multiple browsers. Testing your site on various current and previous versions of browsers ensures that it works for the largest possible number of users. You should also check on different platforms as well (PC and Mac at the least).
You can get old versions of the Netscape browser at http://wp. netscape.com/download/archive.html?cp=dowarc and old versions of Internet Explorer at www.oldversion.com/program.php?n=msie.
You can find a wide variety of old versions of many browsers at http://browsers.evolt.org.

Try your site with different Web connections of varying download speeds. If you’re building your site at work, you may have a very fast Internet connection. Try viewing and navigating your site using a dial-up 56 Kbps connection to see how well your site loads at that speed. If pages load within a few seconds, then your site is in good shape.

Test all of your forms and features. Walk through each form, again preferably on multiple browsers and operating systems, to ensure that all your tools and forms work properly.

Enlist your friends and colleagues as site testers. The more people that look at your site, the better. You’re probably too close to the site by the time you’ve finished it anyway, and fresh eyes can see things you can’t. Also, other people are likely to give you good feedback on structure and ease of use.

After you’ve finished testing your site, which generally takes at least a week, you should give yourself at least another week to fix any problems you’ve found during the testing phase.

When you’re ready to roll out your site, a good idea is to do a soft launch first. A soft launch is when you launch a site but don’t really tell anyone about it. People who already know something about you or may be looking for your site will start to check it out and may provide you with some additional feedback. But you won’t be faced with a big barrage of people, and you’ll have a chance to troubleshoot anything you may have overlooked in making the jump from working on a site internally to having a site out there live for the real world.

Step Five: Build the Site

After you’ve completed the design step, you’re ready to start building the site. This includes generating all the code, supporting databases, generating HTML, and posting content. Building the site can take weeks, and you should keep a number of basic rules of development in mind when building your site. Here are the most critical ones:

Work internally: Don’t do all your development work on the site for everyone to see. Be sure to work on the site either internally (on your corporate network or your personal machine) or on a different URL than the final address. This way you can make all the mistakes you like and the real world isn’t likely to see them.

Go wide, then deep: A good strategy is to always build the structure of the site first, including the navigation, and then fill it in with the content within individual sections.

Centralize your images: Centralizing your images makes finding images and generating the proper code that much easier. The norm is to include all images in a folder called images at the root level of your site.

Whenever possible, use relative paths: Using a relative path simply means that your links from one file to another within your site — HTML files, images, PDFs, and so on — are relative to the location of the file you’re currently working on. This makes changing links and moving things around in folders that much easier. Dreamweaver defaults to using relative paths. An absolute path (for example, http://www. mysite.com/section/page.htm) includes the site’s URL, which is not only cumbersome but also difficult to use during development.

Keep filenames simple: Always keep your filenames in lowercase letters, and don’t include spaces in filenames, folder names, or URLs. This ensures that no matter what type of Web server your site is hosted on Windows, Macintosh, or Unix the files can be read by any Web browser.

Use folders to segment your content: This provides your site with a structure that makes finding and managing your content and code easier.

Always comment your code: Commenting code is a common software development practice. As you’re writing your code, you add comments next to major features and functions so that someone else can understand your work if you’re not there to explain it to them. Browsers ignore comments when displaying the page (but you can see comments, if they’re in the code, by using your browser’s View Source command). If the code is logically laid out with comments, managing it is much easier. HTML comments always appear in this format: <!-- comment here -->. JavaScript, ColdFusion, and other types of Web code each have their own comment conventions.

Do everything you can to protect your applications. Hacking is serious business, and the last thing you want to have happen is for your site to be compromised. Here are just some of the things you can do to ensure that your site is designed with security in mind:

• Always use digital certificates when sending users private information over the Internet. A digital certificate is a secure, encrypted digital key that ensures that only the user’s Web browser and the server that issued the key can see the data being transmitted back and forth. You can find out more about digital certificates at www.verisign.com.
• If you’re doing e-commerce, don’t use Microsoft Access. Access isn’t nearly as secure as Microsoft’s SQL Server.
• Never query a database directly for a user’s private information, such as username, password, or credit card numbers. With SQL, you can use stored procedures to query a database and mask the code from potential hackers. While stored procedures are outside the scope of this book, you can read more about them in Anthony T. Mann’s Microsoft SQL Server 2000 For Dummies, published by Wiley Publishing, Inc.
• Always try to build your applications in three tiers. A three-tiered application, the concept of which the business logic for your site is separate from your display code and your database logic. This is more secure, and it makes changing components of your Web application easier because of the modular nature of a three-tiered application.
• In the three-tiered model, the Web browser can only talk to an intermediary application or object (sometimes called a COM object) and can only pass a finite set of variables to this intermediary. In turn, the intermediary negotiates with the data layer to retrieve only the specified information, which it passes back to the display layer. This ensures that the end user can’t directly connect to the data layer.
• Set up a mechanism for sharing files. When you’re working on the same files with more than one person, set up a convention for sharing the files, so as to avoid overwriting each other’s work. Dreamweaver comes with some source control tools that help in this process, as does Contribute, but you may not want to rely just on their built-in protections. You should have an agreed-upon procedure for working on the same files.

Step Two: Define Your Requirements

After you’ve decided what your site is all about, you need to come up with some basic requirements for the site. Requirements are the minimum standards that the site must conform to. These requirements break out along the following categories:

Feature requirements: The basic set of site features and what those features need to accomplish.

Technical requirements: The minimum technical specifications for the site. Table below includes the common technical requirements for Web sites.

Design requirements: The aesthetic and accessibility requirements for the site. Design requirements may include things such as using the proper corporate colors, and accessibility requirements generally include things like adding a text-only version of a site so that it can be read by text readers (browsers designed for the visually impaired).

Step Three: Generate Content

During this step, you work to generate the various types of text, images, and so on that will make up the content of your site.

Step Four: Design the Site

1. Complete the feature design.
In the second step of Web site development, you set out the requirements for features on the site. Here, you get down to the nitty-gritty and design exactly how those features will work. For example, if you want to collect mailing list information, you need to articulate precisely how the information is captured, what kind of response is sent to a user, and where the captured information goes.

2. Work through the user interface design.
The user interface design is the way the site works, minus the aesthetics. It includes the composition of pages, the structure and look of the content, and it applies the logic of the feature design above.

3. Consider the graphics design.
After the feature and user interface design are complete, your site is ready for the aesthetics. You may want to create graphics for logos, icons, navigation, sidebars, backgrounds, and other site elements.

4. Complete the technical design of the site.
Truth be told, you can do the technical design after you complete the user interface design, but usually it ends up being the last design step. You must design the technical components that enable all the features of the site to be realized.