About

What is it?

Perfect Layout is a functional template. Rather than showing you how your new website can look, Perfect Layout shows you how your website can work. It's up to you to make the design visually appealing.

Why was it made?

As an amateur website designer, I realized a few months ago that I was reinventing the wheel every time I created a new website. All my sites shared a few basic requirements and had begun to be structurally similar even though I was building each one from scratch. I ran into the same kinds of problems over and over again. I realized that if I could make a design backend, a functional template, I could focus almost entirely on the visual design and content of each new website. Now, Perfect Layout has reached version 1.0 and my months of hard work are available for everyone to use.

Why the name?

Other than the fact that I like the word "perfect" the idea is that this functional template is as perfect as I can do right now, and it perfectly fits my need for a design basis. It's a perfect starting point for website designs. With your suggestions and comments, it can become more and more perfect.

Design Goals

Above all it should make the creation of unique, functional website designs as quick and easy as possible. The other goals are below, in order of importance.

  1. Be "unbreakable" no matter how large or small the window or font size.
  2. Look and work as identically as possible on all current major browsers.
  3. Consist entirely of XHTML and CSS for the design with very strict validation requirements.
  4. Use a minimal amount of hacks and browser specific code, favoring a simple fix to a complex hack.
  5. Provide robust dropdown menu functionality that can easily be turned on or off.
  6. Provide simple default stying for common XHTML elements.
  7. Provide general structural features like columns, image galleries, and forms.
  8. Provide basic printing and handheld browser stylesheets.

Meeting Those Design Goals

All of these things have been accomplished as of version 1.0 with a handfull of exceptions.

  1. Perfect Layout is "unbreakable" in all the tests I've done, with the one exception that IE 6 won't limit the maximum width of a page.
  2. Perfect Layout was tested to work consistantly across Safari, Firefox, Opera, Internet Explorer 6, and Internet Explorer 7 except for some known issues with IE 6.
  3. Every page in this site and the css files have all been validated, with the exception of a couple hacks in the Internet Explorer hack css files. Javascript is only required when using dropdowns in IE 6.
  4. Throughout Perfect Layout's design, I've done things like use padding instead of margins where possible because paddings are handled more consistently across browsers. The only hacks used in the layout are within the two Internet Explorer hack css files.
  5. Dropdown menus can be turned on and off simply by implementing or hiding a single stylesheet.
  6. Simple default stying for common XHTML elements are provided throught Perfect Layout.
  7. General structural features were added inside the constructors.css file.
  8. Perfect Layout contains a basic printing and handheld browser stylesheet.

There is far more to Perfect Layout that what's listed above, however. Most things you will be concerned about can be found in the functionality pages and demos, where I attempt to explain all of the features. Unfortunately, even that enormous list doesn't cover everything. Perfect Layout is coded in such a way that it avoids many common problems transparently.

Does it work?

Absolutely! The months of hard work have already paid off, as you can see in my example pages. With Perfect Layout, I can turn an idea into a new website design in 2 or 3 hours, rather than 2 or 3 days.

How much?

Many of the techniques used in Perfect Layout and all of the knowledge I used to create it were provided to me for free by many hundreds of professional and amateur website designers through tutorials and demos all over the internet. I decided early on to release Perfect Layout for free as a way of "giving back" to everyone who has taught me. Anyone can use Perfect Layout for whatever they want, with the exception of repackaging it. I have more specifics how it can be used on the legal page.