My point is that my window is so big that you're using less then half of the space horizontally and making up for it by doubling and more the height of your pages. This makes text less pleasant to read and requires more scrolling, slightly inconveniencing the user. Don't use static page widths. Use 100% of the user's screen as the overall width.

Dear Centreri:
Actually, no. 100% is not aesthetically ideal. You really need margins. Back in the early days of newspaper printing, to save costs they used literally all of the paper, edge to edge. Then they eventually discovered the magic of margines, making it look more appealing and easier to read. Yes, easier to read, because your eye doesn't have to track back as far to find the next line. In addition, negative space is very important in keeping the eyes focused.


Dear Falkoner:
Light green and white text provide minimal contrast, creating a bright region that is not easy on the eyes. I recommend darkening both greens to improve the readability of the white text.

__________________

Post has been edited 2 time(s), last time on Oct 12 2008, 10:37 pm by Hercanic.

99% is fine. That's what SEN uses. Or you think Falk's site looks better then SEN?

Another upside of using percentages is that it doesn't lock out people with tiiiiiiny resolutions.

Dear Centreri:
0.5% on either side is not perceivable as a margin.

The text on Falk's site appears on my end as spanning across the entire page horizontally without regard for the gray area that his screenshots and trigger tables seem committed to. I do not know if this is merely caused by unrecognized code due to my browser, or if Falkoner edited the page to try out ~100% text.

StatCounter.com is a nice tool to see what specs your visitors have, such as monitor resolution. 640x480 is fairly rare nowadays, with the occassional 800x600.

Percentages are not an absolute help. While it may scale with monitor resolution and window size, after a certain point it ceases to function well. 50% on larger resolutions may look fine, but 640x480 will look extremely squished. What would be nifty is if a code existed that allowed you to establish a core width, then assign a percentage to the remaining margins.

Although not applicable in this specific case, another argument against pecentages is the need for some sites to maintain their layout relationships (text may scale fine, but images do not). WIth locked sizes, you can also ensure a pleasing golden ration among your elements.

Ah, thank you, I think this was definitely more of a problem than the borders, and it makes it look much better.


Yeah, you must have IE, the text stays inside the borders in Fx.


What the crap are you talking about? SeN has a 800px width fixed, if your screen is any larger, it puts margins around the sides. However, I see your point, and I will shrink my margins a bit more.
EDIT: I did it, and it looks great, thanks on that, at the moment, I think it looks best in 1280x1024 resolution, in Fx.


With CSS in Fx, you can do min-width and max-width, which is why it works in Fx but not in IE, if I wanted it to work in IE, I would have to make it a div that was the correct size, but I don't want to do that.

Post has been edited 2 time(s), last time on Oct 13 2008, 1:29 am by Falkoner.

Much improved, though the broken look in IE is something I'd advise addressing. Like it or not, the majority use IE as it is the most readily available browser on hand.

You use carbonite skin? SEN's default skin uses the whole screen.

I just found a IE remake of max-width, it's kinda annoying, but it works just as well:
width: expression(document.body.clientWidth > 750? "750px": "auto" );

So yeah, that's fixed now.

Indeed it is. Great job.

What about your buttons? Is it intentional that they extend past your your content boundary and into your margin?

Yes, that's the idea, and I made sure they are always larger than it, since it gets cut off underneath them, and you can see the top edges if it's shorter than the gray area.

My point was that he needs to use more space. Not 50% on a x480 resolution - 99%. Maybe 97%. The point is to use the space and stop forcing users to scroll. Yes, using 5% is bad. That's not what I'm saying.

97% does not leave an appropriate margin, either. Maximizing space usage might seem most efficient for the technically-minded, but it is misguided. Negative space is essential to the visual integrity and readability of a site.

Unless the page can fit in one view, you have to scroll either way. Given the number of pictures and tables on Falkoner's site, this would not be feasible. In fact, regardless of it being set to 97% or 70%, the text only adds a minor amount to the overall scroll length. Do you not have a mouse with a scroll wheel?

I don't like the outer glow or the type of font you used for the "Return to top" button. I think it should be more discreet, maybe just text instead of an image? imo atleast.

Yes, the "Return To Top" graphic does not fit the rest of the design. The tight, blocky font and gradiant blend on a white background make it uncomfortable to read, and the outer glow is excessive. No other element on the site share its visual properties, so it does not match.

Again, I'll bring SEN up - is it at all unreadable? Is it aesthetically displeasing?

If you are actually reading the tutorial, it's no problem to scroll while reading it, trust me, I've tried it out


SeN has users avatars and such that make up a margin, not to mention, there's a reason I use Carbonite instead.

I changed the Return to Top image, whatcha think now? My only issue is that this is not going to change based on skin, unless there's a way to change where it gets the image in CSS...

Post has been edited 1 time(s), last time on Oct 13 2008, 4:47 pm by Falkoner.

Return to top should not be so tacky..Just make it a normal link.
Site's good though.

Meh.. Maybe you're right, I'll try it and see if I like it

Yeah, it looks fine, and it can be modified via CSS, so it will work well with people's custom skins.

I think I like how it looks now, keep the comments coming, at the moment I'm working on the Settings page, and I think by the end of today I'll have it up and running.

Post has been edited 2 time(s), last time on Oct 13 2008, 5:08 pm by Falkoner.

The green ties it in better with the site, but the thick highlight, yellow glow, and whimsical font all feel a bit cheesy.

There are a number of ways you could approach the image. You could aim for simplicity, such as a dropping the background and using a green font, with an arrow pointing up and the word Top. Perhaps right-align it. You could also go for a sunken-in look, keeping the green background shape, but instead of a highlight, use a subtle inner shadow. Shrink it a bit for a more discreet look. Find a font that fits the techno stylings of your title, but whose letters maintain their readability at smaller sizes (no contrasting blocky/thin lines, as they don't read well the smaller you get). And don't go crazy with the Blend options. Less is more. Use Blends to accent, not dominate.

I've decided to just have a text link, it's generic, and will work well when people go to make their own skins for the website.