# EN World Buttons (@Russ)



## weem (Apr 9, 2010)

Preview...







Font matches the one I used in the logo and subscriber stuff (as you mentioned you wanted). I thought the WotBS and SF! icons would be a nice touch to help distinguish those buttons a bit as well. Gotta get that branding in 

The buttons themselves (including a 'Search' button) can be grabbed via a zip file here.

I wanted to throw some revamped icons your way as well to see what you thought, but I didn't get time to. Maybe this weekend.


----------



## Morrus (Apr 9, 2010)

Woohoo!  Thanks weem! 

Me likey pretty pictures!


----------



## Plane Sailing (Apr 9, 2010)

I don't like those pictures - they are far too wide and break my viewport (see picture)

Please either make them smaller, or removable or put them on two lines, but don't leave it as it is - it is awful.


----------



## Merkuri (Apr 9, 2010)

On my widescreen monitor (1440x900 resolution) the buttons push the right sidebar so far off of the screen that I can barely see it.  I'm not really complaining because it gives more space for the actual posts, but I'm sure others who don't have as wide a screen as me will probably have some of the main area in the center cut off.


----------



## nerfherder (Apr 9, 2010)

I'd prefer it if the buttons were a bit narrower, so I don't need to scroll left and right on my 1280x800 laptop monitor.


----------



## Morrus (Apr 9, 2010)

Hmm. I've reduced them to 50% of the size, but now they're so tiny I can't read them.  All combined, they only reach as far as the word "Dungeons" in the header above them.


----------



## Piratecat (Apr 9, 2010)

Yep, they're now too small for me to legitimately read. Cool, though; I like them much better than the previous text.


----------



## Morrus (Apr 9, 2010)

OK, they're now at 75% size instead of 50%.  How does it look to people now?  Still a tad small for my screen, but I'm able to actually read 'em now at least.


----------



## renau1g (Apr 9, 2010)

Looks good to me. Nice change!


----------



## freyar (Apr 9, 2010)

Still too big for my screen (at work at least, and probably at home too).  I'm having to scroll right just to get to the end of posts.  That may mostly be due to the large space between the "SpaceFight" and "Search" buttons.


----------



## Nifft (Apr 9, 2010)

If we want to cut down the button bar:

1/ Nobody needs both the Subscriber Content and the Subscribe! button. Show only the one that's appropriate to each viewer.

2/ WotBS and Space Fight! don't need their logo images. Remove them, save >50 pixels.

3/ There's a Search dropdown menu already. Do we need a graphical Search button?

Cheers, -- N


----------



## Morrus (Apr 9, 2010)

Nifft said:


> 3/ There's a Search dropdown menu already. Do we need a graphical Search button?




Apparently nobody can ever find it.


----------



## mudbunny (Apr 9, 2010)

As it is, I still have to scroll to the right to read all of a post.

_edit to add_ Only in this forum. In this forum there is a large black space between Space Fighth and Seacrh that isn't present on other forums.

Perhaps save some spce by making the buttons 2 lines as opposed to one??

Older
News

instead of Older News.


----------



## Marius Delphus (Apr 9, 2010)

Awesome looking but yeah -- too doggone wide. Recommend changing the "longer" buttons to two lines of text (and of course keeping all buttons the same final height).

Edited to add: Incidentally, what font *is* that? It's bugging me that I don't know.


----------



## weem (Apr 9, 2010)

Hmmm...

My assumption was that the buttons would drop a line on narrower resolutions (or when you narrowed your browser manually) as the text did before. 4 of these are smaller than the text was previously, and the others are about the same - but that might be something to consider (allowing them to stack). In most cases, they would not stack into more than 2 rows.


----------



## weem (Apr 9, 2010)

Essentially (looking at the code) something like this might be better (this is simplified in order to show the basic structure of the table)...

<table class="tborder" width="100%" border="0" cellpadding="6" cellspacing="1">
  <tr>
    <td colspan="3">The world's premier fan community for Dungeons & Dragons news and more!</td>
  </tr>
  <tr>
    <td valign="top">[OldNews] [Newsletter] [SubCon]  [WotBS] [SF!]</td>
    <td style="width:100px;text-align:right;" valign="top">[Search]</td>
    <td style="width:100px;text-align:right;" valign="top">[Scoop]</td>
  </tr>
</table>

<edit>

This would allow the buttons "Old News" -> "Space Fight!" to stack. Of course, you can keep it as is if you want - but the horizontal scrollbar is indeed a nasty little beast I avoid at all costs in my line of work, hehe

</edit>




Marius Delphus said:


> Edited to add: Incidentally, what font *is* that? It's bugging me that I don't know.




It's called "300 Trojans" - you can download it for free here...

300 Trojans Font | dafont.com


----------



## Marius Delphus (Apr 9, 2010)

Here's an example of the kind of thing I mean (I like gold, so I decorated them with gold  ). I'm sure it's possible to knock a few pixels off the height and make them "match" the site better, but I had nothing better to do so I made a quick sketch.  The width of this button bar is 600 px if the buttons are adjacent -- I stretched them out on a 640 px wide background.

But if the two-row thing works out, then I'm sure that'd look even better.


----------



## Morrus (Apr 9, 2010)

I'm not keen on two rows of buttons simply because I'm conscious of pushing page content down the screen.  Especially if there's an announcement running.


----------



## weem (Apr 9, 2010)

Morrus said:


> I'm not keen on two rows of buttons simply because I'm conscious of pushing page content down the screen.  Especially if there's an announcement running.




I guess another way to look at it is that while yes, stacking the buttons moves the content down a little bit, not allowing them to stack is (in many cases) hiding the entire right column ("Community Supporter Subscriptions" and "Visit Our Sponsors" boxes).

It's a trade-off for sure.

<edit>

In all honesty, I'm running at 1680 and so it's fine for me - but I understand the horizontal scrollbar frustration all too well and would avoid it at all costs. But that's just me and it's part of my work so I could be much more picky than most, hehe

</edit>


----------



## mudbunny (Apr 9, 2010)

Not so much 2 rows of buttons, but have some of the longer buttons go to two rows worth of text.


----------



## Kurtomatic (Apr 10, 2010)

Glad to see this issue being discussed, it's still a problem for me. I have _plenty _of horizontal screen resolution, but I don't like to keep my browser maximized. Especially when reading forums! There's a reason print formats use multiple columns; if the (reading) scan line is too wide it becomes uncomfortable to read. So this is a problem worth making some compromises to solve, in my opinion.

I like to keep my browser around or under 1200 total horizontal pixels. At that width I can scroll right to fit the current thread column without further scrolling, but it cuts off both sidebars. Thankfully, my smartphone browser manages to wrap the thread text shorter than the button bar, so the same trick (center scrolling) works there as well.

Thanks for all the hard work!


----------



## Mark (Apr 10, 2010)

weem rocks!


----------



## Theo R Cwithin (Apr 10, 2010)

The buttons look really sharp!  (nice work, weem!)

I'm having the wider-than-the-screen issue, though.   Fully 1/3 of the site now gets chopped, including around 1/4 of the main central panel (the posts, article, etc).  Also the right ad column is completely hidden.  This is on a 1024x768 laptop monitor, with the same result for Firefox, Safari and IE on an old-ish Mac OSX (10.3). 

There's no wrapping of any sort happening anymore.  Others have noted this as well, so it might be generally true for folks restricted to lower resolutions.  This might not be considered a real problem, but it is a headache.


----------



## Merkuri (Apr 10, 2010)

Would it help to put the section with those buttons _above_ the sidebars?


----------



## nerfherder (Apr 12, 2010)

Morrus said:


> OK, they're now at 75% size instead of 50%.  How does it look to people now?  Still a tad small for my screen, but I'm able to actually read 'em now at least.




I still have to scroll left & right to read posts 

Actually, that's not strictly true - I can move the horizontal scroll bar to the middle and chop off half of the right and left panes.  It looks messy, but it's a viable workaround.


----------



## freyar (Apr 12, 2010)

Something I've found to help is zooming out (Ctrl+- on firefox), at least if you don't mind reading smaller font.


----------



## Nytmare (Apr 13, 2010)

Weem, you know that I love you, but I totally adblocked all of your buttons.


----------



## Nebten (Apr 13, 2010)

Morrus said:


> Apparently nobody can ever find it.




People can find it, it is just that the "search function doesn't work" to those not in the know that its for subscribers only.

I too dislike the new buttons, kinda redunant. Maybe stick them on the front page/News page. 

While we are at it, I also dislike the continuation of clutter on the side bars. Now its "Gamers Online Now", "Friends Online" and "Twitter Updates"


----------



## weem (Apr 13, 2010)

Mark said:


> weem rocks!




Thanks Mark!



Nytmare said:


> Weem, you know that I love you, but I totally adblocked all of your buttons.




Haha, it's all good, I understand


----------



## nerfherder (Apr 13, 2010)

nerfherder said:


> I still have to scroll left & right to read posts
> 
> Actually, that's not strictly true - I can move the horizontal scroll bar to the middle and chop off half of the right and left panes.  It looks messy, but it's a viable workaround.




Ah, now that the left-hand panel has gone, the horizontal scrolling is much reduced.  Thanks.


----------



## Morrus (Apr 13, 2010)

Well, the buttons plus sidebar added together come to exactly 1057 pixels (I just counted 'em!). The smallest realistic resolution we could support is 1024 (although under 5% of EN World visitors have a resolution that low according to Google Analytics), so I need to lose another 33 pixels from somewhere.


----------



## weem (Apr 13, 2010)

Morrus said:


> Well, the buttons plus sidebar added together come to exactly 1057 pixels (I just counted 'em!). The smallest realistic resolution we could support is 1024 (although under 5% of EN World visitors have a resolution that low according to Google Analytics), so I need to lose another 33 pixels from somewhere.




Plus you need to (or may want to) account for the scrollbar on the right. As such, I recommend shooting for 1000 

If you have it at 1024 width, there will still be a horizontal scrollbar on every page (since every page requires that right/vertical scrollbar)


----------



## weem (Apr 13, 2010)

I saw you counted pixels earlier.

There is this great tool for Firefox called the Web Developer Extension I highly recommend you checkout (free install).

With it, you can mouse-over various elements too see their path, class names etc...







Under the "Outline" option (circled above) there is an option called "Outline Current Element" that will allow you to mouse around and highlight in red (as I did above, those you dont see my mouse) the element you are over. Plus, in the bar at the top, it will show you that element and the path to it in the code's structure. You can also, under the "Information" tab, turn on and off various bits of information such as size, id and class details and more.

Anyway, it's super handy when it comes to doing what you are doing


----------



## Morrus (Apr 13, 2010)

I think the way to do that, weem, is to try and reduce the width of some of the buttons but not the font size.  I guess that means deeper buttons with two lines of text.  I worry that'll push content down further, but I guess it's worth a try if you have the time?


----------



## Nifft (Apr 13, 2010)

weem said:


> I saw you counted pixels earlier.
> 
> There is this great tool for Firefox called the Web Developer Extension I highly recommend you checkout (free install).



 That's a cool addon.

The one I use these days is FireBug. It's invaluable for JavaScript stuff, as well as being very useful for all kinds of layout & CSS debugging.

Cheers, -- N


----------



## Theo R Cwithin (Apr 13, 2010)

This last rearrangement of the ad/stats columns is a _huge_ improvement, Russ.  It makes the site a lot easier to use.  Thanks a lot!


----------



## Nifft (Apr 13, 2010)

Morrus said:


> I think the way to do that, weem, is to try and reduce the width of some of the buttons but not the font size.  I guess that means deeper buttons with two lines of text.  I worry that'll push content down further, but I guess it's worth a try if you have the time?



 While we're reducing widths, would you guys mind taking 2-4 of the items from the menubar and putting them in one of the dropdown menus? I nominate Calendar, Pictures, Groups and Downloads.

With those moved you'll be able to hit 800px.

Thanks, -- N


----------



## Morrus (Apr 13, 2010)

Nifft said:


> While we're reducing widths, would you guys mind taking 2-4 of the items from the menubar and putting them in one of the dropdown menus? I nominate Calendar, Pictures, Groups and Downloads.
> 
> With those moved you'll be able to hit 800px.




The whole navigation issue is a conundrum.  I see those things as an important part of EN World's future.  The calendar I want to be a central hub for events, the pictures speak for themselves, and groups are an under-utilized resource which will combine well with the upcoming Gamers Seeking Gamers functionality for gaming group based "private forums".

The main issue we have with layout is that there is X amount of imformation one wants to present to the user (and the average user won't dig deeper into menus).  So how to do that elegantly?  Burying them kills them (trust me - I see the Google Analytics results of what people click on, and the moment you bury it just one layer below the initial presentation it drops to 5% of the traffic - it kills it it.)


----------



## weem (Apr 13, 2010)

Nifft said:


> That's a cool addon.
> 
> The one I use these days is FireBug. It's invaluable for JavaScript stuff, as well as being very useful for all kinds of layout & CSS debugging.
> 
> Cheers, -- N




Firebug is great, and I use it as well, but it can be a bit complicated for those not used to doing this kind of work, so I left it out.



Morrus said:


> I think the way to do that, weem, is to try and reduce the width of some of the buttons but not the font size.  I guess that means deeper buttons with two lines of text.  I worry that'll push content down further, but I guess it's worth a try if you have the time?




I will see about getting to those today/tonight


----------



## Nifft (Apr 13, 2010)

Morrus said:


> The whole navigation issue is a conundrum.  I see those things as an important part of EN World's future.  The calendar I want to be a central hub for events, the pictures speak for themselves, and groups are an under-utilized resource which will combine well with the upcoming Gamers Seeking Gamers functionality for gaming group based "private forums".
> 
> The main issue we have with layout is that there is X amount of imformation one wants to present to the user (and the average user won't dig deeper into menus).  So how to do that elegantly?  Burying them kills them (trust me - I see the Google Analytics results of what people click on, and the moment you bury it just one layer below the initial presentation it drops to 5% of the traffic - it kills it it.)



 The trouble there is that too much clutter effectively hides things just as well as actually removing them. Remember how "nobody can ever find" the Search menu?

Some companies -- notably Google -- have found success by going in the opposite direction, and making interfaces simpler. I like them for this.



weem said:


> Firebug is great, and I use it as well, but it can be a bit complicated for those not used to doing this kind of work, so I left it out.



 Ah, a very valid concern. Yeah, FireBug is rather technical.

Cheers, -- N


----------



## Morrus (Apr 13, 2010)

Nifft said:


> The trouble there is that too much clutter effectively hides things just as well as actually removing them. Remember how "nobody can ever find" the Search menu?




I remember it as much as "People can find it". 

[Edit - that was awfully long winded.  Shorter version - most people find the buttons; fewer people find the text menu links; even fewer people find the links in the dropdown menus.  Dropping a link from one category to the next lower reduces its chance of being found drastically.  We can track link usage with Google Analytics pretty accurately, so we know what's being clicked on and what isn't.]


----------



## weem (Apr 14, 2010)

Ok, here we go... first, a comparison followed by a link to the images...







I was able to keep them close in height (only 3px difference) by reducing the border thickness and padding inside the button while ALSO increasing the font size - so, hopefully these work better 

<edit> Of course, it could be even more narrow without the logos for WotBS and SF!, but I think the logos are cool/important, hehe. </edit>

<edit2> I re-upped the zip to include a second wotbs button without the "4e" on it incase you wanted to keep that neutral. It's small enough that you can't really read it well anyway, but I thought... just incase </edit2>

Download buttons here (zipped)


----------



## Nifft (Apr 14, 2010)

Morrus said:


> I remember it as much as "People can find it".
> 
> [Edit - that was awfully long winded.  Shorter version - most people find the buttons; fewer people find the text menu links; even fewer people find the links in the dropdown menus.  Dropping a link from one category to the next lower reduces its chance of being found drastically.  We can track link usage with Google Analytics pretty accurately, so we know what's being clicked on and what isn't.]



 Sure, I know that some people can find the dropdown. I'm a person, and I use it plenty. But if you have reason to believe one is better than the other, *just keep the one that's better*, be it the button or the dropdown. It doesn't really matter which, does it?


Regarding calendar, etc., it feels like some are there because you hope they will be useful secondary resources in the future. It's nice that you're developing secondary resources, but IMHO one ought to always have one's eye on the core resource, which for EN World is having great forums.

Don't dilute your core competency -- great forums -- for new toys. IMHO anything that makes the forums better is good, anything that detracts from them -- even mildly -- is bad. If you can fit in toys that don't detract, great! Toys are fun, and people like them. But never, ever sacrifice core functionality for toys.

It seems to me that WotC did this with their forums, and it drove a bunch of people away. CharOp now works mostly in the wiki, because the forums are lacking.



weem said:


> Ok, here we go... first, a comparison followed by a link to the images...
> 
> 
> 
> ...



 Looks good to me. Under 800px was the target, right?

Cheers, -- N


----------



## Nytmare (Apr 14, 2010)

weem said:


> Ok, here we go... first, a comparison followed by a link to the images...





Newsletter, Subscribe, and Search don't seem to pop as nicely as the others.  I'm also wondering if there's a good reason to fight to keep those logos clear and within the bounds of those buttons since you can't really see them at that size.

My suggestion would be to make all of the buttons that height, but all the same width.  I'd have the Burning Sky and Space Fight logos larger, and recognizable, but cropped by the edges of the buttons.

Is there a reason why the buttons are grouped like that instead of by news - subscriber content - games?

Hey look I maded a drawring!


----------



## Morrus (Apr 14, 2010)

That's exellent, weem!  We're down to about 850 pixels of graphics (plus scrollbar and a little spacing).  That's a good 200-px saving!


----------



## Sammael (Apr 14, 2010)

If you're open to suggestions regarding the UI (I can't stand the term "chrome"), I think one of the more confusing things is the fact that any given forum page has _three_ different navigation menus, which is confusing and makes the site look cluttered. As Nifft said upthread, "less is more" works.

The three different menus are:

1. Large graphical buttons on top (News, Forums, Subscribe Now!, Wiki, Groups, Blogs...)

2. Text-based menu located under the breadcrumb/user info panel (My Account, Forum Jump, Blogs, FAQ, Calendar...)

3. New button bar (Older news, Newsletter, Subscriber Content, Subscribe...)

In addition, if I'm actually reading a thread, each thread has its own top menu (Linkback, Thread Tools...)

This takes up entirely too much vertical real estate. Furthermore, it's unfocused, since the menu choices are scattered and divided (divisions are fine if done logically, which is not the case here).

My suggestion would be to 

A) Move the user info panel to the right-side of the top panel (where the logo is). 

B) Merge the graphical buttons and new buttons into a single menu. There is some redundancy (Subscribe, WotBS) and some less frequently used buttons can be "demoted" to text links (there is also redundancy between text links and the two menus - Gamers Seeking Gamers, Reviews, Downloads...).

C) Rearrange the text menu so that it corresponds to the graphical buttons and position it directly under the graphical buttons. For example, I would place Older News on this menu (as a regular text link), directly under the News button. Forum Jump goes under Forums, and so on.

D) Place a big search box where user info used to be (with a small button that opens advanced search).

This way, you should get a much more focused menu, with a lot more vertical real estate.

To show you what I mean (conceptually), here's a mockup (just to see the layout):


----------



## mudbunny (Apr 14, 2010)

I noticed that, depending on the forum, the button bar is different widths.

FREX, in General RPG discussion, it looks like this (and doesn't give me a horizontal scroll bar):





Whereas here in meta it looks like this (and does give me a horizontal scroll bar):


----------



## Nifft (Apr 14, 2010)

Ah, nice short dropdown bar! Thanks.

Obligatory UI complaint: the bright green "status" thing in the upper-right corner keeps making me check to see if I have a private message. I guess once enough people realize they have a "status", you can make it less bright green?

Cheers, -- N


----------



## Morrus (Apr 14, 2010)

Nifft said:


> Obligatory UI complaint: the bright green "status" thing in the upper-right corner




_Please_, gimme a rest! Just for a moment! 

I'm half tempted to just hand you the keys and tell you to make it how you want it. I'll sell it first, of course!

The bright colours help me see what I'm doing.  I'm not one fo those that can look at PHP code and visualise it.  I have to make each element look completely different so I can see what's affecting what.


----------



## Nytmare (Apr 14, 2010)

morrus said:


> _please_, gimme a rest! Just for a moment!




Also a pony, thank you!

[EDIT - How dare it not let me type my message out annoyingly in all caps!]


----------



## Nifft (Apr 14, 2010)

Morrus said:


> _Please_, gimme a rest! Just for a moment!
> 
> I'm half tempted to just hand you the keys and tell you to make it how you want it. I'll sell it first, of course!



 Cool. So you get a pile of cash, and I get the keys? I'd feel bad for the poor sucker who bought it though! 



Morrus said:


> The bright colours help me see what I'm doing.  I'm not one fo those that can look at PHP code and visualise it.  I have to make each element look completely different so I can see what's affecting what.



 On the one hand, the way it is now is pretty much exactly how I think it should look in the left-had column of the post.

On the other hand, the annoying bright green color may encourage brief status messages.

So it's not all bad. 

Cheers, -- N


----------

