Cross-Column Pull-Out Part Two: Custom Silhouettes

by Daniel M. Frommelt

38 Reader Comments

Back to the Article
  1. 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.

    Copy & paste the code below to embed this comment.
  2. 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?

    Copy & paste the code below to embed this comment.
  3. 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

    Copy & paste the code below to embed this comment.
  4. 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.

    Copy & paste the code below to embed this comment.
  5. nt

    Copy & paste the code below to embed this comment.
  6. http://www.meyerweb.com/eric/css/edge/slantastic/demo.html

    I’m sorry I had to dig that up.

    Copy & paste the code below to embed this comment.
  7. I don’t know why someone would like to use this technique.

    Copy & paste the code below to embed this comment.
  8. 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.
  9. One more thought (see message title)

    Copy & paste the code below to embed this comment.
  10. 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!

    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. 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!!!!!!!!!!

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. Copy & paste the code below to embed this comment.
  15. Is the effect really worth all this effort???

    Copy & paste the code below to embed this comment.
  16. A lot of work, so long code and so small effect.

    Copy & paste the code below to embed this comment.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. 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 :)

    Copy & paste the code below to embed this comment.
  20. 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.

    Copy & paste the code below to embed this comment.
  21. 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.
  22. 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.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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.

    Copy & paste the code below to embed this comment.
  25. I should proofread my comments. Sorry about the HTML and misspelling the word head. :^(

    Copy & paste the code below to embed this comment.
  26. 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?

    Copy & paste the code below to embed this comment.
  27. 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.
  28. 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.

    Copy & paste the code below to embed this comment.
  29. …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.

    Copy & paste the code below to embed this comment.
  30. 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.

    Copy & paste the code below to embed this comment.
  31. 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.
  32. 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.

    Copy & paste the code below to embed this comment.
  33. 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! ,)

    Copy & paste the code below to embed this comment.
  34. NEver knew you could do that stuff! Awesome article

    Copy & paste the code below to embed this comment.
  35. 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?

    Copy & paste the code below to embed this comment.
  36. 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.

    Copy & paste the code below to embed this comment.
  37. 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.

    Copy & paste the code below to embed this comment.
  38. 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.

    Copy & paste the code below to embed this comment.