Large website backgrounds dos and don’ts
Large backgrounds can sometimes be a great way to add an instant visual impact to a website. As designers there are various options available to us when it comes to the background of a website, such as using large images or patterns. The following article takes a look at the different background styles available, discussing how and when they are best used. As with most things however, there can be a downside to large backgrounds, with bandwidth and site performance taking the hit if the images aren’t implemented correctly. If you are thinking of having a large background image in your design, it’s important that you know your limitations.
Large Background Styles
Essentially there are many different styles, but the most commonly used styles on websites are:
* Photographs as backgrounds
* Graphics and illustrations as backgrounds
* Animations as backgrounds (not recommended)
Photographs and illustrations are most widely used, animations are still experimental (not recommended due to compatibility issues with different operating systems and devices), but as bandwidth is becoming cheaper and Internet connection speeds are getting faster, more websites can afford to use these.
Common Mistakes Using Large Backgrounds
One of the most common problems with large backgrounds is that they have to conform to many different screen resolutions. A web designer should test the website’s design using as many different screen resolutions as possible, to avoid one of the common mistakes that is associated with using large backgrounds.
Particularly a web designer should experiment with different browser window widths, because many users don’t expand their browsers to the full screen size, even though they may have a large resolution display.
Let’s look at the most common mistakes that a web designer should avoid, when dealing with large backgrounds.
Images are in Center, Tiled or Scaled
It’s not wrong to use a centered, tiled or scaled image as a background, in fact it’s even recommended in order to keep the symmetry of the website, however misusing these techniques could give the impression of an average or mediocre design to the website’s visitors.
Let’s examine the picture below of a website. This screenshot was created at a 1024×768 screen resolution:
As you can see, at this resolution, there is nothing wrong with the design, however let’s see how it looks at a 1680×1050 resolution:
The image used in the background is centered. It looks like a regular image on a website and doesn’t blend into the background. Avoid using background images in this way, by making sure that the photo is large enough in width for the most commonly used screen resolutions. The best solution is to blend the images’ corners into the background, so that users with larger screen resolutions won’t notice it.
In order to correctly tile an image, you must ensure that the edges of the image are consistent with the pattern, therefore creating a seamless background on the website. For example, the image below shows how a pattern, which is titled, is cut incorrectly. You can see the edges of each individual image:
In order to create a seamless background a web designer must cut the picture in such a way that the left edge blends into the right edge and the top edge blends into the bottom edge, like in the image below:
You can see the edges of the individual images seamlessly blend into one another. This image was created from pattern below:
When scaling an image, the most important factor is image quality and the target resolution. Also a web designer should take into consideration the different image formats that are optimized for each particular style of image.
In the case of large images it’s essential to optimize an image as much as possible in order to save bandwidth (more about bandwidth later in this tutorial). Avoid scaling up small images, because the resolution of the image will drop significantly as you can see on the screenshot of a website below (try viewing this on a large resolution display):
The problem with the above example is that the website automatically scales the image according to the screen resolution which causes the background image to become pixelated when viewed on large resolution displays.
Impact of Large Backgrounds on Bandwidth and Site Performance
Large backgrounds usually equate to large file sizes which can lead to a huge impact on bandwidth and also user experience.
The bandwidth is the amount of data that is be moved from on place to another, specifically from the server to the client. By using large graphics, a website’s load time can increase significantly.
It is therefore essential to optimize your images by using the appropriate image resolution and format, as well as optimizing the website’s other resources such as CSS and Javascript files.
Let’s look at the following example:
Here is this website’s net usage report:
There are 12 requests and a total of 627 KB is downloaded. This means that each time someone visits the website 627 KB is downloaded, adding to the total bandwidth of the website. If the website has an average of 50 visitors per day, this will total 31,350 MB per day.
By using the Firebug plugin for Firefox you can see your website requests and get an idea as to how to optimize it.
Tips
High resolutions are not everything to considerwhen you design websites, you should also consider smaller screen resolutions. What if a large background website is viewed from a mobile phone? A web designer should design for every browser, in order to present the website to a large audience. These days more and more visitors tend to browse the web with devices such as the iPhone and other smartphones.
If the photo that you want to use in the background of your website is too small or will look awkward, then create the whole design around the photo. For example:
As you can see the photo is small on purpose, which adds to the whole design.
Another tip is to create single color wide space on the photo itself, then use this color to paint the rest of the background, therefore making a seamless blend between the photo and the actual background.
Here the image is centered, the left and right edges are a single grayish color and the rest of the background is filled with this color.
As a best recommended practice use large images, above 1700 pixels in width to cover almost 95% of the display sizes available today.
Article courtesy of WebDesignerDepot.com.
More posts from our team
Five Star
Reviewed Marketing
"Would definitely recommend to a friend"
"I cannot recommend Dental Design highly enough"
"Really great company to deal with"
"Very professional, efficient & adaptive to new situations"
"I cannot recommend them highly enough"
"Has been invaluable and gone out of her way to help us"
"We love the look of our practice website. Very professional!"
"Dental Design stood out both in their knowledge of the industry and their professionalism"
"The team and package offered at dental design was unrivalled"
"absolutely fantastic and are always on hand to help"
"Dental Design are fantastic to work with"
"always met with a swift and professional response"
