design

layout

content

The client provides the goals and content. The content determines the layout. It is useful to make a content inventory.

viewport

The viewport is the visible rectangle within the browser window. This is the part that you can see. The actual document may extend beyond the viewport width and require scrollbars to view the rest of the document.

grids

Grids (fluid grids, in particular) have emerged as a methodology for creating layouts. Fluid grids are grids that change size according to viewport size. The browser window is a part of the computer-device screen rectangle.

box 1 This is an example of a very simple fluid grid. Notice that when you change your window size it will adjust to fit the window.
box 2 This is an example of a very simple fluid grid. Notice that when you change your window size it will adjust to fit the window.
box 3 This is an example of a very simple fluid grid. Notice that when you change your window size it will adjust to fit the window.
box 4 This is an example of a very simple fluid grid. Notice that when you change your window size it will adjust to fit the window.

wire frames

Generally, we think of the most common layouts with header, navigation bars, content, and footer. Everything surrounds the content as the main focal point.

layout-HFACA-1

Of course, you may re-arrange these elements anyway you like. You may just have one element at the center of the page. It could be a circle or any shape you want. It would be pretty boring if everyone did their layouts exactly the same. For a while, I remember a time, not too long ago, when many were doing their layouts fixed at 960 pixels. That was pretty boring! That’s when I decided to do a liquid web site totally in Flash because it gave me much more control. It shrinks and expands with the browser window. Making an all Flash web site was a mistake because many devices did not support Flash. It was a plug-in with some security issues. Steve Jobs railed against it in 2010. Now, with html5, we are seeing more and more of the capabilities in html5 without plugins.

Steve_Jobs_Headshot_2010-CROPFlash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

–Steve Jobs, 2010