# EN World frontpage - solution suggested



## Conaill (Jul 23, 2004)

[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 (Jul 24, 2004)

Conaill said:
			
		

> 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 (Jul 24, 2004)

Spoony Bard said:
			
		

> 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 (Jul 24, 2004)

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 (Jul 26, 2004)

<monday morning bump>


----------



## Conaill (Jul 27, 2004)

Uhm... anybody out there?


----------



## BSF (Jul 27, 2004)

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 (Jul 28, 2004)

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 (Jul 28, 2004)

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 (Jul 28, 2004)

Conaill said:
			
		

> 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.


----------



## reanjr (Jul 28, 2004)

Spoony Bard said:
			
		

> 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.




Use CSS id selector (i.e. div#singleDivIdName { ... } )

I'm sure it can be done.

You could also try the child and sibling selectors ( > and + )

You could also try making the page actual xhtml-transitional instead of just saying so in the <!DOCTYPE...  Alot of formatting issues become alot easier to manage if you actually follow the standard.



			
				Spoony Bard said:
			
		

> 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.




Please don't do that.  The page shouldn't care how big the browser window is.  It should flow no matter the browser window size.

I don't know exactly how the page is set up right now, but a couple of float:left and float:right styles can go a long way.

I've just been too polite to complain, but the layout is horrid.  No matter what size the browser window is.


----------



## reanjr (Jul 28, 2004)

reanjr said:
			
		

> I've just been too polite to complain, but the layout is horrid.  No matter what size the browser window is.




Not to have relatively non-constructive criticism, I just did a cursory examination of what's going on.

Removing the <table class="page">, then taking everything that is in column 1 and putting it in a <div style="float:left">  then everything in column 3 and putting it in a <div style="float:right"> then taking everything in column 2 and letting it all hang out should give you a much more readable layout.  And if you need to space out columns, don't use a <td width="15">, but rather set the padding or margin of the adjacent <td> tags to 7 or 8 or one of them to 15.


----------



## Michael Morris (Jul 28, 2004)

Using IE 5.0 I take it.  How do I know? Cause the boards only shoot that particular bit of cold to IE 5.0 or earlier (If you are using i.e. 6 and you're seeing that page then there's a logic error I'm not aware of or the news page isn't using the $spacer_open template correctly).

Herein lies part of my problem. Vbulletin is configured to shoot out different versions of the page depending on the browser.  I test using IE 6, and NS 6, and I'm seriously considering adding Firebird to that list because of the growing number of users out there who make use of it.

Now, in a perfect world all the browser manufacturers would follow these standards you allude to and neither I nor the makers of vbulletin wouldn have to tweak the code to make sure that it displays reasonably well on all *major* platforms. (No, I don't intend to make sure the boards display correctly on Netscape 2.0) And, BTW, you have *no right* to complain about the pages you get not following W3C standards while still using a browser that wouldn't know what to do with a page that follows those standards.

Also bear in mind that the people who submit and write the news on the front page aren't necessarily web gurus or coders.  They are dedicated volunteers who provide and edit material which the system then applies *most* of the formatting to.  And that formatting can change depending on the client browser, up to a point.

At the moment I have enough headaches to deal with than to tinker with the code of a section of the site that has been running perfectly well for 5 months with no complaints.  In time I may address your complaints though it could easily take a day or two to do. The formatting suggestions you imply aren't a simple matter of altering a CSS style sheet or two - I'd have to dig through the templates to find the ones involved with the problem. Each edit has to be checked against two different browsers and 6 style sheets.

That's a heck of a lot of work, especially when you compare it to the simplest solution - maximize you browser window.


----------



## reanjr (Jul 28, 2004)

Spoony Bard said:
			
		

> Using IE 5.0 I take it.  How do I know? Cause the boards only shoot that particular bit of cold to IE 5.0 or earlier (If you are using i.e. 6 and you're seeing that page then there's a logic error I'm not aware of or the news page isn't using the $spacer_open template correctly).




Due to your slightly rude comment below ("you have *no right* to complain about the pages") about my browser choice, I find it amusing that no I am not using IE 5.  I'm not using any version of IE in fact.  Though my browser is being identified to your site as IE 6.  Which means that, if that is the case, you have a logic error somewhere. 



> Herein lies part of my problem. Vbulletin is configured to shoot out different versions of the page depending on the browser.  I test using IE 6, and NS 6, and I'm seriously considering adding Firebird to that list because of the growing number of users out there who make use of it.




A a professional suggestion, do initial testing/debugging on Firebird.  If it works there, it's a pretty sure bet it will work on both Netscape and Mozilla.



			
				Spoony Bard said:
			
		

> Now, in a perfect world all the browser manufacturers would follow these standards you allude to and neither I nor the makers of vbulletin wouldn have to tweak the code to make sure that it displays reasonably well on all *major* platforms. (No, I don't intend to make sure the boards display correctly on Netscape 2.0) And, BTW, you have *no right* to complain about the pages you get not following W3C standards while still using a browser that wouldn't know what to do with a page that follows those standards.




Well, I think it's more of a chicken and egg problem.  If Web Devs had followed standards, so would have the browsers.  Since the Web Devs ignored the standards, the browsers had to be tweaked so that when they encounter any non-standard things, they switch rendering modes into quirks mode.  The reason I said to actually follow the standard is that all the major browsers DO render almost exactly the same if the standards are followed.  I can't tell you whether or not that would be the case with this site, but it is likely that if vB followed the standards, they wouldn't need to return different pages to different browsers.



			
				Spoony Bard said:
			
		

> Also bear in mind that the people who submit and write the news on the front page aren't necessarily web gurus or coders.  They are dedicated volunteers who provide and edit material which the system then applies *most* of the formatting to.  And that formatting can change depending on the client browser, up to a point.
> 
> At the moment I have enough headaches to deal with than to tinker with the code of a section of the site that has been running perfectly well for 5 months with no complaints.  In time I may address your complaints though it could easily take a day or two to do. The formatting suggestions you imply aren't a simple matter of altering a CSS style sheet or two - I'd have to dig through the templates to find the ones involved with the problem. Each edit has to be checked against two different browsers and 6 style sheets.
> 
> That's a heck of a lot of work, especially when you compare it to the simplest solution - maximize you browser window.




I didn't mean to imply that what I was suggesting could be done entirely in CSS or that it could be done easily.  My problem actually doesn't stem from the top section where the other person was complaining about.  I'm actually more distraught that once you scroll down (about 5 screens or so), the content is still squashed into a third of the window.

Anyway, that's why I never complained before.  I know what kind of work is involved (if not the particulars with th vB system).  But since someone else brought up their own problems, I decided to put in my two cents about what I thought of the site design.


----------



## Conaill (Jul 28, 2004)

BardStephenFox said:
			
		

> 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.



Wacky indeed! Was that with only the blockquote formatting, or with the UL line as well? The latter is somewhat suspect because it specifies a negative offset. Just haven't spent enough time digging into CSS to figure out how to do it in a less clunky way. 

What happens if you set  BLOCKQUOTE { margin-left: 0px } ? Can you tell what changed specifically to reduce the worldwide game day info from 2-3 words/line to 1-2 words/line?

As for window size, the problem with blockquotes seems to show up with window sizes up to about 700 (that's the point at which the center column reaches its minimal width). I doubt I'm the only one who has problems with this. Although most of the time the layout is tolerable. It's just those rare days when there is more than one "skinny" blockquote (like happened on July 23rd) which make me go AAAARGH!

Michael, I do appreciate all the effort you've put into this, and I understand you have other priorities as well. BSF's experience with IE shows that my "simple" solution may not be as simple as I thought (although I still cannot figure out why the heck it wouldn't work on any CSS-compliant browser!) 

If and when you do dig yourself out from under your other projects, I would appreciate if you could have a look at the more general problem of how to optimize the overall layout so there's less wasted space -  as befits the front page of a news site. Heck, maybe you could even come up with a separate "economical" styleset that crams as much info into as little space as possible. Would be also useful for people who want to check EN World from other platforms as well. Much more so than updating button colors on the fly anyway...


----------



## Michael Morris (Jul 29, 2004)

Guys, I was a little snarky last night, and for that I'm sorry. I promise I will revisit EN World and deal with these formatting issues. I'd like to go back to the last display set used on PostNuke before we dumped it.  I think I've figured out how that can be done, but it will take awhile to implement. Also, people tend to accuse me of switching things up too much, so leaving it alone awhile never hurt.


----------



## Conaill (Jul 29, 2004)

That's ok Spoon. We know this is a labor of love for you, and we do really appreciate how much you do for EN World, despite all the whining you get from us


----------

