Introduction . . ................................................xv
Chapter 1 Overview ofWeb Development Today ...................1
Defining Web Design ........................................... 2
Knowing the Seven Rules of Web Design .......................... 5
Understanding ThreeWeb-Design Philosophies .................... 6
Usability Philosophy ..........................................7
Pros and Cons .............................................8
Multimedia Philosophy ......................................12
Pros and Cons ............................................13
Mortised Philosophy.........................................14
Pros and Cons ............................................15
Summary .................................................... 17
Chapter 2 Designing for the Past, Present, and Future...............19
Feeling Browser Pains.......................................... 19
Incorporating Usage Statistics................................... 22
Branching Pages .............................................. 25
Understanding Bandwidth . .................................... 25
Building on Previous Design Weaknesses ......................... 28
IFrames and Frames .........................................29
Image Buttons ..............................................30
Background Images .........................................32
Uncontrolled Color . .........................................36
Uncompressed Images .......................................37
Thumbnails ................................................38
Summary .................................................... 40
Chapter 3 Things to Consider Before Beginning ....................41
Using Requirements ........................................... 41
Collecting the Requirements..................................43
Obtaining Front-End Requirements ............................46
Creating a Flowchart ........................................47
Knowing Bandwidth Requirements .............................. 47
Deciding on Resolution ........................................ 50
Designing Fixed versus Relative Sites ...........................55
Creating Versions of a Site to Satisfy Differing Resolutions . .......57
Deciding on Color Depth ....................................... 57
Designing for Scalability ....................................... 60
Using Include Files . . ........................................60
Creating a Flexible Design ....................................62
Summary .................................................... 65
Chapter 4 Enhancing Usability. . .................................67
Simplifying Architecture ....................................... 67
Use a Consistent Naming Convention ..........................68
Limit the Clicking . . . ........................................69
Avoid Linking the User Out of the Section ......................69
Create Cascading Architecture versus Flat Architecture ...........71
Creating Layout. .............................................. 72
Scrolling versus Nonscrolling..................................72
Pros of Scrolling ..........................................72
Cons of Scrolling ..........................................72
Positioning Content . ........................................73
Developing Navigation ........................................ 74
Creating Consistency ........................................74
Using Text for Menu Items. ...................................76
Deciding Whether to Use a Horizontal or Vertical Structure .......76
Allowing Enough Width .....................................77
Understanding the Different Types of Menus . ..................77
Designing for Accessibility. . . ................................... 79
Designing for Content ......................................... 79
Summary .................................................... 82
Chapter 5 Gathering Requirements and Creating a Comp............83
Gathering and Basing a Site on Requirements ..................... 85
Creating a Comp for the Client .................................. 89
Creating a Source Directory...................................90
Collecting and Documenting Stock Images. . . ...................92
Selecting Colors.............................................94
Deciding Layout . . . .........................................95
Developing Layers. . .........................................96
Using Masks ................................................99
Receiving a Decision on the Chosen Comp and Making Edits ....... 100
Summary ................................................... 101
Chapter 6 What Is Needed to Build Mortised Sites .................103
Understanding the Concept of Mortising Images ................. 104
Understanding XHTML........................................ 113
Using a Limited Number of Tags. .............................114
Understanding Graphics . . . ................................... 114
Understanding CSS ........................................... 114
Understanding CSS Terminology .............................116
CSS Used in This Book.......................................117
Block- and Line-Level Tags. . ................................... 118
Understanding the DocType Declaration ......................118
Linking to CSS Style Sheets ..................................118
Including Print Style Sheets ..................................121
Understanding Include Files ................................... 123
Summary ................................................... 124
Chapter 7 Understanding Graphics ..............................125
Learning about Vector and Bitmap Images....................... 125
Learning about JPGs, PNGs, and GIFs ............................ 128
Using PNGs and GIFs ........................................128
Knowing How PNG and GIF Compression Work.................134
Using JPGs ................................................137
Saving a Photograph . . ...................................138
Saving an Image That Has Gradations .......................138
Saving Text on Top of a Photo .............................142
Misusing Image Formats . . . ................................... 143
Understanding Graphics/Compression Software .................. 151
Summary ................................................... 153
Chapter 8 Creating CSS Designs. ................................155
CSS-Based Design Versus XHTML Table Design.................... 155
Advantages of CSS Designs ..................................156
Disadvantages of CSS Designs ................................156
The Basics of CSS-Based Design Works Versus XHTML
Table-Based Design. . .......................................157
Understanding the Box Model ................................. 170
When to Use Tables .......................................... 176
Validating Code ............................................. 176
Testing Designs in Various Browsers ............................ 177
Summary ................................................... 178
Chapter 9 Case Study: Low-Content CSS Design...................179
Understanding the Design’s Structure ........................... 180
The Reasoning Behind Guides and Creating Slices in
Photoshop Files ............................................180
Understanding the Placement of CSS Containers ................183
Building the Structure ........................................ 185
Creating the XHTML and CSS Framework ......................185
Adding the Header Content .................................188
Adding <DIV> in Which to Nest Left and Right Columns . . . ......192
Creating the Left Column ...................................194
Adding the Center (Right) Column............................201
Constructing Second-Level Pages ............................... 207
Adding a Floating Container for Additional Content ............214
Summary ................................................... 222
Chapter 10 Case Study: Medium-Content CSS Design ...............223
Understanding the Design’s Structure ........................... 223
Reasoning Behind Guides and Creating Slices in a
Photoshop File.............................................224
Understanding the Placement of CSS Containers ................226
Building the Structure ........................................ 228
Creating the XHTML and CSS Framework ......................228
Adding the Left Column ....................................230
Adding <DIV> to Nest Center and Inside-Right Columns . . . ......236
Adding the Top-Right Images ................................237
Adding the Bottom, Center, and Right Content Areas ...........244
Constructing Second-Level Pages ............................... 253
Constructing a Second-Level Page with Three Columns . . . .......253
Constructing a Second-Level Page with Two Columns ...........260
Summary ................................................... 265
Chapter 11 Case Study: High-Content CSS Design ..................267
Understanding the Design’s Structure . . . ........................ 267
Reasoning Behind Guides and Creating Slices in
Photoshop Files ............................................268
Understanding the Placement of CSS Containers ................271
Building the Structure ........................................ 272
Creating the XHTML and CSS Framework ......................273
Adding the Header Row ....................................275
Creating the Left Column ...................................280
Adding the Center Column ..................................286
Constructing Second-Level Pages ............................... 299
Constructing a Second-Level Page with Three Columns . . . .......300
Constructing a Second-Level Page with Two Columns ...........310
Summary ................................................... 320
Chapter 12 Case Study: Full-Height Three-Column Layout ...........321
Understanding the Design’s Structure . . . ........................ 322
Reasoning Behind Guides and the Creating of Slices in
Photoshop File.............................................323
Understanding the Placement of CSS Containers ................325
Building the Structure ........................................ 326
Creating the XHTML and CSS Framework ......................326
Adding the Rows and Columns to the Framework...............329
Populating the Header, Footer, and Columns with Content ......335
Constructing Second-Level Pages ............................... 343
Summary ................................................... 344
Chapter 13 Case Study: Background-Based Design..................345
Understanding the Design’s Structure . . . ........................ 346
Reasoning Behind Guides and the Creating of Slices in the
Photoshop File.............................................347
Understanding the Placement of CSS Containers ................349
Building the Structure ........................................ 350
Creating the XHTML and CSS Framework ......................350
Adding the Header Area to the Framework . . ..................353
Adding the Body Content and Footer .........................359
Constructing Second-Level Pages ............................... 368
Summary ................................................... 370
Chapter 14 Case Study: A CSS Form ..............................371
Understanding the Form’s Structure ............................ 371
Explaining the Style Sheet Used for the Form..................... 374
Building the Form Row by Row ................................ 376
Adding the <FORM> Tag and Required Row. . .................376
Adding the First Name Row..................................377
Adding the Last Name Row..................................378
Adding the Contact Name Row . . ............................379
Adding the Region and Language Rows .......................379
Adding the Status and Unlimited Rows ........................380
Adding the Purchase Date Row . . ............................381
Adding the Comments Row .................................382
Adding the Options to Select Rows ...........................383
Adding the Submit and Cancel Buttons........................384
The Final Product . . . .......................................384
Summary ................................................... 389
Chapter 15 Case Study: Low-Content XHTML Template .............391
Creating the Design for a Low Amount of Content ................ 392
Understanding the Strengths and Weaknesses of the
Chosen Design. . ............................................. 392
Adding Guides and Slices...................................... 394
Creating the Parent Table . . . .................................. 395
Creating and Linking the Style Sheet ............................ 396
Creating the Menu Table...................................... 398
Adding an Image to the Center Column . . . ...................... 401
Creating the Content (Right-Area) Table . . ...................... 402
Creating the Footer Information ............................... 408
Summary ................................................... 409
Chapter 16 Tips and Techniques . ................................411
Tantek or Box Model Hack . . .................................. 411
Naming Rules and Properties Correctly .......................... 416
Removing Body Margins and Padding........................... 420
Creating the Framework for a Fixed-Width CSS Design ............ 421
Taking into Account Increasing and Decreasing Column Heights . . . . 430
Centering a Fixed-Width Design................................ 432
Creating a Liquid Design . . . ................................... 437
Creating a Line .............................................. 438
Using Background Images as Design Elements .................... 440
Coding CSS Mouseovers ....................................... 441
Using JavaScript Drop-down Menus............................. 443
Remembering the Order of Margin and Padding Shortcuts ......... 443
Using the Border and Background Properties for
Troubleshooting ............................................. 443
Commenting Out Code for Troubleshooting ..................... 447
Using Unique Naming Conventions ............................. 449
Avoiding Horizontal Scrollbars ................................. 449
Using CSS Shortcuts .......................................... 450
Understanding Font Units . . ................................... 450
Using Globally Driven <SPAN> and <DIV> Tags for
PrintingPurposes ............................................ 450
Using Non-Graphical ElementsWhen Designing Rebrandable
Sites........................................................ 451
Including Hidden <DIV> Tags for Future Use..................... 453
Positioning the Line-Height Property Correctly ................... 453
Testing Continually and Consistently............................ 455
Creating Source Image Files That Can Be Easily Customized and
Resaved .................................................... 455
Breaking Out Sections of Source Image Files ..................... 457
Creating Smart Navigation . ................................... 458
Reusing Images .............................................. 459
Indenting and Commenting Code .............................. 461
Removing Spaces and Comments ............................... 462
Summary ................................................... 464
Chapter 17 Search Engine Optimization (SEO) .....................465
Search Engines .............................................. 465
Tips and Techniques .......................................... 466
Content Is King ............................................468
Keyword Research . ........................................468
Creating Strong Title Tags ...................................471
Meta Keywords and Meta Description.........................473
Use <h1> to <h6> Tags ....................................475
Use Bold and Italics Tags ....................................476
Include Keywords in ‘‘alt’’ and ‘‘title’’ Properties in Images . ......477
Use Keywords in Naming Directories, Files, and Images ..........477
Link Keywords .............................................479
Building a Strong Page Rank Value with Google ................480
Adding Sitemaps to Site.....................................481
Case Studies ................................................. 482
Case Study 1—A5design.com ................................483
Optimization Changes Made to Site ..........................483
Optimized Code ...........................................484
Optimization Results .......................................490
Case Study 2—Onepartart.com. . . ............................491
Optimization Changes Made to Site ..........................492
Optimized Code ...........................................492
Optimization Results .......................................500
Case Study 3—Apricotpetal.com. . ............................502
Optimization Changes Made to Site ..........................503
Optimized Code ...........................................503
Optimization Results .......................................505
Summary ................................................... 505
Chapter 18 Conversion Rate Optimization (CRO) ...................507
What Are the Variables Associated with CRO? .................... 507
Functionality ..............................................509
Layout. . ..................................................512
Imagery ..................................................515
Color . . . ..................................................518
Content ..................................................519
Testing ..................................................... 521
Case Studies ................................................. 524
A/B Test 1—Onepartart.com .................................524
A/B Test 2—apricotpetal.com ................................528
Multivariate Test—medcomgroup.com........................528
Summary ................................................... 532
Chapter 19 Customizing the Designs Included in This Book ..........535
Steps to Customizing a Template ............................... 535
Step 1: Open the Main Photoshop File ........................536
Step 2: Customize Images and Colors..........................537
Step 3: Optimize and Save Necessary Images . ..................538
Step 4: Open an XHTML (HTML), CSS, or JavaScript File . . . .......541
Step 5: Customize Text and Code .............................542
Step 6: Test the Design......................................542
Photoshop Tutorials .......................................... 544
Replacing Photos . . ........................................544
Resizing Photos ............................................549
Changing Colors . . . ........................................551
Undoing and Redoing Actions . . .............................556
Undoing Actions .........................................556
Redoing Actions .........................................556
Configuring the Undo Actions (History States) Setting .........557
Summary ................................................... 558
Chapter 20 Templates Included on DVD...........................559
Designs—Fourth Edition Folder ................................ 562
Designs—Third Edition Folder.................................. 594
Designs—First Edition Folder .................................. 808
Summary ................................................... 876
Index...........................................................877
