Posted by: Xalthorn | April 11, 2008

Web page height can be a bigger problem than width

I’m in the process of making a working version of the Mondestia website to include the prototype code for the Dungeon game.  Whilst I’m at it, I’m coding in the environment systems and so on.

I always intended the web page to be viewable at a screen resolution of 800×600 without the need for a horizontal scrollbar and to achieve this, I’m designing a fixed width web page of 750 pixels.  This allows me to have the main content with a little bit of side padding on an 800×600.

Usually with web page design, you don’t really have to worry too much about the page height.  You ensure that the main attention content is at the top of the page and then leave the rest to the vertical scrollbar.

Certainly with the majority of the website, where it is presenting information, we’re all accustomed to vertical scrolling and this isn’t an issue.

However, with the game environments where you will be using the page repeatedly to play the game, you really don’t want to be scrolling down each time to access parts of the interface.  It would get really tedious really quickly.

As I had used a 400×400 map viewport in my tests, I’m not really keen to shrink that any more.  However, because it’s so big, it meant I had to do some fiddling with the interface and general page layout to get it to fit in without any scrolling.

I’ve done it, but I’ve had to sacrifice some of the header height which makes the website look a little cramped.  I haven’t lost any content in the header, but I have lost valuable ‘white space’.

I considered having a different page layout for when you were in a game environment, effectively giving the game more ‘control’ of the screen estate, but opted against that as it would ruin one of the driving features of the website which is to allow the user to navigate through the site and games as they want, using a consistent interface and layout to switch between sections as they need.



  1. i don’t think you shoud limit yourself to 800×600 since there’s like 5% or less people today that use it … 95% use 1024×768 or more … so you must think about how will your game look on high resolution screen! i found that it’s best to have whole game centered on screen no matter what resolution user has … with 600×600 game area you can do a lot and be fully “compliant” with those 95% of users!

  2. I’m still going to limit this project to 800×600 because there are enough educational institutions running that resolution still.

    The layout is centred, and I like the space either side on my widescreen laptop (1280×800), it gives it a nice space on each side but still fits in 800×600.

    My current concern isn’t with the width of the site any more, but the height or need to scroll whilst playing the games.

  3. Hey,
    The problem with 800×600 screens is that after your browser control stuff you only really have about 400 pixels to play with, which is extreamly limiting 😦 Couldnt you write your game so that the user can specify the reserlution they wish to use, and store it as a long lived cookie. Thay way people with massive 24″ monitors dont have a tiny spec of dust in the center of there screen. Though that would mean one of two things, 1 high res people see more, or high res people have larger tiles.

    I’ve been thinking about implementing the latter, if i ever get to the point of rendering stuff, as you can easily make larger than needed tiles and use PHP to make multiple smaller versions. That way the low res people download a small 32×32 (32×16 for iso) and can get a good number of rows, then people with monster monitors can download larger tiles for example 128×128 or 128×64.

  4. I’m already doing that. Individual users can specify which layout template they wish to use.

    Also, on the map display, you can switch between three tile sizes. Although the size of the map viewport is currently fixed, I can’t see a problem with allowing that to expand as well, especially as the whole map is scrollable. The only benefit to people with larger monitors is that they wouldn’t have to scroll quite so much.

    However as the lowest resolution needs to be catered for, I need to ensure that the game is playable with the minimum information on that resolution which is the problem I’m facing.

    Once I start adapting the display to suit larger displays it should be easy as there is simply more space to play with.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: