Flexible Web Design: Creating Liquid and Elastic Layouts with CSS

Table of contents

1. Flexible Web Design
   1. Acknowledgments
   2. Introduction
      1. What You Will (and Will Not) Learn
      2. Who Should Read this Book
      3. Example and Exercise Files
      4. Conventions Used Throughout this Book
   3. 1. Understanding Flexible Layouts
      2. 1. Types of Layouts
            1. Fixed-width: Rigid Pixels
               1. Screen Resolution Does Not Equal Browser Window Size
               2. Not Everyone Uses 16-Pixel Text
            2. Liquid or Fluid: Adapts to the Viewport
               1. Taking Advantage of Screen Real Estate
               2. Respecting User Preferences
               3. Improving Readability
               4. Increasing Accessibility for People with Disabilities
            3. Elastic: Adapts to the Text Size
            4. Increased Typographic Control
               1. Improving Readability Through Standard Line Lengths
               2. Increasing Accessibility
            5. Hybrid Layouts
               1. Mixing Units of Measurement
               2. Limiting Flexibility with Minimum and Maximum Widths
         2. Challenges of Liquid and Elastic Layouts
            1. Breaking Out of the Grid: Beyond Your Design Comfort Zone
            2. Saying Goodbye to Pixel Perfection
            3. Making a Design Look Good Big and Small
            4. Dealing with Text Overflows
            5. Dealing with Horizontal Scrollbars
            6. Fitting Fixed-width Content in a Flexible Box
            7. Increased Design and Testing Time
            8. Browser Shortcomings
         3. Choosing the Right Layout Type for Your Page
            1. Fixed-width
            2. Liquid
            3. Elastic
   4. 2. How to Design Flexible Layouts
      2. 1. Design Principles for Flexible Layouts
            1. Avoid: Fixed Heights for Anything Containing Text
            2. Avoid: Irregular Shapes
            3. Avoid: Text Matched with Images That Can’t Expand
               1. Images that are Masked
               2. Images that Can Show More or Less of Themselves
               3. Images that Blend into Background Colors or Patterns
               4. Images that Can Scale without Looking Too Pixelated
               5. Images that Simply Don’t Have to Match in Height
            4. Avoid: Fixed-Width, Full-Width Content
               1. Don’t Design Images to Span the Full Width
               2. Create Full-Width Images Out of Multiple Sliding Pieces
               3. Generate Scrollbars for Overly Large Content
            5. Avoid: Horizontal Alignment Across Columns
            6. Plan For: Images Extending Past Their Original Dimensions
            7. Plan For: Designed White Space Beyond the Maximum Width
            8. Plan For: Side-by-Side Items Wrapping onto Multiple Lines
               1. Navigation Bars
               2. Page Content
         2. Before and After: Our Non-compatible Design, Fixed
   5. 3. Preparing Your Design for Construction
      2. 1. Setting up Your Graphic Comp
            1. Choosing a Canvas Size
               1. Match the Minimum Width
               2. Match the Maximum Width
               3. Choose a Happy Medium
            2. Using Layers and Pages to Organize Your Comp
               1. Using Layers to Visualize Different Widths
               2. Using Pages to Visualize Different Widths
            3. Nondestructive Editing Techniques
               1. Masking Images
               2. Saving Large Originals of Images
         2. Slicing Graphics for Flexible Design
            1. Creating Separate Files for Slicing
               1. Increasing the Comp Size
               2. Increasing the Size of Objects in the Comp
               3. Using Separate Files for Individual Areas of the Layout
            2. Slicing Pieces of Flexible Boxes
         3. Site-Building Exercise: Preparing the Beechwood Animal Shelter Comp for Construction
            1. Navigating Around the Comp
            2. Creating the Slices for the Header
               1. The Logo Slice
               2. The Background Color Bands Slice
               3. The Nav Bar Gradient Slices
            3. Creating the Slices for the Home Page
               1. Slicing from the Main Comp Page
               2. Creating Separate Pages for Individual Images
            4. Creating the Slices for the Programs Page
            5. Export the Images
   6. 4. Building Liquid Layout Structures
      2. 1. Preparing the Page for CSS Layout
            1. Universal Page Setup Steps
            2. Preparing the Pages for This Chapter’s Examples
         2. Creating Liquid Columns Using Floats
            1. Creating Columns with Floats and Matching Side Margins
               1. Adding a Third Column
            2. Creating Columns by Floating Everything
               1. Benefits of Floating All the Columns
               2. Adding a Third Column
            3. Creating Columns with Floats and Negative Margins
         3. Keeping the Layout from Spanning the Whole Viewport
            1. Changing Column Widths
            2. Assigning Side Margins
            3. Assigning a Percentage Width to the Wrapper
         4. Site-Building Exercise: Creating the Shelter’s Inner-Page Layout Structure
            1. Preparing the Page
            2. Adding Base Styles
            3. Creating the Two-Column Layout
            4. Reducing the Width of the Two Columns
   7. 5. Building Elastic Layout Structures
      2. 1. Switching Dimensions to Ems
            1. What is an Em?
            2. Nesting Em Measurements
            3. Picking Em Measurements
               1. Picking Line Lengths
               2. Picking Pixel Equivalences
         2. Creating Elastic Columns Using Floats
            1. Refresher: About This Chapter’s Examples
            2. Creating Columns with Floats and Matching Side Margins
               1. Keeping the Sidebar on the Left
               2. Adding a Third Column
            3. Creating Columns by Floating Everything
               1. Adding a Third Column
         3. Site-Building Exercise: Creating the Shelter’s Home Page Layout Structure
            1. Preparing the Page
            2. Adding Base Styles
            3. Creating the Columns
   8. 6. Putting Limits on Flexibility
      2. 1. Building Hybrid Layouts
            1. Fixed Sidebars with a Liquid Center Column
               1. Using Floats with Matching Side Margins
               2. Liquid-Fixed Hybrid Layouts Using Negative Margins
               3. Preventing the Layout from Spanning the Whole Viewport Width
            2. Fixed Sidebars with an Elastic Center Column
               1. Fine-Tuning the Appearance with a Wrapper div
               2. Elastic-Fixed Hybrid Layouts Using Negative Margins
         2. Adding Minimum and Maximum Widths
            1. Protecting Your Users, Designs, and Content
            2. Choosing min-width and max-width values
               1. Pixels
               2. Percentages
               3. Ems
            3. Using the min-width and max-width Properties
               1. Applying the Properties to the Overall Page
               2. Applying the Properties to Individual Columns
            4. Incompatibility in IE 6 and Earlier
         3. Alternative Ways to Limit Flexibility
            1. Using the overflow Property
            2. Letting Columns Drop
         4. Site-Building Exercise: Limiting the Flexibility of the Shelter’s Pages
            1. Modifying the Programs Page
            2. Modifying the Home Page
   9. 7. Creating Spacing for Text
      2. 1. Matching Units of Measurement
            1. Spacing for Liquid Layouts
               1. Space on the Edge of the Viewport
               2. Space Within the Columns
            2. Spacing for Elastic Layouts
         2. Mixing Units of Measurement
            1. Adding Margin and Padding to Width-less divs
            2. Adding Margin and Padding to Content Instead of to divs
            3. Adding Buffer divs
         3. Site-Building Exercise: Adding Spacing to the Home and Inner Pages
            1. Adding Spacing to the Header
            2. Adding Spacing to the Footer
            3. Dealing with Margin Collapsing
            4. Adding Spacing to the Content of the Programs Page
            5. Adding Spacing to the Content of the Home Page
   10. 8. Adding Background Images and Color
       2. 1. Blending Background Images
             1. Creating Gradients
             2. Creating Rounded Corners
             3. Creating Curved Edges
          2. Creating the Appearance of Equal-Height Columns
             1. Faux Columns for Liquid-Fixed Hybrid Layouts
             2. Faux Columns for Fully Liquid Layouts
                1. Two Columns
                2. Three Columns
             3. Faux Columns for Elastic Layouts
          3. Site-Building Exercise: Adding Backgrounds to the Home and Inner Pages
             1. Adjusting Backgrounds and Colors for the Header of Both Pages
             2. Adjusting Backgrounds for the Programs Page
                1. Creating the Faux Columns Background Image in Adobe Fireworks
                2. Applying the Backgrounds to the Page
             3. Adjusting Backgrounds for the Home Page
   11. 9. Creating Flexible Images
       2. 1. Dynamically Changing Images’ Screen Area
             1. Foreground Images that Scale with the Layout
             2. Hiding and Revealing Portions of Images
                1. Variable Cropping with Background Images
                2. Variable Cropping with Foreground Images
             3. Creating Sliding Composite Images
          2. Creating Flexible Collections of Images
             1. Teaser Thumbnail Lists
             2. Thumbnail Image Galleries
                1. Wrapping the Thumbnails
                2. Scaling the Thumbnails
          3. Site-Building Exercise: Adding Flexible Images to the Home Page
             1. Adding the Variable Cropping Banner Image
             2. Creating the Teaser Thumbnail List
   12. Credits
       1. 1. Figures
          2. Photographs