New News Page Layout

This is just an experiment - I'm not sold on it. The idea is that bigger news items dropped out of sight pretty quickly with the old format, while this one allows more to be seen at a glance. On the downside, it also makes it look a lot like every other news site on the web. The difference isn't as big as it appears at first - it's just that individual items are collapsed rather than expanded by default, in an attempt to make more room. Other than that, it's the same.
Anyhow, with the caveat that nobody likes change, let me know how you get on with it. It may stay, or it may go back to the old way. Switching it back is only a single click away!

 

[MReav]

Fan content? No, it's never been along the side. It's always just been in the news posts. Or were you referring to something else?

I was referring to the RSS Feed. I used to be able to access it from the main page, now it's on other pages.

View attachment 65330

 

[Morrus]

I was referring to the RSS Feed. I used to be able to access it from the main page, now it's on other pages.

View attachment 65330

Ah, that! Sadly, the issue with that is that it was one of the main contributors to the slowdowns we were having. I need to find some way around that.

 

[MReav]

Ah, that! Sadly, the issue with that is that it was one of the main contributors to the slowdowns we were having. I need to find some way around that.

I'll settle for a link that I can Ctrl+F "Fan Content".

 

[Grimjack99]

Sometimes its aesthetics, sometimes its just what your used to, and sometimes its a strike. I wanted to give the new layout over a week to see how it clicked. Sorry, but not a fan. Its less functional to me, but better aesthetically. If its a choice, I'd prefer the prior edition. That said, this is still the number one TRPG info site out there. Do what you want, I'll still come.

 

[Agglomérante]

I find the narrower headings produce a blocky "tombstone" effect on the page. The dark grey background with the dark blue type are just these dark slabs on your page. Every article has the read-aloud-text-block background grey. The overall effect is cramped blocks! The existing while space is wasted in inconsistent gutters.

I'd lose all the heavy backgrounds, which will open up all kinds of white space, and let the large type of the headings guide the eye. At least use that as a starting point for a subtle design to guide the eye from article to article.

Here's the CSS to try (with !important declarations for testing only). It also gets rid of the "READ MORE" link. It's a well-understood Web convention that headings function as links in news portals such as this.

.cms_separator { border-top: 0 !important; }

div.article_preview { background-color: transparent !important; }

div.title { background-color: transparent !important; }

h3.article_preview center { text-align: left !important; }

.cms_article_readmore { display: none !important; }

Here's what those changes look like on a 1366 x 768 monitor:

View attachment 65400

Huzzah!

Love the site! Keep up the good work

 

[Morrus]

I have to admit, that does look good.

 

[Morrus]

I just tried it, since the weekend is usually quiet. What do you guys think? An improvement?

 

[Nellisir]

I just tried it, since the weekend is usually quiet. What do you guys think? An improvement?

Yes.

 

[Morrus]

That said, I think it makes the comment count look a bit bullish. I might need to move that.

Also, on a phone, the empty white space looks a bit too empty and randomly placed the way the now-invisible boxes shape. Doesn't work quite as well as on a PC monitor. The shading and boxing definitely helped there.

I wish there was a way vbulletin let me just tell it to show only one column on a phone.

 

[Agglomérante]

That said, I think it makes the comment count look a bit bullish. I might need to move that.

Also, on a phone, the empty white space looks a bit too empty and randomly placed the way the now-invisible boxes shape. Doesn't work quite as well as on a PC monitor. The shading and boxing definitely helped there.

I wish there was a way vbulletin let me just tell it to show only one column on a phone.

Yay! It looks great.

The comment count doesn't need to be full caps bold, since it doesn't have to visually compete with all those strong blocks anymore. You can set it lowercase and normal type, try aligned right. Just the same word in the same spot on every block will draw the eye to it and imply that it plays a special role on the page.

I checked the layout out on Safari on iPhone and the space is identical to what it was before, it's just white space. Looks easy and clean to me.

Re. single column, have you tried CSS media queries?

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries