I'm trying to chop together a website for my tower defense game.
However, I'm quite inexperienced at this... So any help or C&C on elements and placement would be appreciated.
(http://www.indrek.org/sait1.png)
I imagine main content running in large window on left (an iframe) and buttons on right for simple navigation.
However, I'm not quite sure what should be on a game site. Yes, a demo, some screens, a trailer maybe... and forums for support and page for buying.... But what else?
Also, how to improve look?
EDIT: Please move thread to CL, sorry
Your menu should be on the left as western people read from left to right.
Can't really find anything else to crit
Quote from: Buckethead on Wed 04/08/2010 16:33:54
Your menu should be on the left as western people read from left to right.
Can't really find anything else to crit
But for that reason it can get in the way, can't it?
(http://www.indrek.org/sait2.png)
Better? I personally do like menu on the left more.
Why is the left menu so far down?
To divide blank area better on left frame - in other words - for no reason whatsoever.
Is it bad?
Removed Comment ;D
Grim I think you're a little confused, I always thought C&C just meant a comment and critique thread.
The navigation bar should be inline (in terms of y) with the main box to make it even. I think the watermark images work well, there's always something to be looking at.
Don't use iframes!
Why not?
I find end result quite sexy:
http://www.indrek.org/td/
would have sucked with default scrollbar though.
(click "about" to test scrolling)
Wow, that's actually a really cool website. But I feel scroll arrows should be placed together, if possible. If not then a scroll bar should be arranged (keeping graphics the same though). It's awkward traversing the whole screen.
I have to move my mouse over your buttons to scroll, rather than just using the wheel like everywhere else. What could possibly be a good reason for that?
Lack of skill to write javacode for this? You CAN use scroll wheel by pushing wheel down and moving mouse up/down.
I don't intend to become a master web maker, simply chop together nice-looking and functional site.
HTML doesn't seem to have cross-browser compatible mousewheel event.
(which is kinda weird. web-based programming languages always feel like 20 years behind compared to "traditional" programming languages)
Well, you totally CAN use mouse wheel now. ;D
First: in firefox the website is larger vertically than what my window actually is.
Second: The scroll wheel doesn't work with the main scroll bar. And it doesn't work correctly with the iFrame window thing. When I scroll down, it immediately scrolls back up.
I personally don't see an advantage for using these iFrames. They're kinda annoying, and at the moment, very glitchy.
The site doesn't look too bad. I'd have to say there's too much gray and little difference between the two sections.
Scroll wheel is messed up, completely. It scrolls back to where it was. Seriously, get rid of the iframe thing. What's the point? Also, validation fails (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.indrek.org%2Ftd%2F&charset=%28detect+automatically%29&doctype=Inline&group=0). It's <script type="text/javascript">, not <script language="JavaScript1.2">, for one thing.
Ok... and use what and how?
Be constructive. A link to some page with similar layout but different system maybe?
Because I - most of time - have no idea what I'm doing whatsoever.
You could do all this with some basic html and css. You can find plenty of info about it on the web. It's a little more work then this method perhaps but it's alot cleaner and probably better to customize.
Well, that sure doesn't help. Along with unexplained rage against iframe element.
:(
I have no clue how to make different-length content using current layout and window sizes.
I have never understood people's dislike of iFrames. They are just fine to use and, in some cases, necessary. If used properly you can't even tell they are being used. Now-a-days I tend to use AJAX to load content into < divs > rather than iFrames but that's a little more complicated than using a simple iFrame.
InC - what I like to do is determine the minimum screen resolution I'm designing for and then design around that res. These days I set the lowest to 1024x768. I make sure it fits on that resolution.
Another thing you could do is, using javascript, have a function call in the body tag onload (and onresize) that will set the height of your content. It's not too complicated really and you should be able to do it! You can find many examples on how to do it by searching google, I found this one (http://codingforums.com/showthread.php?t=95086) on the first try
Well, thanks everyone.
I decided to stay with iframe version, although I removed custom scrollbar/mouse wheel support due problems reported (tested it on 4 different machines and had no problems whatsoever, but I'll take your word).
Anyway, while domain routing is still pending, page can be seen here:
www.indrek.org/td/
P.S (facebook like doesn't work yet.)
P.S.S (click "about" to see screenshot of what the hell this thread was all about ;))
P.S.S.S (Nope, this isn't neither AGS or Flash game)
The website is still viewed at a higher vertical height than what my browser and resolution can fit. So I still have a browser scroll bar plus the iframe scroll bar. Makes it awkward.
Perhaps having a min-height for the page resolution. Since anything lower than that minimum would obviously break the page if the vertical height was too low.
As it is now. It gives me that Geocities website made by random kids back in the day, feel.
Well, it'd help to know WHAT your vertical resolution is.
Widescreen laptops - indeed can have even lower v-res than my 768px page would fit into (add browser toolbars etc), I didn't think about it.
So what size would work?
Also, I don't think I'll be using iframe scrolling really. Simply sort longer-than-frame pages into numbered links, 1,2,3 etc
Well my resolution is 1600x900 but my viewing height in the browser (with all the tabs and such) is actually 707.
So with a 768 vertical resolution (which is roughly the smallest vertical resolution nowadays), the min-height with how my browser is setup should be 575. But everyone's browser is setup differently.
The scrolling issue with the page being larger than browser, happens with both IE 8 and Firefox 3.6.8.
Also with IE, the page isn't horizontally centered anymore.
Id drop the iframe and just do it like this:
http://www.johnsendesign.com/enclosed/
I would of build up the site differently too since the "frame" is basically "locked" in one size, but I dont have time to show you how Id do it myself but shouldent be too hard...
The site looks really good, but yeah, ditch the iFrames. I'm sure i've left a few Geocities sites of my own in my wake.
Correct me if i'm wrong, but Peder have you just used a php include (http://"http://www.tizag.com/phpT/include.php") there? I was going to suggest that, but i'm no expert.
I get some of the content on the About page bleeding past the bottom image in Safari/FF/Chrome. Peder's suggestion of building with relative sizes would help there as the content area would grow to fit the content. Might have to change some of your graphics - you probably should anyway, since you don't really need to have all those; alot of it could be tiled. If you want to stick with scroll bars, the CSS overflow (http://"http://www.w3schools.com/css/pr_pos_overflow.asp) property would let you do that.
Looking good so far=)
Well, that's pretty much the point: I LIKE my graphics. It's very similar to graphics in game.
* I WANT whole page area to be framed. iFrames or not, it looks much better than all "normal" div pages, which have nothing but one-colored box going down to infinity. Might be professional, I say boring.
* Out of gazillion websites and tutorials I've tried, none shows how to link frames to main text box so they'd repeat CSS-given background correctly until the bottom of the content. But only that would eliminate need for middle frame or additional scrolling.
* So unless someone has an idea or usable tutorial on how to actually do this, I won't be ditching iframes.
What I need is portrayed on this picture:
(http://www.indrek.org/i/repeat.png)
I cannot believe that it would be impossible to force those two DIVs to have vertical height according to middle DIV (dynamically) and repeat their background so there would be no gaps. I found out how to automatically make footer (bottom frame) position correctly though.
But so far, I have no clue how to do this. "Ditch iframes" won't help if you cannot point to a better-working alternative.
Or maybe it's possible via javascript only, which I cannot code much beyond copypasting.
I'm really sorry, I didn't mean to cause offence!
I'm no expert and i'm as surprised as you that there isn't an obvious alternatives to Iframes, it's been years since I last used them. All i've found so far are php includes. Nowadays I do all my messing around in Wordpress templates which makes things so much simpler.
Also, there's nothing wrong with your graphics aesthetically. I really like them. I only meant to suggest you might be able to get away with less or at least smaller, repeatable ones, but really I don't have much to base that on so please ignore me.
I didn't intend to say "don't do it like that" without at least offering an alternative, sorry. My web design skills are a bit rough around the edges but i'll try to help you out as best I can. Looking at the image you posted above, it now looks like you're happy for the content to stretch down so long as your images tile with it. It's essentially the typical three column layout. The only stumbling block for me is your navigation and the fact it doesn't have a repeatable image like the rest of the sidebar. I would normally use clear: both; in my style sheet to get the footer underneath everything - you've probably done that - but it leaves a gap if the content of one of the columns is shorter than the others.
I've had a quick Google for "three column css layout" from the past year to see what's new these days. One of the links I found is quite promising as it aims to solve the issue i've just described above. I'd thought of using two divs for the sidebar and that's what it looks like they're doing. It's actually not new, it's from 2007/8, but it's one of many similar ones out there, just search for "three column css layout". I've only skimmed it, but it might be useful to you.
The Perfect 3 Column Liquid Layout (http://matthewjamestaylor.com/blog/perfect-3-column.htm)
Article on equal height columns explaining how it works (http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks)
I'll have a play with it myself when I get a chance. Of course, without the iFrame, you're back to the problem of how to have a single navigation across all pages (without having to edit each page) and the only simple solution i'm aware of are the includes. If I can find you a better solution, i'll post back (unless someone who knows more about this can chime in, please). I really like the website your trying to build, keep at it.
Huh, I gave up. Feeling a bit sad about abandoning initial design :'(
Seriously, dynamic image framing a simple page is alien technology beyond simple minds of hairy dudes who created HTML.
So anyway, I went to a more spartan layout, which it works quite nicely... and is actually more comfortable.
http://www.enclosedtd.com
And after some "wtf-am-i-copy-pasting" got official approval from Hairy Dude Committee also...
groovy! (http://validator.w3.org/check?uri=enclosedtd.com&charset=%28detect+automatically%29&doctype=Inline&group=0)
So all's fine... except that:
1) Pages that need scrolling shift contents to the left by browser scrollbar size (Firefox,IE).
I'm not sure if I should really try to do anything about this. Solving such issues feel like pixel hunting quests in games already.
2) Changing page results in ugly page refresh moment (IE8). Maybe it's only my IE, but those milliseconds page changes, everything's bright white.
Then again, who the hell uses IE anyway... besides housewives?
Aw, don't feel sad, I hope I didn't upset you=S
The new design still looks really good! It's straight to the point and easy to navigate - among the main goals of web design. Your little footer is missing in this one though - you should still be able to add it to get your previous box look and still have your main div stretching down to fit the content.
1) I had a quick Google on the scrollbar problem as i've never really noticed it before. This article (http://www.communitymx.com/content/article.cfm?cid=528a0) seems to suggest it's a side effect of fixed width layouts. One solution, they suggest, is to add the following to your style sheet so that your pages all have 1px of scrollable area, even if they don't need it, so that the scroll bar always shows. I've tried it on your site using Firebug and it works, but if I find you a more elegant solution (ie. not having to show the scrollbar!), i'll let you know. Just add it to the top of your stylesheet:
html { min-height: 100%; margin-bottom: 1px; }
Edit: I should suggest it might be wiser to just live with it. Seems quite a few people are put off by unneeded scrollbars from what i'm reading=S
2) Yeah I get a white flash in IE8 too when I reload, so it's not just you. I use Chrome/Safari/FF though so it's no problem for me, but I don't have a solution for you yet though.
Edit: seems to be a bug with IE (surprise, surprise!). Only suggestion that might help is to set the background colour of your page to a colour close to the main colour of your site so that the flicker is less visible than it is with white. Your main content area is #333439, something around that might help.
Good work, I look forward to the finished game, it's looks really good=)
I simply copied this a while back to always have the scrollbar there even when you don't need it. It'll be disabled though, but it won't shift your pages over when there isn't enough content to have a scroll bar. I believe it works for firefox only, but what do I know?
html {
overflow: -moz-scrollbars-vertical;
}
If I remember right Ryan that one will only work because of the -moz part.
This is another way to do it that should work cross browser.
html {
overflow-y:scroll;
}
Quote from: straydogstrut on Mon 09/08/2010 23:27:08
Seems quite a few people are put off by unneeded scrollbars from what i'm reading=S
I think people would be more annoyed by the whole website moving to the left as soon as the scrollbar does come up.
Done!
Looks good and, yeah, the disabled scrollbar being there doesn't bother me, it's much better than jumping to the left.
Thanks for helping out Peder=)
You should also consider putting all the CSS in a seperate file, saves loading time etc ;).
Done also!
Thanks alot for everything :)