Website

Re: Website

Postby svenskmand » 10 Mar 2011, 21:14

Ok, I will make a quick mock-up and see if you guys like it, and what you want changed.
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby MCMic » 11 Mar 2011, 09:06

Why do you want to change the website?
It seemed good to me.
User avatar
MCMic
 
Posts: 723
Joined: 05 Jan 2010, 17:40

Re: Website

Postby StefanP.MUC » 11 Mar 2011, 09:21

A plain MediaWiki installation is never ever a good website. Even with changed background. The players and newcomers are the one who has to use the website - not the devs that already know everthing. To be honest: If I didn't know about OD and found it somewhere, I'D be very much distracted by the website. The player does not want to search - he wants to find without searching.

The main problems currently are:
  • 100 different places (forum, git, svn, trac, not highly sturctured wiki, sourceforge project, ...)
  • everything of the above looks different
  • everything has it's standard look (only the wiki has some "ODish" style, but still the standard monobook layout)
  • we have no central News provider (some bits are on the wiki, some here in the forum, some only on the sf page)
  • no unified navigation bar (if you go to the sf page, you can't easily come back to the wiki, for example)
  • information currently is very widespread

To serve the players desires we need the following:
  • a global navigation -> user doesn't "leave" the page by going to another place
  • a global design, where possible (unique identification)
  • a nice to read central news provider (this can then be integrated into the FGD Planet -> more publicity)
  • a good table of content on every page (most important links so that everyone can find all important stuff)
  • removing of every unneeded buttons (admin, edit, history) - the user doesn't need it, it only distracts him
StefanP.MUC
 

Re: Website

Postby oln » 11 Mar 2011, 10:25

Also, from the feedback I have gotten, the current one is quite confusing.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: Website

Postby StefanP.MUC » 11 Mar 2011, 17:20

By the way, oln, is your test server reachable online? So that I can have a look at the website status?
StefanP.MUC
 

Re: Website

Postby oln » 12 Mar 2011, 00:07

Yeah, though the only thing on there is a wiki page with a wordpress header on it, which looks messed up because of css crashes.
This is how I did it, though I couldn't figure out how to remove the head tag and doctype that mediawiki puts out.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: Website

Postby StefanP.MUC » 12 Mar 2011, 11:55

StefanP.MUC
 

Re: Website

Postby svenskmand » 18 Mar 2011, 01:38

Impressions?
Attachments
WebsiteMockUp.png
Website mock-up
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby StefanP.MUC » 18 Mar 2011, 09:59

Looks good so far, much better than the current wiki. I really like the style of the navigation bar. After oln did set up the Wordpress+MediaWiki framework, I'll set up this design for it.
StefanP.MUC
 

Re: Website

Postby svenskmand » 19 Mar 2011, 00:08

I have finished the design and cut it up for you, see the 7z, I will make mouse-over/pressed effects for the links also, but you can do the lay-outing now.

Also I have not decided on text appearence yet, but I will probabbly just us the same color as on the wiki which is: e0e0e0ff (RGBA)

Stefan@ can you send me a PM with you Gmail or skype account so we can chat?
Attachments
Website.png
How it should look when it is done :)
Website.7z
(286.74 KiB) Downloaded 277 times
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby StefanP.MUC » 19 Mar 2011, 08:57

About the hover effect: No pictures, I'd say. Good hover effects can be done with css (colors, background, light, fading, even moving is no problem).
About the pictures sizes: can you make the background pictures smaller and cut out the non visible part of the header logo? 235 KB just for some background is way to much. I'll do the whole navigation bar (border, background, font) in pure css - ok, the navigation background maybe tiled, but with a 10x10 pixel png at max.

There's still a lot of people that don't have hugh bandwidth internet access or old browsers that render slowly.

Some sight view: http://openclonk.org/ for example, uses around ~50KB for the whole site design (including background, tiles, css; excluding content like screenshots of course) and it looks great.

I think we should target around 50KB, too (less is better, 75KB at max).

I don't have any instant messaging tools/accounts and I don't plan to use them
StefanP.MUC
 

Re: Website

Postby svenskmand » 19 Mar 2011, 09:24

I do not understand, I have alredy seperated the logo from the top background? You will not use the menu but do it from scratch in css? Are you sure you can make it look the same I have allot of gradient layers and blur effects?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby StefanP.MUC » 19 Mar 2011, 10:17

The logo file in the 7z file has the "mirroring" effect which isn't visible on the website at all (but I can cut it in half myself ;) ). The navigation can easily be tiled (with very small tiles like 5x5 pixels) without losing "details". Everything else on the navigation bar can be done in pure css.
If the navigation bar is 600 pixel wide then it doesn't need a 600 x 20 pixel wide background color that statistically looks the same over its length. Then a 5x5 pixel tile is enough.
The same holds for the content background and the border.

On website one should always stick to the "less is more" philosophy. Clean and structured content within a design that does not redirect the eyes user from the content to the design and that needs as few bandwidth and cpu time as possible.
StefanP.MUC
 

Re: Website

Postby svenskmand » 19 Mar 2011, 16:33

Ok I can remove the mirroring from the logo. But the menu will not look the same if you only use a small border of it, there are allot of gradients applied also, and the text has blurring effects. So in other words there is not much regularity in the menu bar which we can use to tile it :S

Do you not have gmail?

You can send me a mail when you have time to discuss it further then we can talk on IRC using freenode.

I have now changed the TopBackground to a png, which is then put on top of the SmallRocks.jpg, the total size is now 200 KiB, and I only think we can get it down to 150 KiB if we do some magic to the menu, which currently takes 55 KiB.

I just got and idea, since most browsers can render svg's we can just export the logo and menu to svg and use that instead, that will save us 35 KiB. Bringing the total size down to 165 KiB. Try and open the svg below in a browser and report back if you have trouble rendering it and which browser you use. Works for me on Firefox 4 latest nightly in the Mozilla PPA, in Chromium it works almost, the blur is not rendered on the text.
Attachments
Stuff2.svg
Test this in different browsers and report back here.
(64.66 KiB) Downloaded 295 times
Website.7z
(203.73 KiB) Downloaded 286 times
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby svenskmand » 20 Mar 2011, 17:26

If I change the parchment to 512x512 I can bring the total without menu and logo, down to 56 KiB :)
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby StefanP.MUC » 20 Mar 2011, 19:43

CSS can also do a lot of effects (fading, gradients, glowing, different borders). This saves a lot of space and rendering time and ensures that all browsers can display the site (especially below IE8 and FF3, the browsers can't handle SVG fully).
CSS is also rendered much faster than SVG (even on the most modern browsers, like FF4).

HTML4 + CSS2 + small background tiles is the way to go to ensure highest compatbility and shortest loading times.
Everything else would be just small fancy stuff that isn't compatible, isn't even noticed by most users and/or just raises the loading times.
StefanP.MUC
 

Re: Website

Postby svenskmand » 22 Mar 2011, 01:47

Any news on the website? Anything you need me to do?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby svenskmand » 25 Mar 2011, 16:23

Stefan@ So any news on this? Anything you need from me to get it working?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: Website

Postby StefanP.MUC » 25 Mar 2011, 16:56

Nope, we need to wait until the software part (Worpdress+MediaWiki integration) is done. I didn't managed to get it working until now, maybe oln did some progress on this .
StefanP.MUC
 

Re: Website

Postby oln » 27 Mar 2011, 15:39

I haven't really made any progress on this either. Couldn't find out how to have mediawiki not output the header or edit the header that gets output.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: Website

Postby StefanP.MUC » 27 Mar 2011, 17:18

I just found something that could be helpful. A WordPress plugin that displays MediaWiki content within WP:
http://wordpress.org/extend/plugins/wiki-embed/

Going to try out now.
StefanP.MUC
 

Re: Website

Postby oln » 27 Mar 2011, 17:34

The problem is that we want the whole mediawiki page to have the header, not to pull a mediawiki page into wordpress.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: Website

Postby StefanP.MUC » 27 Mar 2011, 17:38

If I understood the plugin options right (just installed it), it makes it possible to display everything from MediaWiki within Wordpress. But still need to test this.
StefanP.MUC
 

Re: Website

Postby oln » 27 Mar 2011, 18:04

What would be possible, is also to just manually use the html from the header of the CMS we will use and put it into the mediawiki header, if someone knows how one can edit it.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: Website

Postby StefanP.MUC » 27 Mar 2011, 18:53

Another way would be to configure the apps to not show their own headers and navigation bars and then add in the index files of Wordpress and Mediawiki:
{l Code}: {l Select All Code}
include("ourOwnHeader.php");
In our own css we could override the css of the app-themes (create "empty" themes and load our custom css in ourOurHeader.php).
StefanP.MUC
 

Who is online

Users browsing this forum: No registered users and 0 guests