Page 1 of 2

Evolution RTS site redesigned

Posted: 06 Jan 2014, 11:21
by 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 :mrgreen:

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

Image

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 13:12
by PicassoCT
Is there a way to show Evo-Games going on atm on the site, and on click get them to dl evo?

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 13:44
by Evangelion
I like that it's consistent with the fixed width spring homepage uses. :regret:

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 16:41
by NSA [Bot]
all 3 yt videos on the site dont exist

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 17:44
by FLOZi
Evangelion wrote:I like that it's consistent with the fixed width spring homepage uses. :regret:
I like that people still think fixed width is somehow a bad thing.

Oh wait, no I don't.

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 18:01
by Forboding Angel
It's fully responsive...

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

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 22:01
by 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.

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 22:20
by Forboding Angel
knorke wrote: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.
knorke wrote: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:
Image
knorke wrote: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!

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 22:24
by FLOZi
Forboding Angel wrote: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.

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 22:53
by Forboding Angel
FLOZi wrote:
Forboding Angel wrote: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.

Re: Evolution RTS site redesigned

Posted: 06 Jan 2014, 23:29
by 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.

Image

Image

Image

Re: Evolution RTS site redesigned

Posted: 07 Jan 2014, 10:45
by dansan
Forboding Angel wrote:Fixed-Fluid
Great word :mrgreen:

Re: Evolution RTS site redesigned

Posted: 07 Jan 2014, 11:24
by Forboding Angel
Hehe :mrgreen:

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?

Re: Evolution RTS site redesigned

Posted: 07 Jan 2014, 12:52
by 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.

Re: Evolution RTS site redesigned

Posted: 07 Jan 2014, 19:21
by FLOZi
Forboding Angel wrote: 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.

Re: Evolution RTS site redesigned

Posted: 08 Jan 2014, 08:15
by knorke
Forboding Angel wrote: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:
Image Image ImageImage

Re: Evolution RTS site redesigned

Posted: 08 Jan 2014, 09:59
by 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.

Image

Re: Evolution RTS site redesigned

Posted: 08 Jan 2014, 10:29
by Forboding Angel
knorke wrote: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:
Image

Re: Evolution RTS site redesigned

Posted: 08 Jan 2014, 12:03
by 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."
Image
(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:
Image usually means "go to the facebook page."

For spreading there are these buttons:
Image

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

Re: Evolution RTS site redesigned

Posted: 08 Jan 2014, 13:20
by Forboding Angel
Image

Image

Image

Image


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

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.