Main Page redesign

Sekoia · December 17, 2011, 03:50:09 AM

I'd like to suggest a mild redesign to the front page. The redesign enforces a fixed 20em width on the right column, which has mostly shorter or static content. The left (main) column gets the majority of the width, allowing it to better display the Popular Destinations (laid out as a 2x2 grid instead of 4 columns) and the News.

http://paragonwiki.com/wiki/User:Sekoia/Sandbox/Main_Page

Opinions?

taosin · December 17, 2011, 07:14:05 AM

Like! *two thumbs up*

I do notice that is the browser is a narrow width, and you drag to make it bigger, the right column gets bigger faster than the left. Design?

Also noting I try to do a new news article at least once a week, and timely, so folks know to come here first!

May I make the following suggestions here?
• Can we add the official "known Issues" page and add it to Official NCSoft links? And/or permanently in the recent patches section.
• May I update the Welcome To Paragon Wiki article (or someone) so that it presents City of Heros: Freedom, not CoV/CoH? And rerplace that graphic with something more relevant?
• Maybe we should quote NCSoft's own words about the wiki in there, from their newsletter? (discretely of course! :> )
• I would love to see a short hand reference to the level ranges in the Weekly Strike Targets, for example
"Operative Renault Strike Force (25+)" for at glance ease? That saves me and others clicking through to get it!
• At least on my browser the SMALL CAPS look for titles on that page does not look great, I'd prefer to see them just Bold normal case. They have enough emphasis due to the Boxes they are in not too need small caps. Again, my opinion only.

Just my two cents worth!

Aggelakis · December 17, 2011, 07:14:41 AM

I'm not sure I'm a fan of how far down the news gets pushed with the popular destinations in a 2x2 grid, but I can't figure out a layout that allows better placement without pushing something *else* "too far down". Tried the popular destinations on the right vertically and wtf/patches on the left above news, but that pushed about/help down too far. Tried a 3 column approach but that was too crammed in a small resolution and news was ridiculously long. Hmmm...

taosin · December 17, 2011, 07:23:08 AM

*tosses in an idle thought*

Maybe let news flow to two columns? I think (not sure) the Welcome and Helping sections could be shorter, and more clear, and in one box, as well. Will try a fangly version to see later (my Australian) tonight, anyway.

I think the news seems to be concise and clear as can be (more or less) and timely, and effective. Starting to notice more folks in game mentioning they heard stuff here not in the COH news area.... or referencing this to give other players the links to the relevant posts in COH Official. Frankly I would love that trend to continue. That's in keeping with the wiki's aims, yes? "First Port of Call"?

Aggelakis · December 17, 2011, 07:24:22 AM

Can't have news in two columns because then it would be a vertical layout and technically one column (since, um, it's currently two columns and if you stretch news out to two columns that means everything else is two columns, which makes it all basically one column...hurray circular logic)
"whatever on top"
"news"
"everything else and nobody looks at it"

Quote from: taosin on December 17, 2011, 07:23:08 AM
I think the news seems to be concise and clear as can be (more or less) and timely, and effective.

My reference to news being ridiculously long was DIRECTLY TIED to my comment on making it a three-column styling. With three columns, news was really skinny which meant that since the blurbs are somewhat long, it was about twice the length as the other two columns.

taosin · December 17, 2011, 07:37:59 AM

Oh! Misunderstanding here, sorry.

No I meant maintain the two (equal) columns, but have part of the second column the flow on of news? Really not sure if this is technically possible, however, am thinking from a page production software angle not a mediawiki angle (which I do not know the cpababilities of).

So News as is (first column)
then the top of the second column titled (smaller in the box) "new, continued" (if present)
then below that the welcome and helping out

And yes, indeed, "everything else and nobody looks at it". Not suggesting vast changes now, but my theory is if folks aren't looking at something of a front page of a site like this wiki, then what isn't being looked at needs to be thought about, over time, and evolved with feedback. Slow but consistently?

Sekoia · December 17, 2011, 07:52:38 AM

Quote from: taosin on December 17, 2011, 07:14:05 AM
I do notice that is the browser is a narrow width, and you drag to make it bigger, the right column gets bigger faster than the left. Design?

Yep, that's by design. The right column doesn't need to get any wider. The left column is more important and thus giving it the extra width is better. (IMO)

I do notice that at lower resolutions, it actually goes the other way -- the left is wider. I'll take a look to see if I can fix that.

Quote from: taosin on December 17, 2011, 07:14:05 AM
May I update the Welcome To Paragon Wiki article (or someone) so that it presents City of Heros: Freedom, not CoV/CoH? And rerplace that graphic with something more relevant?

That article is at http://paragonwiki.com/wiki/Paragon_Wiki:About -- I certainly am not opposed to it being updated.

Quote from: taosin on December 17, 2011, 07:14:05 AM
I would love to see a short hand reference to the level ranges in the Weekly Strike Targets, for example
"Operative Renault Strike Force (25+)" for at glance ease? That saves me and others clicking through to get it!

That can be done at http://paragonwiki.com/wiki/Weekly_Strike_Target -- as far as I'm concerned, feel free to make that change.

Quote from: taosin on December 17, 2011, 07:14:05 AM
At least on my browser the SMALL CAPS look for titles on that page does not look great, I'd prefer to see them just Bold normal case. They have enough emphasis due to the Boxes they are in not too need small caps. Again, my opinion only.

I think they look a bit funny, too. I was primarily keeping them to match style with the current layout.

Quote from: Aggelakis on December 17, 2011, 07:14:41 AM
I'm not sure I'm a fan of how far down the news gets pushed with the popular destinations in a 2x2 grid, but I can't figure out a layout that allows better placement without pushing something *else* "too far down". Tried the popular destinations on the right vertically and wtf/patches on the left above news, but that pushed about/help down too far. Tried a 3 column approach but that was too crammed in a small resolution and news was ridiculously long. Hmmm...

Even on a smaller resolution, the headline should still be visible at page load

I took a quick look at other gaming wikis and on many (such as http://www.wowwiki.com/Portal:Main) the news isn't immediately visible even on very high resolutions. It's waaaay down.

The fact of the matter is, we only have so much room, especially on lower resolution screens. Something has to get pushed down.

Maybe there's a better way to format the Popular Destinations section though. It has a lot of empty/wasted space. I'll play around with it some more.

Sekoia · December 17, 2011, 10:16:44 AM

Quote from: Sekoia on December 17, 2011, 07:52:38 AM
Yep, that's by design. The right column doesn't need to get any wider. The left column is more important and thus giving it the extra width is better. (IMO)

I do notice that at lower resolutions, it actually goes the other way -- the left is wider. I'll take a look to see if I can fix that.

I wasn't able to figure out a solution to this.

However, I did make the following changes:

- Headings are no longer in small caps.
- Eliminated some white space around headings.
- Reworked the layout and styling for Popular Destinations. It's now much more compact. I included a font size reduction; however, even without that, it'd be smaller than previously (I think).

The news headlines should be a bit closer to the top. I did some screen resolution checks to compare my revisions versus the current main page. On lower resolutions, the news headline is more likely to get bumped down. However, on those resolutions, neither version looks good; it's just too cramped. So I'm not inclined to worry about that.

The new version should work quite well at resolutions of 1024x768 or higher. At 800x600, the new version suffers compared to the first primarily because the right column is too wide, but both are still usable. At 640x480, both versions are garbage. (Really, at 800x600 and lower, we shouldn't be using a two column layout at all if we want it to actually look good.)

eabrace · December 17, 2011, 04:20:17 PM

Looks pretty good to me. Seems a bit better organized than the current main page.

Aggelakis · December 17, 2011, 06:24:13 PM

Okay, I made a little tweak on the layout (sorry for hijacking your userpage Sekoia, but it's easily undoable :p ) to make the popular destinations one row again. Due to the smaller font, it's preserved down to pretty low resolutions (down to 1024x768) without looking like total garbage though under that the amount of line-breaking is kind of silly.

This reduces the amount of wasted whitespace in the popular destinations box by A LOT.

To reduce the amount of line-breaking, we could get rid of the dark header, which removes the extra layer of cell-padding around the table itself. (example)

Sekoia · December 17, 2011, 06:26:04 PM

Okay, I'm sorry Agge, but I HATE the imbalanced columns. I frankly think it looks horrible. I'd sooner remove the fourth column from that section that keep it in with it being dinky like that. Maybe it makes it look better on smaller resolutions but on larger resolutions it just looks flat out absurd. I am 100% against using that kind of design.

EDIT: In fact, let me add that the current Main Page's imbalanced columns was what prompted me to do the redesign. I figured a redesign would be the best way to eliminate the alleged "need" for them.

Aggelakis · December 17, 2011, 06:34:32 PM

Returned to 25% though that makes for a bunch of wasted space in that column. But whatever.

Sekoia · December 17, 2011, 06:56:03 PM

I removed the header on Popular Destinations and tweaked the spacing some so that its cells fit in with the others. That does indeed save a lot of space.

I also made all heading font sizes 100% instead of 120%. No need for them to be bigger (but easily changed back if someone thinks they must be).

To reclaim the wasted space, I added a second column of bullets in the fourth Popular Destination cell. Can you think of five more short-title topics that we could add?

EDIT: I also fixed the Popular Destination cells so that if they aren't all the same height, their borders still fill their vertical space.

Sekoia · December 17, 2011, 07:15:51 PM

Quote from: Sekoia on December 17, 2011, 06:56:03 PM
To reclaim the wasted space, I added a second column of bullets in the fourth Popular Destination cell. Can you think of five more short-title topics that we could add?

Nevermind, it doesn't work on MSIE, I'm reverting it.

Sekoia · December 17, 2011, 07:38:14 PM

Okay, new idea. I made whitespace non-wrapping in the popular destination boxes. This means that at higher resolutions, each box is 25%. If the resolution drops low enough that one of the boxes would wrap, it just stops shrinking and the others balance the loss among them.

The flip side to this is that it places an effective minimum width on each column -- which places an effective minimum width on the main right column. The left column also has an effective minimum enforced by the image it uses in the Welcome to Paragon Wiki section. Thus, the overall minimum width is (on my browser) 876px. The minimum for the News section is 606px (on my browser).

This means that browsers on screen resolutions with widths of 800 or lower will have to use horizontal scrolling to see everything. However, even at the lowest resolutions (640x480), each section is still wide enough to be read if you scroll to it. I think this is preferable to the previous situation where things got shrunk down to the point where each column was incredibly small with wrapping occurring after every couple of words.

taosin · December 17, 2011, 11:47:36 PM

Hey Sek,

I can't put my finger on it (yet) but not very liking that last redesign. Am going to sit on it for two days and try lots of things in four different browsers on four machines and try and give some thoughtful feedback

WanderingAries · December 18, 2011, 01:47:38 AM

Hahahahaha, I went to check this out (haven't been on wiki in a while) and read "Statesman Dead, ....-2012" and was about to ask how sad it was to have a (founding?) Dev pass away. :-p

Sekoia · December 20, 2011, 09:05:08 PM

Any further feedback?

Agge -- Are you happier with the solution I found for the popular destinations?

Taosin -- Did you figure out what you disliked about the later design versus earlier designs?

Aggelakis · December 20, 2011, 10:21:53 PM

Yes, I am happy with the redesign. Removing the dark header bar and reducing the text size makes for enough room that partial-width single row isn't unnecessarily squished. There isn't so much wasted space and nothing else seems to be pushed too far down.

I do agree with Taosin's suggestion of About/Help getting rewritten, shortened, and merged, but don't have any clever suggestions at the moment.

Sekoia · December 21, 2011, 12:19:39 AM

I made one more change. I noticed that the News section had a different color scheme for its heading bar than everything else. I tried changing just it to match the rest... and it was fugly. So instead, I changed everything else to match it... and now I think it looks much better.

I also agree that About/Help could use some work. I'm going to suggest we make that a separate project though, as it applies equally to the current design and my redesign. If someone wants to work on that, any of the layouts can get updated to incorporate that change.