Web Hosting Talk







View Full Version : Dark Green Looks Black on LQ Monitors


Duffx
04-07-2005, 01:21 PM
Hello,

On a layout I've designed for my first client, I picked a nice dark green color for the left and top bars. However, when I sent it to my parents to review it for me (since they're the perfect example of the casual computer user), they both reported that on their cheap work computers, the dark green color looks black, making the page seem rather dark. The color in question is #033509; It looks great on my computer, and I think it's probably a problem with the brightness/contrast of their monitors at work. However, if I design the layout around low quality computers, I'll have to use bright colors that will be too bright to people viewing it on decent monitors. How does a web-design artist get around the limitations posed by computers rendering colors differently?

I don't think I'm allowed to post a link to the site, because I don't have enough posts. If someone tells me I can post a link, I will, otherwise I guess I'll have to spam a few posts before I can :P.

Thanks,
-Duff

the_pm
04-07-2005, 01:45 PM
To a great degree, you have to accept that no one will ever see exactly the same thing on their screens that you see on yours. That's just reality. Keep in mind that your parents probably see most sites darker than intended, and their user experience is at least consistent. So it's not unusual for them to see your green as nearly black (next to straight #000 they should be able to tell the difference).

I wouldn't give it too much thought really.

Duffx
04-07-2005, 03:40 PM
I wish I had a low quality computer to test it on, and see what it looks like. I also have to keep in mind that since he's a home builder, his target audience is probably going to be viewing the site from low quality work computers... I never even realized this would be a problem.

EDIT: Here's the link. Can I get some feedback on if the colors look ok to everyone? Any other feedback is also welcome. http://duffx.com/mmiller

the_pm
04-07-2005, 04:09 PM
If you want to test a lower light level monitor setting, just dim your monitor :D

It looks nice and green to me. As for other feedback, I'll keep this sort and sweet. I think the combination of absolute positioning and frames is a recipe for disaster. The frames will cause viewing problems for some visitors, indexing problems for search engines (the big problem is orphaned pages), and the absolute positioning gets touchy when you look at font sizes. Right now, even in its simple state, I'm seeing the page out of whack in Opera (my primary browser).

Consider using includes instead of frames. And just don't use positioning at all. There's very rarely a need for it in page layout.

Duffx
04-07-2005, 04:20 PM
I test to make sure it looks identical in both IE and Mozilla, I've never used opera. Thanks for the heads up, I'm downloading it right now to see what the problem is.

Hmmm, it seems opera is ignoring my CSS setting the margins to 0px... Is that what you're referring to with the page being out of whack? I'm not familiar with "includes", but I'll look into it. I'm not sure what you mean about not using positioning, though... I'm aware the code for my top frame is redundant right now (will be fixed soon), but using absolute frames is necessary for the main page. The problem is I want the green bar on the side to span the entire page height no matter what resolution the viewer's screen is set to, but still extending to the bottom of the page if the text requires the user to scroll down (the text is longer than 100% of the page height). I was having trouble making everything look right, so I ended up nesting two absolutely positioned divs on top of each other -- one with height 100%, one with height 500px -- Is this what you're referring to? I'm not sure I understand why absolute positioning poses a problem, though...

the_pm
04-07-2005, 04:38 PM
1. Opera uses padding for the edge of it's window, which is a more appropriate measurement than margins in this one instance. To fix it, simply add padding:0 to your body style.

2. To make the green bar extend down the entire side of the window, create a 1 pixel tall by xxx# pixels wide green bar, and set it to repeat down the Y axis as part of your body style.

3. The problems with absolute positioning don't begin to manifest themselves until you start stacking absolute positioned containers on top of each other. Regardless, it's just unnecessary code, since everything will stack anyway. Life's simpler when positioning gets tossed :)

4. Includes give you all of the manageability of frames without the messy search engine and regular visitor problems. They don't inhibit use for people with certain disabilities, they don't result in pages being indexed out of context since they're parsed at the server, they don't prohibit people using mobile browsing devices from viewing your site, etc.

Your code isn't that bad (minus the frames), but you could even cut it in half from what you have right now with a little tweak or two and make it more friendly for visitors too. Good luck! :)