Flexible Web Design

Creating Liquid and Elastic Layouts with CSS

Table of Contents

  1. Understanding Flexible Layouts

    1. Types of Layouts
    2. Challenges of Liquid and Elastic Layouts
    3. Choosing the Right Layout Type for Your Page

  2. How to Design Flexible Layouts

    1. Design Principles for Flexible Layouts
    2. Before and After: Our Non-compatible Design, Fixed

  3. Preparing Your Design for Construction

    1. Setting up Your Graphic Comp
    2. Slicing Graphics for Flexible Design
    3. Site-Building Exercise: Preparing the Beechwood Animal Shelter Comp for Construction

  4. Building Liquid Layout Structures

    1. Preparing the Page for CSS Layout
    2. Creating Liquid Columns Using Floats
    3. Keeping the Layout from Spanning the Whole Viewport
    4. Site-Building Exercise: Creating the Shelter’s Inner-page Layout Structure

  5. Building Elastic Layout Structures

    1. Switching Dimensions to Ems
    2. Creating Elastic Columns Using Floats
    3. Site-Building Exercise: Creating the Shelter’s Home Page Layout Structure

  6. Putting Limits on Flexibility

    1. Building Hybrid Layouts
    2. Adding Minimum and Maximum Widths
    3. Alternative Ways to Limit Flexibility
    4. Site Building Exercise: Limiting the Flexibility of the Shelter’s Pages

  7. Creating Spacing for Text

    1. Matching Units of Measurement
    2. Mixing Units of Measurement
    3. Site Building Exercise: Adding Spacing to the Home and Inner Pages

  8. Adding Background Images and Color

    1. Blending Background Images
    2. Creating the Appearance of Equal-height Columns
    3. Site Building Exercise: Adding Backgrounds to the Home and Inner Pages

  9. Creating Flexible Images

    1. Dynamically Changing Images’ Screen Area
    2. Creating Flexible Collections of Images
    3. Site-Building Exercise: Adding Flexible Images to the Home Page