Evolution RTS site redesigned

[Forboding Angel]

The Evolution RTS Site has been redesigned!

I finally got around to doing it. I have been meaning to do a full on redesign for quite some time now, but I didn't find time until this weekend to actually get started.

Good times

The old evo site had tons of very informative text that no one read and people seemed to have issues finding links to the most obvious things. This design pretty much puts at the forefront all the important things... That being:

News source
Community Forums
Screenshots (because people like pretty pictures and cba to read text)
Gameplay Vids

Those 4 things are all I care about wrt a new user seeing, plus, if they like the site look they'll probably be a tiny bit more inclined to look further (hopefully).

Not really looking for feedback, however, if you have some constructive ideas I'd be happy to hear them.

Speaking of pretty pictures...

[PicassoCT]

Is there a way to show Evo-Games going on atm on the site, and on click get them to dl evo?

[Evangelion]

I like that it's consistent with the fixed width spring homepage uses.

[NSA [Bot]]

all 3 yt videos on the site dont exist

[FLOZi]

I like that it's consistent with the fixed width spring homepage uses.

I like that people still think fixed width is somehow a bad thing.

Oh wait, no I don't.

[Forboding Angel]

It's fully responsive...

And flozi, fixed width is a very bad thing for a multitude of reasons.

[knorke]

page does not look like in screenshot. instead looks like
http://www.abload.de/img/bla249ujd.jpg
firefox 23.01

The page loads somewhat slow, about 2 seconds or so.
It does not display everything at once and be done, instead elements appear one by one and shuffle around until everything is loaded. For example all of the rotating banners are shown at once for a short moment. http://www.abload.de/img/blatwuyk.jpg
Zooming out shows there at at least 10 such banners, each one is > 0,5 megabyte so might slow explain load times.

All the facebook, digg,reddit buttons link to login pages.
It is also missing 9gag.

[Forboding Angel]

page does not look like in screenshot. instead looks like
http://www.abload.de/img/bla249ujd.jpg
firefox 23.01

Grrrr, fucking linux system fonts. I'll have to hard code the sizes. Thanks for the heads up. Bit hard to work with it since i don't have a buntu box, but I'll sort it out. Might want you to take another ss for me.

The page loads somewhat slow, about 2 seconds or so.
It display everything at once, instead elements appear one by one and shuffle around until everything is loaded. For example all of the rotating banners are shown at once for a short moment. http://www.abload.de/img/blatwuyk.jpg
Zooming out shows there at at least 10 such banners, each one is > 0,5 megabyte so might slow explain load times.

When I read this I was thinking to myself "The hell? I moved all those images to 60kb jpgs!", so I went and looked and lo and behold, I never actually switched those images over. Fuck me. Thanks for catching this!

These are the ones that it was supposed to be using, I just dicked it up accidentally:

All the facebook, digg,reddit buttons link to login pages.
It is also missing 9gag.

If you are logged in to those services, it will pull up the share as a post thing.

This is what it actually is:
https://plus.google.com/105436707847316 ... N3nLJyEenK

Was the 9gag part a joke?

Thanks for the great feedback!

[FLOZi]

It's fully responsive...

And flozi, fixed width is a very bad thing for a multitude of reasons.

Depends on how you define fixed width - 'fixed width' in the way evo site is (i.e. does not fill all of huge widescreen monitor width with unreadable text lines) is the best compromise possible.

[Forboding Angel]

It's fully responsive...

And flozi, fixed width is a very bad thing for a multitude of reasons.

Depends on how you define fixed width - 'fixed width' in the way evo site is (i.e. does not fill all of huge widescreen monitor width with unreadable text lines) is the best compromise possible.

Ohhhh, doah. Your terminology is a bit off. No wonder.

Fixed width is synonymous in web dev as "Inflexible Width". When you are using the term "Fixed Width" what you actually mean is "Fixed-Fluid Width".

So yeah, I'm with you on that one. At some point it becomes too wide for comfortable reading.

[Forboding Angel]

I believe that the layout issue that knorke was experiencing is fixed (thanks for the report).

According to my brand new Ubuntu vm, it all seems to be a-ok.

[dansan]

Fixed-Fluid

Great word

[Forboding Angel]

Hehe

Hey, do you have a way that I could display ladder rankings on the evo site? That would be really cool

Do you keep ladder rankings per game or is it only rankings overall?

[dansan]

The rankings are maintained separately for each game and match type (1v1, team, ffa, teamffa) by bibims SLDB and pulled via XMLRPC: https://github.com/Yaribz/SLDB/blob/master/XMLRPC#L94
You'll have to ask bibim to give you a login, white list your webservers IP and abide by his privacy rules. If coding for your website is not an option, PM me, and we'll figure something out.

[FLOZi]

Ohhhh, doah. Your terminology is a bit off. No wonder.

I think you'll find Evangelion's terminology was off; I had no doubt yours would be a responsive layout.

[knorke]

I believe that the layout issue that knorke was experiencing is fixed (thanks for the report).

Sorry to say but it still looks the same. The "all banners shortly show at once" also remains, so might be different problem than just file sizes.

Grrrr, fucking linux system fonts.

i use windows.

If you are logged in to those services, it will pull up the share as a post thing.

Wouldn't it be better if clicking the buttons just opens the corresponding google, facebook,... page?

Was the 9gag part a joke?

Yes.
I think in 5 years we will look at all those "social media buttons" the way we now look at those gifs every homepage had some years ago:

[Jools]

I never understood why someone would voluntarily want to sync their fb/g+ page to all possible untrusted pages on the internet. Users want to avoid doing that I think.

[Forboding Angel]

i use windows.

If you are using Chrome, Firefox, or Internet Explorer (10+, can't be fucked to deal with pre-IE10) in windows, it displays correctly. One would assume Opera would display correctly as well considering that it uses Blink now iirc.

You should check your javascript settings to see if you have something limited. fitvids.js is uses to dynamically scale the youtube player and everything is percentage based so that it is flexible (you can do this by setting a max-width in pixels, then an actual width of percentage. IE max-width 560px, width 100% << this element will scale up to 560px if it can, but below that it will be flexible).

The social media bar does not connect anything to anything, it simply supplies a shortcut to the sharing section of the service you might want to share it to. There is no connection made. It's exactly the same as you logging into G+ or facebook or reddit or whatever, and pasting a link into the share box. That is exactly what this does. Look at the code!

One guess as to what this does...

Code: Select all

<a href="http://www.facebook.com/sharer/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>" onclick="javascript:void window.open('http://www.facebook.com/sharer/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>','1373305744027','width=500,height=550,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" alt="Share on Facebook!">

Please tell me I don't need to explain this... I would think the URL would make it quite plain.

https://docs.google.com/file/d/0B25BbZx ... RtX0E/edit

That's the full code of that bar. You'll notice that the little pictures are simply links, nothing more. Javascript is used to open a window that conforms with the size of the sharing box of each service. I could have it open in a full page new tab, but that would be ugly.

This is what happens when I click on the G+ button for example:

[knorke]

ah, i found it breaks with zooming:
The margin betweens "too small zoom" and "too big zoom" is quite small. It needs 4 zoom steps (4 times pressing ctrl & +) to go from "breaks because too small zoom" to "breaks because too big zoom."

(pictures only vaguely to scale, freehanded cropped different areas of screenshots, but can see error i think)
On "big zoom" the youtube video suddendly plops over the whole width. (in previous zoom setting is normal, so just one zoom step breaks it)

Please tell me I don't need to explain this... I would think the URL would make it quite plain.

Relaying on users reading url in tooltip is bad design.


This button:
usually means "go to the facebook page."

For spreading there are these buttons:



and for "liking" there is the thumb-icon and so on.

But beside that, I do not think those links serve so useful purposes and
pages plastered in all those buttons feel bit awkward to me.

[Forboding Angel]

At this point it goes responsive like it is designed to do.


If you use zooming and it borks a site layout, that is kind of something you have to understand is your problem.

In this case, i can't do anything more about it, as the entity on the right is a fixed width item (because google engineers like to hardcode widths for no good reasons). The item on the left is flexible, but that doesn't help due to the way that browsers render pages.