Fixed Width Layout - How to Pick Your Blog Background
73Today, most websites and blogs are set to a fixed width. This is because a fixed width blog is easier to read. Eye-tracking studies show that reading long lines of text can become very tiring on the eyes, and it is much better to limit the size of your text blocks.
Ok - so you want to use a fixed-width blog theme, but what should you do with the rest of the space? How should you use the additional pixels when viewers decide to expand their web browser so that it takes up the entire screen?
How to Design Your Blog Background
1. Show more information
In general, this is a bad idea. A busy screen, with too much information, is difficult to read, and not visually compelling.
Showing more information on the margins of your fixed-width blog defeats the purpose of a fixed-width blog.
2. Fill the browser background with a solid color
Most fixed-width blog designs center the blog content so that it will be most prominent to the eye, and fills the rest of the space with a solid color.
Below is a screen-shot of my fixed-width WordPress blog, centered, and filled with my blog background color.
This simple design works, but it leaves my blog looking as if it is just part of the background. One way to distinguish your blog from the background, is by using a dark border.
Below, we use a dark gradient border that makes our blog stand-out from the rest of the screen.
We can make our blog stand-out even more by using a different background color. A good choice is a darker gray because it is not glaring, and it will not compete with your blog in drawing your readers' attention.
White is also frequently used as a background color. However, while a white blog makes sense because it makes your text easy to read, a white screen background can be glaring and lead to eye fatigue.
Another very stylish type of blog background, is a black background that bleeds into our main blog page. This is an interesting effect because rather than creating a distinct border, we create a softer feather effect around the edges of our blog.
The gray and black backgrounds are my personal favorites because it is not glaring, and it brings out the content of your blog. A reader's eyes will be naturally drawn to the colors on the screen which is to your blog.
The same cannot be said for the other background options.
The Shiba WordPress theme is truly dynamic and has all these different background options built in. Choose which background option you want from a drop-down menu in your WordPress dashboard, and have it automatically appear on your blog. This allows you to easily switch between the different background options and choose the one that best fits your taste and blog colors.
Alternatively, you can achieve any of these effects by applying a transparent PNG gradient onto the background of your blog.
Which background option do you think is most effective?
See results without voting
WordPress Theme Blog
- WordPress Page Redirect
There are a variety of ways to achieve a dynamic page redirect from within your WordPress theme or plugin. If you are only interested in static redirects (i.e. always redirect one page address to... - 21 hours ago
- Media Library Plugin 2.0
[Most recent Media Library Plugin description.] Add Tags to Images The true power of Media Library Plugin 2.0, comes from image tagging. It allows you to tag your WordPress images or attachments... - 4 days ago
- Shiba Gallery Plugin 2.0
The main purpose of the plugin is to allow you to display your WordPress galleries using a variety of Javascript libraries including Smooth Gallery, Galleria, Popeye, Lytebox, and the WordPress... - 5 days ago
PrintShare it! — Rate it: up down flag this hub
Comments
Excellent concepts with easy step-by-step examples. Thanks for all the follow up links!
Excellent man
Very interesting article. Have you tried using eye tracking heat maps to improve on usability?
Hello Eye Tracking,
I did do some work related to that while I was in grad. school but haven't done anything recently.
The complexity is always in how to transfer raw eye movement results into workable and usable design rules. Human tasks are usually quite complex so it may be difficult to interpret the eye movement data and then model them as higher level design rules.
Are you doing work in the eye tracking area? Will definitely check out your hubs.
WordPress in the News
- WordPress Android App Coming Soon [RUMOR]Mashable2 days ago
It’s still in the rumour stages with no official word yet from the organization, but the blog software platform WordPress has set up a blog at the android.wordpress.org domain, Blog Herald notes . They did the same for the existing mobile WordPress versions for iPhone and Blackberry , which points strongly to an app in development for those with Android phones. With the launch of Google’s shiny ...
- Botnet authors crash WordPress sites with buggy codeARNnet31 hours ago
Sign up for our ARN newsletters! The premier provider of daily news to the IT channel, covering business, technology, products, and services. A weekly email of all current deals in ARN Distie Deals. This is a service no reseller can afford to miss.
- My PPC New Year ResolutionsSearch Engine Land1 second ago
New Years tradition is drinking Champagne, singing Auld Lang Syne, and making resolutions you try to follow in the new year. While the most common resolutions are losing weight and getting in better shape, the same principles can be applied to improving the health of your PPC accounts.














Duchess OBlunt says:
3 months ago
Clear, concise and very readable!
Thanks for the tips. Appreciate the links to your information.