Chapter 11: Sophisticated Visual Design 279

Chapter 11: Sophisticated Visual Design 279 using a different method, such as standard text linking enhanced with style, or dynamic menu systems. The main problem with using image maps is accessibility. Should you choose to go with an image map, here are a few guidelines that will help: Always use alt text inside the img element and all coordinate areas. This helps improve understanding of the purpose of a given area within the map. All the colors used in your map should be readable. Consider using longdesc to describe your map more effectively. For example, if it s a map of the United States and you can get state information by clicking on a state, you should describe that clearly to your visitors. Always have alternative, accessible navigation available. Never use server-side image maps. They aren t accessible to people who are using non-GUI browsers, whereas client-side maps can be. Despite these problems, image maps are extremely well supported browser-wise, can be written to standards, are easy to create, and can sometimes be esthetically impressive and useful (see Figure 11-5). Figure 11-5: Image maps are often very useful. Secret #190: Make the Most Out of Text-Based Type Typography remains an area ofWeb design that frustrates designers to no seeming end. Even with the text sizing and formatting options that CSS provides, the reality is that you re still limited by the font faces that you can use a carryover problem

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost JSP Web Hosting services

278 Part III: Designing Sites for Long-Term Success

278 Part III: Designing Sites for Long-Term Success note For coverage on PNG browser support, see www.libpng.org/pub/png/ pngapbr.html. A related technology, Multiple Network Graphics (MNG), offers animation capabilities. You can learn more about this format at www.libpng.org/ pub/mng/. PNG is a recommendation by the W3C. To read more about the standardization of PNG, see www.w3.org/Graphics/PNG/. Secret #188: GIF Animation Do s and Don ts GIF animations are a great way to add movement and fun to aWeb page. They are also useful forWeb-based ads. However, there are certain problems and limitations of which you should be aware when using GIF animations. Here are some guidelines to help: Don t overuse animations on a single page. This often occurs when newcomers to the Web get overenthusiastic. Usually, one animation per page is fine; more is only warranted in those cases where the designer has more experience and is applying the technique purposefully. Do optimize your GIFs well. To do this, you ll need a good GIF animation program, such as Ulead s GIF Animator, that allows you to optimize specifically for GIF animation. Refer back to Chapter 1 Setting Up a Master Toolbox for more information. Don t make animations blink too fast. This can cause serious problems in epileptics and others prone to seizures. Animated GIFs in general cause accessibility and usability problems you can t stop and start them easily, and you can t rewind or fast-forward. Make sure you consider your audience s needs at all times. Describe animations using alt text, inline descriptions, and consider using longdesc along with GIF animations for accessibility reasons. See Chapter 10, Adding Accessibility Features to learn more. Do try for subtlety. Sometimes the most interesting GIF animations are those that are very subtle, such as someone s eye blinking every once in a while. For me, these are the most fun animations they aren t overly obvious and yet they provide an eye-catching bit of intrigue for your page. note The Opera Web browser, located at www.opera.com/features/ access/visual/, allows users to disable animated GIFs. Secret #189: Image Maps: To Use or Not to Use Image maps are one of theWeb soldest forms of navigation. They can be extremely useful, as anyone using mapping sites for directions can see. However, in general use, they don t always serve a purpose that couldn t be more efficiently handled

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

Chapter 11: Sophisticated Visual Design 277

Chapter 11: Sophisticated Visual Design 277 Unfortunately, if you do attempt to use PNG for transparency, you ll get good support for it just about everywhere but IE (see Figures 11-3 and 11-4 for comparison of transparency-rendering abilities). Figure 11-3: The logo on the left is a transparency but renders perfectly well as the nontransparent version on the right in the Mozilla browser. Figure 11-4: The same logos within the IE 6.0 browser you can see that the left logo has large areas that should be transparent showing up as a dark area.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

276 Part III: Designing Sites for Long-Term Success

276 Part III: Designing Sites for Long-Term Success features of GIF and JPEG formats to assist you in using today s tools to their best end. An interesting outcome of having more sophisticated tools to apply compression to Web graphics is that sometimes you find that the general guidelines, such as using GIF for line drawings and JPEG for anything with light source and color gradation, do not apply. tip For excellent graphic results, use a compression utility that allows you to apply numerous options and preview the resulting look, file size, and download time. Most good compression utilities (check Chapter 1) have features like this, and, of course, Photoshop s Save for Web feature supports this. Balancing the visual quality of the resulting image with its file size will get you the best possible results. Secret #187: Refinding the Lost Promise of PNG Portable Network Graphics (PNG) appeared in 1995 as a reaction to the fact that Unysis, owner of the patent for GIF compression, began to seek licensing fees for use of GIFs. PNG was created to provide a royalty-free means of providing all of the features of GIFs and then some to those wishing to have high-quality graphics that are flexible and well-compressed. PNG has many rich features that appeal toWeb designers, including the following: Combined features of JPEG and GIF compression: Ability to limit colors, to compress grayscale palettes, and compress true colors. This means that you don t have to choose between JPEG or GIF, because PNG takes care of both approaches. Alpha channel support in PNG allows for transparency, something formerly only available in GIF. The transparency technology in PNG is superior to the GIF format, but limitations in browsers have prevented it from becoming widespread for this application. Advanced progressive rendering So, if PNGs provide such flexibility, why have they been so slow to be adopted? Well, the problem is not with the PNG format, nor is the problem support within graphic applications. PNG is available in all major compression utilities these days, and users are convinced, too. It won t come as a surprise that the issue is browser support. It was the major thorn in PNG sside in the years since it was developed, and remains a major thorn when it comes to one browser Internet Explorer (IE). The problem isn t that the file format itself isn t supported, but that the alpha support the portion of the technology required to mask aspects of the image or make them transparent is broken, requiring people to use GIFs for transparency anyway. As a result, PNG has yet to fully achieve its promise through no fault of its own. Can you usePNGconfidently? It depends on the browser base you llbe addressing. Typically speaking, if you aren t using transparency in PNG and are aiming at contemporary browsers, you can use PNG freely with confidence that PNGs will look good in most of those browsers, including IE.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Unix Web Hosting services

Chapter 11: Sophisticated Visual Design 275

Chapter 11: Sophisticated Visual Design 275 Table 11-1: GIF and JPEG Features GIF (Graphic Interchange JPEG (Joint Photographic Feature Format) Expert Group Format) Compression Type GIF compression is based on limiting the amount of colors to 256 or less. It is considered a lossless compression method because, while restrictive, the compression does not remove data. The fewer colors used the better the compression results. GIFs are typically best for those images or line drawings with flat color, few colors, grayscale images, and no gradients. Restricting the number of colors too much can result in very pixilated, jaggy images JPEG compression is known as lossy. This means that unlike GIF, actual data is lost in the compression process. JPEG can support millions of colors, so it s a far better choice for most photographs, images with subtle light sources, and gradients. If too much compression is applied to a JPEG file, the lost data will show up as faded or blurry blocks referred to as artifacts Transparency Transparency is the ability to define certain areas of a graphic as being transparent so the background color or pattern can be seen through those transparent areas. GIF supports transparency JPEG does not support transparency in any way Progressive Rendering Progressive rendering is a technique that allows portions of the graphic file to be seen as it loads, becoming increasingly more clear as data arrives to the Web browser. Very helpful in those situations where low bandwidth is expected, GIFs support progressive rendering with a feature known as interlacing. All common compression utilities allow you to interlace a GIF Progressive rendering wasn t available in the earliest days of the JPEG format, but has been around for many years and is supported in all contemporary browsers. Depending upon your compression software, you can use a number of options to determine how you d like your JPEGs to render Animation GIF animation became all the rage around 1995, and is now used so much on the Web as to cause some controversy largely due to overuse. But a GIF animation can be practical, as in a banner ad, or fun, as in adding a tasteful or subtle movement to a logo or other visual object on the page. Many utilities exist to create animation. (See Chapter 1, Setting Up a Master Toolbox for more details) There is no support for animation in the JPEG format

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

274 Part III: Designing Sites for Long-Term Success

274 Part III: Designing Sites for Long-Term Success Figure 11-1: Working with graphics in Adobe Photoshop s Save for Web interface. Figure 11-2: Today s CSS-based designs give you more control over how you use Web graphics. No tool can replace knowledge born of experience, so it s important to have a little knowledge about the file types in order to best work with them. Prior to having the more advanced compression utilities available today, knowing how and why to choose a specific file type was a major step in creating good graphic compression while retaining high visual quality. Table 11-1 points out the

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost PHP Web Hosting services

Chapter 11: Sophisticated Visual Design 273

Chapter 11: Sophisticated Visual Design 273 Depending upon the way your site or the site you re working on for someone else is set up in terms of trademark and other legal aspects, it may fall to you as the designer to ensure that the company s brand is well-defined and maintained throughout the site. For trademarked names, logos, and slogans in the United States, it is up to the holder of the mark to ensure its strength and safety. This is one reason some companies, such as Disney, are notoriously litigious when it comes to anyone trying to mess with their brand materials. If it s up to you to help the client define the brand for his or her Web site, here are some time-honored tips to help: Consider a brand name that has existing and related meaning to your goods or services. A well-known example of this is Nike, a brand known worldwide. Nike is the Greek Goddess of Victory, a perfect choice for athletic goods. Build your visuals based on the symbology of your brand. Images should reinforce the message behind the brand, not dilute it in any way. Write slogans that are catchy and relevant. Integrate your strategies into the long-term Web site plan. Test early. If the brand name, images, or slogans do not test well early in the design process, it may be time to go back to the drawing board and gain more insight as to why. Be sure to place your branding consistently throughout your site. The company logo should appear on every page, as should any slogans. Imagery related to the brand should be used consistently, too. tip Many designers create a larger logo for the home page, and use a smaller logo on subsequent pages. Linking logos on subsequent pages to the home pages is also a very common, recommended practice (see Chapter 4 for more details). Secret #186: GIFs and JPEGs: Still Your Secret Graphic Weapon Interestingly, one area where very little change has occurred is in the use of GIFs and JPEGs as the primary file choices for the Web. Where advancements have been made is in the software used to generate these file formats especially in Adobe Photoshop, which now offers a very helpful interface in which you can make great decisions about which file type is going to best suit your needs (see Figure 11-1). Another place where advancements have been made is in how we useWeb graphics. The move toward standards-based design withCSS has helped designers learn to use images in highly creative ways. Instead of the heavy slice-and-dice graphic techniques used in the table-based layouts of the past, you can now attach graphics to any HTML or XHTML element via CSS. What s more, you can apply color to any element, allowing you to reduce the use of graphics to create areas of color. As a result, you have a much richer ability to apply graphics in compelling ways (see Figure 11-2).

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

272 Part III: Designing Sites for Long-Term Success

272 Part III: Designing Sites for Long-Term Success The World Wide Web is in fact a global environment, with many languages as well as religions, customs, and ways of life. Creating visually stimulating designs that work for your clients no matter how near or far they might be requires an understanding of a variety of practices: excellent Web graphic design skills and an awareness of the psychology of color and space. While this chapter can t make you a designer, it can point out some of the most critical issues of the day and provide solutions to some of the more problematic issues with visual design and Web sites. Secret #184: Visual Design and Site Intent Your site svisual design must always match the intent of your site.We vediscussed a lot about how to define intent and goals, as well as how to define your audience. By doing that very important preliminary work (and occasional re-evaluations of the same), you should be able to clearly define exactly what it is your site does and what it is you want your site visitors to do once they get there. I refer to this relationship as appropriate site design, because you want the visual design to appropriately meet your goals and your audience s needs. Unfortunately, many jump in and start designing without working through these considerations. The lack of preliminary work can result in flawed sites. Other problems can include the following: Designers designing for themselves Designers having to accommodate the whims of superiors who often want a feature that is inappropriate to the site Clients wanting to determine the site s visual design according to their tastes and not the audience s Frustrating scenarios, but certainly all of us have run into these problems. So, how do you solve them? Certainly, in a well-run project (see Chapter 2, Managing Your Web Project ) the majority of these problems should be solved, right from the start. If you re on your own, make sure that you do a comprehensive assessment of the situation, and explain to your clients the choices you are making and why. Finding the right balance and keeping interferences at bay are no easy tasks, and there is no single answer. It is up to the designer to weigh the issues within design. The use of color, type, iconography space, size, and proximity of objects and text content must be balanced between the need to properly serve your audience and help them achieve what they came to your site to do. Secret #185: Defining and Maintaining Your Brand A brand is the means by which your company or organization is identified. This can be in the form of its name, such as IBM, or its memorable logo, such as GE, or a slogan, such as It s the real thing ,which most readers will know is Coca- Cola.

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Cheap Web Hosting services

Sophisticated 1Cha1pter Visual Design in a Global Market

Sophisticated 1Cha1pter Visual Design in a Global Market Secrets in This Chapter #184: Visual Design and Site Intent . . . . . . . . . . . . . . . . . . . . . . . . . 272 #185: Defining and Maintaining Your Brand . . . . . . . . . . . . . . . . . . . . 272 #186: GIFs and JPEGs: Still Your Secret Graphic Weapon . . . . . . . . . . . . . 273 #187: Refinding the Lost Promise of PNG . . . . . . . . . . . . . . . . . . . . . . 276 #188: GIF Animation Do s and Don ts . . . . . . . . . . . . . . . . . . . . . . . . 278 #189: Image Maps: To Use or Not to Use . . . . . . . . . . . . . . . . . . . . . . 278 #190: Make the Most Out of Text-Based Type . . . . . . . . . . . . . . . . . . . . 279 #191: Combine Graphics and Markup for Effective Typography . . . . . . . . . 280 #192: What Is White Space and Why Do I Care? . . . . . . . . . . . . . . . . . . 280 #193: The Importance of Proximity . . . . . . . . . . . . . . . . . . . . . . . . . . 282 #194: There s No Such Thing as Web-Safe Color . . . . . . . . . . . . . . . . . . 284 #195: Making the Most Out of Web Color . . . . . . . . . . . . . . . . . . . . . . 285 #196: The Symbolic Meaning of Shapes . . . . . . . . . . . . . . . . . . . . . . . 287 #197: The Psychology of Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 #198: Color and Culture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 288 #199: Color and Gender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 #200: Color Tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 #201: Exploring Scalable Vector Graphics . . . . . . . . . . . . . . . . . . . . . . 291

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services

Part III Designing Sites for Long-Term Success Chapter

Part III Designing Sites for Long-Term Success Chapter 11: Sophisticated Visual Design in a Global Market Chapter 12: Spicing It Up with Dynamic Content and Rich Media Chapter 13: Keeping Sites Fresh and Engaging Chapter 14: Improving Site Ranking and Managing Promotions Chapter 15: Dealing with Growth and Redesigns

Note: If you are looking for good and high quality web space to host and run your application check Lunarwebhost Java Web Hosting services