Topic: Suggestions for my layout... (Page 1 of 1)

http://www.greatdave.org:7777/darkphoenix/preview/outline2.htm

Got any suggestions for improvement?

And I know the background sucks.

ok... real guick one since I have to run

1. Colors, must change them.. something with that bright blue color that its not fitting in, although you could make it work really nice with black...
2. Those curves are little pixely
3. Background has to go...do you have to use that static backgound? I mean.. it can look good if maybe you could change opacity on it a little. Right now it makes me feel like I am looking at a porn site.
4. No content (but I am sure you are working on it)
5. The top of the page text its hard to read
6 It's too big, doesn't fit in 800 by 600

I know its just a test but you asked for opinions...

Make it more exiting... something that wouldn't hurt visitors eyes,

What resolution are you running?

Because I have 2 versions; the version displayed is dependent on user resolution.

As for the curves, I don't know much about fixing that; my attempts just seemed to make it worse.

And I have no clue what to stick in the background.

As for the colours, I want to keep the cyan-like colour. Otherwise, I'm open to suggestions.

And there's no content because this is a layout test; I don't want to start adding stuff until the layout is finished.

What program did you use to make those graphics? If you are using Photoshop I'm sure that someone could give you a little help on them.

~The graphics are really jaggy.
~The text on the top logo is almost impossible to read.
~Everything looks really "bubbly". This could work but right now it isn't.
~Yep, that background has got to go. For right now, until you find one that fits, I would just use black or some other complementary color.
~The text on the "Main Menu",""Login", etc.. is really hard to read.


I think that you could come up with a better layout. There is something about it that just doesn't work. It could be the "bubbly" thing going on.

Later,
C:\


~Binary is best~

Used Photoshop 4.0.

And odds are you're looking at the 800 by 600 version. The text looks much better on the larger version; but that's what happens when you shrink images.

Don't shrink the image. You should design the images at the resolution that you want them to be. Making an image one size and then shrinking it to another will give you some bad results. Such in this case the jaggies on your images.



Later,
C:\


~Binary is best~

Well, that's the problem I have.

I run at 1024 by 768. When I design layouts, that's the resolution I design them for.

Then people complain because they're running at 800 by 600 and don't want to have to scroll over.

I don't want to have to do 2 copies of the layout for different resolutions.

You can make your pages liquid using percentages for the widths instead of using exact pixel sizes. When I get back home, I'll post you a couple of links to check out.

Later,
C:\


~Binary is best~

I know that; but last time I did that, there were so many images my pages took around 2 mins to load fully.

I need to keep the width of the images fixed to make sure they aren't huge. And thus I need to do multiple versions for different resolutions.

It takes a while to load, at least for me on my slow-ass school's connection, and when you're waiting, it seems like you won't be able to read the text at all...personally, if i came upon a sight and immediately thought i wouldn't be able to see the text, i'd leave...

Hmmm...

I have 56K, and it loads in around 15 seconds.

Any others?

Dark Phoenix: Welcome. I think CPrompt and Ducati have pretty much hit on the glaring problems. However, I could live with that cyan I suppose if we could get the graphics right (and yes I'm looking at it in 800x600). If you've run into problems with making it liquid then I suspect you've probably been going about things the wrong way (you need to make use of tiling and other little tricks). I look forward to seeing what CPrompt has on this but in the meantime I can assure you that it should be possible. The way you go about it now seems awful cumbersome and if someone visted without JavaScript...

OK I've just upped my screen resolution and it does fix some of your problems (the title graphic looked pretty bad and there were some odd things going on elsewhere) but those corners still look jaggy, there is something wrong with the top right corner and the dark shading on the righthand side of your interfaces isn't consistent - its dark on the bars but lighter on the actual panels which spoils the effect.

As there isn't much else to get my teeth into I'll just agree again that the background image could be made less obtrusive.

Overall you have a strong look and colour scheme but the implementation isn't quite right yet. However, it shouldn't be a problem getting it to work and it should look much better once that is done and then you can concentrate on adding content and features. Its a promising start but still needs some work.

Emps


A good buttock will always find a bench for itself - Estonian proverb

The reason it doesn't look right is because I did most of the bevelling at the same time; then forgot my settings. Bad when it came time to do more bevelling...

And I have NO idea what happened to the right corner.

Anyone else?

Check out this page. I can make a simple example to show you how to make the background expand on the resizing of the page if you like.

Later,
C:\


~Binary is best~

CPrompt: Nice resource (filed away for future use!!).

DP: Read through that and try a few examples - if you get stuck or want ideas then I'd take up CPrompt's generous offer. Create a simple test page and then work your way up to the more complex design that you want. On the graphic front if you've lost the settings things might get a little tricky and you might be better off waiting until you have the HTML working as you want and seeing what needs redoing. Its always the little touches that make the difference.

Emps

However, my problem is that I know exactly how wide I want each column. If I were to try and do that, then it would come out in one of two ways:

1) The images are either squashed or expanded, and look horrid.

2) To prevent this, I'd have to use MORE pics, which increases loading time.

quote:

---

1) The images are either squashed or expanded, and look horrid.

---

Untrue. I will make a simple little page to show you what I mean. All you have to do is find a repeating pattern in your image and use it as a background in the <td>.

Later,
C:\


~Binary is best~

My images are all backgrounds in the <td> already. So it wouldn't work, unless I split them up and use <img> instead; and that would lead to 2.

OK, I'm getting ready to go to work so just real quick...

Your whole page is JavaScript? hmm...Like I've been saying, if you mayke your table width's percentages instead of exact pixels, there would be no need for all of this. You already have the images in the background so just use percentages and your pages will flow much better

Later,
C:\


~Binary is best~

Yes; but due to the tiling effect of using backgrounds, I can't use percentages. The images won't appear right.

DP: I'll leave you in CPrompt's capable hands for this but I have had a nose around your graphics and it will work but you need to trim your tiling elements down to 1 pixel high/wide to get the percentages to work.

Emps

I know. I know what he's telling me to do. I did it once. The problem is, it requires more graphics; which will take longer to download, and slow the page down. Then people will start complaining about how long it takes to download all the graphics.

Dark Pheonix:

I don't think that it will bog your page down at all. I don't even think that you will have to add much if anything at all. I'll leave you alone but you did ask for suggestions and I gave you one that will help out this site and any others that you do in the future.

If you would like for me to show you an example I will do so. Don't think that I am being rude but using the technique that I suggested will make your pages look better and it will allow for less code.

Later,
C:\


~Binary is best~

Well, I do want an example. I think I know what you mean, but I'd like to see anyway.

Damn...

Now I can't think of anything cool to try...

I'd try ice, but I don't think THAT will help matters very much...

Ice tends to stick out a lot...

"No one's going to give you a map; you've got to walk your own path." = Hot Ice Hilda, Outlaw Star.

DP: I appologize for not getting the example to you yet. I am having some medical problems with one of my dogs and it is taking up a lot of my time. I will make one up for you though.

Just real quick. I think this will help out A LOT!

The images that you use in the background of your <td> tags should only be the borders. You have your logo and other text based images in the background as well which is why you are getting some funky looking stuff.

Try this:

<html>

<head>

<title>The Crystal Sanctuary</title>

<link rel="stylesheet" rel="nofollow" href="../style sheets/style.css" type="text/css" />

</head>

<body bgcolor="#000000">

<table width="100%" border="1" cellspacing="0" cellpadding="0" align="center">

	<tr valign="bottom">

		<td align="left" background=".../images/topheader-left.gif"><img src=".../images/topheader-left.gif"></img></td>

		<td align="center" background=".../images/topheader-center.gif"><img src=".../images/topheader-center.gif"></img></td>

		<td align="right" background=".../images/topheader-right.gif"><img src=".../images/topheader-right.gif"></img></td>

	</tr>

</table>

</body>

</html>

Your images are a little large. Take out the logo thingy with the girls and title and make that a seperate image to place in the center <td>.

I will try my best to make a sample for you soon. If you don't mind I may email you and let you know the URL to it.

Later,
C:\


~Binary is best~

[This message has been edited by CPrompt (edited 02-21-2002).]

I was thinking about how to do the liquid tables, but you just gave me an idea on how to pull it off...

"No one's going to give you a map; you've got to walk your own path." = Hot Ice Hilda, Outlaw Star.

Even though your leaning towards a liquid design I thouht I'd pop
in and mention something.

When your detecting people's screen resolutions for page layout
reasons use the browser window inner width and height instead.
I don't know many people who browse with a maxamized window
all the time so this way your caculations won't be off.

Oh, and here's a fairly gaphicly heavy liquid layout a did a while
back. It's loads quite fast all things considered although it's a
bit of a mess code wise but it does works accross all 4+
browsers. I think I was still using frames for most of my layouts
back then too.... eh.

Kinda graphical liquid linkie poo layout thing... yeah.

If you can understand the 'content' boxes (At least, that's what
they would have been if I ever finished it) you can make almost
anything liquid using tables.

I never did end up using this one. Along with millions of others...
arr well. It's all in the learning process... At least that's what I
keep telling myself.



Edit: Forcing text wrap. See... I can be nice sometimes.

[This message has been edited by Dracusis (edited 02-21-2002).]

[Emp edit: Can't be bothered starting a new thread as this is way down the list but this thread is closed and continued here

Dracusis: Thanks for the use of your message]

[This message has been edited by Emperor (edited 02-26-2002).]