widescreen website

[DreadKnight]

The new website version should probably have a fluid layout that makes use of the whole screen and avoids scrolling, sort of like the Dota2 game. It will give the website more of an app feel overall. As everything is dual sided, the pros of the redesign should outbalance the cons.

Pros:

• displaying more at once onscreen, which is really awesome on TV, desktop and tablet
• can make use of background image to display wallpapers in media for example
• easier to add new pages since there's more room in the navigation menu
• some of the pages can really shine if done well since there's more horizontal space
• the game would get better integrated into the website, not requiring a new tab anymore
• pages and various elements can be loaded seamlessly or shared with the game itself
• focus on getting people on the website in order to play the game instead of chasing them
• no more need for a "go to top" button and themed scroll bars for widgets when needed
• website divs can be more stylish since they'll be repeated way less throughout the pages
• ability to integrate music player and account related stuff such as avatar and shopping cart

Cons:

• On phones, this version might have visibility issues, as current website adapts to both portrait and landscape modes, in which 2 bestiary cards take the whole screen; orientation should be locked to landscape mode. The game is not very playable on phones and tiny screen devices anyway, but with something like Ubuntu Edge you can simply switch to desktop mode when you have a screen around or with Google Chromecast you can show it on your TV screen.

This website version will run in parallel until properly developed, later on to be tested using a Google Analitycs feature, gradually rolling out to visitors while being accessible to registered members who opt for it (soon) and via special link.

Pages:

• home (only showing AB symbol on the button itself, would show news headlines, game info and how to play basics)
• bestiary (having unit grid on the left side and 3d modes + cards on the right side), toggle mode could be added to unit grid, displaying Dark Priest when unselecting an unit or showing Shadow Leech when pressing Sarcophag twice
• shop (top could include filters and shopping card, left side can include grid and right side can include details)
• contribute (at top info about helping out the project + options, left side credits chart and right side donors chart)
• community (disqus commenting system on the left side, chat + social buttons on the right side)
• blog (would show a timeline with latest entries on the left side and the latest or selected article on the right side)
• account (would provide login and register fields if not logged out, otherwise would show player profile and settings)
• play or game (would show game modes on left side + downloads etc and ladder on the right side)

Guidelines

• text should be using relative sizes (percentages) in order to display nicely at various resolutions
• 16:9 aspect ration, 1080p resolution, best viewed with Google Chrome or Chromium web browser
• scrolling of whole website should be avoided, instead have individual regions with scroll bars or pagination
• the navigation menu could minimize to only show text on some of the pages where screen estate is important
• on some of the pages that have multiple categories, the navigation can have a different menu including home button

Contribute page should include more donation options (the more, the merrier), such as:

• https://www.gittip.com
• https://www.centup.org

Research The website can be layed out in several ways:

A. Dota 2 style, with account and disqus on the sides, opening panels sort of like the char sheet and inventory in Diablo2 [selected base idea]

Pros

• consistent navigation menu that would display at all times

Cons

• branding (project name and logo) might be lacking from the menu

B. HoMM3 main menu, Ubuntu Unity Panel or battle.net app launcher, being vertically on the side, having text and icons

Pros

• could have context sensitive menus (submenus), showing a back icon at the end
• would do well with branding and touch screens

Cons

• not sidepanels friendly or when it comes to the overall app experience (like having prev/next buttons at screen sides)

C. MailChimp administration panel

Pros

• can include nice 1:1 ratio artwork in upper left, so that takes care of branding
• vertical easy to navigate left side menu with icons + text, fits everything and more
• minimize button with just icons

Cons

• less horizontal space, not good when it comes to fullscreen backgrounds unless using transparency
• can't emulate the combat right from the prematch at a proper ratio

The website still has a retro look to it overall besides the background image itself. The header should be revamped, no longer using the icons but something more game related, perhaps creatures and it should probably include this artwork in the middle http://www.wuala.com/AncientBeast/artwork/logo/AB%20color.jpg/ done nicely, as well as a Play button since it's a web game and even stuff like HoN or LoL include one even if you have to download/install/update them in order to get to the actual play part. The website divs could be nicer, perhaps along the lines of http://beta.euw.leagueoflegends.com/en/ The homepage contains a lot of cruft that doesn't do good, such as an usually old gameplay footage, unneeded plot, stuff like tools and licensing. It should be more eye candy, have more creatures and be more about the game, how to play and it's features.

Mechanics

Horizontal menu, some pages trigger a submenu which replaces the menu but provides an exit to homepage button. Each page pretty much uses a custom background image that's somehow related. Ideally there would be no old style page reloading, but something seamless, more like an app, using loaders and visual animations of elements when making the switch.

Refs

• https://saumyazero.wordpress.com/2013/07/01/3
• http://www.dota2.com/international/home/overview
• http://beta.euw.leagueoflegends.com/en
• http://www.peachyprinter.com
• https://www.kixeye.com
• http://twitch.tv
• http://www.forbes.com
• http://www.puma.com (really nice submenu concept)
• http://teamviget.com
• http://www.vocus.com/resources/request-a-demo (has some cool animated buttons around)

[DreadKnight]

Reopened this, the new github search box sucks big time.

Merged #353 into this, since it's duplicate.

[DreadKnight]

Since the game is still redeemable for phones and tablets I'm considering if to go with this approach after all or further patch the current website and eliminate it's issues and merge some of the progress from the new one into it as well.

[DreadKnight]

Another browser based TBS, kinda eye candy website, similarish name, does nice regarding log-in/register boxes http://as.gamebox.com