Tài liệu Professional Web Design: Techniques and Templates- P2 ppt

4. Search engines: When text is saved as an image, search engines don’t read it, although they can read the Alt tags. It’s almost always a wise idea to make your site as search-engine friendly as possible. Note CSS menus can use background images in menu items. Using such a method also enables the designer to lay text over the image, allowing for the best of both worlds. Such usage of background images is incorporated in many designs included with this book. Background Images Background images can enhance a Web site to give it mood and depth. While the use of background images has changed slightly over the years, the concepts are fairly similar. There are several uses of background images that the designer can be creative with. The first of which is using a background image to serve as the majority or entire backdrop of a Web site while layering the HTML and graphics Figure 2.11 Menu items saved as images in the On state (a white glow around the text). Chapter 2 ■ Designing for the Past, Present, and Future32 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. on top of it. While this wasn’t advisable in the past, it now is much more acceptable with increased bandwidth and CSS-driven layouts, which require less download time. Figure 2.12 illustrates a site that uses one image to serve as the entire background. Figure 2.13 is the background image that was used. Another creative use of background images is giving the impression that a design has colors running down both sides of it indefinitely. Although this used to be an easy process with XHTML table sites, it now takes a little trickery to accomplish the same result. Such a technique is explained in Chapter 12; however, Figure 2.14 illustrates the concept. A third use of background images, as mentioned in the previous section, is using the images for menus. Using CSS, a designer can use an image for, say, a menu Figure 2.12 Site that uses a large image for its background. Building on Previous Design Weaknesses 33 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Figure 2.14 Site that uses background images to run colors down both sides of a design indefinitely, similar to how XHTML table designs work. Figure 2.13 Image that was used for the entire background of the site in Figure 2.12. Chapter 2 ■ Designing for the Past, Present, and Future34 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. item, while not having to include the text with the image itself. In other words, the text is layered over the image. Figure 2.15 shows a site that does just that. Although many clients don’t like the width of their sites changing because the content shifts around, a background image, depending on the resolution, can be repeated to allow for such expansion while maintaining a similar look and feel. The designer has to be careful to make sure that the background image is designed correctly for higher resolutions, though. While the design in Figure 2.16 doesn’t expand horizontally, the background image does. Unfortunately, it does not look professional because the designer did not remove the lines on the right side of the image. One instance that design ers should probably stay away from is using a repeating background image endlessly, both horizontally and vertically. While it can work in certain situations, for the most part, it is amateuri sh looking. This is probably because it was so easy to do—since the dawning of graphical Web browsers— that millions of sites used the technique, similar to glowing text. These days, sites similar to Figures 2.17 and 2.18 aren’t designed very often. Figure 2.15 Background images that are used in a menu to show Over and Off states. Building on Previous Design Weaknesses 35 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This is a good time to review the basics covered in Chapter 1. Rule 1 should be repeated: Just because you can, does not mean you should. Uncontrolled Color Color can make or break a Web site. Not only should the colors be appropriate and appealing to the target audience, but they should also be used with intention and discretion. One of the strengths of using color is that a designer can help lead the user’s eye. If a designer, on the other hand, uses too many colors, the user can quickly become confused as to what the most important information is. The user then has to start reading all the hyperlinks to find the desired content. Figure 2.16 Page repeating an awkward looking background image in a resolution higher than the design was cre- ated for. Chapter 2 ■ Designing for the Past, Present, and Future36 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Uncompressed Images The easiest way to drive away a user from a site is to make it slow, and one of the easiest ways to make a site slow is to use uncompressed images. Figure 2.19 shows a Web site in which the central image (the image of the neighborhood) is 33KB. Compressed, this image could easily be reduced to 13KB, drastic ally Figure 2.17 Site that infinitely repeats the background image of a cloud both horizontally and vertically. Figure 2.18 Background image that is repeated in Figure 2.17. Building on Previous Design Weaknesses 37 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. increasing the speed of the download without a visible loss in the quality of the image. In the early 1990s, the closest a designer could come to compressing an image was reducing the bit depth (2, 4, 8, 16, 32, 64, 128, or 256 colors) of a GIF or reducing the JPG compression percentage in increments of 10. Today, because of the vast improvement in graphics software, GIFs not only can be compressed one color at a time, but a designer also can select which colors to use, and JPGs can even be compressed one percentage point at a time. Image editing software, such as Adobe Photoshop, is also doing a better job of compressing images to the same level with less degradation. Thumbnails A thumbnail is a smaller version of an image, which allows the user to preview the larger version without having to actually download the image until it is Figure 2.19 Site that does not use compressed images. Chapter 2 ■ Designing for the Past, Present, and Future38 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. clicked. A mistake that Web designers occasionally make is in resizing images to appear as thumbnail images. Figure 2.20 illustrates a Web page that includes many thumbnails of larger photos. When the user clicks a thumbnail, an enlarged copy of the image is displayed (see Figure 2.21). When a desi gner places an image in HTML, the height and width attributes can be changed to tell the browser to resize the viewable size of the image. For example, the designer could tell the browser to display an image from 500 Â 500 pixels to 20 Â 20 pixels. This is a mistake designers often make. While it is possible to tell the browser to forcibly change the visual size of the image, it does not physically change the file size or download size of the image. In other words, if the 500 Â 500 image is 60KB, it will remain 60KB when displayed at 20 Â 20. If all 14 photos in Figure 2.20 were only 20KB, the download of the entire page would be nearly 300KB. Figure 2.20 Site that makes use of thumbnail images. Building on Previous Design Weaknesses 39 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. To create thumbnails correctly, a designer needs to make two images: the origi- nal photo and then the original photo resized smaller. While it is more work, the user will appreciate the increased speed of the download. Summary Designers have been dealing with browser issues since the 1990s, and today is no exception. Many times, a designer should determine design requirements based on usage statistics that not only provide browser information but also give in- formation to monitor color depth, resolution, and JavaScript support, among other issues. It is always smart to learn from the past. There are several mistakes that designers have made over the years that today’s designers can learn from and improve on, such as frames, image buttons, background images, uncontrolled color, uncompressed images, and thumbnails. Figure 2.21 Larger version of a thumbnail image. Chapter 2 ■ Designing for the Past, Present, and Future40 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. chapter 3 Things to Consider Before Beginning Working in a logical, practical manner is one of the keys to becoming a profes- sional Web designer. It is particularly important to be logical and practical when working on the technical aspects of a site, such as collecting requirements, taking the client’s concerns into mind, and designing for scalability and flexibility. While contemplating the design in depth beforehand requires more initial time and forethought, doing so can save many hours, if not days, addressing future problems. Using Requirements Site requirements can best be compared to a recipe that tells a designer what needs to be included in the site, the steps required to complete each task, plus additional information, such as how to present the site and the types of people it will serve. Although every designer’s or company’s requirements might be dif- ferent, they all share a common goal—an agreed-upon document that helps serve as a road map, as best as possible, to the completed site. When constructing a site, some of the most important information a designer needs to document includes the following: 1. Look and feel requirements: These include content placement, how the site conveys the company’s message, the color palette, and fonts and image concepts to be presented. 41 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... consider how the site can be expanded or changed in the future 5 Content requirements: The content volume of a site will influence nearly all other requirements, including the look and feel, the bandwidth, resolution, and scalability Depending on the size of a Web site, different levels of documentation are necessary Many small sites (around 5 to 15 pages) only require the designer and client to email or call... look and feel, architecture, and future possibilities of a site Here are 13 questions a designer should try to have answered before beginning a site’s comp: 1 Who is the audience, and what is the purpose of the site? 2 What is the feeling you want to convey to your audience with your Web site? 3 Will the site need to be expandable, in terms of sections, in the future? 4 What browser platform and resolution... general audience, such as a momand-pop shop that sells homemade gift baskets 3 High-bandwidth functionality versus purely content-driven: Often, the purpose of a site also allows for a higher bandwidth flexibility For instance, an online music store is going to have users with higher bandwidth than a site that is designed to offer pure text content Moderation is the secret in Web design The three previous... few extremely large sites (hundreds or thousands of pages) The majority of sites were small by today’s standards and built with only static content Because revising these small sites was so easy, it was common practice to redesign them every six months to a year Today, sites are exponentially larger, more technically complicated, and more in tune with brand recognition It is no longer easy or cost-effective... in a car: If it were not possible to easily drain and refill the oil via a plug on the bottom and cap on the top, a mechanic would have to remove the engine, take it apart, drain and refill the oil, and then put the engine back into the vehicle Scalable sites are not difficult to create They simply require a little more forethought by both the designer and client In addition to the forethought that goes...42 Chapter 3 ■ Things to Consider Before Beginning 2 Bandwidth requirements: The way a site is designed will determine how large of a download the site will require By understanding the bandwidth (download size) requirements, a designer can determine the balance between graphics and text to be used 3 Resolution requirements: A site with improper resolution can hinder... resolution of the monitor is 1024 Â 768, the same site will appear either too narrow and short, or it will be stretched horizontally Figures 3.2, 3.3, and 3.4 show how A5design’s site, which was designed for 1024 Â 768 resolution, appears on monitor resolutions of 800 Â 600, 1024 Â 768, and 1280 Â 800, respectively The Web design industry for years designed sites for 640 Â 480 resolution Then around 1999,... homepage design may possibly have to fit under 30–50KB On the other hand, if the bandwidth limitations are liberal, the limit for the homepage design could be anywhere from 50 KB to 500KB or even higher As previously mentioned, user bandwidth is a relative term No matter what the supposed connection speed is, many factors influence what that bandwidth really is Some of those factors include the following:... everything—the Web page(s) used to build the homepage, the homepage itself, and the graphics used It is generally wise for a designer to create a page that is no larger than 50KB, although with many site requirements and design fads, such as using large background images, this is no longer always feasible There are three general instances when a larger site might be designed without any bandwidth issues:... such as in Figure 3.16 It is wise to build an area that can handle some of the longer section names The site in Figure 3.16 allows plentiful room to add even the longest of titles As wide as ‘‘Application Development’’ is, it could be longer and still be supported by the design Per the seven rules of Web design (see Chapter 1, ‘‘Overview of Web Development Today’’), there is nearly always an exception . concerns into mind, and designing for scalability and flexibility. While contemplating the design in depth beforehand requires more initial time and forethought,. other requirements, including the look and feel, the bandwidth, resolu- tion, and scalability. Depending on the size of a Web site, different levels of documentation