Layout critigue wanted

[The_Fire]

He everyone!
I'm finally making headway on my personal pages.
As in: I've finished the layout.
I was wondering if I could entice some of you to take a look at http://www.katjaboysen.dk/default2.php and tell me what you think.

Part of this would also mean telling me if you run into problems with it. Especially if you use Mac.

Thanks in advance.

[Paul C. Anagnostopoulos]

I have trouble reading the gray on white. Could you make the type a bit darker?

I could read the white on gray if it was only a sentence or two, but I can tell I'm going to get fatigued quickly. If you're going to do that, you have to make the type much larger. Or you might try something like dark green on gray, with the gray background somewhat lighter.

~~ Paul

[The_Fire]

I've made a couple of changes. Better?

[wahrheit]

Works okay on a Mac, but the contrast is still way too low. If you are going to have a lot of copy on that page, like in the layout you have now, you should really consider using dark font on a bright background.

There seem to be two glitches in your css or div tags, one on the left side under the menu, the other keeping me from scrolling all the way down (see attachments).

[JamesM]

I see the same glitch as wahrheit, but only on Safari. Works fine with Opera 9 and Firefox 2.

[The_Fire]

There seem to be two glitches in your css or div tags, one on the left side under the menu, the other keeping me from scrolling all the way down (see attachments).

Blasted. That was part of what I was afraid of. *Goes script hunting*.

ETA: I've added a small piece of script which should take care of the safari problem....

[wahrheit]

Blasted. That was part of what I was afraid of. *Goes script hunting*.

ETA: I've added a small piece of script which should take care of the safari problem....

The page is blank now on Safari :cool: but works on Firefox.

[The_Fire]

*********** hell!

ETA: Looks as if Safari users have to live with that minor glitch for a while......Untill i figure out what happened with that script.....It's either that or whiteout....

[Mahatma Kane Jeeves]

I get a horizontal scroll bar (1024x768) in both Firefox 2 and IE7 on WinXP SP2.

[The_Fire]

I get a horizontal scroll bar (1024x768) in both Firefox 2 and IE7 on WinXP SP2.

That should be taken care of now. Should teach me to remember that I'm using 1200xsomething for development......;)

[kevin]

I like the 2 column layout. 3 column is typically the "in thing" but I find them too busy. Unless your sub-menu titles are really going to be that long, i'd probably make the left column a bit narrower.

I'm not fond of huge headers, I prefer content and not having to scroll as much.

Home link in top menu has a typo. Probably should be default.html instead of defaul.htm.

The slanted lines in the K and the curves in the B in the KLB graphic have compression artifacts. You might use a PNG or GIF instead of a JPG for that, might even end up with a smaller file since it's only 2 colors.

Looking at the source, if you're using style sheets why are you defining the column widths with blank.gif spacers? Why not force the sizes in the stylesheet?

[The_Fire]

I like the 2 column layout. 3 column is typically the "in thing" but I find them too busy. Unless your sub-menu titles are really going to be that long, i'd probably make the left column a bit narrower.


I'm currently finetuning it. That was one of the point I've been wondering about. Problem is that I'm going to use that column for things like news or latest articles depending on where on the site you are. Some of these things are represented by titles which can be pretty long. I'm working on it.




I'm not fond of huge headers, I prefer content and not having to scroll as much.


Noted. I kind of like it though .;) Particular since I'm contemplating having the banner change on refresh.



Home link in top menu has a typo. Probably should be default.html instead of defaul.htm.


It's a dummy merely setup for layout view. None of the links would work untill the underlying PHP is finished anyhow.


The slanted lines in the K and the curves in the B in the KLB graphic have compression artifacts. You might use a PNG or GIF instead of a JPG for that, might even end up with a smaller file since it's only 2 colors.


I used JPG originally on this due to the fact that I had problems with the alpha channel on the PNG's. However since I've managed to dig up a solution to the IE problems with those that is about to change. I am currently working on shaving down graphics sizes along with the layout finetune and simply haven't gotten to that one yet.


Looking at the source, if you're using style sheets why are you defining the column widths with blank.gif spacers? Why not force the sizes in the stylesheet?

Width? I'm not using spacers on width. I am using them on height thou.
I'm using Auto on the size length wise to keep the thing scalable. Problem is that this means that the thing curls up and looks rather silly when there's only a couple of lines.
Thus the blank.gif force thing....
However, once I'm finished I should have been able to cut down the spacers down to one in the content area.

ETA: Just out of curiosity: Which screen resolution are you using?

[Modified]

The page does not scale well at all. Everything is fixed-size rather than being scaled to text size. Using my usual scale, 3X normal in FireFox, the menu text is cut it half and the copyright text at the bottom is half-covered by the empty white square at the lower left. Also, the active part of the page only fills about half of the browser width on my screen.

http://forums.randi.org/imagehosting/thum_1178245721238331cf.png (http://forums.randi.org/vbimghost.php?do=displayimg&imgid=2924)

[The_Fire]

I did a baaaaaaaaaaad thing.....I went back, took most of the layout apart and....and...introduced a table :faint: .
Seriously, CSS was pissing me off. If I made it so that both firefox and ie was reading it correctly, then it couldn't scale. IF I made it so that it could scale, something went wonky with the scroll bars etc. etc........

Anyways, try it again, it should be fairly scalable now.
And yes, I know that the leaf isn't scaling with the layout.......

*Goes back to waiting for that big bad book on css which can probably solve her layout problems without the use of tables.....*

[blutoski]

He everyone!
I'm finally making headway on my personal pages.
As in: I've finished the layout.
I was wondering if I could entice some of you to take a look at http://www.katjaboysen.dk/default2.php and tell me what you think.

Part of this would also mean telling me if you run into problems with it. Especially if you use Mac.

Thanks in advance.

I'm big on the KISS approach. I have made websites with no columns - just headers and footers for navigation. No Java, no php... they load in a snap, and look satisfactory on all browsers. Dark grey text (#202020) on white background. Default colours for links.

[Modified]

I did a baaaaaaaaaaad thing.....I went back, took most of the layout apart and....and...introduced a table :faint: .
Seriously, CSS was pissing me off. If I made it so that both firefox and ie was reading it correctly, then it couldn't scale. IF I made it so that it could scale, something went wonky with the scroll bars etc. etc........

Anyways, try it again, it should be fairly scalable now.
And yes, I know that the leaf isn't scaling with the layout.......

Much better, with the exception you've noted. In my own websites, I tend to write to HTML 4.0 transitional, using tables for layout and CSS for "decoration" only - fonts, justification, button appearance. Someday I'll have to give that up and move forward, but that day is not yet.

[wahrheit]

Now it scales well and I can see the entire page, but there's a horizontal scroll bar now, though not needed. 1680x1050

[The_Fire]

I'm big on the KISS approach. I have made websites with no columns - just headers and footers for navigation. No Java, no php... they load in a snap, and look satisfactory on all browsers. Dark grey text (#202020) on white background. Default colours for links.

KISS is always a good thing. Which is why I kept my layout relatively simple (on the surface anyhow). The very first version I had involved some severly complicated background imaging.

Much better, with the exception you've noted. In my own websites, I tend to write to HTML 4.0 transitional, using tables for layout and CSS for "decoration" only - fonts, justification, button appearance. Someday I'll have to give that up and move forward, but that day is not yet.

I was aiming at XHTML strict, which afair don't like tables at all, but until I'm going with transitional now instead.
Part of the problem is that up untill now, I've worked with fixed size layouts.
My page, however, were always meant to be scalable due to the fact that I'm going to use it to publish some fairly long stories etc. and I HATE scrollbars inside the layout.

Accoding to the layouts on Zen Gardens, it should be possible to create a pure CSS scalable layout, but I'm going with the table-CSS combo for now to avoid browser clashes.

Now it scales well and I can see the entire page, but there's a horizontal scroll bar now, though not needed. 1680x1050

I need to know your browser and platform as well as your screen resolution due to the fact that it could be an interpretation problem. I'm already now warning you: If it's safari, and it doesn't show up on other browsers, don't expect a fix since that particular browser counts for less than 1% of all surfers according to statistics. And that's on a world basis. Reason is that I really need to get cracking on the PHP coding. It is a comparatible small glitch though.

[wahrheit]

I need to know your browser and platform as well as your screen resolution due to the fact that it could be an interpretation problem. I'm already now warning you: If it's safari, and it doesn't show up on other browsers, don't expect a fix since that particular browser counts for less than 1% of all surfers according to statistics. And that's on a world basis. Reason is that I really need to get cracking on the PHP coding. It is a comparatible small glitch though.

Happens both on Firefox and Safari :p

Besides, there's nothing to "fix" for Safari if you use proper CSS :D My guess is that you are running into problems because you are using a mix of HTML tables, CSS positioning and width/height relevant code in both at the same time.

[RSLancastr]

I did a baaaaaaaaaaad thing.....I went back, took most of the layout apart and....and...introduced a table :faint: .That was what I finally did with the StopSylviaBrowne layout.

Sad, but it was the only way I could get it to work correctly in IE, at least within the time that I had. :(

[Soapy Sam]

Too much RED.



;)

[The_Fire]

Happens both on Firefox and Safari :p

Besides, there's nothing to "fix" for Safari if you use proper CSS :D My guess is that you are running into problems because you are using a mix of HTML tables, CSS positioning and width/height relevant code in both at the same time.

Tried the pure css, remember? Seriously: I'll have a look at the css to eliminate double entries on height/width. That's probably the problem.

That was what I finally did with the StopSylviaBrowne layout.

Sad, but it was the only way I could get it to work correctly in IE, at least within the time that I had. :(

Same here.....Wanna form the "CSS disapointed me" Club? :). Your site rocks, btw.

Too much RED.



;)




*Goes after soapy with a baseball bat*

ETA: Wahrheit: Try again. Da Big Bad Scrollbar should be gone now.

[kevin]

Noted. I kind of like it though .;) Particular since I'm contemplating having the banner change on refresh.

Overheard in New York (awesome site) does this. Their header is about 2/3 the size of yours, maybe half. I like that size.

http://www.overheardinnewyork.com/
(fair warning - some may consider that site offensive and not at all safe for work)


I used JPG originally on this due to the fact that I had problems with the alpha channel on the PNG's. However since I've managed to dig up a solution to the IE problems with those that is about to change. I am currently working on shaving down graphics sizes along with the layout finetune and simply haven't gotten to that one yet.

I saw that javascript (i'm nosy, I usually do a view source on pages as well as look at them). What an ugly fix, I hope IE 7 straightens up, although we'll probably be stuck with this kind of crap for years.


ETA: Just out of curiosity: Which screen resolution are you using?

I was at work at the time. 2 monitors (don't ask how I managed that!) at 1280x1024 each.

[The_Fire]

Overheard in New York (awesome site) does this. Their header is about 2/3 the size of yours, maybe half. I like that size.

http://www.overheardinnewyork.com/
(fair warning - some may consider that site offensive and not at all safe for work)

I'll give it some thought....



I saw that javascript (i'm nosy, I usually do a view source on pages as well as look at them). What an ugly fix, I hope IE 7 straightens up, although we'll probably be stuck with this kind of crap for years.


You're not the only one whos nosys :). Yes it's ugly, but it works. IE 7 should be 100% PNG compatible including the alpha channel, but your prediction of having to deal with bad fixes for several years are probably correct. I mean, if you take a look at the monthly statistics on this site, there are still people out there using IE 5.0......:jaw-dropp



I was at work at the time. 2 monitors (don't ask how I managed that!) at 1280x1024 each.

That's the same res I'm using.

[wahrheit]

FYI - everything okay on Safari now.

[The_Fire]

FYI - everything okay on Safari now.


Thank you for the heads up. Means I'm going in the right direction. Do you by anychance have access to the IE 5.5 for Mac?

[wahrheit]

Thank you for the heads up. Means I'm going in the right direction. Do you by anychance have access to the IE 5.5 for Mac?
IIRC 5.2 is the latest (and last) release of the IE for Mac. The fonts all look different with it, but the site is readable.

[The_Fire]

IIRC 5.2 is the latest (and last) release of the IE for Mac. The fonts all look different with it, but the site is readable.


Thanks. I'm not directly developing for that browser as it is abandoned by Microblows, but it's nice to know that it's not completely incompatible....