5

We are building a site now and are considering adding a "brand" to the data section in the center of the layout with a subtle background image. There is some concern that with different browser settings the "brand image' might be either so light in contrast as to be un-defined or too dark and render the text above it hard to read. Is this a workable idea or something best left undone?

Improve this question
7
  • I believe that what you are referring to is a "watermark", like the lightly embossed corporate logo on expensive stationery.
    – Evik James
    Commented Feb 23, 2012 at 1:54
  • 1
    Depends on the brand logo. You could also place the image in black and white to get over the different computer/ browsers different color issue.
    – Viraj
    Commented Feb 23, 2012 at 2:07
  • Since you not only have to allow for different rendering engines on different platforms using different monitors, and browsers using different text sizes, but also have to allow for users of different ages and visual disabilities, my instinct is that the only safe option is never to have image backgrounds behind text. Honestly if I had a penny for every brand logo that marketing wanted to plaster across the background of the interface...really it's so inappropriate. Help them, don't hinder them.
    – Roger Attrill
    Commented Feb 23, 2012 at 10:09
  • What's the context? Online/offline? Full-size/mobile?
    – dnbrv
    Commented Feb 23, 2012 at 13:07
  • To expand on @RogerAttrill's point, if you are going to do it, err heavily on the side of legibility. What's the worst case if you make the brand image too subtle? The user won't notice it; not a big deal.
    – peteorpeter
    Commented Feb 23, 2012 at 18:21

4 Answers 4

Reset to default
2

While it's true that there is variation in colour between computers and browsers, the differences have been dramatically reduced in the last two or so years:

  1. Historically Macs used a gamma of 1.8, but in Mac OS X v10.6 (Snow Leopard), they changed it to 2.2 to match the native gamma of Windows computers. John Nack from Adobe has a great summary of the effect of this change to web content on his blog.
  2. For a long time, Safari was the only browser that implemented PNG colour profiles. Unfortunately, until Mac OS X v10.4 (Tiger), Safari would apply the computer's calibrated colour profile to untagged PNGs (that is, PNGs without any explicit colour profile included). That caused a lot of sites using PNGs to seemingly have issues with colour matching. Since that change was made in Tiger (and more recently since colour profile support was added in Firefox) the effect of cross-browser issues with colour reproduction has been greatly lessened.

Now, the main thing that affects colour consistency across users is the users' own hardware. The quality of monitors, backlight type and brightness and type (LCD vs CRT) can have a profound impact on colour fidelity. While there's no way to really be sure of how every user will experience your site, you can at least test the design on machines that have not been properly calibrated, and ideally on low-quality screens (where colours such as light grey often get "blown out" to white).

Improve this answer
1

A brief search on google brings up some interesting articles on how color is rendered in browsers and what are the subtle differences

A Brief Comparison of Font and Background Colors Rendered Across Major Browsers in Mac OS X

To quote what the site says

There is an unfortunate side-effect to Websites that sport light text on a dark backgrounds: in general, the light-on-dark font appears as more bold than its dark-on-light counterpart.

The truth is, it is not actually more bold (in terms of the actual number of pixels that make up the stroke width), it simply appears more bold due to the anti-aliasing of the font by the browser and operating system.

However I am not sure if the above information is applicable to your case since I have no idea about the color of the text you are using and the corresponding background image.However with regards to images you must remember that the color intensity of the pic can vary greatly depending on the color profile of the image. So while rendering your backgound images,that is something you will need to test.

Another consideration you will have to consider is that certain monitors display color more vividly than others and you should check to see how your text is rendered against the images in that case.

In closing ,I know I havent given you a yes or no answer :),but if your design requirements need such branding do ensure you cover all the possible bases before going for it

Improve this answer
1

This is a workable idea and a commendable one at that.

It may not have been pursued actively by most UI designers because of the constraints you already noted. However, with careful design, it can certainly work and provide a decent visual experience without being either distracting/disruptive or interfering with the foreground text.

One other point would be discretionary use. Avoid using it more than once on a page; for cases where the text is crucial and clarity/accuracy is very important. This is because a character can appear to be another, when seen against a background image, leading to misinterpretation.

Finally, I believe the concept is not new in regular graphic design.

Improve this answer
0

I'm going to go against the grain here and say

No

Don't do it. It adds nothing to the user experience, and potentially could detract from readability/usability.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.