Chapter 3 Planning the Site Principles of Web Design, 4 th Edition

3-2 Objectives Create a site specification Identify the content goal Analyze your audience Build a Web site development team Create conventions for filenames and URLs Set a directory structure Create a site storyboard Publish your Web site Test your Web site Refine and update your content Attract notice to your Web site

Principles of Web Design, 4th Edition3-3 Create a Site Specification

Principles of Web Design, 4th Edition3-4 Create a Site Specification Answer the following questions: –Why are you building the Web site? –Can you write a two- or three-paragraph mission statement that briefly states the site’s goals? –What do you envision as the goal of the site? – What do you (or your company or organization) hope to gain from creating and maintaining a Web site?

Principles of Web Design, 4th Edition3-5 Create a Site Specification (continued) Answer the following questions (continued): –How will you judge the success of the site? What are the measuring factors you can use to assess the effectiveness of the site? –Who is the target audience? What characteristics do they share? How will you find out more about them? –What are the limiting technical factors affecting your site?

Principles of Web Design, 4th Edition3-6 Identify the Content Goal

Principles of Web Design, 4th Edition3-7 Identify the Content Goal Examine closely what type of site you are building Your objectives and your users’ objectives may be quite different Adopt your users’ perspective Think about the type of content you’re presenting and look to the Web for examples of how best to present it

Principles of Web Design, 4th Edition3-8 Identify the Content Goal (continued) Types of web sites: –Billboard –Publishing –Portal –Special interest –Blog –Virtual gallery –E-commerce, catalog, online shopping –Product support –Intranet/Extranet

Principles of Web Design, 4th Edition3-9 Analyze Your Audience

Principles of Web Design, 4th Edition3-10 Analyze Your Audience Produce an audience definition: –What is it that users want when they come to your site? –How can you attract them and entice them to return for repeat visits? –What type of computer and connection speed do your typical visitors have?

Principles of Web Design, 4th Edition3-11 Analyze Your Audience (continued) Who are the typical members of your audience? –Are they male or female? –What level of education do they have? –What is their reading and vocabulary level? –What level of technical aptitude do they have? Why do people come to your site? –Do they want information? –Do they want to download files? –Are they looking for links to other Web sites?

Principles of Web Design, 4th Edition3-12 Analyze Your Audience (continued) Do you have a captive audience, such as a base of loyal customers that want up-to-date information? Are you designing for an intranet, where users are employees of an organization? Will other sites link to your site, or will your site provide links? If people unfamiliar with the site visits, will they know what you offer?

Principles of Web Design, 4th Edition3-13 Analyze Your Audience (continued) How often will users return to your site? Do they have a reason to come back? What computing platform do your users have? –What is their typical connection speed? –What type of browser do they use? –If you are on an intranet, is there a standard for browsers, connection, and screen resolution?

Principles of Web Design, 4th Edition3-14 Analyze Your Audience (continued) Whose skills do you need to build the site? Who will create the graphics, code the pages, and write the text? Do you have the talent and economic resources that you need?

Principles of Web Design, 4th Edition3-15

Principles of Web Design, 4th Edition3-16 Build a Web Site Development Team

Principles of Web Design, 4th Edition3-17 Build a Web Site Development Team The following roles are necessary: –Server administrators –HTML coders –Designers –Writers and information designers –Software programmers –Database administrators –Marketing

Principles of Web Design, 4th Edition3-18 Create Conventions for Filenames and URLs

Principles of Web Design, 4th Edition3-19 Create Conventions for Filenames and URLs Plan your file-naming conventions for your site Talk to your system administrator and find out what type of operating system your Web server uses Typically you’ll develop your Web site locally on a PC or Macintosh; you will upload the files to the Web server as the last step in the publishing process

Principles of Web Design, 4th Edition3-20 Create Conventions for Filenames and URLs (continued) If the Web server runs a different operating system from your local development system, transferring your files to the server may break local URL links because of either file name or directory structure inconsistencies

Principles of Web Design, 4th Edition3-21

Principles of Web Design, 4th Edition3-22 Naming Files Case Sensitivity — Use lowercase for all file names and in the HTML code Character Exceptions — Leave out special characters such as /, \, &, and * File Extensions — Use the correct three- letter extension

Principles of Web Design, 4th Edition3-23 Solving the Filename Dilemma The International Standards Organization (ISO) standard specifies a maximum of eight letters followed by a period and a three-letter extension Allowed characters are letters, numbers, and the underscore character

Principles of Web Design, 4th Edition3-24 Solving the Filename Dilemma (continued) Here are some valid file name examples: –mypage.htm –chap_1.htm –picture1.jpg –logo.gif

Principles of Web Design, 4th Edition3-25 The Default Main Page Name Every Web site has a default main page that displays when the browser requests the directory of the site rather than a specific file Before you start coding, check with your system administrator to verify the main page file name index.htm is the most common default main page name

Principles of Web Design, 4th Edition3-26 Using URLs Absolute URL — Includes the protocol, domain name, path, and filename; refers to another server on the Internet Relative URLs — Omits the protocol and domain name; refers to a file that resides on the same server

Principles of Web Design, 4th Edition3-27

Principles of Web Design, 4th Edition3-28 Set a Directory Structure

Principles of Web Design, 4th Edition3-29 Set a Directory Structure A typical Web server has a user area that contains folders for each user Your files are stored in your user area The directory structure of the Web server affects the format of your site’s URL

Principles of Web Design, 4th Edition3-30

Principles of Web Design, 4th Edition3-31 Set a Directory Structure When you buy a domain name, the name you choose is an alias that points to your actual location on the Web server

Principles of Web Design, 4th Edition3-32

Principles of Web Design, 4th Edition3-33 Build a Relative File Structure You will most likely build your Web site on a computer that is different from the computer that will be hosting your site Keep this in mind when you are designing the directory and file structure Because your files will be transferred to another computer, any URLs you specify to link to other pages in your site must include paths that are transferable

Principles of Web Design, 4th Edition3-34 Build a Relative File Structure (continued) Relative paths tell the browser where a file is located relative to the document the browser is currently viewing

Principles of Web Design, 4th Edition3-35

Principles of Web Design, 4th Edition3-36

Principles of Web Design, 4th Edition3-37

Principles of Web Design, 4th Edition3-38 Create a Site Storyboard

Principles of Web Design, 4th Edition3-39 Create a Site Storyboard Plan your site by creating a flowchart This preliminary step is one of the most important that you take in planning your site

Principles of Web Design, 4th Edition3-40 Linear Structure The linear information structure lets you guide the user along a path This structure lends itself to book-type presentations or content that requires the user to follow a predefined path

Principles of Web Design, 4th Edition3-41

Principles of Web Design, 4th Edition3-42 Tutorial Structure The tutorial structure is perfect for computer- based training content such as lessons, tutorials, or task-oriented procedures

Principles of Web Design, 4th Edition3-43

Principles of Web Design, 4th Edition3-44 Web Structure Many smaller Web sites follow the Web structure, which offers links to and from every page in the site This allows the user to jump freely to any page from any other page

Principles of Web Design, 4th Edition3-45

Principles of Web Design, 4th Edition3-46 Hierarchical Structure The hierarchical structure is probably the most common information design It lends itself to larger content collections because the section pages break up and organize the content at different levels throughout the site

Principles of Web Design, 4th Edition3-47

Principles of Web Design, 4th Edition3-48 Cluster Structure The cluster structure is similar to the hierarchical structure, except that every topic area is an island of information unto itself, with all pages in each cluster linked to each other

Principles of Web Design, 4th Edition3-49

Principles of Web Design, 4th Edition3-50 Catalog Structure The catalog structure accommodates electronic shopping The user can browse or search for items and view specific information about each product on the item pages

Principles of Web Design, 4th Edition3-51

Principles of Web Design, 4th Edition3-52 Publish Your Web Site

Principles of Web Design, 4th Edition3-53 Publishing Your Web Site To make your site live, you transfer your Web site files to a Web server Unless your company or organization has a Web server, you’ll have to use the services of a Web hosting provider After you choose a server to host your files, you’ll need to select file transfer software and upload the Web site files from your development machine to the Web server

Principles of Web Design, 4th Edition3-54 Choose a Web Hosting Service Provider An important decision is your choice of Web hosting service or Internet Service Provider (ISP) This is the company that hosts your Web pages on a Web server Web hosting services provide Web server space only, and may be more capable of hosting a complex commercial site

Principles of Web Design, 4th Edition3-55 ISP Checklist Is the ISP local or national? Does the ISP have enough local points of presence (POPs) in my area code? Does the ISP offer technical support? When is support staff available? How many addresses do I get with an account? Does the ISP provide software, such as an FTP client?

Principles of Web Design, 4th Edition3-56 ISP Checklist (continued) Does the ISP support the latest connection technologies such as DSL or cable? Does the ISP offer enhanced services, such as SQL database support, Secure Socket Layer, CGI scripting, and multimedia technology?

Principles of Web Design, 4th Edition3-57 Upload Files with the File Transfer Protocol To publish your pages on the Web, you must send your HTML, image, and other files to the Web server To do this, you need File Transfer Protocol (FTP) software, often called an FTP client

Principles of Web Design, 4th Edition3-58 Upload Files with the File Transfer Protocol (continued) To upload your files, start your FTP program and connect to your Web server using the FTP information provided by your service provider Select the files that you want to upload in your local directory listing and transfer them to the server Once the files have reached the Web server, they are immediately available for access on the Web

Principles of Web Design, 4th Edition3-59 Test Your Web Site

Principles of Web Design, 4th Edition3-60 Testing Considerations Remember to test for the following Web design variables: Multiple browsers Multiple operating systems Connection speeds Display types

Principles of Web Design, 4th Edition3-61 User Testing Vary your subjects Formalize your testing Develop a feedback form

Principles of Web Design, 4th Edition3-62 Develop a Feedback Form Did you find the information you needed? Was it easy or difficult to find the information you needed? Did you find the site visually attractive? Did you find the content easy to read? Did you find the site easy to navigate?

Principles of Web Design, 4th Edition3-63 User Feedback Questions Did you think the information was presented correctly? Did the information have enough depth? What area of the site did you like the best? What area of the site did you like the least? Would you recommend the site to others?

Principles of Web Design, 4th Edition3-64 Refine and Update Your Content

Principles of Web Design, 4th Edition3-65 Refine and Update Your Content Refine your content and presentation based on your user’s feedback Analyze your visitors and their preferences when they visit Plan for ongoing maintenance of your site Plan for major site design changes on a regular basis

Principles of Web Design, 4th Edition3-66 Attract Notice to Your Web Site

Principles of Web Design, 4th Edition3-67 Leveraging Search Engines Search engines are software programs that search out and index Web sites in a catalog Not all search engines are alike, so the way they search and catalog differs greatly

Principles of Web Design, 4th Edition3-68 Working with Search Engines Use meaningful titles Be careful with frames Use alt text with images Submit your URL to different search engines

Principles of Web Design, 4th Edition3-69 Summary Start with pencil and paper Write a site specification document Analyze your audience Focus your site on the user’s needs An effective site is more commonly the result of a team effort Create portable file-naming conventions Build a relative file structure

Principles of Web Design, 4th Edition3-70 Summary (continued) Select a basic information structure for your site and then customize it based on your content Shop carefully and compare features when you are looking for a Web host Consider the future disk space and technology needs of your content Download and learn to use an FTP client for use in the often-repeated task of transferring files to your Web site

Principles of Web Design, 4th Edition3-71 Summary (continued) Test your site against the basic Web variables: –Browser –Operating system –Display resolution –Connection speed Test your Web site with a variety of users Plan for the maintenance, upkeep, and redesign of your Web site Keep your content up to date