Book description
Liquid or fluid layouts change width based on the user's unique
device viewing size. These types of layouts have always been
possible with tables but offer new design challenges as well as
opportunities when built with CSS. This book, for experienced Web
designers with some CSS experience, outlines how to do this
successfully.
Designers will learn the benefits of flexible layouts and when to
choose a liquid, elastic, or hybrid design. They will learn not
only how to build a liquid layout from scratch using
standards-compliant and cross-browser compatible (X)HTML and CSS,
but will also learn how to design and slice their graphic comps in
a way that makes flexible design achievable. This book will show
designers that flexible layouts do not have to be visually boring
or difficult to build when planned and built correctly. Even those
who do not intend to build liquid layouts can use the concepts and
techniques taught in this book to improve their fixed-width CSS
designs, because they will learn how to design for the inherent
flexibility of the web medium, instead of the rigid qualities of
print media or table grid-based layouts.
Table of contents
-
Flexible Web Design
- Acknowledgments
- Introduction
- 1. Understanding Flexible Layouts
-
2. How to Design Flexible Layouts
-
-
Design Principles for Flexible Layouts
- Avoid: Fixed Heights for Anything Containing Text
- Avoid: Irregular Shapes
- Avoid: Text Matched with Images That Can’t Expand
- Avoid: Fixed-Width, Full-Width Content
- Avoid: Horizontal Alignment Across Columns
- Plan For: Images Extending Past Their Original Dimensions
- Plan For: Designed White Space Beyond the Maximum Width
- Plan For: Side-by-Side Items Wrapping onto Multiple Lines
- Before and After: Our Non-compatible Design, Fixed
-
Design Principles for Flexible Layouts
-
3. Preparing Your Design for Construction
-
- Setting up Your Graphic Comp
- Slicing Graphics for Flexible Design
- Site-Building Exercise: Preparing the Beechwood Animal Shelter Comp for Construction
- 4. Building Liquid Layout Structures
- 5. Building Elastic Layout Structures
- 6. Putting Limits on Flexibility
- 7. Creating Spacing for Text
- 8. Adding Background Images and Color
- 9. Creating Flexible Images
- Credits
Product information
- Title: Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
- Author(s):
- Release date: December 2008
- Publisher(s): New Riders
- ISBN: 9780321591616
You might also like
book
CSS3 Pushing the Limits
Push CSS3 and your design skills to the limit—and beyond! Representing an evolutionary leap forward for …
book
Practical CSS3: Develop and Design
This book teaches how to use CSS3 to build cool, responsive user interface features that are …
book
Positioning in CSS
The Grid Layout spec will soon change your approach to website design, but there will still …
book
Stunning CSS3: A Project-Based Guide to the Latest in CSS
CSS3, the latest version of the web's visual style language, is wildly popular among the industry's …