• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Introduction

Introduction

Take the book you’re holding in your hands right now, and resize it so that it’s easier to read.

Don’t feel bad—I’ve given you an impossible exercise, but I promise the book will be filled with practical instead of ridiculous exercises from here on out. That’s because we’re going to be talking about web design, where we’re not constrained by the physical limitations of print on paper.

Though both web and print offer opportunities for beautiful and effective design, each has its own strengths and limitations. To create successful web designs, you need to design to the medium’s strengths instead of fighting against them. One of these strengths is flexibility. Here, I’m using flexible in the broadest sense—built to adapt to an infinite number of viewing scenarios. Users are ultimately in control of their experience of web sites to a degree beyond what’s possible with any other medium. They get to choose—whether or not they do so consciously and willingly—the type of device they view web pages on, how big their screens and windows are, their text sizes and fonts, whether to view still images or Flash animations. Really savvy users can even set up their own style sheets to slightly or dramatically change the visual appearance of the sites they view. Some users don’t even “view” web sites—they may hear or feel them instead.

The web medium is also flexible in the narrower sense of the word—web pages and content are not fixed at one particular size. By default, web pages can change in width and height to accommodate the differing text sizes and window widths of the users. This is true of both web pages built with divs and CSS and those built with tables.

Fixed-width web pages—pages that are set at a certain number of pixels decided by the designer—override some of the web’s natural flexibility. There are certainly good reasons to build fixed-width designs, as you’ll learn in Chapter 1. But the alternatives to fixed-width design can offer a lot of benefit and may work for more types of sites than you may think.

Liquid (or fluid) sites, which resize based on the user’s window size, are one alternative. Elastic sites, which resize based on the user’s text size, are another. Both types of designs take advantage of the web’s natural flexibility and, when done well, can greatly improve the user’s experience on your site—all while looking just as attractive as a fixed-width site.

That’s what this book aims to teach you: why flexible design is a good thing and how to do it well. You might think with all this flexibility built into the web that it would be a piece of cake to make liquid or elastic web sites. Unfortunately, that’s not always true.

Despite the fact that flexibility is built into the web and offers lots of benefits, liquid and elastic web sites remain pretty rare—perhaps because they have their own set of challenges in both the design and development phases that most web designers are not used to. There’s not much currently out there that addresses these challenges head-on. This book does.

What You Will (and Will Not) Learn

This book aims to teach you:

  • the benefits of each type of flexible layout

  • how to choose the appropriate type of layout for your particular content, design, or audience

  • which visual elements work well in flexible designs and which to avoid

  • how to construct and slice your graphic comps with flexibility in mind

  • the (X)HTML and CSS for liquid, elastic, and hybrid layouts

  • how to make backgrounds and content work within their flexible layout containers

What you will not learn is that fixed-width layouts are evil and you’re a horrible person and a hack if you make one—not because my editor made me cut all that stuff out, but simply because it’s not true.

The “fixed vs. flexible” debate can be very heated in the web design community; this book does not seek to provide a definitive answer to which is “better.” I believe, as do many designers, that both fixed and flexible layouts have their place, with each suited to different types of sites. I use a variety of types of layouts on my sites, including fixed-width.

This book is simply meant to provide more detail on the side of the debate that doesn’t get as much coverage—the flexible side. If you do decide that flexible layout is right for your site—and I hope this book will expand your ideas of when it is effective—this book aims to teach you how to do it well and without too much trouble.

Who Should Read this Book

This book is meant for professional web designers who already have experience creating web sites from scratch. It won’t teach you (X)HTML or CSS; you’ll need to have at least an intermediate level of experience in both. I assume that you know enough CSS to be able to create a basic layout with it, but you don’t need to be a CSS layout expert, and you certainly don’t need to have any experience using it to create flexible layouts.

Even if you intend to continue designing fixed-width sites primarily, there are a lot of design ideas and techniques in this book that you can use to enhance your work. Fixed-width designs still have to account for some degree of flexibility due to the user-controlled nature of the web—how to make your pages elegantly adapt to different user text sizes, for instance, is something every CSS designer should know.

I think this book will be especially helpful to former print designers or web designers used to table-based layout who still struggle to produce pure CSS layouts. It will teach you how to think in the CSS mindset so that designing for CSS becomes natural and you no longer find yourself fighting against inappropriate comps when it comes time to actually build the pages.

Example and Exercise Files

Examples of the web design techniques taught in each chapter are provided on this book’s companion web site at www.flexiblewebbook.com. You can use these representative example files as a starting point for your own implementation of the techniques they exhibit, without having to copy down all the code written in the book.

Most of the chapters also contain an exercise portion, providing you the opportunity to implement some of the techniques taught earlier in the chapter in a real page, step by step. Throughout the book, you’ll work on building a flexible web site from the design comp to the finished pages. You can download the files for these exercises at www.flexiblewebbook.com as well and use them to work along with as you go through the steps of each exercise.

No web page can look or work the same in every browser, and the example and exercise files for this book are no exception. The files have been tested in the latest versions of the major browsers: Internet Explorer, Firefox, Safari, and Opera. Some of the older but still popular versions of Internet Explorer—7 and 6—are also accommodated in the code, but versions earlier than 6 (including Internet Explorer for the Mac) are not, due to their minuscule browser market share. The content of the files should still be accessible in these browsers, but they’re probably not going to look pretty!

Conventions Used Throughout this Book

This book uses a few terms that are worth noting at the outset.

  • (X)HTML refers to both the HTML and XHTML markup languages.

  • IE 6 and earlier refers to Windows Internet Explorer 5.0 to 6.0.

  • IE 5.x refers to Windows Internet Explorer 5.0 and 5.5.

The CSS referred to and used in this book is based on the CSS 2.1 specification, unless otherwise noted. HTML 4.01 Strict is used for the markup examples, but all examples will also work with XHTML 1.1.

All CSS examples shown should be placed in an external style sheet or in the head of an (X)HTML document, while all (X)HTML examples should be placed in the body element of the document. Occasionally, snippets of (X)HTML and CSS will be shown in the same example, one after the other, for the sake of brevity. However, each needs to go in its respective place to work correctly.

Also for the sake of brevity, the ellipsis character (...) is used in some code examples to indicate a removed or repeating section. For instance, the ellipsis in the following code sample indicates that not all the li elements inside the ul are being shown to you:

<ul>
   <li>Apples</li>
   <li>Bananas</li>

   ...

   <li>Watermelon</li>
</ul>

Some code examples will contain characters or lines in turquoise blue. The highlight means that content has been added or changed since the last time you saw that same code snippet.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint