EN World frontpage - solution suggested

[Conaill]

[Edit: See below for an easy to implement solution to this problem]

Hi Morrus & Co...

Could you guys please, PLEASE do something about all the wasted space between and around columns on the EN World front page?

I seem to be using browser windows that are slightly narrower than many sites expect (typically around 660 pixels wide or so). For the vast majority of sites this is not a problem. Sure, I occasionally have to scroll a bit to the right to see all of a right-hand column on sites like cnn.com (or for example, to see all of the add on top of this page). But typically only an inch or so, and my window is wide enough to notice if I'm missing anything important off the right edge.

However, because the EN World frontpage resizes to the width of the browser window, and because of its *very* liberal use of space between columns, if there happens to be a news topic with two levels of indents plus an icon to the right of it (such as todays articles about the Worldwide D&D Game Day, or about Dungeon #114 and #115), there is only barely enough space left to print one word per line, spreading out the paragraphs over entire pages.

Needless
to
say,
this
is
very
annoying!
...

It seems like some of the primary offenders are the following three lines:

<div style="padding: 0px 25px 0px 25px">
This puts a 25 pixel border around the entire page

<!-- Spacer Cell -->
<td width="15">
15 pixels of empty space between columns

<table width="80%" cellpadding="3" cellspacing="3" border="2"
ARGH!

I figure with those three, I'm already losing close to 1/5 of the useable width of my screen! And on top of all that, add in two 35 pixel indents, and a 60 pixel icon the text doesn't seem to flow around correctly, and there's almost not space left in the central column for any actual content!

I would strongly suggest you take some hints from other news sites, and use the space on the front page a *lot* more economical. Not that you need to cram things in as closely as cnn.com, but a little consideration for users with narrower browser windows would be greatly appreciated!

Heck, just changing the indent spacing, or making the text flow *around* the topic icons would already solve much of the problem. Reducing the spacing in those three lines I quoted above already reduces the length of the front page by several pages on my window...

 

[Michael Morris]

Heck, just changing the indent spacing, or making the text flow *around* the topic icons would already solve much of the problem. Reducing the spacing in those three lines I quoted above already reduces the length of the front page by several pages on my window...

There's not much that can be done from the CSS end without changing the layout of the messageboards since both news and messageboards use the same CSS.

As far as the indents, it's been formatted this way for a while (all the way back to Eric's original page which had no database backend) and this is the first complaint I've seen.

I'm trying to learn enough MySQL to write a new news-digest module to automate the process, and once that's in place I may be able to include conditional calls in the template sheet to determine browser window sizes and adapt accordingly. But for the moment it's done by hand, and short of doing this multiple times there isn't much that can be done.

 

[Conaill]

There's not much that can be done from the CSS end without changing the layout of the messageboards since both news and messageboards use the same CSS.

The three-column format is specific to the news pages though. Getting rid of those 15 pixel spacers and/or increasing the useable width in the center column (currently 80%) shouldn't affect the message boards.

As far as the indents, it's been formatted this way for a while (all the way back to Eric's original page which had no database backend) and this is the first complaint I've seen.

Well, I've been having this problem for a while, but not all the way back to Eric's time. And just because it's been this way since the beginning of time doesn't mean we shouldn't consider having a second look at it

The main annoyance comes up when there's a combination of double indenting, plus a topic icon. Since the text doesn't seem to flow around the icons the way it should, a topic icon takes away 70 pixels from the first paragraph - and everything in a list item seems to be counted as part of the first paragraph!

Doubly-indented paragraphs also seem to be a fairly recent thing. I don't remember them being used all that often in the past. Probably has more to do with how Morrus is formatting news items these days. Lot more use of big blockquotes, etc.

Maybe there should be style guide not to use any blockquotes in the first item of a section with a topic icon, but I'm pretty sure that'll get ignored...

Any way to reduce the indent spacing just for the block quotes, or force them to align with the column, since those seem to be the ones getting messed up most often?

 

[Conaill]

Here we go... If you put the following three lines in the <HEAD> of the newspage (or in the style sheet itself for that matter), that should solve the majority of my problems:

<style type="text/css">
BLOCKQUOTE { margin-left: 20px; margin-right: 0px }
</style>

(Default margins for block quotes are 40 pixels on both sides! No wonder it was getting messed up...)


You may also want to set "UL { margin-left: -10px }", but it seems like there should be a cleaner way to do that...

 

[Conaill]

<monday morning bump>

 

[Conaill]

Uhm... anybody out there?

 

[BSF]

Conail, I can see the issue you bring up if I shrink my browser window down. I saved out the source for the main page and then added in the lines you suggest and it does not appear to solve the issue. Actually, it seems like it made it worse.

Which is odd because I am inclined to think that you, too, would have tested it before posting. So, for whatever reason, including the style code in the head of the copy of the news page on my machine did not have any positive results.

The .css file is used throughout the forums. I haven't checked it thoroughly enough to know whether Blocks are used in different areas, but I would certainly expect Michael or Morrus to test it very carefully before deciding to actually do anything with you suggested changes. Both of them certainly have reason to be a little gunshy about making changes without extensive testing. I'm not sure if anyone is checking into this, but I did want to let you know that somebody read it. Small consolation, I am sure.

 

[Conaill]

Interesting... in what way did it make things worse?

Yes, I did try the code out, although admittedly only inside Netscape Composer. If you only add the blockquote part, the July 23rd quote on the WotC Worldwide D&D Game Day for example goes from one word per line, to almost two words per line. Not a great improvement, but at least now that paragraph fits on a single page! Other than that one and the Dungeon #114/115 contents that same day, nothing else should have changed.

 

[Michael Morris]

Guys, I'm currently helping Melanie Creel over on the Wizards boards with the transition from Vbulletin 2 to Vbulletin 3. Since Vbulletin 3 doesn't use vb2 templates at all I'm having to rewrite every styleset they have - and there are *quite a few* of them (I haven't counted but I know there's more than 20). They're shooting to make the change on the 2nd, and I want to have all the styleset done by that time.

Needless to say, this is tying my hands from hanging out around here too much. That said, once I'm done I intend to apply some of the work there here. For one, I've been forced to create a button generator in PNG so I can smoothly swap out the colors of the buttons between styles. I'll apply this here by updating the buttons in the styleset here properly instead of tinting existing ones.

 

[BSF]

Interesting... in what way did it make things worse?

Yes, I did try the code out, although admittedly only inside Netscape Composer. If you only add the blockquote part, the July 23rd quote on the WotC Worldwide D&D Game Day for example goes from one word per line, to almost two words per line. Not a great improvement, but at least now that paragraph fits on a single page! Other than that one and the Dungeon #114/115 contents that same day, nothing else should have changed.

Using IE, it changed the Worldwide game day info from 2-3 words/line to 1-2 words/line in the same sized window. I even opened two windows just to compare side-by-side. Wacky! I think I ended up with a window ~579 pixels in size. That's smaller then the window you were testing with right? I wonder what is different. Perhaps a specific font availability?

Michael, good luck with the assist on the transition. It sounds like you are keeping busy.