Creating Newspaper Columns

HTML & CSS
41

If you want to see what I was talking about, yes, you have to do that.

I never said my solution would use that implementation…

i will do what i do to other sites that are user-hostile – bail, and go somewhere else

you want fancy-schmancy, fine, that’s your privilege

just realize you are turning away visitors

You’re twisting what I said.

I said I like the look of the NY Times Reader.
(The way their articles display, looks much better than the uncreative, one-column, monitor-wide approach 99.9% of people take.)

I never said I like HOW they get to that end effect.

That is why I am posting here.

I bet with some creativity, you could mimic what the NY Times does without requiring readers to download Adobe Air. (e.g. using PHP, MySQL, CSS, and JavaScript)

Debbie

42

In Post #5 you focused on needing server-side PHP and MySQL, right?

My Original Post was asking about “Snaking Text around in One Article”. (You also were talking about a “Set of Articles”.)

Someone posted a who bunch of JavaScript above your response too, but I didn’t understand what I was supposed to do with all of that code?! :confused:

I was hoping someone could just talk me through how you could web-compliant standards and basic things like CSS to make one news article snake around one one page like DonBoe posted earlier…

If this can be done in a simple, user-friendly, platform-independent way, then I am interested in pursuing things.

(Ironically, I would agree with r937 that if my users would have to download and install software and what-not then this isn’t a good thing to do.)

Thanks,

Debbie

43

Like I said It can be done of course, but it all depends on what server side scripting language you are using to what approach to take

I have no idea where r937 is referring too with

I just visited the site and I didn’t need to install anything or register to read the articles. Maybe he can shine a light on what he means with this.

44

So I looked at that link and that is what I am looking for, except I don’t want all of this columns. (If I could do just 2 or maybe 3 columns that would be great.)

You don’t like that layout but with fewer columns?

It is just like a newspaper and requires no-scrolling. (Heck, r937 might not even grumble about it?!) :wink:

To emulate newspaper paste-ups is silly.

Because…

The well designed newspaper will not have columns cross the fold. My local paper, the Dallas Morning News is not well designed, and is getting worse at every turn. Recently they have been doing just that to the effect of making the paper more difficult to read. Unlike with newspapers, the web designers have no way of knowing where the user’s ‘fold’ lies. To cross that fold means the reader must scroll down to read the bottom of column, then back up to read the start of the next. That is a massive design failure.

Why do you guys keep implying that I want users scrolling?? :nono:

You are 110% right in that if you have to scroll down column 1 and then scroll back up to the top of column 2 it would be insane. But when did I ever say I’m looking to do that?

If you guys would take a moment to download The NY Times’ Times Reader 2.0 and then go read the free sections of the NY Times newspaper, you might be pleasantly impressed with the simplicity and ease of use of their design.

I’m just not sure of all the aversion to mimicking what has worked in print for centuries?! If you don’t have to scroll, and have a monitor bigger than my MacBook, then reading articles laid out using “Newspaper Columns” is usually easier on the eyes - particularly if you have a humongous monitor like a lot of you do.

Debbie

P.S. I have posted screen-shots of some news articles in the NY Times Reader for those who don’t want to/can’t download the app.

45

I just went to the link supplied. I needed indeed to download the NYT (Adobe as rudi said :)) reader which took about 5 seconds. When downloaded I could just read articles no subscription needed. I was pleasantly surprised.

Maybe that make change your mind rudi :wink:

46

We can agree on that much.

That means that no-one is going to be able to read it the way they normally read online, and everyone is going to have to learn a new technique.

Download and use the NY Times Reader and you might be surprised how intuitive it is…

Remember Neilsen’s Law - people spend 99% of their time on other websites. And the Corollary for the Hard of Thinking - if your site doesn’t work like 99% of other websites and they have to learn something new in order to use it, most of them won’t bother, and will clear off to a site that works in a way they can understand and cope with.

And at the same time, if designers never “pushed the envelope”, the world would never have iPhones and iPads…

And with your fancy-pants paginated article, what if people want to highlight and copy the text? Or print it? How will you make it fully accessible?

Changing style sheets.

I agree that excessively long lines are hard to read. That’s why I would always advise designers to set a max-width on the content area to ensure that lines of text don’t get too long to be read comfortably.

Apparently the designers of SitePoint didn’t get that memo, because your LONG and W-I-D-E post is very hard to read. (Although I’m hardly proposing “newspaper columns” for a user group!!) :lol:

That doesn’t mean that you have to throw away every established web design technique and build a new one that is horrible to use just to avoid long lines.

Sorry, but your making “mountains out of mole hills” w.r.t. my original post.

Debbie

47

Aside from all ideological and practical objections:

Since you can’t know server side (PHP-MySQL) what size the user’s browser window is, and assuming that you want your article to be readable without scrolling up and down each column even when the user changes his browser window size (I almost always have them full-screen, but lots of people don’t), then the actual ‘snaking’ of the content in the columns will have to be done by javascript.

Is that platform independent? I don’t know. If someone has JS disabled it won’t work for sure. But if the site degrades gracefully they’d have the content displayed the old-fashioned way I imagine.

I’m no JS expert, so I really don’t know, but StevieD mentioned the time such a JS could take, and that might be another problem.

48

There is no way around this?

You must use JavaScript?

I checked this out and like it, but a few things…

1.) The CSS is so simple I am wondering if I am missing something?! :-\

How do you tell CSS how many columns you want and that it needs to warap the text around?

2.) How well is CSS3 supported by other browsers?

Right now all I have is my MacBook, so I have no way of knowing how things will work or look on desktop monitors or on Windows/Internet Explorer. :frowning:

Debbie

49

Then either change the value of the column-width, or use the column-count property, e.g. {-moz-column-count: 3;} instead. I used the width that gave me 5 or 6 columns, similar to newspapers.

You don’t like that layout but with fewer columns?

It is just like a newspaper and requires no-scrolling. (Heck, r937 might not even grumble about it?!) :wink:
Whether it scrolls or not is dependent on the amount of content, which you can control (at least until the client gets hold of it), and the size of the user’s browser, of which you have no control.

Why do you guys keep implying that I want users scrolling?? :nono:

You are 110% right in that if you have to scroll down column 1 and then scroll back up to the top of column 2 it would be insane. But when did I ever say I’m looking to do that?
When you said you wanted flowed columns, maybe? Scrolling is the logical outcome of not controlling both the amount of content and the size of the viewport. We’re talking about html rendered in browsers.

If you guys would take a moment to download The NY Times’ Times Reader 2.0 and then go read the free sections of the NY Times newspaper, you might be pleasantly impressed with the simplicity and ease of use of their design.
Hah! I have no-script, so couldn’t see the download button. For some reason, there are an awful lot of idiot designers who will throw Flash at any and every thing. Having got the reader, I see it is very much like my Kindle for PC; which makes it very different from a browser. The reader is self aware of its size, and will re-paginate as needed. It is, in short, a special purpose desktop application. It is not a browser and does not work like a browser.

I’m just not sure of all the aversion to mimicking what has worked in print for centuries?! If you don’t have to scroll, and have a monitor bigger than my MacBook, then reading articles laid out using “Newspaper Columns” is usually easier on the eyes - particularly if you have a humongous monitor like a lot of you do.
The aversion (your word) stems from the web not being print. It is shameful that graphic design schools don’t recognize and teach the differences. Print is a fixed medium. The web is completely in the control of the user. The NYT reader can be user-resized, but the application is size aware and manages the content vs size issue by re-flowing and paginating that content.

I am not averse to flowed columns. A flowed list, for example, is a thing of beauty, it doesn’t screw with the structure, and it degrades cleanly. I am also aware of the pitfalls when used in a web page. Among the dangers is the case of overflow; thus the harping on scrolling. A better solution for text is to restrict the width of a single column to about 65 characters. That’s about 32ems.

I, for one, have 24in monitors on my desktops, and a 16in screen for the laptop. I would not even consider running my browsers maximized. Nor, for that matter, most of my other apps. I like to have my editor and several browsers open on the desktop, and in view. I would prefer to have them at 800×600, but too many sites cause h-scrolling at anything less than 1024×. The optimal size for a two column page is 800×; that’s 32em (512px @ default font size) for the main content and a little less than 250px left for a side column. 1024× supports a three column design, and 1280× is just showing off. :wink: I will confess to running Kindle full screen, but if I’m reading a book, well that’s all I’m doing.

cheers,

gary

50

If all you want is 3 columns that resize with the browser, but doesn’t change the number of columns so as to prevent users from having to scroll, then just use the multi-column layout that was given to you before.

51

So can’t I have my cake and eat it too.

It sounds like you are saying that the NY Times Reader is similar to a Kindle, right?

There must be a way to mimic that in a browser?! (Not saying that it would be easy, but it must be doable.)

I recall reading a PHP OOP book last year that created a Photo Gallery with thumbnails. What was cool about it, is that it would adjust how many thumbnails were displayed on a page based on the size of the thumbnails and how many “Thumbnails Per Page” were selected.

If the user had 25 photos/page, and there were 100 photos, then Page 1 would have photos 1-25, and Page 2 would have photos 26-50, and so on.

The point is that the PHP code was “intelligent” enough to…

1.) Know how much “content” to place on each page

2.) Know where to pick up where the last page left off.

If this author could do that with a Photo Gallery, why not apply that same logic to all text in a newspaper article? :-/

If your code could determine the user’s browser size, then you could calculate…

1.) Characters/Column-Line

2.) Lines/Browser-Page

then you could figure out how much content would fit in Column #1, and then make a note of where the break on the Text is, and then your code would pick up in Column #2 and pick up with the Text where it left off on Page #1.

If your content ran over 1 page, then you could just follow that logic for as many pages as need be.

(I guess maybe this is a question for the PHP forum??) :-/

Is that basically all the NY Times app is doing?

It seems to me that could be done in a browser nearly as well.

BTW, could someone please answer my questions about CSS3 compatibility??

Thanks,

Debbie

52

PHP is a server side scripting language. All the PHP is doing for the photo gallery is divying up the content based on two parameters, using a little math. The page that is served up to the user is static, and there will ALWAYS be that number of photos on the page regardless of how the user resizes their browser.

What you want is a client side resizing. You want the browser to re-size and add/delete the columns based on when a user resizes their browser. This requires a client side programming language, i.e. Javascript. It’s also a pain in the ass to do if you are doing it on dynamic content, such as is being entered into a blog, etc.

If you knew that all of your articles were 500 words long, then it would be easier.

But the entire point is that as a designer/developer you have NO CONTROL over the client-side browsing experience. A book reader/web reader is easy because the screen is x px wide, y px tall, and everything is run in full screen mode with no resizing available.

53

If your code could determine the user’s browser size, then you could calculate…

But PHP can’t. Because the browser is client side, and PHP works server side.
And the example of the photo gallery isn’t a valid one, because it’s not PHP that decides the number of columns or photos, but the user.

BTW, could someone please answer my questions about CSS3 compatibility??

About CSS3, as far as I know it isn’t a standard yet. Gary said the multicolumn layout is supported only by Safari/Chrome and Firefox. That excludes Opera and IE. And since they’re still working on CSS3 definitions, things might change in the future. Relying on CSS3 doesn’t seem very platform independent to me, not at this moment.

54

In your first post below you don’t mention one article on one page only.

but if that is all you want to do then it’s relatively simple.

one way I can think of off the top of my head is

  1. count the words in the article

  2. determine how many columns you want on the page

  3. divide the total words by the number of columns

  4. display the range of words from the article required for each column using the words per column from 3)

55

Until the reader decides to enlarge the font size or has a minimum font set that is oh, say 25px because of poor eyesight, or has so many toolbars open there’s little room for content in the browser window, or …

cheers,

gary

56

those issues could arise on any web page and the flexibility of readibilty of the content can be enhanced by css.

the point is that it’s not difficult to snake text cotent from 1 column to another.

57

And, my point is that no matter how carefully you do it, the user can cause that evil condition where one must scroll to the bottom of one, then up to the beginning of the next.

cheers,

gary

58

if in your opnion it is an evil condition, I don’t have an issue with that at all.

I posted earlier I have no issues with scrolling vertically.

59

It’s not his opinion, it’s the opinion of the OP. The reason we’ve had this entire debate.

60

the OP originally asked

[I]How do you create a web page that has “Newspaper Columns”? (You know, like 2-3 columns across the page.)

I remember seeing this somewhere online and would like to learn how to incorporate it into my website, since that “print look-and-feel” still rules over web-stuff.
[/I]

I posted 1 way of doing it.

Whether each column scrolls vertically beyond the viewport is totally up to the coder and their client’s requirements, but the method for snaking the content is principally the same.