Professional Web Design: Techniques and Templates- P12

Game Developing GWX to simplify, improve usability, and to increase the professional appearance to help increase credibility (see Figure 18.28). Due to budgetary restraints, there was only one design created for this page, and no A/B experiment was conducted. The redesigned page, however, did convert 16 percent of users (see Figure 18.29). The next logical step would be to start testing versions of this page to increase this conversion percentage. Summary There are many variables when it comes to increasing CRO. They can be remembered by the acronym FLICC: functionality, layout, imagery, color, and Figure 18.27 Winning version of the redesign of the page in Figure 18.25. Copyright † 2010 Medcomgroup.com. Used with permission. Chapter 18 ■ Conversion Rate Optimization (CRO) 532 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX content. Understanding these areas is the first step in understanding how to increase conversion rates. Fortunately, unlike years ago, testing is now a very viable option, thanks to Google’s free Web site Optimizer application. The application allows designers to conduct A/B and multivariate tests. Included case studies give the designer an idea of the what experiments will show, which, many times, is a better use of money than simply paying to acquire more users through SEO. Figure 18.28 Preexisting version on the rental page. Copyright † 2010 Medcomgroup.com. Used with permission. Summary 533 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Figure 18.29 Redesigned version on the rental page. Copyright † 2010 Medcomgroup.com. Used with permission. Chapter 18 ■ Conversion Rate Optimization (CRO) 534 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWXGame Developing GWX chapter 19 Customizing the Designs Included in This Book There are 230 templates included with this book, which contain both pure CSS and table-based XHTML Web designs, email signatures, e-newsletters, and Photoshop designs, which do not have code written for them. All the files are constructed in similar fashions, respectively, which makes understanding and customizing them a fairly consistent process. This chapter not only explains how to customize such templates, but it also provides basic Photoshop tips that can be used to customize the templates quickly. Steps to Customizing a Template There are six basic steps to customizing a template. The basic process involves customizing and saving a Photoshop file, which outputs PNG, GIF, and JPG files that are then displayed, along with any text, by preprogrammed XHTML (HTML), Cascading Style Sheets, and possibly JavaScript files. Following are the six steps: 1. Open the main Photoshop file. The design used for this chapter is design 57 (see Figure 19.1). 2. Customize images and colors in the Photoshop file(s). 3. Optimize and save necessary images that will be used by precoded XHTML, CSS, and possibly JavaScript files. 535 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 4. Open XHTML, CSS, or JavaScript files with an HTML editor. 5. Customize text and any other code. 6. Test the design. Step 1: Open the Main Photoshop File After copying the files from the DVD and pasting them into a directory, the designer needs to locate and open the main design file ( design_57.psd )in Photoshop (see Figure 19.2). Note Figure 19.2 represents one example of how the files would look on a hard drive after being saved from the DVD. If the reader were looking at the files from the DVD, the design_57 folder would appear under the DVD drive (the E: drive in this case). This is all relative to the individual's system. Note The templates included with this book are saved in Photoshop version 6 or higher. Adobe has continually changed how its software handles text, and the newer versions are no exception. When opening a file in a more recent version, Photoshop will ask if the reader wants to update the file (see Figure 19.3). Selecting Update will cause the vector-based text to have its positioning slightly readjusted. Figure 19.1 The design that is customized in this chapter. Chapter 19 ■ Customizing the Designs Included in This Book 536 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Step 2: Customize Images and Colors Making and saving changes in Photoshop (see Figure 19.4) will change all the images in a design and many of the colors as well. Colors that are not changed when saving a Photoshop file can be changed in the XHTML or CSS files. Figure 19.2 The location of the files after being saved to the hard drive. Steps to Customizing a Template 537 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Step 3: Optimize and Save Necessary Images Once changes have been made to the Photoshop file, the designer will need to save the file so that the necessary PNG, GIF, and JPG images are saved from the sliced Photoshop file. Following are the steps to do so: 1. Select the Save For Web option from Photoshop’s File menu (see Figure 19.5). Figure 19.3 Photoshop dialog box asking if a file should have text updated. Figure 19.4 Design in Photoshop with customized colors and photos. Chapter 19 ■ Customizing the Designs Included in This Book 538 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 2. Click on the Slice Select tool from the menu on the left (see Figure 19.6). 3. Select a slice to be optimized and select the compression on the right side of the window (see Figure 19.7). Note If the designer changes the type of image a slice is saved as, such as GIF to JPG, the file extension must be changed in the CSS or XHTML template as well. For example, if photo_middle_right is changed from a JPG file to a GIF file, all references to photo_middle_right.jpg in the template must be changed to photo_middle_right.gif . 4. Ensure that all changed slices of the template are still compressed to the best level possible. 5. Select Save in the top-right area of the Save For Web window. 6. Select Replace in the Replace Files window. Figure 19.5 Design being optimized with Photoshop's Save For Web function. Steps to Customizing a Template 539 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Figure 19.6 Slice Select tool in the Save For Web window. Figure 19.7 The slice that has its file type and compression assigned in the Save For Web window. Chapter 19 ■ Customizing the Designs Included in This Book 540 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Note Once a user clicks on Replace, Photoshop will save all slices as either PNGs, GIFs, or JPGs from the file and place them in an Images subdirectory below where the design_57.html file is saved. Step 4: Open an XHTML (HTML), CSS, or JavaScript File All three file types can be opened in any HTML editor. In Figure 19.8, the sample file is opened in Adobe’s ColdFusion Studio. This software is pretty much extinct in Web development; however, any quality software will be somewhat similar in style. It also shows that the designer does not need the latest and greatest software for such development. A reader, in fact, could even use basic text editing software, such as Notepad, which is included with Microsoft operating systems. Figure 19.8 A file opened in Adobe's ColdFusion Studio HTML editing software. Steps to Customizing a Template 541 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... invisible by clicking the eye icon on and off, located to the left of the layer name (see Figure 19.14) Toggling the eye on and off is a good way to test if the correct layer has been selected 9 Activate the layer’s image by selecting the entire layer area (Ctrl-A for Windows; Cmd-A for Macintosh) and move the layer up one pixel (one click) and down one pixel by using the up and down arrow keys (see Figure... 19.20) in the toolbar and click and drag the image rather than the handles Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX Photoshop Tutorials Figure 19.19 Small handles will appear when the image is ready to be resized 8 Deactivate the marching ants by pressing Ctrl-D for Windows or Cmd-D for Macintosh after the image has been resized and located correctly... include whether the title and logo are given the correct placement and prominence, if the menu is horizontal or vertical, how many text sections are provided, and how scalable the design is for future functionality and growth The various types of designs on the DVD include XHTML table-based templates, XHTML e-newsletter templates, XHTML signature templates, Photoshop templates, and CSS-based templates... the designer chooses, allows for them to expand to greater widths ■ Designs 81–90: XHTML e-newsletters that can be either emailed from a browser or embedded into an email and then emailed ■ Designs 91–100: XHTML signatures that can be embedded into email messages, many times working in conjunction with a Web site and/ or e-newsletter to provide consistent branding ■ ■ Designs 101–110: Photoshop designs... Activate the layer’s image by selecting the entire layer area (Ctrl-A for Windows; Cmd-A for Macintosh) and move the layer up one pixel (one click) and down one pixel by using the up and down arrow keys (see Figure 19.23) 7 Click the Color Picker in the toolbar to open the Color Picker dialog box and select a replacement (see Figure 19.24) 8 Click OK to close the Color Picker dialog after the replacement... coding standards or hardware standards (for example, screen resolution), there are elements that can still be used, studied, or modified from older designs This is why older templates are included with the newer ones Also important for the reader to keep in mind is that templates can and, in most cases, should be modified for specific projects A5design’s clients don’t always realize that colors and images... or Cmd-T for Macintosh Once the outer frame is active, small square handles in the corners will appear (see Figure 19.19) 6 Resize the image by clicking and dragging any of the corners on the frame that turn the mouse into an up or down arrow Note Often, the image will need to be resized proportionately Holding the Shift key and the handles simultaneously while dragging will ensure that the image's proportions... Macintosh) and move the layer up one pixel (one click) and down one pixel by using the up and down arrow keys (see Figure 19.18) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Game Developing GWX 549 550 Chapter 19 ■ Customizing the Designs Included in This Book Figure 19.18 The photo after it has been activated in the window Note The image in Figure 19.18 extends below and to... value to 1 where code is being customized This allows the designer to understand better how the design is constructed ■ Ensure that the location and image name for each menu item is consistent when working with XHTML templates that use mouseovers in the menu (see Listing 19.1) No two menu items can have the same location and image names Listing 19.1 Unique JavaScript Names for Mouseover Code . with this book, which contain both pure CSS and table-based XHTML Web designs, email signatures, e-newsletters, and Photoshop designs, which do not have code. Customize images and colors in the Photoshop file(s). 3. Optimize and save necessary images that will be used by precoded XHTML, CSS, and possibly JavaScript