Christine's Blog Templates

Problems With Page or Content Width

The width at which your blog page displays is something I consider to be important. If your page is too wide, some of your content can be very difficult to see since it'd be hiding off screen to the right. Sometimes it's not obvious and people may not notice the side scroll bar at the bottom of your screen, thus some of your content can conceivably go completely unnoticed. Other times it's obvious that a portion of your content is hidden off the right side of the screen, but this looks sloppy and requires people to scroll over to view your content over there. Everyone isn't always going to do that. I've even seen cases where I'd have to scroll side to side just to read a sentence. Needless to say, that gets old very quickly, and it's a sure fire way to chase people away from your website.

There is also the problem of content too wide for the space into which it's placed breaking the proper page display. This is also sloppy looking, can make some of your content hard to find, and can result in various ugly, unfriendly display problems.

How wide should your page display be?

Different people are using different display resolutions to view your website, a good design takes that into consideration. There are still people using 800px wide by 600px high resolutions. In watching my own website stats for several weeks, it seems to be about 5 to 15% of my visitors are using an 800px wide resolution. Currently, the most common monitor resolution is 1024px wide. Your page should be designed to display well on 800 x 600 resolutions and higher. If you don't care about those still using the smaller resolutions, you should definitely consider those using the most common one. Yes, it can be tricky, but it's worth it if having a nice viewer friendly website is important to you.

Types of layouts available

There are two basic types of layouts: fixed width and fluid (flexible) width. A fixed width layout should be under 770px wide to prevent a side scroll at 800px resolutions. The scrollbar on the right of the screen takes up space, and it's been my experience that 770px wide is safe on all browsers. A fluid width layout will adjust itself to the resolution the viewer is using. You can test this by making the window smaller and larger- if the layout changes size so the content remains in view, it's fluid; if it stays the same and content disappears off the edge of the screen, it's fixed.

The basics

1. Keep your page layout under 770px wide, total.
2. Keep your content the appropriate size for the space into which you've placed it.

Even with a fluid template, you must keep your inflexible content under 770px wide if you don't want a side scroll at 800px wide resolutions. It's that simple. Your options are: 1. keep it under 770px wide, or 2. have a side scroll. Period. Your header image should never be over 770px wide, your columns should never add up to more than 770px wide- this includes counting the spaces, padding, borders, etc. used in the template itself.

To check your page view at 800px wide resolution, just reset your monitor's resolution to 800 x 600. In Windows XP, that's done by clicking on the Start button, then -> Control Panel -> Display -> Settings -> Use the slider to reset the resolution -> click OK.

You need to keep in mind the width of the layout. Fixed width layouts are not all 770px wide. Most sections of your template will have a specified width, you've got to keep the items less wide than the space into which you're placing them. Any time you place inflexible items into any space not wide enough for them, you're going to break your layout's proper display. It's like shoving a computer monitor into a shoebox, the box has to break.

Details

Certain elements on your page are flexible, and others are not.

Text is flexible, it will fit the space into which you place it- but only to a certain degree. You can get into trouble with text if you have a line of text that is too long with no place for it to be broken. This happens sometimes with long url's or if you want to express frustration with "ahhhhhhhhhhhhrrrrrrrrrgggggggghhhhhhh!!!!!!!!!" If I made that longer, so that it was wider than the space into which I'm placing it, it would break the proper page display. Text must have a natural place to break to the next line so it doesn't get too wide.

Images and other things may not be as flexible. If you place an image that is too wide for the space, it will break the proper page display. This is also true of things with a fixed width, like, sometimes you get from other websites to add onto your blog. Weather reports, search or text boxes, videos (which take forever to load so you should use sparingly or not at all)... anything with a defined width that is wider than the space into which you're placing it.

What your visitors will see

Different templates and different browsers will display various problems differently. Because different people use different browsers, they will not all see your page the same way- whether displayed properly or not (valid coding usually insures a nice display on all browsers- assuming you haven't broken your proper display). When the content is too wide for the layout, browsers may display it overlapping, spread out, pushed out of shape, or by moving floating items down below.

So what do you do?

If you are having a problem with your page display due to item width, what you do is find the culprit and fix it. Your options are:

• remove the item,
• resize the item,
• move the item to a wider space (Remember that you can put widgets above and below your blog posts, and possibly in other wide areas, such as a wider or double wide side column, header, footer, or banner.),
• select a different template with wider spaces available (three columns are more limiting than two columns because you only have 770px to work with- the more you split that up, the smaller each section must be),
• or live with a poor page display (not recommended!).

If the problem has just started, the obvious first thing to do is check the last thing you added to your page. It's most likely causing the problem. Remove it and see if the display goes back to normal.

Always check your page after each and every modification of your page, including blog entries. This way you can quickly discover and correct problems.

If the problem's been around for a while, or you've just applied a new template and some things are too wide and causing problems, then you will have to assess each thing on your page. Begin by saving a backup of your template which you can go back to if necessary. Do this by going to your Edit Template page, place your cursor into the large text box, right click and select all, right click and copy. Paste into Notepad or another program and be sure you save as a .txt or .html file. Other file types may ruin your html.

Now begin at the top of your page and go methodically down. Something is too wide, somewhere. The culprit may be obvious, now that you're looking, and you may be able to quickly resolve your problem. Test things by removing them to see if the display reverts to normal without the item.

It may be that you have several things too wide. You can remove everything, which should correct the display, then start adding things one by one and checking- this method will catch several problems. Say you have three items in one column that are too wide. Removing one and checking if it made a difference may not work because the other two items may keep holding the column out of proper shape. By removing everything and adding them back one at a time, you will catch any and all width problems.

If the display is messed up on only one page of your blog, the problem is something in one of the blog entries on the page- everything else about the page remains static. It has to be one of the blog entries, they're the only thing that changes from page to page.

Conclusion

Having your website display properly and be friendly for your visitors, you must be cognizant of what you're adding and where you're adding it. Like everything, it requires attention and choices. Once you have it figured out, it will be easy to maintain as long as you check your page after each modification.

---