NOTE: After extensive public testing, it has been found that the hunt for the Holy Grail of Web Page Layouts Without Hacks is still on. The layout described below from A List Part fell apart in the latest version of Internet Explorer. It suffered a bit with a few other browsers, too. This is another good excuse to switch to Firefox. The best replacement layouts I’ve found continue to be from Positioniseverything, the leading experts on CSS, web page design, and overcoming browser bugs.
I think I might faint. In fact, just thinking about this, let alone writing about it, has had me in a swoon for several days, it is that exciting.
A List Apart has found the Holy Grail of web page layout. Without hacks. I’m going to swoon again!
Okay, I’m back. For years I battled with creating a simplistic and hack free web page layout. I’ve done a lot of research over the years in search of the perfect layout, eventually developing my own one-hack web page layout.
Every six to ten months, I’d hear about another hackless perfect web page layout and go worship at their feet, only to find a hack involved to make the web page structure work consistently across all browsers. My one-hack innovative layout continued to hold true, even when I switched to WordPress. It was easy to incorporate the WordPress PHP codes and structure into a new version of my website, which you can see in my post on Innovative and Simple Web Page Structure – Just Change the CSS.
Still, the dream of a hackless web page layout kept me hunting, lifting up rocks and peering underneath.
WARNING: SOAP BOX ALERT: Yes, I’m about to get on my famous ranting soap box raging at lazy and uninspired web page designers. I’m totally and completely disgusted with the wasted real estate found in most WordPress Themes and web pages today, even the one I’m currently using, though I adore it for other reasons.
In order to overcome many problems with hacks in web page design due to incompatible or insufficient browsers, many designers force a web page into the middle of the page, with empty space to the left and right of the graphic content. If you are using an older low resolution monitor, the forced layout is often forced right off the width of your monitor so you have to scroll horizontally to read the posts. If you are using one of the new wide screen monitors, the web page represents a very narrow width on your screen, with wasted space all around. Yuk, yuk, yuk. Why can’t designers use the whole screen with flexible, elastic columns? That’s what our main site uses. Let web pages stretch and flow with their designs and not be strangled into place.
This is the way of the web design world.
A List Apart has always been at the forefront of innovative thinking when it comes to web page design, layout, and design elements. Many of the writers are the true brilliant brains behind web page standards and accessibility standards, not to mention the fact that many are also award winning web page designers and developers. But mostly, these are the people unafraid to get their hands dirty and who boldly go where few dare to glimpse.
A List Apart’s Holy Grail by Matthew Levine is a work of art. It’s so simple, and yet sophisticated. It is totally elastic, stretching with the browser’s window, unrestricted. It is amazing, and oh, oh, I’m going to swoon again.
Okay, I also need to be fair. There is one small hack in the Holy Grail layout. it isn’t until you begin to add padding to the columns that Internet Explorer chokes. Web page designers have known this about Internet Explorer for years. They have their own set of rules when it comes to margins and padding, but this hack isn’t a “serious hack” which also has to be undone for other browsers. Only IE sees the hack, and the rest of the browsers ignore it. Still, for the sake of truthfulness, there is still a tiny hack. Soon, oh, faithful and patient ones. Soon, a totally hackless design will be out. But for now, this is the miracle layout.
I’ve been thinking of a way to add ads to my main site without destroying the overall layout and design, and this might be the answer. Either way, I will be working on implementing his recommendations very soon.
And if you are a web page designer, bookmark that article, print it out, and frame it on the wall. This is a legendary moment when web page design broke the hack mold. The web is a better place for it, too. Thanks, Matthew Levine! You are a star.
- Boycott Ugly Table Designed Blogs and Websites
- Finding Your CSS Styles in WordPress
- CSS and Web Page Design List of Resources
- Robin’s Blog – Blogging Tips to Help You Learn about Web Page Design and Development
- Do-It-Yourself Search Engine Optimization
- WordPress Theme Designers – Slapping You Upside the Head
- Innovative and Simple Web Page Structure – Just Change the CSS
- Fixing Browser Bugs and Hacks
- A Good CSS Tips, Tutorials, and Tricks Resource
- CSS – Studying Your CSS Styles
- In Search of the Perfect Layout
- CSS Maintainability – Serious Style Sheets
- WordPress Tips and Tricks for Style Sheets
- The Secret of Successful Editing of WordPress Themes
- Choosing a WordPress Theme
- Attention WordPress Theme Designers Designing Themes for WordPress.com and WordPressMU
Site Search Tags: web, page, design, layout, structure, architecture, browser, hack, hacks, web+standards, browser+hacks, perfect+layout, holy+grail, wordpress, wordpress+themes, css
Copyright Lorelle VanFossen