A LIST Apart: For People Who Make Websites

No. 190

Discuss: Cross-Column Pull-Outs

Pages

 <  1 2 3 4 >  Last »

11 Minor quibble

Thanks for sharing – interesting final results, although somewhat tedious (character counting, especially) to get to.

My minor quibble is with using the del tag, which is to indicate deleted text. Wouldn’t ins (for inserted text) be more appropriate and just a smidge closer to semantically correct?

posted at 02:59 pm on December 21, 2004 by Joe Lowery

12 <p /> is not an inline element...

Though <span > is still the right choice in that scenario.

posted at 03:05 pm on December 21, 2004 by Seth Thomas Rasmussen

13 Nice.. but why...

While I admit that you have successfully copied a print layout, the first question that jumped into my head was “why?”.

The web is not print. And as soon as we (as programmers/designers) stop pandering to the needs of legacy “print” media ideas, the sooner they might realise that web pages don’t need to be pixel perfect facsimilies of the print equivalent.

This thinking, (pixel perfect design in every browser) is what helped spawn awful table based layouts.

It is our job to educate our customers. Not to spend hours creating convoluted markup and hacks to make it look like a print magazine.

hmmm sorry.. on reading that, I got to ranting. I’ll just go and scowl in the corner some more.

posted at 03:55 pm on December 21, 2004 by Steve

14 re: Already Done

Hi, Apartness,
Freeway does use CSS for the text flowing trick. The text is in a CSS positioned DIV, with CSS controlled shims (or transparent GIFs) to create the offset. The gifs are placed in the text flow using float:left or float:right – this was an idea inspired by the Curveliscious demo that I found last year.

As well as procude rectangle holes in HTML text for images to look through, my Action allows more irregular shapes to achieve a similar effect.

The rest of the pages are laid using a table, which is Freeway’s default. The point of the demo pages was to demo the Action, rather than build a 100% CSS page.

posted at 03:58 pm on December 21, 2004 by Paul

15 Reason why.. (maybe)

Steve,
A few good outcomes of this:

-News sites such as New York Times, Milwaukee State Journal, etc. now can achieve the same layout as their newspaper with valid web standards

-New possibilities for designers.

posted at 04:03 pm on December 21, 2004 by Ali Karbassi

16 Newspaper layouts

Yes, Ali, they could. And again, I’ll congratulate the author of this piece for their patience and endeavour.

Column based layouts for printed media have proven to be a very effective way to present readable text.

But on the web, column based layouts make reading a large prose difficult – To say the least. We are here to present information in a palatable fashion, in an easily readable format.. so why would I intentionally choose a layout such as this?

If the papers you mentioned need to mimic their physical printed media counterparts for some reason (so I, for example, being in Australia, could have the benefit of getting my hands on them) then provide a PDF for me to download and print.

I just don’t understand why you would deliberately make it hard(er) for someone to digest your information?

posted at 04:15 pm on December 21, 2004 by Steve

17 RE: Newspaper layouts

I think that multiple columns can certainly improve readability on the web. It is true that having two columns of text that extends past the visible area is a real pain. However, two columns of text that fills only the visible area can also be easier to read i.e. no scrolling, keeping lines below 10 words.

I am not sure if this article is the answer, but it is a step in the right direction.

posted at 04:30 pm on December 21, 2004 by heath weaver

18 RE: Newspaper Layouts

Re; heath weaver. Exactly how do you propose to know when a remote user’s user-agent can fit two particular columns on a page without scrolling?

I was faintly interested in this technique, up until the “count characters” came up.

Who here really thinks that counting the characters in a string to set your formatting is the way forward? Seriously? (Do you never have to revise pages’ content in your world or something?)

posted at 04:40 pm on December 21, 2004 by RCotton

19 More than just Newspaper Layout

This is a fantastic little bit of markup that can be used for more than just ‘newspaper’ layouts.

Being able to offset an image between two columns of ANYTHING, not just verbose prose, is something that could certainly come in useful.

Paul, your action is good in principle, but seems poor in execution. Transparent gifs to achieve layout? Might as well go back to tables.

posted at 04:45 pm on December 21, 2004 by Natalie Buxton

20 re: Avoid web text in columns

So why we are all looking forward having column layout with CSS3?
In fact these are “fake” columns – you set the text breaks yourself – when it whould be done automatically at a given height that would be more usable for web.

posted at 05:08 pm on December 21, 2004 by Alexander

Pages

 <  1 2 3 4 >  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?)