Browsers that don't support media-queries, like ie8 and below, simply ignore everything inside inline media-queries. This means they'll use the default five-column layout – which is more than sufficient for desktop usage – and ignore everything else.
the 5-column layout is 768px wide is default fir older browsers. Which means i get to see 768px wide layout even on my netbook which easily supports the usual 960px?
Guess 960px would be fine as a default. I hope this has some kind of custom layout generator like BlueprintCSS which has Blueprinter.
But other than that, this is actually uber-cool.
P.S: Thanks to the site designer for mentioning the names of the typefaces used on the site.
Yep, netbooks get the 768 px layout. I figured fully supporting tablets and 1280 px laptops is more important than using up a couple hundred more pixels on netbooks. Tradeoffs, tradeoffs….
No custom layout generators or bells or whistles, sorry. Kept this intentionally simple. :)
Cool. I agree with Charuru that it will be nice to see how this compares to similar resources.
One issue with the website: I know the tagline is making use of the name, but it sounds uneducated to say "Now with less features, one grid," when "fewer" is the word to use. Maybe it would be better to say something like, "Less complicated, one grid." There are those out there who may dismiss something wonderful on the basis of a small error like this.
Very cool, but I seem to be having issues with it on the iPhone. Your site loaded correctly in portrait on the first load, but when I rotated to landscape there was an additional black bar maybe 100px wide on the right side of the page, allowing horizontal scroll. Once you've rotated to landscape, the page does not resize back to portrait until you close the page and open it again.
Right, for some reason, after rotating to landscape and then rotating back to portrait, you have to zoom in before you can zoom back out. I assume this is due to the meta viewport properties in use:
Without height=device-height, rotating to landscape screws up the zooming completely. With it, your bug happens. The only solution for both problems is setting maximum-scale=1, and that’s no solution at all.
Maybe those are nice fonts, but my browsers are doing a terrible job of rendering them. IE8 has nasty jagged edges on the curves and has clipped the very bottom of the heading font. In Firefox the body text is light and indistinct, escpeially the abbr tags.
I love the idea of this, but I'd have to tweak the execution of the desktop version to make it work on commercial projects. The massive width and low number of columns would only allow for chunky and unsubtle layouts. Fine for a couple of marketing pages but not so great for most polished apps.
The reason 960's 12 column works so well is because 12 is the lowest number divisible by both 2 and 3, so you can have the page divided into halves, quarters, thirds and so on, plus you can double the columns to 24 without losing ratios if you really need to get fine-grained. 8 is a bit less flexible.
Yup, you’re definitely right on all counts there. The idea is the main “product”, so I’m glad people are liking it. Most people will probably end up customizing the column counts and exact layout widths anyway. :)
Personally, I chose 2->5->8 columns due to how well they happen to fit into a 24 px baseline grid, and because they’re parts of the Fibonacci sequence, meaning they’re easy to divide into harmonic layouts. 12 just never looks right, and 16 is far too unrestrictive.
