Web Design: Fixed-Layout vs Flowed-Layout

By Xah Lee. Date: . Last updated: .

Many websites, when you increase the font size, part of the text went off window. It forces you to enlarge the window. Bad design. If you gonna do that, goto PDF.

Here's examples:

Their content are excellent, however.

The biggest transgressor of this, is apple.com. However, Apple.com is quite well designed, and i never had to enlarge font.

In web design, there's flowed layout vs fixed-layout design. Both have advantages.

Fixed-layout is especially important for print media, such as newspaper, magazine, books. These, you need efficient use of space, and no large gaps between columns. That usually requires you to have tight control down to pixels of every element.

But as digital documents, fixed-layout is not suitable because you need your document to be displayed on screens of various size, from palm sized devices to huge cinema screens. And with screens, you have the concept of scroll instead of fixed pages. There isn't a worry of white gaps as in printed media, in fact gaps make the doc's structure more clear, and you have links, buttons, etc that can do pop-ups, frames, tabs, and windows can be positioned side by side or re-sized, moved, which gives user much better control in reading the document. So, flowed makes much more sense.

Web Design

  1. Typography Sucks
  2. Font Size problem
  3. Serif or Sans-Serif?
  4. Grey Text on White Background
  5. Dark Theme Web Design
  6. Peepshow Windows
  7. GUI vs Command Line: a Unified Design
  8. Skeleton Screen
  9. Fixed-Layout vs Flowed-Layout
  10. How JavaScript Breaks UI, Evolution of UI
  11. Should Hyperlinks Have Underline?
  12. Survey of Tab Style 2006
  13. Problem of Header Linking to Table of Contents
  14. Understand Atomic CSS in 1 Minute
  15. CSS: What's a CSS Pixel? What's Reference Pixel?
  16. Web Design, Minimal Window Width
  17. User Interface Design: Internet Explorer 9's Dysfunctional Colorful Tabs
  18. Phone and Tablet Screen Density Comparison

If you have a question, put $5 at patreon and message me.