A LIST Apart: For People Who Make Websites

No. 229

Discuss: Switchy McLayout: An Adaptive Layout Technique

Pages

 <  1 2 3 4 5 >  Last »

21

Our technical editing team has spotted a glitch in the “news” demo that prevented the intended graceful JavaScriptless degradation to liquid layout (which already worked in the “tabbed” demo). We’ve unborked the demo, which should now behave appropriately.

We’re not seeing the FF 2 / Win bug that someone mentioned earlier…unlike the core style-switching technique itself, the demo layouts are just proofs of concept and not recommended for use in production, but if a CSS display bug does crop up for anyone, feel free to e-mail me details (erin at happy cog dot com) and we’ll take a look. Thanks!

posted at 12:15 am on December 20, 2006 by Erin Kissane

22 A pragmatic solution for a growing problem

I like the pragmatic approach of this solution. I think 7 form of a layout is far too confusing for real world application, since resizing browser windows on a big screen results in a changed layout. For a demo this is of course perfect to illustrate a point.

However, for small screens this technique is promising… but most small screens I have tested on (PDA and several phones) have a very lousy support of javascript and CSS.

Most phones will handle the ‘default’ css instead, the liquid layout, or if available a handheld stylesheet. Which will leave us with two baic sheets: a standard liquid and an adapted big screen layout (maybe two for some designs: a 1024 max and a wider one). But most of that could be achieved using a max width CSS2 propertie for really big screens.

In the end I’m afraid that the real world application of this is rather limited (or gimmicky) due to bad browser support on small screen device. For large screens, I’m not so sure I would like to confront a user with a totally different layout depending on the screen size, to avoid brand confusion. Of course there are cases when this could apply (online newspapers, BBC News) to use as much screen estate as possible and still keep it readable, but still I would test this out on a target audience before I would apply different layouts.

The question then would be what the return on investment would be on the added maintenance costs of a couple of stylesheets and I wonder how many websites would actually benefit form this business wise.

posted at 12:32 am on December 20, 2006 by Martijn ten Napel

23 I think it's perfect

In the current stage of web development, it’s a great solution. I’ve checked both (fixed) layouts in all my MAC/PC browsers and it seems to work awesome. I’ve been developing a site using the Particletree approach by Kevin Hale, but this seems to load better in IE/PC.

I wonder if all the criticism is due to the styles used? Looking at the execution alone you can customize each stage to your heart’s content. Why complain about all the stylesheets? Just keep them simple if you don’t want to use them.

No javascript? Fine…just degrade to a default stylesheet. Folks without JS are used to MUCH worse!

Check my site in the new year and you’ll see one of these implementations used. Thanks Marc and ALA.

posted at 01:42 am on December 20, 2006 by Paul Reid

24 oops

Wow ALA. You don’t accept html entities in comments?

… should be …

posted at 01:44 am on December 20, 2006 by Paul Reid

25 How about a flexible Layout ??

I find the approach of liquid layout very interesting to read and discuss!
But I just don’t see a practible use in developing a side that way. Too time consuming.
How about just using a min and max width in CSS and everything inside degrades gracefully to any Screen Size without any JavaScript.
A flexible Layout looks good on Grandma’s 15” Screen PC, or a Yuppies 22” Monitor and it looks also acceptable on a 30” Developers Monitor.
Aren’t most books we read, a certain size. It is cumbersome to read a 30” long line of text.

posted at 03:47 am on December 20, 2006 by anton neureiter

26 Thanks for the Explanation, Erin

Heh, I guess the heading says it all. Thanks Erin.

posted at 06:06 am on December 20, 2006 by Mike Cherim

27

Wow ALA. You don’t accept html entities in comments?

I know, I know, it’s very silly. We are covered in shame! But you can expect UI updates in our comments (among other places) in the near future, and I’ve fixed your ellipsis as a short-term atonement.

posted at 11:24 am on December 20, 2006 by Erin Kissane

28 Interesting concept

I think it’s a great concept and some nice demos. It’d be nice to see how other people apply it. I’d like to try it out, but, sadly, in its present state, it’s cost-prohibitive to design more than one layout per site, although when I put together a new layout for my site, I think I’ll give it a whirl.

posted at 10:35 am on December 21, 2006 by Zach Shepherd

29

I really like the concept. I also like the number of colorful pictures used to illustrate the point ;)

It might not work for every situation but I think it would definitely be a ‘cool’ feature to implement on the right kind of site.

Incidentally I just tried the demo page on Opera Mini and it returned 800px on every device I tried it on, I guess it’s the way the proxy deals with the pages when it’s compressing them…

Thanks for a good read.

posted at 07:03 pm on December 21, 2006 by Rob Swan

30 Perhaps ALA Could Swing It?

Does it seem like ALA might be an appropriate place to implement something like this?

posted at 09:38 pm on December 21, 2006 by Nate Vaughn

Pages

 <  1 2 3 4 5 >  Last »

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)