Principles of Web Design.pdf

WEB SITE DESIGN PRINCIPLES Understanding the Web Design Environment  web site design must be portable and accessible by users who have a variety of browsers, operating systems, device platforms, and physical abilities test in different environments and with different users, even when you feel co...

WEB SITE DESIGN PRINCIPLES Understanding the Web Design Environment  web site design must be portable and accessible by users who have a variety of browsers, operating systems, device platforms, and physical abilities test in different environments and with different users, even when you feel confident of your results avoid portability problems by coding to standards analyze your audience and building a profile of your average user Browser Compatibility Issues Every browser contains a program called a rendering engine that interprets the markup tags in an HTML file and displays the results in the browser. The logic for interpreting the HTML tags varies from browser to browser, resulting in potentially conflicting interpretations of the way the HTML file is displayed To ensure the greatest compatibilities of your web pages across multiple browsers, follow these guidelines: ❑Follow W3C standards—Use HTML and CSS correctly and consistently. ❑Validate your code—Test for syntactical correctness and coding errors. ❑Know your audience—Create designs that are accessible, readable, and legible. ❑Test your work in multiple browsers and devices—Test and retest as you develop to mitigate problems as they occur. Connection Speed Differences User’s Internet connection speed has traditionally been a variable that web designers could not ignore In the developed world, the number of people who can use broadband access to the web has steadily increased, which makes connection speeds less of an issue. Many users around the world connect at speeds slower than broadband. Smart phones and tablets often have lower bandwidth than home or business computers. Many designers make the mistake of not testing their pages at different connection speeds. Browser Cache and Download Time All web pages are stored on computers called web servers. When you type a Uniform Resource Locator (URL) address in your browser, it connects to the appropriate web server and requests the file you specified. The server serves up the file so your browser can download it. The first time you visit a site, the entire contents of the HTML file (which is plain text), every image referenced in the HTML code, and any CSS style sheets are downloaded to your hard drive. The next time you visit the web site, your browser downloads and parses the HTML file from the site. The cache is the browser’s temporary storage area for web pages and images. The browser always tries to load images from the cache rather than downloading them again from the web. Note: As a web designer, you will be testing and retesting your site. If you make changes to a web page but don’t see the results in the browser, it is probably because your browser is reading from the cache rather than loading the changes you made. To clear the cache in most browsers, press the Ctrl+Shift+Del key combination on a Windows PC or hold down the Shift key and click the Reload button in the browser. Device and Operating System Issues The best method for dealing with this variety is to test your content on as many devices as possible. Remember the following points about different computer systems: Screen sizes and color depth—the colors you choose and images you prepare for your site can look significantly different on different devices. Screen resolutions and sizes, color depth, and video hardware and software all affect the look of your web pages. Browser type and version—The release version of the browser also affects the way your pages appear. Always test your work on as many devices as possible, from phone to desktop. Font choices—Installed fonts vary widely from one computer to another. Choose fonts that are commonly used for the web; otherwise, if a font you choose is not installed on the user’s device, it will appear in a default typeface. Choose fonts for legibility and ease of use on different devices. Designing for Multiple Screen Resolutions  A device’s screen resolution is the width and height of the screen in pixels. Most desktop and laptop computer monitors can be set to a number of different resolutions. Mobile devices such as tablets and smartphones generally have fixed resolutions that cannot be changed by the user. User screen resolution is a factor over which you have no control. Desktop and Laptop Displays Web designers have adapted their content to the changing and improving technology of computer display devices, using different design techniques to present their content in the best possible way across different screen sizes and graphics technologies. Currently the most popular computer screen resolution is 1366 x 768, a common laptop computer resolution. The second most common screen resolution is 1024 x 768 , a default setting for a majority of 15- and 17-inch monitors that still exist in many workplaces and public spaces such as libraries. Flexible layouts that can adapt to different screen resolutions can spread too wide and add too much white space to the content. Many designers now limit the horizontal width of their designs so they appear as a centered page on larger monitors. https://www.alamy.com/stock-photo-electronic-devices-with-screens- resolutions-isolated-on-white-background-90533272.html Amazon uses a flexible layout in their page designs. Figure 2-4 shows the Amazon.com web site (www.amazon.com) in a 1366x768 resolution Figure 2-5 shows the same page in 1920x 1080, a typical widescreen format. This page is designed to be flexible and fill the screen at different screen resolutions. In contrast, the National Park Service (www.nps.gov) uses a fixed design that does not change based on user screen resolution. Fixed designs allow the designer to control the look of the web pages as if it were a printed page, with consistent width and height. Fixed width page layouts are a popular choice because of the increasing variety of screen sizes and resolutions and the relative ease of constructing fixed-width designs compared to flexible designs. Most current fixed-width layouts are designed to stay centered in the browser window, regardless of the user’s screen resolution. Figure 2-6 shows the National Park Service web site at 1024 x 768. The designers built the site with this resolution as the base for their design. If the user chooses to use a smaller browser window, or displays the site on older monitors that have a lower resolution, then the user will only see a portion of this screen and will have to scroll both horizontally and vertically to see the rest. As the screen resolution changes, a web page with a fixed design stays centered in the browser window, splitting the remaining space into equal amounts on the left and right side of the browser window. The benefit of centering a fixed-width page is that the layout of the content remains unchanged no matter what the user’s screen resolution. Additionally, the designers have added a background graphic that enhances the page layout at higher resolutions. Mobile Devices Mobile device usage has exploded in the last few years, adding to the number of screen sizes and resolutions web designers must contend with. Smartphones and tablets running the Apple iOS and Android operating systems come in a multitude of sizes that complicate the web designer’s job. Figure 2-8 shows popular mobile screen resolutions that designers must take into account when creating and testing their web site designs.  Mobile pixels, points and resolutions https://blog.fluidui.com/designing-for-mobile-101-pixels-points-and- resolutions/ When you are testing your web application, due to device fragmentation identifying which device sizes one must use to ensure maximum coverage is important. Here are the top most common screen resolution sizes are: The ever-expanding array of screen sizes means that web designers have to decide how to serve their content to both desktop and mobile users. Designers can use two strategies to serve their content: a separate mobile site or a responsive design. Separate Mobile Site Following this strategy, you can offer two versions of your site, one for desktop computers and one for mobile devices. The web server can detect the type of device that is requesting the web page and redirect the user’s browser to the mobile or desktop web site. This method can maximize the user’s mobile experience because the site is expressly designed to present content in that format, offering web pages that fit the device and use appropriate fonts, colors, and applications. Although these two presentations usually draw from a single source of content using a content management system (CMS), maintenance of two sites doubles the work. A CMS is software that allows editing and publishing of content to different formats, such as a desktop and mobile web site. Having separate sites does complicate maintenance and ongoing updates of the page designs because there are duplicates of everything. Figure 2-9 shows a portion of the main page that Amazon presents for mobile devices. This page is designed to fit the portrait orientation of most mobile device screens, which allows one column of content. Responsive Design You design your web pages to adapt to different screen sizes—from smartphone to desktop—using CSS styles and media queries. The major benefit of this strategy is that maintenance and updates are limited to a single set of content and web pages. The challenge is refining the design and creating the style code so that the pages render appropriately across different devices. Responsive design, a method of designing web sites that are adaptable to a wide range of devices from mobile phones to desktop monitors. In Figure 2-10 , notice that as the screen size shrinks to accommodate different devices, certain articles are dropped from the display or repositioned on the page. Suggestions for Solving the Screen Resolution Dilemma Which of the two layout types—fixed or flexible—is right for your design? Currently, many mainstream sites still use fixed designs, but mobile devices require either a separate mobile site or a move to a more responsive design. Fixed designs require mobile users to pan, zoom, and scroll to read content, so designs that are flexible are more adaptable for the user and to multiple devices. Consider the following advantages of each type of design when you determine which approach is right for you. Flexible/responsive design advantages: User controls the view of the content Less chance of horizontal scrolling More flexibility for multiple devices Better suited to text-based layouts and simpler designs Fixed-width design advantages: Designer controls the view of the content Allows more complex page layouts More control over text length Crafting the Look and Feel of the Site The interface that the user must navigate is often called the look and feel of a web site. The look and feel is both the way your web site works and the personality it conveys to the user. Not only should you plan for a deliberate and consistent look and feel, you must test your designs against the variable nature of the web and the many devices people use to access it. You want to ensure that the greatest number of users can navigate your site successfully. Balance Design and Content When planning the design of a web site, access to your content and the needs of your users should always guide your design decisions. A web site’s design should complement the content and support the reader. The information design should be logically divided and structured to expose similar groupings of content, and then provide access to the content through designed navigation. Always choose simple and direct designs that showcase content and allow easy access, and set aside unneeded technology and complex visual designs that can frustrate and misdirect your user. Plan for Easy Access to Your Information Your information design is the single most important factor influencing the success of your site because it determines how easily users can access your web content. Anticipate and plan for the actions and paths that users are likely to choose when they traverse your site. Provide direct links to the areas of your site that you find or expect to be in the greatest demand. Offer search and site map functions to allow users different ways to find the content they want. Remember that users want to get to your site, retrieve their desired information, and move on. Plan for Clear Presentation of Your Information Design your information so it is easy to read and legible on the screen. Break text into reasonable segments that make for easier onscreen reading. Think about providing contrasting colors that enhance the legibility of your text, such as dark colors against a light or white background. Use plenty of white space to accent specific areas of content and provide separation and structure to your information. Online visitors scan more and read less, skimming long pages quickly as they scroll through the text. Control the width of your text to provide complete, easy-to-read columns. Break information into smaller chunks and link them with hypertext. The Pew Research Center site (www.pewresearch.org) offers both clear presentation and easy access to information, as shown in Figure 2-11.  Creating a Unified Site Design Plan the unifying themes and structure that will hold the pages together. The theme should reflect the impression that you or your organization want to convey. Plan smooth transitions, use a grid to provide visual structure, and include active white space. Plan Smooth Transitions Plan to create a unified look among the sections and pages of your site. Provide grounding for the user by placing navigation elements in the same position on each page. Think of users turning the pages of a periodical when they browse from web page to web page. The overall design of a page at any information level should reflect the identity of the site as a whole. For example, Figure 2-12 and Figure 2-13 show the main page and a secondary-level page from the Los Angeles Zoo web site (www.lazoo.org). Because these pages share the same color scheme, logo, fonts, and navigation, the web site offers a smooth transition from the main page to the secondary page and presents a unified look and feel. Use a Grid to Provide Visual Structure The grid is a conceptual layout device that aligns your page content into columns and rows. Use the grid to enforce structure, but you also can break out of the grid to provide variety and highlight important information. These grid sections provide placement guidelines for page elements, each of which can cover multiple rows and columns of the grid as needed. Figure 2-14 shows a web page divided into four columns and eight rows.  The grid also provides a page margin around the content and gutters of white space between elements on the page. This white space actively separates the content and provides structure for the users’ eye to follow. Web pages that respect the grid and consistently align text and graphic elements have a more polished look than pages that have scattered alignments. The Guardian site’s main page (guardian.co.uk) in Figure 2-16 has a six- column grid. All of the text and graphic elements on the page align within the grid to create an orderly layout. Use Active White Space White spaces are the blank areas of a page, regardless of the color you choose to give them. White space that is used deliberately is called active white space and is an integral part of your design because it structures and separates content. Sometimes the strongest part of a design is the active white space. Passive white space includes the blank areas that border the screen or are the result of mismatched shapes. Figure - illustrates active versus passive white space. The Smithsonian Air and Space Museum home page (www.airandspace.si.edu) in Figure 2- 18 shows effective use of active white space, making the content easy to read. Plenty of active white space reduces clutter and clarifies the organization of your ideas.  Designing for the User Keep your design efforts centered solely on your user. Find out what users expect from your site. What do users want when they get to your site? Once you know what your users want from your site, you can evaluate how the design reflects the audience’s profile and needs. Figure 2-19, the Internal Revenue Service (www.irs.gov). The navigation links, column headings, and feature items are all designed to let users get information as quickly as possible. Web site for the Wall Street Journal (www.wsj.com) in Figure 2–20 projects a strong periodical-like image that will resonate with its audience. The overall effect evokes the look of a printed page while using the color, linking, and design flexibility that the web offers. Design for Interaction Design user interaction by using meaningful column headings, linked text, and short descriptions. Organize links into related topic groups, and separate groupings with white space, graphics, or background color. Make reading easier by using a text column that is narrower than the width of the screen. Keep your text legible by providing enough contrast between foreground and background colors. Provide links that allow the user to jump quickly to related content. Figure 2-21 shows the site’s main page. Three columns of content present a variety of information, with plenty of active white space to separate features and allow easy reading. When users choose a link, they jump to a page designed for reading, as illustrated in Figure 2-22 , which shows a secondary page from the Boston Globe web site. Featured main sections are provided in the banner at the top of the page. An article sidebar provides links to related content. Design for Location As you plan your design to guide the user through your content, consider the different ways your user could be viewing your web pages. Fixed-width designs tend to have the same proportions as the printed page, which enforces scanning the page using paper-based reading habits. In this reading pattern, the user’s eye moves from left to right and back again, as shown in Figure 2-23. In contrast, when viewing flexible layouts that fill the screen, users may scan information following a clockwise pattern, as shown in Figure 2-24. The F-shaped pattern, shown in Figure 2-25 , is dominated by the upper-left part of the page, where users look for the most important information and navigation on the page.  In addition to knowing how the user views your pages, you should also know what expectations he or she might have about your navigation and content. Users have come to expect common elements of a web page in certain locations. In Figure 2-26 , the top rows of grids show different element expectations, with the deeper colors indicating higher preference. Keep the following points in mind: Think about your grid structure and how you want to break out of it to attract attention. Use text weight and size to communicate relative importance of information. Use meaningful headings to help users navigate through your content. Divide content into sections with rules or active white space. Use shapes and color to reinforce location or topic. Keep a Flat Hierarchy Do not make users navigate through too many layers of your web site to find the information they want. Structure your web site to include section- or topic-level navigation pages that let users find their desired paths quickly. Create content sections organized logically by theme. Try to follow the three clicks rule; that is, don’t make your users click more than three times to get to the content they desire. Provide prominent navigation cues that enable quick access. Consider providing a site map that graphically displays the organization of your web site. Figure 2-27 shows a site map from the Scholastic web site (www.scholastic.com). Use Hypertext Linking Effectively You make the decisions that determine how users move through your site and process information. With thoughtful hypertext writing, you can engage readers in a whole new way. Avoid using the meaningless phrase “Click Here” as the hypertext link. Instead provide a helpful textual clue to the destination of the link. Provide plenty of links to let the user get around quickly. Use links to let the user return to the navigation section of your page, to a site map, or to the main page. Do not make the user scroll through lengthy columns. Provide links that let users jump down the page, return to the top of the page, or navigate a clear path back to higher levels of your content. How Much Content Is Too Much? Be conscious of overloading your user with too much information, making it hard for them to find content or complete tasks. For some users this visual clutter of information is hard to absorb, making it difficult to find and process information. Resist the temptation to overload users with too much information. To make your content stand out and have impact, carefully divide it into smaller sections and present it in a structured manner with lots of white space and meaningful navigation cues. ESPN’s web site (www.espn.com) in Figure 2-29 offers a vast array of content choices.  Reformat Content for Online Presentation Although tempting, it often is a poor choice to take documents that are formatted for print and post them online without considering the destination medium. In most cases, a document that is perfectly legible on paper is hard to negotiate online. Figure 2-30 is formatted as if it were a page from a book. The text is dense and fills the screen in large blocks, with no margins to relieve the reader’s eye. In contrast, Figure 2-31 , from the Readprint web site (www.readprint.com), shows text that has been designed for online display. The differences between these two pages show that text must be prepared thoughtfully for online display.  Designing for Accessibility Designing for accessibility means developing web pages that remain accessible despite any physical, sensory, and cognitive disabilities; work constraints; or technological barriers on the part of the user. As Tim Berners-Lee said, “The power of the web is in its universality. Access by everyone, regardless of disability, is an essential aspect.” Many web sites employ at least some accessibility features, while others are more aggressive about conforming to the standards set by the W3C, which maintains the Web Content Accessibility Guidelines (WCAG) recommendation. Common accessibility features can be unobtrusive additions to your site design. For example, the Langdon College site (Figures 2-32 and 2-33) includes the following among its accessibility features: Optional navigation links—Lets users with screen readers skip repetitive navigation links and jump directly to the page content High-contrast version—Lets users switch to a legible alternate page version to make text easier to read User-controlled font size—Lets users adjust the font size for optimal legibility Access keys—Lets users access sections of the site with keystrokes, which are listed on the Accessibility page.  WCAG 2.0 Guidelines WCAG. consists of four main guidelines, which state that web content must be: Perceivable—Information and user interface components must be perceivable by users. Operable—User interface components must be operable by users. Understandable—Information about the user interface and its operation must be understandable by users. Robust—Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies. Perceivable Content WCAG 2.0 includes the following tips to help you provide perceivable content in your web pages: Provide text alternatives for any nontext content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language. Provide synchronized alternatives for multimedia. -For example, provide captioning and transcripts of audio and descriptions of video as alternatives to the multimedia content. Create content that can be presented in different ways (for example, spoken aloud, in a simpler layout, and so on) without losing information or structure. -This guideline ensures that information is available in a form that all users can perceive. Make it easier for people with disabilities to see and hear content, including separating foreground from background. Operable Content WCAG 2.0 includes the following tips to help you provide operable content in your web pages: Make all functionality available from a keyboard. Provide users who have disabilities enough time to read and use content. Do not create content that is known to cause seizures. -The purpose of this guideline is to avoid content that flashes or blinks quickly enough to cause a seizure—for example, avoid the deprecated element that causes text to flash on and off. Provide ways to help users with disabilities navigate, find content, and determine where they are. Understandable Content WCAG 2.0 includes the following tips to help you provide understandable content in your web pages: Make text content readable and understandable. Make web pages appear and operate in predictable ways. -The purpose of this guideline is to help users with disabilities by presenting content and navigation options in a predictable order from web page to web page Help users avoid and correct mistakes that do occur. -This guideline ensures that users can detect when they have made an error—for example, when entering data into a form. Robust Content WCAG 2.0 includes the following tips to help you provide robust content in your web pages: Maximize compatibility with current and future user agents, including assistive technologies. This guideline ensures compatibility with current and future browsers, especially assistive technology browsers. To meet this guideline, use standards-compliant markup and validated code. Key Terms active white space—White space used deliberately as an integral part of your design that provides structure and separates content. cache—The browser’s temporary storage area for web pages and images. content management system (CMS)—Software that allows editing and publishing of content to different formats, such as a desktop and mobile web site. grid—A layout device that organizes the web page, providing visual consistency. look and feel— The overall character of the interface the user must navigate on a web site. media queries—CSS statements that let you specify different style rules for different media destinations. For example, an HTML document could be displayed with different fonts for print or screen. passive white space—The blank area that borders the screen or is the result of mismatched shapes in a layout. responsive design—A method of designing web sites that are adaptable to a wide range of devices from mobile phones to desktop monitors. screen resolution—The width and height of the computer screen in pixels. SITE PLANNING Understanding the Web Site Development Process What are your objectives for building a web site? A good project plan encompasses all stages of the project and is accessible to everyone involved. You can choose from many types of models of the web site development process and use one as a framework for planning your site development. Figure 3-1 shows a typical high-level project plan. Requirements and Specifications In this stage of a web development project, the client presents the requirements for the web site. Requirements are the list of customer needs, such as search capability, tabbed menu navigation, branding requirements, mobile site design, integration with a content management system, and anything else that will create the desired outcome for the site. After analyzing and defining requirements and determining the user profile, the team prepares a project specification that contains the design requirements, page layout sketches, audience definition, and technical requirements. The specification will guide you to the next stages of the project. Information Design and Taxonomy Creation In this stage, user analysis guides the designers as they prepare and test different organizations of the site content. The goal of this stage is to structure the site content in a way that is the most meaningful and easiest to navigate by the intended user. A taxonomy classifies and names content in a hierarchical structure. The taxonomy is often reflected in topic section names and in the navigation and menu system of the site. Graphic Design and Page Template Creation At the same time designers are testing the organization of the site information, they prepare design sketches and page mockups to represent page layouts that will be used in the site. Generally, you create a mockup for each page layout in the web site. A sketch of a proposed design, as shown in Figure 3-2 , indicates the general layout of a web site home page. As the design becomes more stable, the mockup can evolve to a more refined state, often called a wireframe. Wireframes show a more complete version of the page designs, often including navigation elements, search functions, advertising space, and other similar elements. Remember that it is always easier to make changes to a page mockup or wireframe than it is to a web site once you have started coding it. Figure 3-3 shows a wireframe that builds on the page design articulated in the mockup sketch in Figure 3-2. Construction and Content Development This stage encompasses all of the technical development of the site, including page coding and validation, application development, and content preparation. Some testing occurs during this stage of loading content in page templates and evaluating the performance of applications or multimedia. Quality Assurance and User Testing As the site construction nears completion, the quality assurance and user testing phase validates the design of the site. The development team performs various tests for cross- browser and device compatibility, accessibility to all users, and connectivity at different bandwidths. They test links and all user interfaces, data forms, and multimedia technologies. Usability testing ensures that users can access content, navigate through the site, and understand the taxonomy. Publishing and Promotion During this stage, the site is published to the web or the organization’s intranet, and the client begins to publicize and promote the site. This includes making the web site address available in all collateral media, such as print and broadcast; advertising on other web sites; registering with search engines; distributing press releases; and starting publicity campaigns. Ongoing Maintenance This stage begins the moment the site goes live, as web content must be updated and kept fresh to remain vital. New sections of content may be added that restart certain phases of the project lifecycle, such as new audience definitions, designs for new content areas, or the design and development of new interface elements or interactive features. Creating a Site Specification Start your planning by creating a site specification; this is the design document for your site. You can return to the site specification as you build your site to help maintain your focus. If you are providing a web site design to a client, the site specification is the first document the client sees that establishes the basic site design. Answer the following questions in your site specification: Who is the client for the web site? Can you write a mission statement that succinctly states the site’s focus and goals? What are the requirements for the web site? Are the requirements feasible? Do you or your team have the necessary technical and editorial skills to build the site that the client requires? How will you judge the success of the site? What are the factors you can use to assess the effectiveness of the site?  Who is the target audience? What are some of their common characteristics? How can you find out more about your target audience? What are the limiting technical factors affecting your site? What is the budget? What are the schedule or target milestone dates? Are the dates realistic and achievable? Is this a new site or an upgrade to an existing site? If this is a site upgrade project, what can you learn from the first version of the site? What hardware and software are needed to complete the project? Have you thought about maintenance, which is an everyday aspect of the web site life cycle? Consider how much maintenance the design will require and how easy these tasks will be to perform. Identifying the Content Goal Consider carefully the type of site you are building. What you and the design team want the web site to accomplish and what your users want from your site may differ. Look to the web for examples of how best to present, organize, and focus your content. The following types of web sites demonstrate ways to focus your content. Billboard—These sites establish a web presence for a business or commercial venture. -They are informational and offer limited content, acting as an online business card or brochure rather than offering web-based interaction. -Many smaller businesses build this type of site first and then expand as necessary, adding functions when needed. Publishing—These web sites are some of the most ambitious in breadth and depth of content, often containing multiple levels of information with many page designs. Many publishing sites use a content management system (CMS) to dynamically create web pages, drawing content from the same databases that produce their paper-based versions. Portal—Portals act as gateways to the web and offer an array of services including searching, email, shopping, news, and organized links to web resources. These sites are often heavy with advertising content, which is their main source of revenue. Special interest, public interest, and nonprofit organization—These sites include news and current information for volunteers, enthusiasts, novices, a specific audience, or the general public. Public-service web sites contain links, information, downloadable files, addresses, and telephone numbers that can help you solve a problem or find more resources. Nonprofit organizations can state their manifestos, seek volunteers, and foster grassroots virtual communities. Blog—Short for weblog, a blog is a personal web page that reflects the personality and interests of the author. Many blogs are personal diaries or commentaries on life. Most blogs are published with tools that can archive content, provide comment threads that allow visitors to comment on blog posts, and offer built-in page designs. WordPress (www.wordpress.com) is a popular example of this type of software. There are literally millions of blogs on the web. You can find listings at www.blogcatalog.com and www.blogarama.com. Social networking—Sites such as Twitter, Facebook, Google+, and LinkedIn are the most visible of these types of virtual communities, which allow users to post profiles and connect with friends, family, and professional contacts. Users can share comments and exchange messages with their friends, play games, take surveys, and post photos, videos, and links to interesting sites. Social networking sites are the reason many people use the Internet. Wikis—A wiki is a type of online database that accepts contributions from multiple authors. Wikipedia is the most visible example of a wiki. Wikis are collaborative web sites that allow contributors to use wiki software to easily edit information and create linked web pages. Wikis allow any user to comment on or change another user’s entries. RSS (Real Simple Syndication)—This is a syndication service provided by web sites that automatically distribute content. RSS is a format for web feeds that update users who subscribe to this service. RSS feeds usually contain headlines or summaries of content, which users read with a software tool called an RSS reader. RSS readers are built into the major browsers. With RSS feeds, any author updates to a web site are automatically transmitted to subscribers. Virtual gallery—The web is a great place to show off samples of all types of art and design. Photographers and artists can display samples of their work; musicians and bands can post audio files of their songs; writers can offer sections of text or complete Manuscripts. Software companies such as Digimarc (www.digimarc.com) offer digital watermarking technology that lets artists embed digital copyright information in their electronic files as a deterrent to piracy of proprietary content. This information cannot be seen or altered by the user. E-commerce, catalog, and online shopping—Web commerce competes successfully with traditional retailing, offering many advantages over mail-order shopping, such as letting the customer know immediately whether an item is in stock. Other types of commerce on the web include stock trading, airline ticketing, online banking, auctions, and more. A good electronic commerce (e- commerce) site provides users with quick access to the items they want, shopping carts and wish lists to store their choices, detailed product descriptions, and easy, secure ordering and checkout. Product support— Manufacturers can disseminate information, upgrades, troubleshooting advice, documentation, and online tutorials through their web sites. Software companies especially benefit from the web; users can download patches and upgrades and use trial versions of software before they buy. Companies may also provide a forum for users of their products to discuss issues, tips, and other information. Intranet and extranet—An intranet is a smaller, limited version of the Internet on a company’s private local area network (LAN), accessible only to those who are authorized to use their network. Many companies have telecommuting employees who need access to company policies, documentation, parts lists, pricing information, and other materials. These employees can be reached via an extranet, which is a part of the private intranet extended outside the organization via the Internet. Web sites on an intranet or extranet are typically developed by companies for use by employees, customers, and suppliers.  Analyzing Your Audience Analyze your audience and produce an audience definition, a profile of your average user. If you are building a new site, work from your market research, look at sites with content similar to yours, and try to characterize your average user. If you have an existing user base, contact your typical users and try to answer the following questions: What do users want when they come to your site? Can they easily find desired content? What initially attracts your visitors? What brings them back for multiple visits to your site? What type of computer and connection speed does your typical visitor have? Figure 3-4 shows an online survey from the State of Maine web site (www.maine.gov/portal/survey.html). The survey asks users about their experiences visiting the web site. Some questions restrict responses to a list of choices, while others pose open-ended questions to elicit a variety of responses from the user concerning the visual and information design of the site. Using Web Analytics Web analytics are statistics that are gathered by web servers and then analyzed. Web servers track and record various usage and traffic statistics in files called server logs. The data gathered by the web servers contains relevant details about your visitors, including how they came to your site, whether by bookmark, search engine, or a link on another web site. You can see what pages are most visited, and even see an approximate view of where your users are geographically located, based on their identifying Internet address. Figure 3-5 shows statistics from W3 Counter (www.w3counter.com), a free web analytics tool that you can add to any web site. This figure shows two important web log statistics: page views and unique visitors. A page view is the number of times a page is viewed by a user, which could be multiple times by the same user. In addition to viewing how many times users accessed your pages and visited your site, you can also see which browsers they used, as shown in Figure 3-6.  Web analytics are an important method of determining details about your users and how they interact with and traverse the content areas of your site. Use web analytics as a guide to enhancing your content and making important pages accessible, but remember that they are not flawless. Identifying Technology Issues and Accessibility Constraints Make your best effort to identify any technological limitations or advantages that members of your audience share. You have to make assumptions about the user’s browser, connection speed, device type, and screen resolution. When planning a web site, you can identify accessibility constraints in the following ways: Review the Web Content Accessibility Guidelines (WCAG) 2.0 and Section 508 accessibility guidelines as needed. https://www.w3.org/WAI/standards-guidelines/wcag/ If you are building a new web site, plan for accessibility. If you have an existing web site, assess the current accessibility of your content.  Review case study examples of real-life accessibility implementations. You can find case studies at www.w3.org/WAI/bcase/resources.html. Discuss accessibility solutions, authoring tools, and evaluation tools with other web professionals. Identifying Software Tools Determining the software requirements for your web site is important during the planning process. Try to choose software that matches the complexity and needs of your site so that you do not end up with a tool that is either underequipped or overspecialized. You may also need graphics tools, database software, and online credit and shopping programs, based on the skills and talents of the members of your web site team. One popular type of software is shareware, programs that you can download and use for a trial period. Freeware, which is available free of charge or with an optional donation fee if you want to contribute to support the software developers’ efforts. Table 3-1 lists freeware HTML development tools. Building a Web Site Development Team The following are examples of the types of talent necessary to build a larger, well-conceived site. Project management—The project management team is responsible for planning, scheduling, and integrating the many tasks that it takes to create a web site. -They create the milestones for deliverables and balance the staffing resources to keep the project on schedule and within budget. -The project manager coordinates communication among team members and keeps the focus on the deliverables promised to the client.  HTML developers—These are the people responsible for creating the HTML code, conforming to standards, validating code, troubleshooting the site, and testing the site across different operating systems and web browsers. Designers—Designers are the graphic artists responsible for the look of the site. -They use graphic design software such as Adobe Photoshop or Adobe InDesign. -Designers are responsible for the wireframes, page template design, navigation icons, color scheme, and logos. -If your site uses photographic content, the designers are called upon to prepare the photos for online display. -They might also create animations and interactive content. Writers and information designers—Writers and information designers prepare content for online display, including taxonomies, hypertext linking conventions, and navigation paths. -Writers may be responsible for creating a site style guide and defining typographic conventions, as well as consistency, grammar, spelling, and tone. -They also work closely with the information and graphic designers to develop page templates and interactive content. Application developers—Developers write the software programs and scripts you need to build interaction into your site. -They may write a variety of applications in different programming languages for user interaction or write back-end applications that interact with a database. -Application developers are also responsible for the security of the site and use these skills to help prevent attacks on the site’s databases and customer information. Database administrators—The people who are responsible for maintaining the databases play an important role in commercial web sites. -Databases store all the information for customer transactions and e- commerce. -Database administrators, application developers, and HTML developers work together when designing front-end forms used to collect data from the user. -Database administrators are also responsible for data security backup and data recovery. Server administrators—They take care of the sticky technical issues such as firewalls, ports, internal security, file administration, and backup procedures. -Determined your web site’s default filename and directory structure. –Manages server logs that contribute to your web analytics reporting to determine how many visitors your site is attracting, where the visitors are coming from, and what pages they like best. Creating Conventions for Filenames and URLs Naming Files A filename’s maximum length, valid characters, punctuation, and sensitivity to uppercase and lowercase letters vary among operating systems, as described in Table 3-2. Note that the ISO 9660 Standard is the base file-naming convention designed to work across all operating systems. Case Sensitivity If you have an image file named Picture.gif, for example, and you reference that file as , the image is displayed properly on a Macintosh or Windows machine. On a UNIX server, however, the image does not load properly because UNIX is case sensitive; Picture.gif and picture.gif are recognized as two different files. It is best to use lowercase letters for all filenames, including filenames in your HTML code. Character Exceptions As shown in Table 3-2 , it is best when naming your files to leave out special characters such as , /, \, &, *, and blank spaces to ensure cross-platform compatibility. Some special characters that may be valid on one operating system will not work on another. File Extensions -Use the correct file extensions to identify your file to the browser. -HTML text files created in HTML-editing programs commonly end in.htm or.html unless they are generated dynamically by an application. -They may have extensions such as.asp,.php, or others. -You also must use the correct filename extensions to identify image file formats. For example, Joint Photographic Experts Group (JPEG) files must end in.jpg or.jpeg; Graphics Interchange Format (GIF) files must end in.gif; and Portable Network Graphic (PNG) files must end in.png. Choosing the Correct File-Naming Conventions -Create a list of conventions and refer to it frequently. -Here are some guidelines to remember: Don’t use spaces in your filenames; use underscores instead. Instead of about web design.html, use about_web_design.html. Avoid all special characters. Stick to letters, numbers, dashes, and underscores. Use all lowercase letters for your filenames. Default Main Page Name -Every web site has a default main page that appears when the browser requests the main URL of the site, such as www.google.com rather than a specific file. -The default is generally index.html, but others may apply based on site particulars. -Always check with your system administrator to verify the correct main page filename. Using Complete or Partial URLs There are two types of URLs: complete and partial. Complete URLs -A Uniform Resource Locator (URL) is the unique address of a file’s location on the World Wide web. -A complete URL includes the protocol the browser uses, the server or domain name, the path, and the filename. Figure 3-7 shows an example of a complete URL. http is the protocol, and www.yoursite.com is the domain name. The path shows that the destination file, mobility.html, resides in the business/trends folder. Use complete URLs in your HTML code when linking to another web site. Partial URLs -Use a partial URL when you are linking to a file that resides on your own computer or server. -Partial URLs omit the protocol and domain or server name, and specify the path to the file on the same server. -Files that reside in the same directory (or folder) need no path information other than the filename. -The following code shows an example of a partial URL. link text  Setting a Directory Structure -All of the files for your web site will need to be transferred from your computer to the web server that will be hosting your site. -Any URLs you specify to link to other pages in your site must include paths that are transferable. -You should never specify an absolute path in your partial URLs. -An absolute path points to the computer’s root directory, indicated by a leading (forward) slash in the file path: /graphics/logo.gif - If the files are moved to another machine, the path to your files will not apply, and your site will include links that do not work because the browser cannot find the files. -Use relative paths. -Relative paths tell the browser where a file is located relative to the document the browser currently is viewing. -Relative paths are not based on the root directory, they are transferable to other computers. Using a Single Folder Structure -Keep all of your HTML and image files in the same directory. -All files are kept together, the only information you need to put in the src or href attribute is the filename itself. -In Figure 3-8 , User2 has a simplified directory structure. -To reference the file logo.gif, User adds the following code in one of the HTML files: Using a Hierarchical Folder Structure In Figure 3-9, User2’s web folder contains three HTML files and one subfolder named images, which contains the graphics and pictures for the web site. To include the image file logo.gif in index.htm, User adds the following code to index.htm: The path to the file is relative to the file the browser is viewing.  Example 1—To build a link from page1.htm (in the chapter folder) to index.htm, use../ in the path statement to indicate that the file resides one level higher in the directory structure, as shown in the following code: Home Example 2—To include the image file logo.gif in page1.htm, use../ to indicate that the file resides in the images folder, which is one level higher in the directory structure, as shown in the following code: Common files such as the index (the home page) and site map reside in the top-level folder. Multiple subfolders contain chapter and image content. Two linking examples are illustrated in this figure:  Creating a Site Storyboard ✓Plan your site by creating a storyboard flowchart that shows the structure, logic, and taxonomy behind the content presentation and navigation choices you offer. ✓You can sketch your site with paper and pencil or create it using flowchart diagramming software such as Microsoft Visio. ✓You can move pages and whole sections of content freely, plan navigation paths, and visualize the entire site. ✓Remember to adhere to the file-naming conventions for each of your pages. Organizing the Information Structure ❑Think about your users’ information needs and how they can best access the content of your site. ❑How should your information design map look? ❑Your design may incorporate several structures, or you may have to adapt the structures to your content. ❑Each sample structure is a template; you may have more or fewer pages, sections, topics, or links. Linear Structure ❑This structure lends itself to book-like presentations; once into the content, users can navigate backward or forward. ❑Each page can contain a link back to the main page if desired. ❑Pages may also contain links to a related subtopic. ❑If the users jump to the subtopic page, they only can return to the page that contains the subtopic link. ❑This structured navigation returns them to the same point in the content path. Tutorial Structure ❑Perfect for computer-based training content such as lessons, tutorials, or task-oriented procedures. ❑The user navigates the concept, lesson, and review pages in order. ❑Because the lessons use hypertext, users can leave the lesson structure and return at any time. ❑They also can choose the order of lessons and start anywhere they want. Web Structure ❑Nonlinear, allowing the user to jump freely to any page from any other page. ❑If you choose to use this type of content structure, make sure that each page includes clear location information and a standardized navigation bar that not only tells users where they are, but where they can go. Hierarchical Structure ❑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. ❑Navigation is primarily linear within the content sections. ❑The site map allows users to navigate freely throughout the site. ❑A navigation bar on each page lets the user jump to any section page, the main page, and the site map. Cluster Structure ❑This structure encourages exploration within a topic area, allowing the user to navigate freely through the content. ❑All pages contain a navigation bar with links to the section pages, main page, and site map. Catalog Structure ❑Ideally suited to online shopping. ❑The user can browse or search for items and view specific information about each product on the item pages. ❑Users can add items to their shopping cart as they shop. ❑When they are finished, they can review the items in their shopping cart and then proceed to checkout, where they can enter payment information and finalize the order. This type of web site requires back-end data transaction processing to handle the shopping cart tally, process credit card information, and generate an order.  Publishing Your Web Site ❑To make your web site live, you transfer your web site files to a web server, a computer connected to the Internet and running server software. ❑The software lets the computer use the Hypertext Transfer Protocol (HTTP) to serve HTML files to web browser clients. ❑After you choose a server to host your files, you need to select file transfer software and upload the web site files from your development machine to the web server. Choosing a Web Hosting Service Provider ❑Most web hosting companies offer hosting services for both personal and business use. ❑The web host provides you with Internet access, email accounts, and space for a personal or business web site. ❑If you are building a web site for business use, your web host can register a personalized domain name for your web site. ❑Small web sites (around 15–20 pages of content) do not need much more than 1 or 2 MB of server space to hold all of the HTML pages and graphics. ❑Your web hosting package should provide at least 10 MB of space so your web page has room to grow. Accessible Technical Support ❑Technical support is not a feature—it is an absolute necessity. ❑When you are checking into web hosting services, call and talk with the companies’ customer service representatives. ❑Make sure that you are comfortable with the level of service you receive on these initial inquiries. Email Addresses ❑All web hosting accounts come with a variable number of email addresses that you can assign to yourself and anyone else you want to have an email address that uses your domain name. ❑If you are part of a group, multiple mailbox accounts let each person receive his or her own email. ❑You can also set up a catchall email address that will accept any email sent to your web site regardless of whether it is addressed to you. SQL Database Support ❑If you are planning on any type of electronic commerce or customized data presentation, you need database support. ❑Databases that understand Structured Query Language (SQL), a programming language that lets you select information from a database, are the most common and powerful type of database. Secure Socket Layer (SSL) Support ❑The Secure Socket Layer (SSL) is an Internet communications protocol that allows encrypted transmission of data between the user and the server. ❑SSL is necessary if you are planning to set up an electronic commerce site or transmit other sensitive data. ❑Encrypting the data ensures the information cannot be read if the transmission is intercepted. Registering a Domain Name A domain name is an alias that points to your actual location on the web server, as shown in Figure 3-17. User has purchased the domain name www.mysite.com. The actual path to User ’s content is hidden, and the visitor to the site sees only the domain name. ❑Domain names are managed by the Internet Corporation for Assigned Names and Numbers (ICANN). ❑ICANN has agreements with a number of vendors to provide domain name registration services. ❑You can purchase a domain name through a vendor, and they will register it with ICANN. ❑Current popular domain name registration services include Go Daddy (www.godaddy.com), Register.com (www.register.com), and Dotster (www.dotster.com). Web Hosting Service Comparison Checklist Use the following checklist when you compare web hosting services: ❑Is the web host local or national? ❑What are the details of the different hosting packages? How much server space comes with each? What are the limits (if any) on uploads and downloads? ❑Are there bandwidth limits for the number of visitors your site receives per month? ❑Does the web host offer technical support? When are support staff available? ❑How many email addresses do you get with an account? ❑Does the web host provide software, such as a File Transfer Protocol (FTP) client to transfer files over the Internet? ❑Does the web host support the latest connection technologies? ❑Does the web host offer enhanced services, such as SQL database support, SSL, a scripting language environment, and support for streaming audio and video? Uploading Files with the File Transfer Protocol ❑To publish your pages on the web, you must send your HTML code, images, and other files to the web server. ❑You need File Transfer Protocol (FTP) software, often called an FTP client. ❑Some HTML-authoring software, such as Microsoft Visual Studio and Adobe Dreamweaver, include built-in software packages that let you upload files to your web server. ❑Table 3-3 lists some popular FTP clients available as freeware and shareware.  Table 3-3 lists some popular FTP clients available as freeware and shareware. ❑To upload your files, start your FTP program and connect to your web server using the FTP information provided by your web host. ❑Your password allows you write access to your directory on the web server, which means you can copy files to and from the directory. ❑Once the FTP client has connected to the web server, you can choose the files you want to transfer. ❑Select the files that you want to upload in your local directory listing and transfer them to the web server. ❑After the files reach the web server, they are available for access immediately on the web. ❑After you find a web hosting service and publish your web site to the web, it is time to test your web site in the real-life Internet environment.  Testing Your Web Site ❑Continue testing after you post your files live on the web. ❑If possible, load your files to the web server and test them before making your URL available for users to access the web site. Testing Considerations Always test in as many different environments as possible. Remember to test for the following web design variables: Multiple browsers—Test your site using as many browsers as you can to make sure your work is portable and is displayed consistently. Multiple operating systems—If you can, test your site from different operating systems. You can also use a virtual machine for testing. A virtual machine is a software emulator that acts like a physical computer, allowing you to test different operating systems no matter what type of computer you have.  Connection speeds—Do not rely on the same connection speed when testing your web site, especially if you work in a corporate environment where the connection to the Internet usually is faster than the average user’s. Test for download times at different connection speeds. Device types—Test at different screen resolutions and device types to make sure your pages are displayed consistently on all screen sizes. Links—Use a link validation tool to ensure that all of your links connect to a live page. Link validation tools are built into many HTML editors and are available as stand-alone tools. Many web sites also offer validation, including the W3C’s link validator at validator.w3.org/checklink. Security testing—A critical step in the testing process is finding security vulnerabilities in applications running on your web site. Usability Testing The goal of user testing is to determine whether your web site is easy to navigate with easy access to content. Consider the following points when planning for user testing of your site. Vary Your Subjects Draw your test subjects from a variety of backgrounds, if possible. Gather test subjects who are representative of your target audience. Find users with varying computing skills and familiarity with the information. Formalize Your Testing Formalize your testing by creating repeatable methods of testing your web site. Prepare a series of questions for users to answer after viewing the web site. Give users a specific task to complete or have them find a particular piece of information. Compare the results from different users to find any problem areas in navigation. Administer the same testing methods to a variety of users, and watch for trends and consistencies. Develop a Feedback Form Develop a feedback form that users can fill out after they have tested the web site. Include a set of criteria, and let them rate the web site on a progressive scale, or ask them a series of open-ended questions. You also may want to provide the feedback form online, allowing users to offer feedback directly from the web site. Here are some sample questions you might ask: Did you find the information you needed? Was it easy or difficult to access the information you needed? Did you find the web site visually attractive?  Did you find the content easy to read? Did you find the web site easy to navigate? Did you think the information was presented correctly? Did the information have enough depth? What area of the web site did you like the best? Why? What area of the web site did you like the least? Why? Would you recommend the web site to others?