Professional Web Design: Techniques and Templates- P12

Professional Web Design: Techniques and Templates- P12: This is the must-have book for designers who want to expand their skills and improve the quality of their designs. Learning CSS technology and continually improving ones design and developer skills is essential for every Web designer in todays marketplace. The goal of Professional Web Design: Techniques and Templates is to educate beginning-to-intermediate Web designers on the various issues involved with Web design through general discussion, case studies, and specific tips and techniques....
Nội dung trích xuất từ tài liệu:
Professional Web Design: Techniques and Templates- P12 532 Chapter 18 ■ Conversion Rate Optimization (CRO) Figure 18.27 Winning version of the redesign of the page in Figure 18.25. Copyright † 2010 Medcomgroup.com. Used with permission. 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, andPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Summary 533 Figure 18.28 Preexisting version on the rental page. Copyright † 2010 Medcomgroup.com. Used with permission. 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.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 534 Chapter 18 ■ Conversion Rate Optimization (CRO) Figure 18.29 Redesigned version on the rental page. Copyright † 2010 Medcomgroup.com. Used with permission.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game 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. 535Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX 536 Chapter 19 ■ Customizing the Designs Included in This Book Figure 19.1 The design that is customized in this chapter. 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 individuals 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.Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Game Developing GWX Steps to Customizing a Template 537 Figure 19.2 The location of the files after being saved to the hard drive. 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 ...