Website Page Layout – We’ve Come a Long Way!

In website design, the page layout is one of the most important considerations. The design concept, as well as the technical coding behind it, influences how well it performs across a number of indicators: accessibility, user experience, search engine ranking, visual consistency, maintenance, page load speed, among many other considerations.

The design layout not only has to meet your clients’ needs, but also has to be a positive experience for all users, regardless of their navigation and search level skills.

In the last ten years or so, standards for website development have progressed at a rapid pace. Behemoth international organizations like the World Wide Web Consortium (W3C) as well as ‘grassroots’ organizations like The Web Standards Project have helped establish website standards and best practices that make web development more accessible for diverse users, and possible for almost any type of business.

Back in the “old days” (before web standards were advocated by pioneers like Jeffery Zeldman), web designers used tables to create page layout. HTML tables, as described by W3C “allow[s] authors to arrange data – text, pre-formatted text, images, links, forms, form fields, other tables, etc. – into rows and columns of cells.”

The important word here is “data”. While tables do allow web designers and web design software to create page layouts with text and image, they are really only suited for tabular data, like price charts or a spreadsheet. In the age of tables, the amount of code needed to create more complex designs was dense and difficult to maintain. These constraints demanded a new solution to page layout.

In the mid 90’s W3C addressed the problem by creating Cascading Style Sheets, or CSS. CSS allows web designers to separate content from presentation when breaking out a design into a web page. When CSS was fully available for designers in 2001, the code turned lightweight, easy to maintain, and more accessible to users. Not only did this change the way designers made websites but it paved the way for new, custom techniques.

Fast forward to today, where web designers have a number of robust techniques from which to choose. Here are a few used by professional custom web designers like myself, that get into the technical nitty-gritty of page layout.

All About Floats: In web design, page elements with the CSS float property applied to them are just like the images in a print layout where the text flows around them. Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.

CSS Positioning 101: CSS positioning properties can be used to create standards-compliant, table-free CSS layouts. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Each property serves a specific purpose. Click to read about the benefits of each.

CSS3 Regions: Adobe has been experimenting with some improvements to CSS to express the kind of complex layouts used by traditional magazines. CSS3 Regions is a work-in-progress that facilitates content that flows from one area to another; text displayed in non-rectangular areas; text wrapped around arbitrary shapes; and styling content depending on the area in which it flows.

If you are just beginning with page layout design, I recommend familiarizing yourself with the industry resources named above, as well as experimenting with old and new techniques for comparison. And if you are a web professional, I would greatly appreciate hearing your opinion on these new developments and your predictions for the future of responsive web design- where will we be 10 years from now?

And one last piece of advice, before your settle on a website layout, make sure you can define a few essentials: what is the purpose of the site; who will be visiting the site; and how will the site serve the client. The page layout should first and foremost be an extension of these points.