Introduction:  3-Column Holy Grail Revisited

“A responsive multi-column website layout”

History of CSS Multi-Column Layouts

3col template It is now close to 10 years ago that the so called Holy Grail 3-column design was published and web-developers started to experiment with responsive website design. A few years later (in 2006) the search for the "Holy Grail" 3-column layout came close to an end, the maximum was reached of what was possible with a CSS 2 based multi-column layout. The CSS 2 designs from that time weren't perfect (they were plagued by wrapper madness) but they did their job moderately well until the rise of smartphones and tablets.

Now, one decade later, time has come to recreate an updated "Holy Grail" multi-column layout which is reflecting and utilizing the extended features of CSS 3 and the radically evolved IT landscape which gets increasingly dominated by mobile devices. Since a few years the so called responsive design has become popular and succeeded over concepts like adaptive design and progressive enhancement.

Read more...Author: Harald Engels | Published: 2013-06-08

Part 1:  Layout - 3-Column Holy Grail Revisited

“Equal length columns - an innovative solution for an eternal problem”

Genesis

3col template In the beginning Tim Berners Lee created the web. But the web was empty because there were no commercial web-servers and no web-browsers. Marc Andreesen said: "There shall be a web-browser" and created Mosaic. And the web content had no form (no CSS, no table elements). And Marc Andreesen said: "Let there be structure" and so in 1995 Netscape introduced the table element. And web-developers used the table tags for multi-column layouts which were fluid and had the same length of all columns.

Web-developers used dirty tricks like stretched one pixel width images to force table columns to a specific size but web-designs were visually rich and creative and web-designers thought that everything was good. Then a few people saw that using tables for layout was not the right method and so they came up with CSS 2 based multi-column layouts for ending the abuse of semantic elements (HTML tables) for presentational purposes (layouts).

So web-developers started to create many different CSS 2 based multi-column layout techniques which are semantically seen better but were all suffering from several CSS 2 limitations, so e. g. no support for equal length columns.

Read more...Author: Harald Engels | Published: 2013-06-18

Part 2:  AdaptiPic - 3-Column Holy Grail Revisited

“Adaptive images - the foundation for true mobile support”

Requirements for a True Responsive Layout

Adaptive image The LiteSite multi-column layout which we developed in part 1 of this article series solves most problems for developers of classic desktop websites. Especially the equal length column issue which has plagued a whole generation of CSS 2 web-developers is now resolved for modern browsers in a semantically much cleaner way (only one column wrapper needed). So the next question is what is with mobile devices?

Before I am going to extend the Holy Grail Revisited layout with media queries for defining layout breakpoints to cover mobile devices I want to take a look to the role of images in responsive design. One major criticism about responsive design is the data bloat. For most web-developers it is difficult to understand why a website which is loaded by a device with an 800 x 640 pixel display has factually nearly the same data volume than a site which is loaded to an HDTV screen with 1920 x 1080 pixels. I share this concern especially while knowing that many responsive designs are very "heavy" due to the accumulation of bloated libraries (e. g. Bloatstrap) and additional JavaScripts. Therefore I am presenting here a practicable solution for reducing the image sizes in a responsive layout which creates no CSS or JavaScript bloat and delivers results in a 100% predictable manner on all surfing devices with CSS 3 support.

Read more...Author: Harald Engels | Published: 2013-07-08

Part 4:  FlexiGrid - 3-Column Holy Grail Revisited

“A truly flexible grid for responsive designs”

Responsive grid This "Holy Grail Revisited" project is focused to demonstrate that CSS column based layouts are not "out". Factually it is the opposite although some contemporary trends may paint a different picture. By making a column based layout responsive web-developers can realize robust, fast and easy to maintain responsive websites. But there are situations where CSS grids have clear advantages over a column based layout. But at the same time CSS grids have the tendency to bloat the HTML source code and aren't the easiest thing to maintain and usually difficult to customize. For adding an easy to setup, customize and maintain to the Holy Grail revisited project I have developed FlexiGrid. Nomen est omen! FlexiGrid is a CSS grid which represents a breakthrough regarding several common limitations of using CSS grids.

Read more...Author: Harald Engels | Published: 2013-07-23