Fixed layout, variable layout, or something completely different?

If you are working on a web application, sooner or later you come across the question of layouting your pages, and you’ll notice that there are a couple of (accepted) choices:

  • Variable (fluid, full-window) layout
  • Fixed layout (centered or not centered)
  • Elastic layout (what??)

Full-window layout is most likely the simplest and earliest web layout. If you create a plain HTML page, the contents will take up the whole width of the browser window. You’ll notice this if you browse pages from the early days of the web, and it’s immediately obvious that text written in long lines is very hard to read on a screen. (Try reading Wikipedia in a full-screen window on 1920 pixels – you soon feel the need to resize the browser window)

Given its age, it is surprising (or rather disturbing?) that the full-window layout is still promoted in current web development environments, as the ASP.Net MVC default page layout is defined in Site.css as

    width: 90%;
    margin-left: auto;
    margin-right: auto;

meaning 5% of the window width as margin on the left and right side of the content. (All other measures in the CSS file are given in pixels (px) or relative to font height (em)).

In contrast, sites such as WordPress or online newspapers use a fixed layout. Fixed layout makes it easier to arrange the page elements in a grid independent of the browser’s window size. (Note that while most WordPress templates use fixed layout, the admin pages are full-screen with fixed and variable columns)

As a reaction to both the question fixed-vs-variable and the increasing multitude of web-enabled devices from HD monitors (or bigger) to smartphones, the latest trend in web design is called Responsive or Elastic.

Responsive layout is typically implemented using CSS3 Media Queries which allows the definition of page and page elements styles based on properties of the output format. They make it possible for a browser supporting media queries to apply the CSS styles definition based on window width, so that a text may be layouted full-screen on small displays, and in columns or fixed-width on larger displays.

For more discussion on the topic, visit Smashing UX Design (using responsive layout itself) or the User Experience StackExchange site. also implements a 1140px responsive layout.

Enjoy resizing😉

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: