Development Basics — Typography, Images, Page Layout, and Color
Typography, images, page layout, and color are the key design elements that will make up your finished Web site. Correct use of these elements plays an important part in the development process. Consider the following guidelines:
Typography As in all media, good typography, the appearance and arrangement of the characters that make up your text, is vital to the success of your Web page. A font consists of all the characters available in a particular style and weight for a specific design. Text always should be easy to read, whether in a topic, magazine, Web page, or billboard. Keep readability in mind as you select fonts, especially when you consider that some of your visitors might only be viewing them on screen, and others might print them.
When selecting a font, determine its purpose on your Web page. Is it to be used for a title? For on-screen reading? Is it likely to be printed? Will the font fit in with the theme of the Web site? Is it a Web-safe font, such as Times New Roman, Courier, or Arial? Web-safe fonts are the more popular fonts and the ones that most visitors are likely to have installed on their computers. Also, while visitors to your Web page may never consciously notice the design of the text characters, or the typeface, it often subconsciously affects their reaction to the page.
Images Images can enhance almost any Web page if used appropriately. Without the visual impact of shape, color, and contrast, Web pages can be visually uninteresting and will not motivate the visitor to investigate their contents. Consider the balance between the number of images and page performance as you develop your site. When adding images, consider your potential audience and the technology they have available. Remember that a background image or a graphical menu increases visitor download time. You may lose visitors who do not have broadband access if your Web page contains an excessive number of graphical items.
Page Layout The importance of proper page layout cannot be overemphasized. A suitable design draws visitors to your Web site. Although no single design system is appropriate for all Web pages, establish a consistent, logical layout that allows you to add text and images easily. The Web page layouts shown in Figure I-8 illustrate two different layouts. The layout on the left (Figure I-8a) shows a page with centered headings and other centered elements, which break up the page and can be difficult to read. The page layout on the right (Figure I-8b) presents strong visual contrast by organizing headings and some types of graphics on the left, while displaying other types of graphics on the right.
Figure I-8
Maintaining consistency and updating changes throughout a site are two of the biggest challenges facing Web designers. A template, a special type of document, can help with these challenges. Dreamweaver provides several page layout templates that can be modified easily.
In laying out your Web pages, consider the following guidelines to ensure that visitors have the best viewing experience:
• Include only one topic per page.
• Control the vertical and horizontal size of the page.
• Start text on the left to match the way most people read text.
• Use concise statements and bulleted points to get your point across; studies indicate most people scan the text.
Color When creating a Web page, use color to add interest and vitality to your site. Include color in tables, as backgrounds, and with fonts. Use the right combination of colors to decorate the layout and tie the Web site pages together.
Reviewing and Testing a Web Site
Some Web site developers argue that reviewing and testing should take place throughout the developmental process. While this may be true, it also is important to review and test the final product. This ongoing process ensures that you identify and correct any problems before publishing to the Web. When reviewing and testing your Web site, ask the following questions:
• Is the Web site free of spelling and grammatical errors?
• Is the page layout consistent, and does it generate a sense of balance and order?
• Are any links broken?
• Do multimedia interactivity and forms function correctly?
• Do the more widely used browsers display the Web site properly?
• Does the Web site function properly in different browsers, including older browser versions?
• Have you initiated a group test, in which you have asked other individuals to test your Web site and provide feedback?
Publishing a Web Site
After your Web site has been tested thoroughly, it can be published. Publishing a Web site, making it available to your visitors, involves the actual uploading of the Web site to a server. After you complete the uploading process, all pages within the Web site should be tested again.
Publishing Basics — Domain Name, Server Space, and Uploading
With your Web site thoroughly tested and any problems corrected, you must make the site available to your audience by obtaining a domain name, acquiring server space, and uploading the site. Consider the following to ensure site availability:
Obtain a Domain Name To allow visitors to access your Web site, you must obtain a domain name. Visitors access Web sites by an IP address or a domain name. An IP address (Internet Protocol address) is a number that uniquely identifies each computer or device connected to the Internet. A domain name is the text version of an IP address. The Domain Name System (DNS), an Internet service, translates domain names into their corresponding IP addresses. The Uniform Resource Locator (URL), also called a Web address, tells the browser on which server the Web page is located. A URL consists of a communications protocol, such as Hypertext Transfer Protocol (HTTP), the domain name, and sometimes the path to a specific Web page (Figure I-9).
Figure I-9
Domain names are unique and must be registered. The Accredited Registrar Directory provides a listing of Internet Corporation for Assigned Names and Numbers (ICANN) accredited domain name registrars. Your most difficult task likely will be to find a name that is not registered. You can locate a name by using a specialized search engine at one of the many accredited domain name registrars listed on the ICANN Web site (icann.org/registrars/accredited-list.html). In addition to registering your business name as a domain name, you may want to register the names of your products, services, or other related names. Expect to pay approximately $10 to $35 per year for a domain name.
Consider the following guidelines when selecting a domain name:
• Select a name that is easy to pronounce, spell, and remember.
• Select a name that relates to the Web site content and suggests the nature of your product or service.
• If the Web site is a business, use the business name whenever possible.
• Select a name that is free and clear of trademark issues.
• Purchase variations and the .org, .net, and .mobi versions of your domain name.
• Some ISPs will obtain a domain name for you if you use their service to host your Web site.
Acquire Server Space Locate an ISP that will host your Web site. Recall that an ISP is a business that has a permanent Internet connection. ISPs offer connections to individuals and companies free or for a fee.
If you select an ISP that provides free server space, most likely your visitors will be subjected to advertisements and pop-up windows. Other options to explore for free or inexpensive server space include the provider from which you obtain your Internet connection; online communities, such as Bravenet (bravenet.com), Tripod (www.tripod.lycos.com), and webs.com (www.webs.com); and your educational institution’s Web server. If the purpose of your Web site is to sell a product or service or to promote a professional organization, you should consider a fee-based ISP. Use a search engine such as Google (google.com) and search for Web site hosting, or visit the Web Site Host Directory (www.websitehostdi-rectory.com), where you will find lists of Web hosting plans, as well as reviews and ratings of Web hosting providers. Selecting a reliable provider requires investigation on your part. Many providers offer multiple hosting plans. When selecting an ISP, consider the following questions and how they apply to your particular situation and Web site:
1. What is the monthly fee? Is a discount available for a year-long subscription? Are setup fees charged?
2. How much server space is provided for the monthly fee? Can you purchase additional space? If so, how much does it cost?
3. What is the average server uptime on a monthly basis? What is the average server downtime?
4. What are the server specifications? Can the server handle many users? Does it have battery backup power?
5. Are server logs, which keep track of the number of accesses, available?
6. What is the ISP’s form of connectivity — that is, how does it connect to the Internet: dial up, DSL, wireless, cable, ISDN, T1, T3, or some other way?
7. Is a money-back guarantee offered?
8. What technical support does the ISP provide, and when is it available? Does it have an online knowledge base?
9. Does the server on which the Web site will reside have CGI scripting capabilities and Active Server Page (ASP) support?
10. Does the server on which the Web site will reside support e-commerce, multimedia, and Secure Sockets Layer (SSL) for encrypting confidential data such as credit card numbers? Are additional fees required for these capabilities?
11. Does the ISP support Dreamweaver and other Web site development software programs?
12. Are mailboxes included in the package? If so, how many?
Publish the Web Site You must publish, or upload, the files from your computer to a server where your Web site then will be accessible to anyone on the Internet. Publishing, or uploading, is the process of transmitting all the files that make up your Web site from your computer to the selected server or host computer. The files that make up your Web site can include Web pages, PDF documents, images, audio, video, animation, and others.
A variety of tools and methods exist to manage the upload task. Some of the more popular of these are FTP (file transfer programs), Windows Web Publishing Wizard, Web Folders, and Web authoring programs such as Dreamweaver. These tools allow you to link to a remote server, enter a password, and then upload your files. Dreamweaver contains a built-in function similar to independent FTP programs.
Maintaining a Web Site
Most Web sites require maintenance and updating. Some types of ongoing Web maintenance include the following:
• Changing content, either by adding new text and images or by deleting obsolete material
• Checking for broken links and adding new links
• Documenting the last change date (even when no revisions have been made)
Use the information from the server logs provided by your ISP to determine what needs to be updated or changed. Statistics contained within these logs generally include the number of visitors trying to access your site at one time, what resources they request, how long they stay at the site, at what point they enter the site, what pages they view, and what errors they encounter. Learning to use and apply the information contained within the server log will help you to make your Web site successful.
After you make updates or changes to the site, notify your viewers with a What’s New announcement.
Methods and Tools Used to Create Web Sites
Web developers have several options for creating Web pages: a text editor, an HTML or XHTML editor, software applications, or a WYSIWYG text editor (discussed in detail on page DW 20). Microsoft Notepad and WordPad are each examples of a text editor. These simple, easy-to-use programs allow you to enter, edit, save, and print text. An HTML or XHTML editor is a more sophisticated version of a text editor. In addition to basic text-editing functions, these programs include advanced features such as syntax highlighting, color coding, and spell checking.This feature converts the application document into a file Web browsers can display. Examples of a WYSIWYG text editor are programs such as Microsoft Expression Web and Adobe Dreamweaver. These programs provide an integrated text editor with a graphical user interface that allows you to view the code and the document as you create it.
A Web developer can use any of these options to create Web pages. Regardless of the option selected, however, it still is important to understand the specifics of HTML and XHTML.
