I have to applaud your solution to approximate a print-based cross-column layout in validating CSS and (X)HTML, but if we’re going to be adding all of those extra spans, counting pixels, and fussing over the layout I don’t see how this is easier or faster to implement than the old days of creating a table-in-table column layout and slicing up the image.
While it is a great technique I have to agree with Jough on this one. I thought the whole point of standards/semantics was that we were moving away from the tag soup and trying to use the minimal mark-up necessary?
To echo the statement of the others, the technique is interesting. I’d auggest though, that the spans, that offset the image, shuold realy be done via Javascript, it’s perfect for this kind of job.
I haven’t read all the comments in the ‘Part One’ discussion, but I’m sure someone would have touched on the readibility aspect of this approach. It’s annoying on my eyes to have to read across different line lengths, so I don’t find much worth in sacrificing readibility to embed a picture which could be placed anywhere really.
BUT having said that, there are definately cases in which this technique could be useful and if used in moderation along with a neat design. Thanks for your efforts.
I don’t care if it requires as much markup as a table solution or if it’s a bit of tag soup, or if it could be better handled with JavaScript, or if the surrounding text is difficult to read.
I think it’s a creative bit of work… practical or no (time will tell). Thanks for your efforts Daniel 8 )
Copy & paste the code below to embed this comment.
Ryan
What happened to ALA!!! No offense to the author, because I do respect the amount of effort it takes to impliment something like this, but that’s just my point. What happened to elegance? As of late there have just been a lot of overly complicated techniques or even worse; javascript hacks!
I don’t know what it takes to become a contributor to ALA, but I’ve consistently found that people’s replies in the forums are either more useful than the articles, debunk what the article was proving, or provide far better solutions! Yee gads!
Stefan:
Yes, we got the slant idea from slantastic, although we implimented it in a different way.
To Everyone else:
We here at the Web Department strive to push the envelope, and want people to understand that we took on this project because people said that it couldn’t be done. Use it where you want, when you want, or don’t.
Yes, we understand that the web is not print. This does not mean that the technique should be immediately pushed aside, however. Whether or not it has any practicle implications has yet to be seen, perhaps someone somewhere will find a use. Ultimately we furthered our knowledge in CSS and it’s capabilities, and we hope that it furthered yours as well.
Dude! Why the exclamation points!!! Did you read Joe Clark’s article in this issue!!! Or would you rather whine about Cross Column II!!!!! Cross Column I bore a disclaimer acknowledging that it was not for everybody!!! Did you read that!!!! If not why not!!! How many exclamation points can you put into a single message!!! What does it take to become a contributor to ALA you ask!!! Why don’t you read ALA’s Contribute page and find out!!!! Stop shouting, you’ll hurt your throat!!!!!!!!!!
I didn’t object the first article, because it’s effect was pretty nice and it was a fresh idea, but the second article, that makes this hack even dirtier, should not be published.
This is unreliable hack, and we’ve all seen CSS/Edge slantastic, anyway.
I do hope this doesn’t get “out into the wild” and become a new screen design technique for sites, sure it’d be nice for print style sheets, but definately not for screen reading.
If it does then I hope designers read the other current ALA article on alternative style sheets and provide two versions of the site so users arn’t forced to scroll down, up and down to read an article.
In one article we talk about accessibility for low-vision people and here we go with two columns :) And the other time we say how web is different from print.
I’m not sure if I will ever use this technique, but I’m not criticizing it—it is always interesting to see what is possible and how in web design :)
It is a nice twist on Slantastic. It probably should not be used “as-is” considering the obvious usability issues, but it’ll eventually trigger a good idea for someone someday.
I also agree with Michael Efford that this technique, if taken literally, should be reserved for print. Still, it’s really a lot of work for something that wouldn’t necessarily be noticed by many (outside the web design world anyway). Not sure my clients would like to pay for that.
Copy & paste the code below to embed this comment.
gc
While, I may never use this particular effect, I am very happy to learn more about CSS and its capabilities. That someone would spend a time attempting this and then exploring an improvement is exactly what ALA is about (to me). Just because YOU may not see a use or think it is inappropriate doesn’t mean that other don’t or can’t learn from it.
The negative comments in this discussion remind me of all the flack that the Pop-Up article got from people who have never developed a web application. I’d hate to think what would happen if someone decided to seriously explore frames (which I am doing for my web apps).
Progress is made by those who ignore “conventional wisdom” and push pass the small minded. Back to the dark ages with you nay-sayers! The web is for more than just browsing pretty brochures or reading blogs.
Thank you Daniel for opening the door a little wider.
Copy & paste the code below to embed this comment.
Derek Pennycuff
But how many of our clients understand this simple concept? And how many of us really have complete creative control over the work we do? If I ever run into a client who comes from a print background (which seems to be damn near all of them in my experience) and they’ve just got to put an image in two columns of text ‘cos they used to always do it that way in the newspaper of magazine or whatever, and this article lets me meet those rather silly demands without having to resort to a tables based layout, I’ll be thankful for these two articles. Could I have read the first one and then applied Erid’s slantastic to it myself? Sure, but reading this article is a hell of a lot less work for me.
I can also see this technique forming the basis of an argument to move away from publishing stuff online in PDF format. Am I the only one who has heard something about how we’ve got to use PDFs in order to preserve the fidelity between the printed content and the online content? Maybe I’ve just been unlucky and worked with a lot more thick headed print centric idiots who also happen to sign my paychecks.
I can see applications for this, if handled with care. My biggest worry would be users resizing their text and suddenly getting giant gaps in the line-spacing. I suppose that could be handled by making <gasp!> more spans equal to half the line-spacing.
As for ALA readers complaining about not wanting to read two huge columns, perhaps it’s best that we not think of this technique solely for a news site. How about as a homepage design with two wide, but not too tall columns under a large splash image? (sorry, I’m designing in my ehad) Many companies have a similar treatment and with a nice graphic (or quote) breaking the columns up, it could look rather elegant, especially with generous line spacing.
hi, very interesting technique. I have had several students wanting to acheive this…
I tested robustness when resizing the text (in Safari). I didn’t expect miracles, but it was okay. What techniques do other people use to ensure design integrity and accessibility?
My opinion tends to agree with a few other posts I’ve read. It’s interesting to learn something new about CSS but as of right now I don’t see a practical application for myself, especially with the browser incompatibility.
And to reply to the above post about what techniques people use to ensure design integrity and accessibility. I try and check out all of my projects on as many browsers and operating systems as I can get my hands on to make sure it doesn’t break down too much. As I am just beginning to become more active on the subject usability I’ll have to leave that one to someone else.
Copy & paste the code below to embed this comment.
Whuggy
This is too much. The benefit of the technique is way less than the effort involved. I guess a PDF document is more approprite if this kind of layout is required.
I work in advertising, and they always have me break things up like this, the layouts are just like print. There’s nothing you can do about it. So a technique that lets you do table-layout things but ISN’T a table layout is GREAT! Thanks ALA.
Whilst I agree that any furthering of the/our understanding of the capabilities of CSS is a Good Thing ™, I also tend to agree that, on average, the quality of articles on ALA has gone down significantly.
To put it another way, before (whenever that was), ALA articles generally had the base intention of helping a great many of the readers do something they’d been wanting to do for improving the websites they create for the users. Now (whenever that begain), ALA articles seem to have the base intention of publicizing hacks and kludges to the tune of pleasing the occasional off-kilter client.
Unfortunately, the only way to draw the line between the two is with “feeling” (the same way one person might judge something as “art,” and another might not). I can’t think of the right words for the situation, but it almost seems as if the distinction between techniques (which implies an element of craft) and tricks (which implies something of a more devious, short-sighted nature).
Perhaps the best way of saying it is that it feels as though we’ve reached the summit of the mountain, and are now, unfortunately, rolling back down the other side. We’ve pushed CSS/XHTML to its limit, and are now trying to estabilish new tricks that won’t help the user, but will only further our own egos (or those of our clients). We’re headed back toward tag soup—toward something we’d never want our clients to even touch, lest they “break” something, and that’s just foolish.
Copy & paste the code below to embed this comment.
Tristan
If the example image had been something else than that diamond-shaped monkey on a dromedary; if the coloured squares had been more discrete, and if there had been less aliasing over them, then my primary reaction would have been less painful..
Although I acknowledge the amount of work to achieve them, the existing examples make those markup/css tricks quite hard to swallow..
Copy & paste the code below to embed this comment.
Graham
Whilst I too could not see myself using the technique I think the article is interesting and can stimulate thought in our minds so thanks for publishing it.
ALA for me acts like an online (although not real time) brainstorm session – and that’s valuable. It’s up to each individual to take or leave the techniques that are presented. And the comments you get often point the way to other and/or better refinements.
Are you disappointed still to get some negative comments despite the appearance of your new aquatic car logo?
I just happened to see this on slashdot, and I think that the column thing really works in that context. They could possibly put a technique like this to work.
Those who say this technique is a bit too messy have a point. But then again, articles like this can be an inspiration to other developers, even if it only proves that it is not worth bothering with – isn’t that part of what ALA is all about?
Also, do I detect a bit of an anti-print design bias in the comments? The web is about distributing information, it is not just media for computer monitors. Some of it, believe it or not, is printed on paper and read.
I think there’s a place for techniques to achieve print-style layouts.
38 Reader Comments
Back to the ArticleJough
Daniel,
I have to applaud your solution to approximate a print-based cross-column layout in validating CSS and (X)HTML, but if we’re going to be adding all of those extra spans, counting pixels, and fussing over the layout I don’t see how this is easier or faster to implement than the old days of creating a table-in-table column layout and slicing up the image.
Andyk
While it is a great technique I have to agree with Jough on this one. I thought the whole point of standards/semantics was that we were moving away from the tag soup and trying to use the minimal mark-up necessary?
Kevin Cannon
Yo!
To echo the statement of the others, the technique is interesting. I’d auggest though, that the spans, that offset the image, shuold realy be done via Javascript, it’s perfect for this kind of job.
- Kevin
coda
I haven’t read all the comments in the ‘Part One’ discussion, but I’m sure someone would have touched on the readibility aspect of this approach. It’s annoying on my eyes to have to read across different line lengths, so I don’t find much worth in sacrificing readibility to embed a picture which could be placed anywhere really.
BUT having said that, there are definately cases in which this technique could be useful and if used in moderation along with a neat design. Thanks for your efforts.
Greg
nt
Stefan
http://www.meyerweb.com/eric/css/edge/slantastic/demo.html
I’m sorry I had to dig that up.
Edgard Durand
I don’t know why someone would like to use this technique.
Ray
I don’t care if it requires as much markup as a table solution or if it’s a bit of tag soup, or if it could be better handled with JavaScript, or if the surrounding text is difficult to read.
I think it’s a creative bit of work… practical or no (time will tell). Thanks for your efforts Daniel 8 )
Ray
One more thought (see message title)
Ryan
What happened to ALA!!! No offense to the author, because I do respect the amount of effort it takes to impliment something like this, but that’s just my point. What happened to elegance? As of late there have just been a lot of overly complicated techniques or even worse; javascript hacks!
I don’t know what it takes to become a contributor to ALA, but I’ve consistently found that people’s replies in the forums are either more useful than the articles, debunk what the article was proving, or provide far better solutions! Yee gads!
Matt Latzke
Stefan:
Yes, we got the slant idea from slantastic, although we implimented it in a different way.
To Everyone else:
We here at the Web Department strive to push the envelope, and want people to understand that we took on this project because people said that it couldn’t be done. Use it where you want, when you want, or don’t.
Yes, we understand that the web is not print. This does not mean that the technique should be immediately pushed aside, however. Whether or not it has any practicle implications has yet to be seen, perhaps someone somewhere will find a use. Ultimately we furthered our knowledge in CSS and it’s capabilities, and we hope that it furthered yours as well.
apartness
Ryan:
Dude! Why the exclamation points!!! Did you read Joe Clark’s article in this issue!!! Or would you rather whine about Cross Column II!!!!! Cross Column I bore a disclaimer acknowledging that it was not for everybody!!! Did you read that!!!! If not why not!!! How many exclamation points can you put into a single message!!! What does it take to become a contributor to ALA you ask!!! Why don’t you read ALA’s Contribute page and find out!!!! Stop shouting, you’ll hurt your throat!!!!!!!!!!
Carlos Bernal
I have no use for the technique yet.
But like Image Replacement began as a ‘hack’, these exercises will be further pushed for more practicle uses.
The creative process begins with often weird ideas then get refined.
Nothing’s wrong when ALA or others think out-loud.
Seth Thomas Rasmussen
…
Alpha
Is the effect really worth all this effort???
arc
A lot of work, so long code and so small effect.
porneL
I didn’t object the first article, because it’s effect was pretty nice and it was a fresh idea, but the second article, that makes this hack even dirtier, should not be published.
This is unreliable hack, and we’ve all seen CSS/Edge slantastic, anyway.
Michael Efford
I do hope this doesn’t get “out into the wild” and become a new screen design technique for sites, sure it’d be nice for print style sheets, but definately not for screen reading.
If it does then I hope designers read the other current ALA article on alternative style sheets and provide two versions of the site so users arn’t forced to scroll down, up and down to read an article.
Mindaugas
In one article we talk about accessibility for low-vision people and here we go with two columns :) And the other time we say how web is different from print.
I’m not sure if I will ever use this technique, but I’m not criticizing it—it is always interesting to see what is possible and how in web design :)
Ray
The first person to shove a stick through a round disk and call it a wheel was probably met with nay-sayers as well Daniel.
Again, I applaud your efforts.
Hugo tremblay
It is a nice twist on Slantastic. It probably should not be used “as-is” considering the obvious usability issues, but it’ll eventually trigger a good idea for someone someday.
I also agree with Michael Efford that this technique, if taken literally, should be reserved for print. Still, it’s really a lot of work for something that wouldn’t necessarily be noticed by many (outside the web design world anyway). Not sure my clients would like to pay for that.
gc
While, I may never use this particular effect, I am very happy to learn more about CSS and its capabilities. That someone would spend a time attempting this and then exploring an improvement is exactly what ALA is about (to me). Just because YOU may not see a use or think it is inappropriate doesn’t mean that other don’t or can’t learn from it.
The negative comments in this discussion remind me of all the flack that the Pop-Up article got from people who have never developed a web application. I’d hate to think what would happen if someone decided to seriously explore frames (which I am doing for my web apps).
Progress is made by those who ignore “conventional wisdom” and push pass the small minded. Back to the dark ages with you nay-sayers! The web is for more than just browsing pretty brochures or reading blogs.
Thank you Daniel for opening the door a little wider.
Derek Pennycuff
But how many of our clients understand this simple concept? And how many of us really have complete creative control over the work we do? If I ever run into a client who comes from a print background (which seems to be damn near all of them in my experience) and they’ve just got to put an image in two columns of text ‘cos they used to always do it that way in the newspaper of magazine or whatever, and this article lets me meet those rather silly demands without having to resort to a tables based layout, I’ll be thankful for these two articles. Could I have read the first one and then applied Erid’s slantastic to it myself? Sure, but reading this article is a hell of a lot less work for me.
I can also see this technique forming the basis of an argument to move away from publishing stuff online in PDF format. Am I the only one who has heard something about how we’ve got to use PDFs in order to preserve the fidelity between the printed content and the online content? Maybe I’ve just been unlucky and worked with a lot more thick headed print centric idiots who also happen to sign my paychecks.
Davezilla
I can see applications for this, if handled with care. My biggest worry would be users resizing their text and suddenly getting giant gaps in the line-spacing. I suppose that could be handled by making <gasp!> more spans equal to half the line-spacing.
As for ALA readers complaining about not wanting to read two huge columns, perhaps it’s best that we not think of this technique solely for a news site. How about as a homepage design with two wide, but not too tall columns under a large splash image? (sorry, I’m designing in my ehad) Many companies have a similar treatment and with a nice graphic (or quote) breaking the columns up, it could look rather elegant, especially with generous line spacing.
Davezilla
I should proofread my comments. Sorry about the HTML and misspelling the word head. :^(
Ian
hi, very interesting technique. I have had several students wanting to acheive this…
I tested robustness when resizing the text (in Safari). I didn’t expect miracles, but it was okay. What techniques do other people use to ensure design integrity and accessibility?
Nick
My opinion tends to agree with a few other posts I’ve read. It’s interesting to learn something new about CSS but as of right now I don’t see a practical application for myself, especially with the browser incompatibility.
And to reply to the above post about what techniques people use to ensure design integrity and accessibility. I try and check out all of my projects on as many browsers and operating systems as I can get my hands on to make sure it doesn’t break down too much. As I am just beginning to become more active on the subject usability I’ll have to leave that one to someone else.
Whuggy
This is too much. The benefit of the technique is way less than the effort involved. I guess a PDF document is more approprite if this kind of layout is required.
Dante
…So browsers that don’t support the CSS won’t have to bother downloading the extra markup. Just create the extra elements with the DOM Onload.
dp
I work in advertising, and they always have me break things up like this, the layouts are just like print. There’s nothing you can do about it. So a technique that lets you do table-layout things but ISN’T a table layout is GREAT! Thanks ALA.
Bacon
Whilst I agree that any furthering of the/our understanding of the capabilities of CSS is a Good Thing ™, I also tend to agree that, on average, the quality of articles on ALA has gone down significantly.
To put it another way, before (whenever that was), ALA articles generally had the base intention of helping a great many of the readers do something they’d been wanting to do for improving the websites they create for the users. Now (whenever that begain), ALA articles seem to have the base intention of publicizing hacks and kludges to the tune of pleasing the occasional off-kilter client.
Unfortunately, the only way to draw the line between the two is with “feeling” (the same way one person might judge something as “art,” and another might not). I can’t think of the right words for the situation, but it almost seems as if the distinction between techniques (which implies an element of craft) and tricks (which implies something of a more devious, short-sighted nature).
Perhaps the best way of saying it is that it feels as though we’ve reached the summit of the mountain, and are now, unfortunately, rolling back down the other side. We’ve pushed CSS/XHTML to its limit, and are now trying to estabilish new tricks that won’t help the user, but will only further our own egos (or those of our clients). We’re headed back toward tag soup—toward something we’d never want our clients to even touch, lest they “break” something, and that’s just foolish.
Tee Bore
IMHO There is no problem with the quality of the article, which is fine. Sometimes you have to do funny things as per client request.
It is true though, the article is addressing something that is in no way a practical issue.
Tristan
If the example image had been something else than that diamond-shaped monkey on a dromedary; if the coloured squares had been more discrete, and if there had been less aliasing over them, then my primary reaction would have been less painful..
Although I acknowledge the amount of work to achieve them, the existing examples make those markup/css tricks quite hard to swallow..
And, yes, it looks like a joke! ,)
Ash Haque
NEver knew you could do that stuff! Awesome article
Graham
Whilst I too could not see myself using the technique I think the article is interesting and can stimulate thought in our minds so thanks for publishing it.
ALA for me acts like an online (although not real time) brainstorm session – and that’s valuable. It’s up to each individual to take or leave the techniques that are presented. And the comments you get often point the way to other and/or better refinements.
Are you disappointed still to get some negative comments despite the appearance of your new aquatic car logo?
Mike Purvis
http://www.iht.com/articles/2005/01/11/business/ibm.html
I just happened to see this on slashdot, and I think that the column thing really works in that context. They could possibly put a technique like this to work.
clint
man what a bunch of zealot crybabies.
ala is as always- putting forth ideas, stretching, enlarging and sometimes breaking barriers that have led to where we are now.
its like some of you forget who runs this mag, and the fact that he just might know a thing or two.
drop your stones, and the last I looked this wasnt the salem witch trials.
fritz the cat
Those who say this technique is a bit too messy have a point. But then again, articles like this can be an inspiration to other developers, even if it only proves that it is not worth bothering with – isn’t that part of what ALA is all about?
Also, do I detect a bit of an anti-print design bias in the comments? The web is about distributing information, it is not just media for computer monitors. Some of it, believe it or not, is printed on paper and read.
I think there’s a place for techniques to achieve print-style layouts.