Layout Gallery

Now that you have (hopefully) made some decisions about the features you want included in your new website, it is time to consider page layout. What follows is a screen simulation and brief tutorial, to help you decide. As always, our design consultant will discuss design considerations and trade-offs during your free pre-sale consultation.

Illustrated above¹ are the 3 basic page layout options. L–RT–B, they are:
   Fluid (dynamic width)
   Centered (fixed or % width)
   Left-justified (fixed or % width)

Let’s discuss each layout in a bit more detail.

The Fluid design, as the name implies, adjusts the page contents fluidly to the browser window size. The Centered layout will cause a horizontal scrollbar until the width of the centered content block is reached. It will then act somewhat like the dynamic model, in that the centered block will adjust position along with the window size. If the centered content is made a percentage of window size, rather than being expressed as a fixed number of pixels, it will also dynamically adjust size (though there will always be whitespace either side of center). Like the Centered design, the Left-justified layout causes a horizontal scrollbar to appear, until the width of the content block is exceeded.

All three options have their advantages and disadvantages. Your decision will largely depend upon other design elements present on the page, and the effect you are trying to achieve. For example, the Centered design is often effective in creating an open, “spacious” look, and more readily adapts to a responsive layout that adjusts to different screen sizes and devices. Note that if your design depends upon CSS “absolute positioning” of page elements, left-justified may be your only option (since absolutely-positioned objects cannot “flow”). Also keep in mind that absolutely-positioned screen elements may cause a poor viewing experience on mobile devices, particularly foldables.

Finally, note that it is possible to combine different design layouts within a single page. This page (the one you are viewing now) actually utilizes all three techniques! The masthead at the top (with The Whole Internet logo) utilizes the fluid design layout. It fills the width of the screen, regardless of window size. The navigation buttons along the left side are an example of the left-justified (fixed) design, while the main text is defined within a centered layout.

 1.  Screen animations courtesy of Mark Powell at Wordscapes