Chapter 2.. Page Layout and Design 47 There are some limitations to using fonts. Although there are many fonts to choose from, for users to view those fonts, they have to be registered on the user's system. If the user's system does not have a particular font, the browser will render its default font in its place (commonly Times New Roman for the PC and Chicago for the Mac). Exam Tip You can define fonts using the HTML <f ont> and <ba sefont> elements, as well as define fonts using Cascading Style Sheets (C55). Keep this in mind as a possible exam topic. Serifs Serif fonts are defined by small decorative strokes at the end of a letter's main strokes (this is a serif font). They're readable in medium font sizes; however, readability suffers for small and large font sizes. There are four serif designs: Old Style, Transitional, Modern, and Slab Serif. Sans serifs Sans serif designs are those fonts that do not have serifs - the decorative strokes at the end of the letter's main strokes. These fonts work well in medium sizes, but are recommended for smaller and larger font sizes, such as copyright information and headings (this is a sans serif font). Exam Tip Whether you choose to use serif or sans serif fonts, it's important that you be consistent. For example, all navigation should be defined using the same font and all paragraph text should be in the same font. Font size HTML does not allow designers to define specific font sizes. Instead, you have to use numbers from 1 to 7. Most browsers define a default font size of 3. In addition to using sizes 1 to 7, you can define relative sizes using a plus (+) or minus (-) sign. Table 2-4 illustrates some examples. Tabl:e 2-4 Font Size Examples Example (font si ze="3"> (fo nt s ize="+l"> (font size="-l"> Description Because 3 is the default font size, there's no change in font size Increases the font size to one higher than the base font Decreases the font size to one lower than the base font
48 Part I Exploring Web Site Design Methodology In the Real World There are some problems achieving consistent font sizes between the Macintosh and Pc. Macintosh computers display font types at 72 dpi, whereas pes display font types at 96 dpi. This translates into the Macintosh display being smaller than the same font displayed in a pc. TrueType A TrueType font is one that can be rendered in any font size without suffering from poor image quality. Developed by Apple Computer, True Type is now used by both the Windows and Macintosh platforms. A few examples of TrueType fonts are Arial, Times New Roman, Georgia, and Verdana. Because they do not suffer when scaled, they increase readability. Anti-aliasing If you've used Photoshop or Paint Shop Pro, you're probably used to anti-aliasing. When graphics are used to represent letters, the anti-aliasing process smoothes the edges of each letter, thereby increasing readability. Although the file sizes tend to be larger, they sure make your page easier to look at. Font tips Here are some tips that will help you when you work with fonts: Avoid long horizontal line lengths. + Consider how the font contributes to your design. + One font cannot serve all purposes. Whitespace and readability Whitespace can make or break a Web page. Studies have shown that users only absorb 25 percent of what they see on a screen. The more cluttered the page, the less the user can absorb. Therefore, whitespace in your page layout is essential to good design. Exam Tip Each Web page should contain 50 percent less content than a printed version of the same information. This is because users pick up less on the screen than they do on the printed page. You also have to keep in mind that the screen is harder on the eyes than the printed page. Although there have been wonderful advances in monitors, they're not yet equal to the ease of reading the printed page. Users are also less likely to read everything on a Web page. In fact, users typically just scan Web pages to grab the information they need.
Chapter 2.. Page Layout and Design 49 To aid in readability, there are several techniques employed by designers:.. Page layout using transparent GIFs. Transparent GIFs can be inserted as a blank space place holder. You can manipulate the height and width of the transparent image to take up the exact amount of whites pace needed. For example, you can indent a section by adding the following tag: <img src="transparent.g if" he ig ht="2" width="lo" alt="spacer" >.. Page layout using tables. Designers have been using tables for layout for a long time now. All you have to do is turn the border off, and you have a layout tool ready for use. Although this is not what tables were intended for, it makes your life as a designer easier... Page layout using frames. Although frames are more commonly used to aid in navigation for a site, they can also be used for layout. You can turn frame borders on or off. When in the off position, the user can't tell that the frame is even there... Page layout using positioning. Although not all browsers support Cascading Style Sheets (CSS) positioning, it will one day make designers' lives a breeze. Currently, however, there's a compatibility problem, because Netscape Navigator uses the <1 ayer >tag for positioning and Internet Explorer conforms to the W3C's CSS specification. Defining and Executing Usability Tests ~ Web usability To some, usability is the most important concept to Web design. At the heart of creating a usable Web site is understanding your audience. For example, if you're selling hearing aids from your Web site, you'd most likely decide against using music as a multimedia element. However, if you're selling CDs, you might want to offer some music on your site. One of the first steps in understanding your audience is to uncover its demographics, gathering information such as age, education, location, and income. In addition to gathering information about the users, you also need to ascertain the types of technology your users can support, such as connection speed, browser versions, and plug-ins. Usability can be categorized into the following elements:.. Quality control. The quality of information is what the user is ultimately looking for.
50 Part I.. Exploring Web Site Design Methodology Ease of navigation. Users need to be able to navigate your site with ease. If users cannot navigate to their desired locations within three clicks, they're likely to leave your site. Information architecture. The organization of your information can make or break a site. A user needs to be able to locate your information. Search capability. Most users like the option of searching for their content; therefore, it's wise to include search capabilities on your site. Each of these elements has equal importance and the combination of these elements is what makes up usability. Technology As the Web evolves, it appears that users are reluctant to follow. Studies have shown that as Web innovations increase, users favor the familiar and therefore, don't embrace the new innovations. As the Web grows, it develops expectations for the user experience, and users are expecting that all Web pages conform to those expectations. For example, most users expect that blue underlined text is a hyperlink. If you decided that your hyperlinks should be defined in black, some of your users may not be able to identify your hyperlinks right away. Users have also come to expect an off trigger for any music that begins when the page downloads. Changing this behavior would confuse your audience. One way to solve this problem is to advance Web design slowly. As you create a new site, it can follow conventions expected by users while still introducing some new innovations. As these new innovations take root, some will eventually be incorporated into standard Web design and, consequently, the expectations of users. As for browsers, studies show that the amount of time it took users to upgrade their browsers from 3.x to 4.x took twice as long as upgrades from 2.x to 3.x. This means that users are not upgrading browsers nearly as quickly as they once did. There are several reasons for this slow upgrade rate: Upgrade download sizes have increased; therefore, upgrades require more time. The advantages to upgrading a browser have diminished from past upgrades. Many users don't know how to upgrade their browsers. Some browser upgrades require users to make software or hardware upgrades as well, and some users aren't financially able to make those upgrades. Newer users are not as technically adept as the early user base and are therefore more interested in content than upgrading their browsers.
Chapter 2.. Page Layout and Design 5 1 Testing The best way to make sure your site is usable is to conduct a usability test. Most designers like to think they can anticipate what a user will have trouble with, but that's just not the case. As the designer, you already know how to navigate the site. A usability test will examine the site's effectiveness and should look at the four usability elements listed earlier. Before testing, you need to make sure that your site is as close to finished as it can be. Testing on a site that is in production might not be that helpful or accurate. Test pool Your testing pool should be made up of participants (five or more is suggested) who have never visited your Web site before. This means that project team members should not be part of your testing pool. First, you need to determine your target audience's demographics, and then find participants who fall within that demographic. For example, if you're testing a site that sells networking products, you probably don't want any children in your testing pool. Usability tasks The usability test should be scripted with specific tasks. If users are not asked to participate in particular tasks that will mimic a real world scenario, they're not likely to locate significant problems. For the test, be sure to provide a list of tasks for each participant. However, be sure not to identify how to complete each taskremember that you're testing to see if a user can figure the how out for themselves. The test script should also ask each participant to jot down components they like and dislike. Once the participants are ready to begin, leave the room. Although many of you probably want to watch participants' reactions, it's not helpful. As a matter of fact, it could disrupt the test and alter the results. If you must watch the participants, use a video camera or some other unobtrusive method. (Note that you should inform the participants if you're using a video camera.) Analyzing the results Before allowing your testing pool to walk out the door, be sure to follow up with a few questions to trigger any last minute observations. For example, you might want to include the following questions: + What was your first impression? + Was the site structure well organized? + Can you remember the site's metaphors or theme?
52 Part I.. Exploring Web Site Design Methodology When analyzing the results, it's important to look at trends in answers. Did multiple users note similar problems with the site design? If one user notes poor navigation, it's not that significant; however, if multiple users note poor navigation, you need to revisit the design. After you analyze the results, it's time to ma ke the necessary changes. It's rare to experience a usability test that doesn't produce some criticism or suggestions for change. Your first experience with a usability test may leave you feeling a tad defeated. Don't take it personally. After all, the feedback will only make your Web site better. Key Point Summary This chapter was chock full of practical information on page layout and design, all of which is aimed at preparing you for the rest of the book. The following concepts were covered in this chapter:.. Understanding your users is the key to defining your site, and selecting the appropriate technologies and tools... To complete this book and the CIW Site Designer exam you need to be comfortable with HTML... The use of color and fonts are important design elements and can also help set the mood for a Web site... There are several techniques for manipulating page layout, from adding transparent GIF images to using borderless tables... Usability testing should be conducted before taking a Web site live. A usability test analyzes a site's information architecture, content quality, search capabilities, and navigation elements.......