MegaGlest Website

[ultifd]

I guess it looks good/it's ok... not sure. 
Oh, TeaR is the one that is working on it? I see... so TeaR would rather just work on the design and not play Glest... I think we should try to convince TeaR again later... 

[Cygal]

Current state:

There's a high contrast between the header and the rest, TeaR doesn't know really know how to handle that. He'll be off for three days, so now's the time to express your feelings about this.

[Psychedelic_hands]

Current state:

There's a high contrast between the header and the rest, TeaR doesn't know really know how to handle that. He'll be off for three days, so now's the time to express your feelings about this.

I like this lots Remember to add some brown though!
 I think it needs a bit more war orientated decor. Maybe a few units somewhere? a castle in the background of the header? Maybe?

[Omega]

Looks like a great idea!! I'd be interested in seeing the dull, brown boxes be replaced with Glest button style boxes.

[asdfghjkl80]

Looks like a great idea!! I'd be interested in seeing the dull, brown boxes be replaced with Glest button style boxes.

i agree looking at the site i would want to play vanilla more or at least look at its site more because of some of the dullness on that page.

[ultifd]

Well... it's still WIP... 

[TeaR]

Yep, still a wip
For the brown boxes, it was a good idea. But the texture didn't fit so I took something else.
Still missing the war related things. Actually, getting a free image with the correct view for a castle is quite hard. It goes the same way for units (even if the castle idea is better, imo). I may try to get some from the game directly if I manage to get some.
Oh, and for the content on other pages, I'll try to add some paper texture if I find a way to make it look correct.
Still taking comments and advice

>Click<

[claymore]

Wow, it's really taking shape now.

Nice work so far! 

[titi]

Fantastic work! I cannot say anything more!
I think we need a good trailer now ...

[Omega]

Wow! Looks fantastic, TeaR! Just one question: is this an image template to base web design on, or is this the actual web design?

[TeaR]

Thanks

I'm not sure I understand what you mean but for now it's only an image which will be an horror to adapt in html/css I have a few things to change to make it... Ok to code. ^^' Mainly the gradients.
 Or maybe it wasnt what you mean at all ^^'

For the trailer, when I was googling to learn a bit about MG univers', I found one pretty interesting. I'll try to find it again.
edit: overhere : http://video.golem.de/games/3455/megaglest-3.3.5-impressionen.html

[ultifd]

Looks great.  Nice work 

For the trailer, when I was googling to learn a bit about MG univers', I found one pretty interesting. I'll try to find it again.

You did? Really? If you find it, please share the link...that's kinda weird though, I never remembered anything like that...
Hmm...reminds me of Glest's story...

[TeaR]

I was editing ^^"
So here you go :
http://video.golem.de/games/3455/megaglest-3.3.5-impressionen.html

Well it's not a "trailer" but it shows the game in a better way than screenshots, I think.

Btw, I was looking for Glest's/Megaglest's story. Thanks.

[Cygal]

Wow! Looks fantastic, TeaR! Just one question: is this an image template to base web design on, or is this the actual web design?

It's just an image for now. I'm working on the html code.

[Cygal]

Here's the url of the nearly-finished web site.

It works fine on every browser I tested, except for IE 6 (even my phone!). It's valid XHTML and CSS. The only problem it has is that it uses a lot of images, but it's still usable when the images are not yet loaded. Concerning the IE6 bug, it's a known bug that I can try to a fix using css hacks if you guys think IE6 is still used. I needed to put a min height on the center div, otherwise for small content the wood panel stops before. Last thing, three images from DeviantArt were used, we'll need to put a link to the profiles somewhere on the site.

What's missing (my work):

• code cleanup + last comments
• remove last french bits
• adapt to IE6? (box model + png transparency)
• put images in css
• put the other modules (something else than "news")

What's missing (your work!):

• text content, other pages
• trailer/images

If something looks wrong on your browser, please show me a screenshot! Look at the bottom of the screen and the horizontal menu.

[Omega]

Wow, looks fantastic Cygal, nice job! A few comments:

-The main header background on the left and right cuts off slightly on the side. A smoother transition to the background color will look a bit nicer.
-For IE6 transparency, this is an IE 6 bug (thus why nobody uses IE6 anymore). While I personally wouldn't consider IE6 to be a priority at all, this is fixable with a CSS hack. Google can explain better than I could.
-Mouse over JS for the buttons would look nice on the navigational bar. Perhaps giving the "button" a slight glow or a different text color when hovering over it.

Other than that, it looks good, well done, and good use of div sections to format the page. Validates perfectly, and I think that we should put valid XHTML and CSS buttons at the bottom somewhere too.

As for the trailer/screenshots, I propose that we use a screenshot slider as I previously mentioned. This will have the advantage of performance, and would be more lightweight, easy to maintain, simpler to keep up-to-date, and more user friendly. Trailers would just delay this, and getting a half decent trailer for a webpage that doesn't suffer quality issues may be a bit of a pain. We can always convert to a trailer in the future, after such a thing would be made, but in the meantime, we already have screenshots available.

[ultifd]

Looks good. 

http://video.golem.de/games/3455/megaglest-3.3.5-impressionen.html
Well it's not a "trailer" but it shows the game in a better way than screenshots, I think.

Oh yeah, I remember that video...I guess something like that would be good for now, although probably a real trailer would be best.

[Gabbe]

I still have some files for the trailer im making, but that is for GAE + MG..

[Cygal]

Omega, thanks for your comments! I'll try to work on that. Concerning the valid xhtml and css buttons, I'm not sure they are that relevant (and beautiful), plus people who don't know what that mean won't be impressed. Concerning the menu, yeah, it's too "light", I'll try to fix this. The default font is in fact bold, and it's ugly on TeaR's browser, probably on others too, I'll work on this, and this will help to give some focus to the menu.

tomreyn, I altered the links of the horizontal menu, I thought it would look better and be more informative while being less cluttered, but you can of course disagree!

I won't be able to work on this today though, maybe tomorrow.

Thanks to everyone for their comments!

[John.d.h]

Concerning the valid xhtml and css buttons, I'm not sure they are that relevant (and beautiful), plus people who don't know what that mean won't be impressed.

I think it's good to have them somewhere on the site, if only to encourage validation.  If people see all of their favorite sites using valid markup, then hopefully that will encourage them to do the same (hurray for standards compliance!).  The buttons could always be put somewhere less intrusive, like on the "about" page instead of the index.

[tomreyn]

This design looks really good - very nice.

tomreyn, I altered the links of the horizontal menu, I thought it would look better and be more informative while being less cluttered, but you can of course disagree!

Since the main page content is likely going to be different/less than what I originally had in mind, it's definitely necessary to modify the menu.

I would suggest these menu entries for now:
home about forums chat download mods development links

Depending on what is displayed in the news sections left and right to the main content area the menu will need to change (to not duplicate), though. So I guess we need titi to state what should be in those boxes, and then we can come up with the final main menu. My earlier suggestions on what to put on those boxes could serve as a template here.

About the XHTML + CSS validation buttons, I personally think that the fact that a website is compatible to web standards is simply something which can be expected of anyone trying to make a serious website nowadays. As such, pointing out that a website is compatible to web standards does not seem necessary to me, it's rather an expectable property. Would you, when selling your car, point out that it comes with bumper bars?

[Cygal]

Then let's simply put it somewhere in some page of the site, where we'll mention the image sources (rocks, wood, trees).

Concerning your menu proposal, I have two concerns. First, "about" and "links" don't really make sense to me: I cannot know what they will be talking about before clicking on them. I also think we should limit to six menu items: individual items are quite small already..

There is also a real need to come up with nice text that presents well the game. "MG is a fork of Glest" is not enough. You need to describe that it's a real time strategy game, describe nice features in detail, etc. Of course, it should mention Glest, but it should not only do that. Anyway, that's work for native english speakers.

[Cygal]

The html template should be finished by now. It's simply XHTML, CSS, and a lot of images; but it should hopefully easy to adapt this to a CMS like simplecms. Server-side includes would help to not repeat the top and bottom of the page.

Last modifications

I've added an "About" link in the menu. "Links" is now a "module" (on the right). There's some text on the page but it's partly wrong, partly non-sense, and images are just here as placeholders but don't really have any meaning.

Technical details

I'm adding a few notes here that I'll copy in a DOC present in the template archive (zip). The goal is to let other developers understand and modify the template if needed.

I did try to keep clean html and use proper css. There are a few empty divs that helped me to put background images, but it should otherwise be simple to understand. I followed an organisaton similar to HTML5 (and most websites), that is:

• a header containing only the logo, but which could also contain language selection
• a central content containing an article
• side "modules" (<aside> in HTML5) giving additional info
• and a footer, containing the logos and a few links

The header and footer images are larger than 1024px, but text and info are contained in 1024px. I had to cut the header and footer in three: left, content, and right. If the screen size is 1024px, left and right won't show up. On larger displays, it will provide a nice transition to the background. This is what the empty divs in the header and footer are for.

The content background is mostly a wood pane repeating itself: the content can be as long as you want.

The menus are a bit more tricky. There are three images, "up", "repeat" and "down". The content has "repeat" as a background-image, but up and down are in their own divs. I needed the content to go in those divs, so content has negative top and bottom margins. The title of each module is an image centered accordingly in the CSS. There are a few other title images in media/titles/ (newsletter, social web) if you want to add them, but TeaR can also provide new ones if needed.

Finally, the footer has to be lower than side modules and content, and the content's background need to repeat itself until the footer. I could put a min-height but it's not optimal since the result will vary depending on browsers (especially mobile phones). Instead, I chose to add another empty div at the end of the content and ask that every floating content (left and right) should be cleared.

Possible improvements

• Performance! Performance is not so good currently. Inlining small images in the CSS, gzipping the content, and adding Cache directives would greatly improve user experience (really.) See Google Chrome's "Audits" for this.
• A more compact version for mobiles would be great (only few images, no need to zoom to access content). A lot of persons actually access to the web with their phones, especially when and if it's slashdotted.

What happens now?

Anyone with proper access can put it on the website! Feel free to edit anything and/or contact me if needed. Here's the template archive (zip). And hm, let's say it's GPL.

Credit

Images:
*UmbraDeNoapte : Stock 31 and Stock 131
=cloaks : Wooden Tiles Texture Pack

Design: TeaR

Thanks a lot for letting me and TeaR (strangers to Glest and MG communities) do this, it has been quite fun.

edit: fixed credit links.

[Omega]

Wow, great job! The code looks good to me, no errors or faults that I can find, and neater than I usually end up with (but I always run it through HTML Tidy to make it nice and pretty). At any rate, if nobody else can, I can add the content, provided I am told what to do, though it wouldn't be hard for someone with minimal HTML experience to do so. I could add an image transition though...

[Cygal]

For the menu? Sure. There are a few suggestions that I was not able to realize, such as the menu transitions (did not know how to make it glow), the castle in the header (we did not find an image), or the screenshot JS slideshow (don't really know where to find the best screenshots).

Anyway, feel free to add those!

Concerning the content, if someone comes up with content in something else than HTML, I can always convert it.

edit: improved an image which had a weird transition, updated website + archive.