Flexible Web Design: Creating Liquid and Elastic Layouts with CSS
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.
What people are saying - Write a review
We haven't found any reviews in the usual places.
CHAPTER 2 How to Design Flexible Layouts
CHAPTER 3 Preparing Your Design for Construction
CHAPTER 4 Building Liquid Layout Structures
CHAPTER 5 Building Elastic Layout Structures
CHAPTER 6 Putting Limits on Flexibility
Other editions - View all
Adobe Fireworks adopt-pets Animal Shelter background color background image banner block body element bottom browser window buffer divs can’t chapter choose combined width comp completed technique conditional comment content-main div content-secondary content-wrapper create DDDDDD default doesn’t edge elastic layout example faux columns Figure flexible design flexible layouts float font gradient graphic header and footer height horizontal scrollbar hybrid layouts inside Internet Explorer layer layout method left side line lengths liquid layout liquid or elastic look main content column main content div margin-left margin-right mask match max-width maximum width min-width nav bar negative margin layout nested no-repeat overflow padding percentage resize right side rule showing this completed side margins sidebar div simply slice space style sheet text size there’s thumbnails tile two-column layout users viewport width web design wrap wrapper div X)HTML you’re zoom