23
Jun 2010
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
Category: Web Design
You can follow any responses to this entry through the RSS 2.0 feed.
Responses are currently closed, but you can trackback from your own site.
15 Responses
Love this direction… no one probably noticed but I’ve had some column switching [that I always intended to do more with, and then write up, but never did] on placenamehere.com for some time now.
The idea is great, and the outlined techniques are nice. Next big step is really working the technology into the larger scale site design and development and testing processes.
This is great! I’ve been wondering when this kind of thing would start gaining traction. It solves so many problems having to do with multiple devices screen sizes and form factors. I think this is the future of web design. The A List Apart article is just what I was looking for.
@Kevan
Yeah, that site was already mentioned in the article.
But anyway, this is really interesting and it will only be a matter of time until a lot more websites start implementing it.
Hicks just redid his journal section similarly – going from 1 column all the way to a 4 col grid at widest.
Liquid and scaleable is good, however it can become nasty on a high resolution monitor. Wikipedia is a good example of this, I think. I find I always need to resize my window from it’s normally wide setup so that the text doesn’t go on for 5 meters per line. A responsive layout using media queries and liquid styling is where it’s at.
Now, to get a polished look without bugs that degrades gracefully on IE while progressively enhancing on cutting edge browsers? That looks great at 2560×1600, like nothing was wrong at 800×600 and readable with iPhone 4’s 960×640 326 ppi screen? Well, that’s still a lot of work up front and will require patience. However, it will be awesome once its figured out.
But you are right. The cool kids are doing it.
Plastic soul, man, plastic soul!
You meant the 2000s, surely? In the 1990s *all* websites sucked by today’s standards.
Liquidish and scalable since 2007, just before all these new devices came out.
You say the nicest things
The feeling is 100% mutual.
Alright, enough of our bromance. Onward!
All hail Aaron Gustafson, one of the most brilliant people it’s been my pleasure to work with, and the author of an upcoming A Book Apart book on progressive enhancement. (Hush-hush!)
Thanks, Simon and Aaron for providing that backstory. And speaking of synchronicity, adaptive design via media queries is a theme of this year’s An Event Apart. Eric Meyer, Ethan Marcotte, and Andy Clarke all take a whack at it—and, initially, they did so with no knowledge that the others were so doing. Andy takes it the farthest, with totally different layouts for different devices, browser capabilities, and so on.
That, in addition to the story we’ve just learned about Aaron and Simon and the sandbox, reaffirms the notion that responsive design is a concept whose time has come. (Of course the phenomenal sales of iPhone and Android, not to mention the sale of three million iPads in 80 days, would have told us that even if some of our best web designers hadn’t.)
Ooh, you’ve made my day. I’ve loved responsive layouts since 2006.
I must credit Mr. Aaron Gustafson with getting me started with media queries. He contacted me a few months ago, having chosen my site as his sandbox for a forthcoming .net magazine article about responsive layouts. Aaron chose my site because the grid is so obvious, and he felt that it was ripe for some 4/2/1 column action. A few weeks later he sent me a new stylesheet, with the basic media queries set up. All I had to do was tweak and adapt the rules, and set up my content pages.
That said, Ethan’s incredible article really resonated in my brian, and yesterday Mr Hicks gave me a further kick with his sublime retooling. Thus, I stayed up late to get this implemented.
Bit buggy in places, but I’ll get there. I’m still testing it!
I have been frantically trying to get my client work done so I have time to redesign my own sites using Mr. Marcottes’s techniques.
Re: George/Liquid Design- media queries allow a lot more control over what is seen on different devices- for example, Simon Collison’s site never shows 3 columns wide, only 4 or 2, more aesthetically pleasing and fits with his defined grid, rather than a free-for-all, which sometimes happens with liquid design.
Also, have you ever seen a liquid layout allow you to remove superfluous images (ie Simon Collison’s iPhone view). Media queries FTW methinks.
Certainly responsive design has jumped to the forefront of designers minds following the article on A List Apart which is great. I for one am planning a redesign based around media queries and am including it in all new designs from now on.
As for great responsive designs, the Dconstruct site is a great example of what can be done. Well done Clearleft!
Actually, I used Simon’s website as the guinea pig for an article I wrote for .net Magazine while Ethan was writing his. The articles comes out in next month’s issue & I gave the code to Colly to use and expound upon
That, of course, by no means reduces the importance of Ethan’s piece and how awesome it is that he’ll be writing for A Book Apart.
The majority of the Russian web sites are with liquid design. And that’s since the end of the 90’s (trend started by artlebedev.com). Media queries are nice but the ways to do liquid design were here long before. The willingness of designers to use them wasn’t.