Hot answers tagged background-images
58
Accessory, not necessity
The background should be an accessory, not a necessity. If the background weren't there, it shouldn't negatively affect usability. An example of a poorly designed website that uses the background as a necessity is Project Swole. Before the background is loaded, there is not enough contrast to read the text. When I access this site ...
16
You should not forget about page loading time. Load time is key factor in conversion from visitors to readers / users, and slow pages are extremely frustrating to work with.
If the large image in question can't be replaced, you can mitigate the effects in five ways:
Most of the background image in your new design is covered by your content. Why not just ...
8
The background you choose for your website has the power to set the theme and set the mood for your site at a glance. But the main aim of the background should be to enhance the visual experience and not to distract the user too much from the content.
Analysis:
The image with grey background has more depth and there is a sense that the content area is to ...
6
The most important thing is here whether page rendering is blocked by the image download (or if the page is incredibly ugly or unusable before images load). In your specific example the rendering isn't blocking anything (though the text shifts a bit for me in Chrome).
Remember that rendering time is more important than total download time; this is "Time to ...
3
I believe you should be fine. The reason being the login box is subtle enough to blend with the background design but also stands out due to its color scheme . The login call to action due to its deep blue color also works well against the lighter blue of the aurora borealis since its distinctive enough.However if you are going to constantly change your ...
3
The biggest question to ask is always does it detract from the user experience? Is there something awkward, confusing, or slow you're introducing? Is there some usability or accessibility drawback? Does this change depart from useful conventions that make the user feel familiar with the app?
I'm hard pressed to imagine a situation where an otherwise good ...
3
The important issues for UX are whether the advertising (which is there for your benefit and the advertiser's, not for the user's) impedes their ability to use the site successfully.
Background advertising that is too prominent may confuse the user, thinking they are at the wrong page.
If it blends into the content too much, it may induce banner blindness ...
3
Avoid background-position: fixed when possible.
A fixed background increases browser rendering exponentially and can be the difference between a smooth scrolling site and one that feels slow.
2
You mention in a comment that "There is a menu for setting where you can set any image as background. So resizing or scraping is not genuine solution."
If users can upload a background, that doesn't stop you from messing with it. I'd advise running it through an automated image manipulation program (like ImageMagick). You can cut out just the pieces you ...
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:
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 ...
2
The goal is to ensure easier reading when the user scans the site.
Practicality aside, colour is obviously emotively persuasive.
I would imagine that catering for the emotional well-being of your end users is as important allowing them to scan information easily.
The grey you have chosen still provides a subtle contrast, partly because of the ...
2
There's no ideal size or de facto limits to the size of images (or any asset).
Actual testing on various devices with various connection types is the best way to understand the impact of file size, and actually showing it in action to your client is the best way to make him/her understand the issue.
Barring realistic testing, you can get more info on ...
2
You can post-load the image to help with the impression of responsiveness. To control your bounce rate you primarily need to focus on getting the interactive page rendered. As long as the image doesn't take more than 2 to 3 seconds to pop in you should be safe.
As with any issue in UX, watch your stats. It's going to depend on your users' expectations more ...
1
Since you mentioned it is less than 1 second, it should be acceptable. The user's will notice the delay but not be distracted from the site in that much duration.
Here is the rule of thumb developed by Jackob Nielsen
0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback ...
1
It's nice, but I'm not sure there's enough focus on the input form. Try increasing the opacity of the form or reducing the luminosity of the image (the bright green stream is too potent in your current design).
Increasing the opacity of the form will also improve the readability of your field placeholder text.
1
I have a pretty slow internet connection. 250ko/s.
I think that a good website don't have to let me wait more than 5 seconds to download all the website.
Otherwise, internet navigation is an awful pain.
So, calculating... 1 Mo is a good file size for a background :)
If you do things well, you can make the background download silenty and print it when the ...
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 ...
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 ...
Only top voted, non community-wiki answers of a minimum length are eligible
