Intermediate Tick Tock thingy

[frvge]

Hi all,

It's been a long time since the last real media update. We're working on some stuff, but we had some set-backs in our planning (mostly because more stuff was continuously added...) and it's time to release something to shorten the wait for the real thing.

Without much further blahblah, I present thee:

About game websites and how to optimize them

Hi all!
As you might have guessed, this small article is about the current website of Project Stealth, www.projectstealthgame.com .

Overview:
A short history of the website
Back in the Summer of 2008 we launched the Teaser site. The Teaser site had one goal: show off our technology and art. The design was simple but effective: The PS logo at the top and a video player with borders in the center with the protagonists, the Spy and Merc, looking at eachother from each side. Two links at the bottom were added to be able to switch between the two movies. Finally, a link to the forums for helping with the discussion about PS and also for getting new possible developers to join us.

Before the Teaser site was launched, I (frvge) already had some concepts for the real website. During my holiday I created a very, very rough outline of the current website. I came up with the following part of a so-called Requirements Document.

Requirements Document Project Stealth Site

Functional:
Stage 1:
There must be information/media about the gameplay
There must be information/media about the characters
There must be information/media about the gadgets and vision mode
There must be information/media about the maps
There must be a download-section for audiovisual media
There must be a news-section with RSS and Digg-fucntionality
There must be a poll which changes weekly or bi-weekly
There must be a 'who-is-online' tracker
There must be a forum
There must be a press option with “in the press” and “Press releases”
There may be team-information and crediting
There must be a webkit for fansites
There may be a listing of fansites, which is updated weekly
There must be a customized 404 page

Stage 2:
[not shown]

Stage 3:
[not shown]

Non-functional

Speed:
The initial page must load within 2.0 seconds on frvge's connection, uncached.
The initial page must load within 0.9 seconds on frvge's connection, cached
Subsequent pages must load with AJAX, within 0.8 seconds, unless there's a load of audiovisual media.
Pages must be pre-fetched based on gathered usage statistics
A database connection must only be opened when it's needed.
The database used will be mysqli or innodb
Pages must be cached with Smarty
The instructions from “High Performance Web Sites” must be followed
Images and media must be, based on IP or preferences, downloaded from Zed's server.

Security:
[not shown]

Reliability:
The database must be backed-up daily
The database may be replicated to Zed's server as fallback
The files must be backupped weekly.
One person should always have all the files as a backup.
There must be website monitoring by SMS and email

Maintainability:
There might be modules for polls etc
ADODB or an externded version of it must be used as database abstraction layer
Scriptaculous and Prototype must be used, or a derivative like Protoculous

Readability
Code must be PHP5 with support for PHP6, OOP-based
There must be comments before each function in JavaDoc/PHPDoc format, describing functionality, variables, specific comments, version information, callbacks, exceptions
Code must be checked by a peer

Other:
Pages and URLs should be optimized for search-engines
There may be ads or links

For clarity: the points of stage 2 and stage 3 and security have been taken out, because we're still working on them. As time progressed some things were removed or changed: the webkit for fansite was scrapped, as well as some non-functional requirements. However, most of the original requirements of the first stage have been met.

The original site that was made during my holiday was mostly a proof-of-concept. It had an all-AJAX menu using innerHTML-property changes. It was programmed to be fast and flexible and was based on the Smarty templating engine for PHP. I also used the caching mechanism built into Smarty to get a better performance. An interesting feature was a time-tracker that relied on sessions. It could track the visitor's path through the website along with how many seconds they stayed at a certain page. This was done in response to the pre-loading requirement in the requirement document. I got it working pretty well but there were unexplainable bugs, be it in the webserver session-handling code or my own code, which made it hard to get right. Also included was  database-failure fall-back code to prevent the site from not working when a dedicated database server is down. I decided to call it a day, because the holiday was almost over.
My artistic skills are visually not really pleasing and keeping the primary color based layout was not good for the eyes. An initial rough design finally led to the next chapter.



Theory of design (frontpage)
The first page of a website that a new visitor sees is commonly called the landing page. Websites can have multiple versions, depending on marketing schemes, but that was not needed in our case. From my experience with analyzing website layouts combined with my Human-Computer Interaction course at university and the requirements document, I set up the three important points for the landings page. These are:

Name recognition
Eye catcher
Quick informer of the main points
Quick portal to more (detailed) information

Name recognition:
Knowing our game's name is obviously very important. It's seen in the domain name and the logo.

Eye catcher:
Humans perception and the subsequent decision of whether it is 'good' is done within a matter of seconds. This is easiest to see in the behaviour of zapping between TV channels. The human mind is an expert at visual recognition and so creating a visually rich landing page was important.

The logo is commonly found at the top, along with a menu bar. I did not want to have a typical vertical menu because that's more suited for sites that are mostly text-driven. Also, a horizontal menu would provide some horizontal lines, splitting up the sensory load and making the site easier on the eyes. I decided to split the layout into top, middle and bottom parts, with the middle part being the largest. The middle part would consist only of rich visual media. In the final layout it was implemented as two fading images and a video player. The bottom part was split into three different sections. The fixed-with layout made it easy to split: we did not have to take extremely wide-screen monitors into account, which would mess up any 'fluid' layout that stretches depending on the resolution.

Quick informer of the main points:
Project Stealth is a game, has near-future high tech characters, has good graphics, is active and is built on the latest Unreal Engine. This long sentence is what we wanted to make clear to the visitor in a matter of seconds. In order to achieve this, we used many visual media and semi-subconcious things. For instance, the game-part is reflected by the domain name and the 'Game Info' part of the menu; the high-tech characters and graphics are shown in the fading images; the state of PS is shown in the dates at the bottom in the Downloads and News section and a, hopefully engaging, poll question asking for the input of the visitor.

Quick portal to more (detailed) information:
With the preference for visual media in mind, I decided to put the most parts of the subjects that are important for the visitor who is actually interested in PS in the small menu bar, because he or she will eventually read the menu because he or she has found the visual media interesting enough to warrant a more thorough look at the sites lesser graphically interesting parts. If you have a look at the menu, there's no sign of a 'news' link. The reason for this is that someone who is interested will start viewing the page from the top and then moves down in an F-shape. He or she should not need to scroll to watch the important part of the page. On basically all resolutions, the headings of the bottom parts will be in the unconcious mind. The mental link between 'media' in the menu bar and 'Latest Downloads & Media' serves as an extra security that the visitor knows that there's more media (= visual = pleasing) in other parts of the site. The Latest News section is only shown at the bottom because an interested visitor will quickly scan through the low-height landings page and the subconcious should pick it up.

Finally, the main sections that are important, but not important enough to get the attention of the visitor for those first few important seconds of a visit, are shown in the menu bar: home, game info, media, maps, characters on the left and, because they do not directly relate to the game, community and contact on the right. The first five are an example of the famous “seven plus or minus two”-rule which states that the mind processes parts of info that is grouped in those numbers best. This is the reason why most editors have lines between different groups of controls or options. Grouping is a powerful concept and I used it to differentiate between the game and the subjects surrounding the game.

Creating the design (frontpage)
The design of the frontpage was made in a few iterations by Tal/Lethalchicken, who unfortunately left, so I am unable to get his thought-process and ups and downs on the actual visuals. Some details I can remember are the color scheme and overall shape of the menu bar which he derived from the logo.

Theory of design (informational pages)
The informational part of the website would need to accomodate a lot more text, but would, for consistency, also be fairly the same as other informational pages. The original proof-of-concept menu bar created in my holiday had multiple levels of menus that would slide out to present the new options. In the end, the creative idea of goodkebab was chosen because collapsing menus detract from a clean experience. The hard part was how to switch the content of the page and the sidebar. Goodkebab suggested a slide-up 'animation,' which was later implemented for the sidebar. The content area could include images and the slide-up animation looked funny, so we went with a fade effect.

Creating the design (informational pages)
The original idea of the design was done by goodkebab in about four iterations. I wasn't able to get his opinion for this piece, but if you're interested, please contact me.

Coding the website
The website is coded in PHP as the back-end language backed with SQL. The front-end is done in xHTML, CSS and JavaScript. These are common languages so nothing special there. However, the implementation is a bit better than most other sites.

For example, the xHTML code, which is used to tell the browser what the content of the site is, is really clean: there are no comments, no redundant inline styles and everything is optimized for users with a visual disability, which almost by definition makes it very well suited for search-engines.

The CSS, a language meant for visual styling, is written with brevity in mind. The combination of proper xHTML and using the cascading properties of CSS to the max allows me to keep the file size small.

JavaScript is the engine behind any interactive website that runs on the visitor's computer. The scripting language is both the worst web programming language and the best, mostly due to its complexity with regards to scoping and the weird type of prototypal inheritance. Most browsers have bugs with their internal data collection of the contents of the page, called the DOM. I use the Prototype library for manipulating the DOM and Scriptaculous for cool visual effects.

Coding the informational pages
The informational pages required a slightly different set-up. It had to have some animation to cover up the time needed to load the contents from the server. I experimented with a couple of different effects and in the end the current version was the best. The Screenshots/Renders page has a so-called Lightbox popup window. There are many version of lightboxes, each with its own strengths and weaknesses. For work I had been looking at the various options and I decided on using the one that fit my requirements best. The Video page was a bit of a problem tho: originally it was planned to load the videos in a lightbox using JWPlayer as the video player. Unfortunately, I was unable to get it to work within the timeframe I had. Everything had to be implemented fast, because of the sudden press exposure because of our GamesCom attendance. As a last resort, I opted for a direct link to the video file. An ugly way, but it did the job.

Statistics and optimization
Measuring popularity is important for mostly community-driven websites. There are many indicators that are able to tell when/if you need to release something, or work on your texts, or need to provide some more added-value to the site. Our webserver software gathered some basic information but did not suffice. Google Analytics was not an option, because it required a round-trip to Google's servers at page-load which could stall the load of the page and that was something I wanted to avoid at all costs.

Then came Asynchronous Google Analytics. Two days after it was announced, I finally implemented Google Analytics' asynchronous version. Now we have the benefits of powerful analytical software without the drawbacks. Over time our popularity has fluctuated, but overall, we're doing pretty well on time spent on-site and so on, which is really nice to see.

Google Webmaster shows we're number 1 on many Project Stealth-related search terms. Other terms we rank pretty high for are 'gamescom' (14), 'stealth mod' (16), and 'cool pr' (12). Most PS-related terms are at position of 5 or better.

I'm in the progress of rewriting the CSS to use a fairly new train of thought, called Object Oriented CSS. This should minimize the number of lines needed and that means it loads faster. It is also minified (squatched together) and gzipped to get that extra speedboost.

Prototype and Scriptaculous are the JavaScript frameworks I used a lot in the past, but with more experience come new insights. The new Project Stealth sites will use the popular jQuery framework because it's a lot faster than the previously mentioned ones. All the scripts will be minifed by the Google Compiler, a tool to greatly reduce JavaScript code's file size.

The future
We've been recruiting a lot for a new webdesigner. Various people came and went. Currently our 2D artist tigaer is working on some new stuff. What will it be? I don't want to spoil it just yet, but I think it will benefit the overall community feeling while also adding a more competitive element to Project Stealth. Stay tuned for more!

frvge
Producer/Webdeveloper
Project Stealth
www.projectstealthgame.com

I'll try to get you a screenshot of our HUD within a week.

[CurdyMilk]

it will benefit the overall community feeling while also adding a more competitive element to Project Stealth. Stay tuned for more!

OOO  .  Competitive element?...Seems interesting and I cannot think of what it could be.  You can't just leave me hanging here...it's killing me.  Haha

[Cronky]

An interesting read, but not what I was expecting. I saw the words Tick and Tock and could of swore the clouds open up for but a precious second... till I noticed what was behind those clouds was yet another layer of clouds.

This long sentence is what what wanted to make clear to the visitor in a matter of seconds.

This is in the "Quick informer of the main points:" section.

I think the second what is a typo. Just so you know (Course maybe I'm just CRAAAZY)

[Gawain]

who is supposed to read that? spam alarm, any1?

[frvge]

@Cronky: fixed. Thanks.

@Rambo: A deeper insight into the actual fundamental and technical design of anything Project Stealth related is probably not possible. In other words: this is as good as it gets when it comes to our most low-level and high-level design decisions. Way deeper than most 'dev commentaries' of normal game companies. Opening up most parts of our Requirements Document is pretty uncommon ;-).

[I <3 U]

ok, so the only important thing in that whole thing was "frvge will try and get you a HUD screenshot in a week". seriously why post the other pointless stuff, it's like mic posting a ticktock on every detail of how he made the camo effect..."well first, i opened maya" "then i pressed new project with the left mouse button"..

[frvge]

If you take an art painter and describe his work, there's a difference between: "he put a red line here, and then a black line there" and a description of WHY he chose to put those lines there. The actual lines are a by-product of his artistic feelings/expression/impression.

However, if you feel like being lost in easy consumerism, that's fine too. Deeping or more abstract meanings aren't for everyone to appreciate. Some people just like it fast and easy to consume.

[I <3 U]

i guarentee nobody will read that =] easy consumerism, dude, it's just boring as hell to read...

i bet you LOVE it fast and easy to consume don't ya eyyyy ...

[LennardF1989]

Absolutely true, but the ones that do bother might learn a thing or two about PS in relation to the website.

...

Oh wait, that's the OTHER super-secret website design document, silly me

Then I suppose you guys also aren't interested in what the current code-base is capable off, both now and in the future?

[I <3 U]

Then I suppose you guys also aren't interested in what the current code-base is capable off, both now and in the future?

that's different because that effects gameplay and shiz like that, which is interesting, learning about the project stealth website, isn't.

so go on, spill the beans...

[Farley4Fan]

Indifferent face.  Is this what was coming "soon"?   

[frvge]

No. I planned for a release of this and more a few weeks ago. Finalizing a movie kinda took way longer than expected due to someone getting a Real Life(tm). One of the many negatives of volunteer-only games... sigh, no enforcable deadlines and a shitload of unexpected delays.

[tigaer]

A movie? It's the movie.

And you guys better love the HUD. I've worked my ass off on it so far.

Srs tigaer is srs.

[I <3 U]

A movie? It's the movie.

And you guys better love the HUD. I've worked my ass off on it so far.

Srs tigaer is srs.

i like this guy

[Succubus Dryad Of The Undying Comet]

Guys, I read the thing. It's pretty awesome. <<srsly
Anyone who can't/ doesn't want to read sucks cocks. <<fo realz
Also take note that writing something like this takes way more effort than making a movie with a dev commentary. <<YARR (pirate style)