Liquid(Fluid) and Elastic Layouts

Liquid(Fluid) and Elastic Layouts From Flexible Web Design by Zoe MickleyGillenwater

3 types of layouts • Fixed width • Liquid (fluid) • Elastic You can also create a hybrid layout, for instance having a fixed width navigation bar but a liquid content area.

Transitioning away from a fixed width layout: things to consider • You must learn how to design outside the bounds of a predictable, rigid grid • Even though you want to create a liquid or elastic layout, there are going to be elements that will not be as easy to manipulate: • Images • Flash • Video Content • Because you are changing appearance based on window size and font size, testing in browsers will need to become even more important

Liquid or Fluid • Use percentage measurements • Changes in width based on the size of the user’s screen size • When a liquid layout changes in size all of the content within it, has to shift around on the page to fill up the space

Liquid Layout-Best to use when: • Readability is important • Working with a web application based on user-generated content (more flexibility for user) • Your audience includes a particularly wide variety of browsing setups

Elastic Layouts • Adapts to text size • Use em measurement • 1 em is roughly equivalent to the width of 2 lowercase m’s • Elastic layouts give you more control over where text falls in relation to other design components on the page

Elastic Layout-Best to use when: • The site contains many large data tables • Tables are unique in that they’re made up of text, so they can get bigger(unlike images) but they can’t be wrapped(like images) • Typography or the proportion of design elements is very important

Design for Flexible Layouts-Good Rules Avoid: fixed heights for anything containing text • Changing the width of a textbox affects how many lines the text takes up (in a liquid layout) or its overall height (in an elastic layout) • The amount of content in one area can change over time so it needs to remain flexible

Design for Flexible Layouts-Good Rules • Avoid: Text matched with images that can’t expand • Not talking about in-line images in content • Applies to images that you lay text either on top of or right beside it. • Avoid: Fixed-width, full-width content • Creates a minimum width for the design • Avoid: Horizontal alignment across columns

Limiting Flexibility • Use min-width and max-width • Example: you might give a liquid layout a minimum width in pixels to keep two images inside the layout from overflowing when the viewport is too narrow • You can use any form of measurement, %, em, px, etc for min-width and max-width

Min and Max Width Example • Using ems in a liquid layout to limit the width to a certain number of text characters:#wrapper{ width:90%; min-width: 30em; max-width:60em; } Keeps people who are browsing with really large windows but small font sizes from getting outrageously long lines of text, while also allowing the text to fill the viewport for those users who browse with really large windows with large font sizes

Min and Max Widths can be applied to a wrapper or to particular columns #wrapper{ min-width:500px; max-width:100opx; } Or #content{ float:right; width:75% min-width:500px; max-width:800px; }

Testing • Browser Size • Firefox add on: Web Developer • Use resize dropdown feature to test in different browser sizes • As always test in all major browsers: Firefox, IE, Chrome and Safari

Liquid(Fluid) and Elastic Layouts