Web Design Principles Planning the Site

1. Web Design PrinciplesPlanning the Site Mukesh N. Tekwani mukeshtekwani@hotmail.com www.myexamnotes.com

2. Planning the Site • Create a site specification document • Identify the content goal • Analyze the user audience • Create a user-focused site • Consider the different roles & talents necessary to build a site • Create a naming convention for file names • Build a relative file structure that is portable to different servers • Create a flowchart which shows the structure of your info design Previous Summary Next

3. Create a Site Specification Document • Decide the purpose of the site. • Is the site for ecommerce, tutorials, information, providing a service? • Create a site specification • -- It is the design document for the Web site • -- It contains the following info: • > Purpose of the site (Mission statement) • > What is the likely benefit for your company from this site? • > How will you measure the success of the site? Online surveys • > What are the characteristics of the target audience? • > How will you gather more infoabout the audience? • > What are the technical limitations for the Web site? Previous Summary Next

4. Identify the Content Goal • Decide the objective of the site • When designing the site, keep the user in mind • Types of Web sites are: • Newspaper publishing • Nonprofit organizations • Public interest websites – with information, downloadable files • Ecommerce, online shopping – airline / railways ticketing, hotel booking • Product support – for consumers, documentation, online tutorials, etc • Billboard – sites created by companies for information purpose • Virtual Gallery – for photographers, musicians, etc to show their work Previous Summary Next

5. Analyze Your Audience • What type of users will visit your site? • How can you attract visitors and make them return to your Web site? • What type of computer and connection speed does the user have? • Collect info about visitors through online survey • Offer some incentive to visitors to provide this information Previous Summary Next

6. Build a Web Site Development Team • Large sites require a team to manage various issues • Team consists of • Server administrators – to handle firewalls, modems, security, backup, generate reports about no. of visitors • HTML coders – for creating HTML code • Designers – graphic artsists, to develop the graphics, logo, etc • Content writers and information designers – to prepare online content, check spelling, grammar, and authenticity of information • Software programmers – for coding in JavaScript, VBScript, and backend applications for interaction with databases. • Database administrators • Marketing Previous Summary Next

7. Filenames and URLs • The OS decides the file name naming rules • Under Windows OS, a filename can have max 255 characters • But the ISO 9660 standard permits a file name in the 8.3 format: max 8 chars for filename and max 3 chars for extension • Find out which OS is being used on the Web server which will host your Web site, and follow filename convention accordingly • Filenames can be case sensitive – e.g. in UNIX uppercase and lowercase are different. Home.gif is different from Home.gif • Character exceptions – certain special characters like < and > are permitted under UNIX but not under Windows • Filenameextensions – Use proper filename extensions. HTML files must end in .htm or .html, JPG files must have extension .jpg, etc Previous Summary Next

8. Filenames and URLs • Default Main Page – This is the webpage that is displayed when the browser request the directory of the file rather than a specific file • E.g., when we type http://www.microsoft.com/ the default page with filename index.htm is displayed. • Types of URL – Uniform Resource Locator • CompleteURL: It contains the protocol the browser uses, the server name, the relative path and the domain name • E.g http://www.mynotes.com/asp/chap1.html • Use complete URL when linking to files on another server • PartialURL: Used when linking to a file on your own server. Omit the protocol and server name. If files are in same directory, no need to give directory name also Previous Summary Next

9. Directory Structure • Relative vs Absolute Path: • Never specify absolute paths in the partial URLs. • Absolute path tells the location of the file with respect to the root directory • Relative path tells the browser where the file is located relative to the document. Previous Summary Next

10. www.webserver.com www.webserver.com/user1 www.webserver.com/user2 www.webserver.com/user3 User 1 User 2 User 3 Directory Structure • On a Web server, each user is allocated certain amount of space. Previous Summary Next

11. Web folder index.htm page1.htm page2.htm Logo.gif Graphics Building a Relative File Structure • Consider the following relative file structure: To include the file logo.gif in index.htm, we give the following code in index.htm: <IMG SRC = “graphics/logo.gif”> The path in the SRC value tells the browser to look down one level in the directory structure for the graphics folder and find the file logo.gif Thus, the path to the file is a relative path. Previous Summary Next

12. Diagram the Site • Create a flowchart that shows the structure of the site. • This flowchart shows the navigation choices in the site • Create the information structure • Web sites can follow different structures as follows: • Linear structure • Tutorial structure • Web structure • Hierarchical structure • Cluster structure • Catalog structure Previous Summary Next

13. Linear Structure • The user is forced to move along a linear path • The linear structure is sequential • User can navigate forward or backward within the path • The linear structure is very appropriate when the Web designer wants the user to see one page at a time and then move to the next page in the sequence. • Each page can contain a link back to the main page if desired. • A page may contain a link to a subtopic but user can jump from the subtopic page only back to the source page Previous Summary Next

14. Tutorial Structure • This structure is suitable for computer-based training such as tutorials and lessons • It is a modification of the linear structure • User can choose the order of lessons, leave a lesson, and return to it. • The table of contents, site map and index are linked to and from all pages Previous Summary Next

15. Main Page Site Map Table of Contents Index Lesson Lesson Lesson Lesson Lesson Lesson Lesson Lesson Lesson Tutorial Structure Previous Summary Next

16. Main Page Web Structure • This structure offers a link to and from every page on the site • This allows the user to jump freely from one page to another • If such a structure is used, each page must contain consistent navigation bar • Provide information to the user about where he his and where he can go Previous Summary Next

17. Hierarchical Structure • This structure is one of the most common • It is useful for large Web sites • This structure is based on a top-down site design, i.e., it is based on content designed using categories and subcategories. • The user can link to any area within the site structure from the home page • This structure is a very effective way to design informational Web sites. Previous Summary Next

18. Cluster Structure • This structure is similar to the hierarchical structure but every topic area is an island of information • All pages in a cluster are linked to each other • The user can explore within a topic area • All pages contain a link to the main page, site map, and section pages Previous Summary Next

19. Catalog Structure • This structure is suitable for e-shopping sites • User can browse/search for specific items and view information about each product • Users can add items to the shopping cart • When they have finished, they can proceed to checkout and make payment • This type of site requires backend transaction processing to handle the shopping cart, electronic payments, updating the inventory, and generate an order for the warehouse. Previous Summary Next

20. Summary • Site Specification Document • Identify the content goal • Analyze the user audience • Different roles & talents necessary to build a site • Naming convention for file names • Relative file structure : portable to different servers • Flowchart to show the structure of info design Previous Summary Next