Wide screen or not? Do I have enough space?

[jannesiera]

I'm currently working in a layout for my game, and I want it to be good. So I'm creating it in photoshop.
But I have to ask myself a very important question: will I use a full wide screen (so players with a small screen have to scroll)? Or will I use just a smaller part, but that means I have less space to put al my stuff in.

And then something else: what should be in it?
I want to do the following stuff:
- menu
- log
- logo (maybe in a header)
- picture
- main area for game content
- chat
- and, obvious, a menu (maybe 2)

So I don't know I'll have enough space or not  T_T

[raestlyn]

Why don't you make the layout fluid with css? Here is pretty nice articlke about the subject.

[jannesiera]

I don't think that's an option. Because I read a aboud liquid css, and it's not very suitable for graphical websites.

[Zeggy]

When you say wide screen, do you mean a layout for wide-screen monitors, or just a layout that fills the screen?

Fluid layouts generally aren't so good, since people with widescreen monitors will receive a very stretched out view of your site.

I just stick with a fixed width. The problem with is that you have to remember that people might have smaller screens, so I would pick a width of ~700 pixels (?).

I'm not sure though, I'm not a very good designer

[jannesiera]

I mean wide-screen monitors, indeed. I'm going to try to stick to the smaller screen width.

But if you log in to http://www.bulfleet.com you see it's very pleasant if you have wide screen, but very anoying if you have a small screen.

I'm goign to try I can do it in a small screen, otherwise i'll change it.

[raestlyn]

With fluid css layout you still can add min and max width and height, so people with very small screens, like me now with this asus eeepc (7 inch 800*480), or very large screens (1480+*1024+(my other laptop)) will have comfortable viewing experience. Graphical websites don't usually have problems with this kind of setup.


Or you can use this simple javascript code and make different layouts for different resolutions:

Code: [Select]

<script language="JavaScript1.2">
<!--

/*
Screen Size Redirect script (By Robert @ http://members.tripod.com/technological_tinker/)
Submitted to Dynamicdrive.com to feature script in archive
For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/


if (screen.width==800||screen.height==600) //if 800x600
window.location.replace("http://www.netscape.com")

else if (screen.width==640||screen.height==480) //if 640x480
window.location.replace("http://www.microsoft.com")

else if (screen.width==1024||screen.height==768) //if 1024x768
window.location.replace("http://www.dynamicdrive.com")

else //if all else
window.location.replace("http://freewarejava.com")

//-->
</script>
its easy to mod change the css.

[jannesiera]

Is there also a PHP script for that?

[raestlyn]

As far as I know, no as the php is server side language and  javascript is client side. Jusyt read trough a js tutorial or 2 and you'll be fine.

[jannesiera]

Ok, thanks. It's just that I want to limit the use of client side stuff. But probably I'll have to use some sort of client side code? (AJAX for chat, ... ) Or am I wrong there?

[Tribal]

You can use just a normal form for a chat in a game. Dont have to use Ajax.

Why do you want to limit the use of Client side technologies? They are wicked!

[jannesiera]

You can use just a normal form for a chat in a game. Dont have to use Ajax.

Why do you want to limit the use of Client side technologies? They are wicked!

Yeah, weel, this discussion was a while ago. I changed my mind on this , I'm going to use AJAX for several things in my game. (chat, quick help, for the "map" (it's not really a map )).

[goodie]

Ive found that fluid CSS works fine for me, both wide screen, and on 1024 (which is the new 800 it seems).

To give you an idea on the used resolutions i nabbed this after the first little while of running google analytics on my site.

1. 1024x768   34.07%    
2. 1280x800   20.59%    
3. 1280x1024   19.26%    
4. 1440x900   9.33%    
5. 1680x1050   6.67%    
6. 1152x864   2.22%    
7. 640x480      1.63%

Now as this is only a early sample, it shouldn't be taken as gold, but as you can see, 800x600 isn't there... in fact 640x480 is there before it. o.O (who still uses that? XD)

If you are expanding an existing site, I would suggest running google analytics (or similar stats package) for a few days/weeks and seeing what the most popular resolutions are before you make a decision on what you do.

Ive found that upsizing to 1440x900 the theme actually looks just as good as it does on a smaller resolution, so I'm happy.

(PS. I actually messed up my theme the first iteration, I made it for 1440x900, had lots of fun looking at it on a smaller screen)

Also, on the case of the original question, if you have to much on your front page, maybe you should consider splitting it up into 2? If you can't decide which should go, ask your players, they know what they want to see when they first login.

-Goodie

[Chris]

My site:
 1024x768       1078885       47.48%     
  1280x1024       650449       28.62%     
  800x600       153442       6.75%     
  1440x900       114041       5.02%     
  1152x864       113380       4.99%     
  1680x1050       69303       3.05%     
  Other       49931       2.20%     
  1920x1200       15140       0.67%     
  1600x1200       12892       0.57%     
  1400x1050       10636       0.47%     
  640x480       3672       0.16%     
  1366x768       301       0.01%     
  2048x1536       300       0.01%     

[jannesiera]

There was a reason why I don't like fluid layout... don't know why anymore though...

[raestlyn]

Now as this is only a early sample, it shouldn't be taken as gold, but as you can see, 800x600 isn't there... in fact 640x480 is there before it. o.O (who still uses that? XD)

We, who have eeePCs use that resolution

[Scion]

and dont rule out those might iPhones.....anyone coding their game to be playable on those little buggers? (or any other mobile phone)

[bbgames]

Designing for the iPhone is a different experience entirely - and extremely refreshing. Because of the guaranteed constraints of the browser, you can add a single meta tag and then design everything for a very specific resolution - and be sure that your design will work across every iPhone in existence.

Unfortunately, I haven't designed for the other phones out there, so I can't speak to what it's like designing for them - but designing for the iPhone is a walk in the park compared to designing for the typical user.

[goodie]

Now as this is only a early sample, it shouldn't be taken as gold, but as you can see, 800x600 isn't there... in fact 640x480 is there before it. o.O (who still uses that? XD)

We, who have eeePCs use that resolution

No, you who have eee 700's have that resolution.

I have the 900 (1024x600 of the top of my head), I'm not sure why, probably the way to small screen, but I couldn't stand the 700. :p

-Goodie

[Qwerty]

I use and I think a lot of other websites use 800 for their containers. You might need to squash a few things but its pretty good.

[BludySky]

I find the best way is to do both and just ask the user to select the width they want to view the site at. Store it with a cookie then based on that cookie change the CSS file your site points to and any other HTML code that might need tweaking here and there.