Browser resolution and layout design

June 11th, 2007

As web designers and developers, we tend to understand the latest trends and account for them as we create and code. And no matter how hard we try, browser resolution always seems to be one of those trends that rears its ugly head. Yes, 800×600 is slowly disappearing and 1024×768 is becoming the standard. We all know that. But unfortunately, we still have to design for it.

As you might have figured, the current web stats and trends do support the slow fading away of the 800×600 browser resolution. W3Schools, with data collected every 6 months, states that as of January 2007, computers are using a screen size of:

• 800×600: 14%
• 1024×768: 54%
• Higher: 26%

Now keep in mind that this data is across the board use. Individual sites, demographics, industries, etc. will all vary from these numbers. And this is where the fun starts.

Get to know your user
Before you begrudgingly start to design for 800×600, find out if your target audience is even using that resolution. Sure, there will always be people with different resolutions that visit your site and of course, you can’t account for all of them. It is the internet after all. But who are the people that are actually going to buy your product or use your service? Those are the people you are going to design for.

Yes, it would be foolish to ignore the other people visiting your site. After all, a sale is a sale is a sale. But don’t let it greatly affect your overall design and user experience. You can account for them without focusing in on them.

So how do you do find out who is using what?

The first route is with market research through a third-party or by yourself. Both ways are fine as long as you have the time, money and confidence in either route. There are dozens of industry-specific magazines, reports and sites out there the will give you the low-down on the market trends you are currently in or trying to penetrate. After all, why do the extra work if someone else has already done it for you?

The second way is obvious to some and oblivious to others - talk to your customers. Find out their likes and dislikes. Observe them on the job. Ask them questions. You’ll find, as I have, that most people are very willing to share their positive and (especially) negative experiences when asked. It feels good for someone to take an interest in what you do. And don’t discount the negative answers to your questions. The most valuable information you can get comes from a negative experience because that is where your customers’ needs truly are and where you have the most opportunity to satisfy those needs.

Design Options
So you did your due diligence and found out that your target customer base uses multiple browser resolutions. What now? Well, you basically have 3 options: liquid layouts, resolution-dependent layouts or design a site with a set width of your liking or of a coin toss. Let explore each of them.

1. Liquid Layouts - You’ve more than likely seen this type of layout before. This is when a site is designed and coded to stretch out and in as you increase or decrease your browser size. (example) They are relatively common and like anything, can be designed well and not-so-well. Some things to consider when designing a liquid layout are:

   The graphic element(s) that are going to stretch. Usually this is a background color or a small portion of a photo that can be duplicated horizontally. When duplicating a photo slice, take a good look at, well, how it looks. Repetitive patterns can look amateurish when the colors and textures don’t match up. Also, take a look at the stretching portion in context to the entire photo. Two business people talking next to each other indicates collaboration, but may give the feeling of not understanding each other’s point of view if stretched apart.

   The content. Just because the graphic elements stretch to entire length of the browser does not mean the content also should. Keeping your column width between roughly 400 and 650 pixels allows the best readability for your users. By setting a minimum and maximum width, you can accomodate the liquid design and still keep your users (who know how to read) happy.

2. Browser-dependent Layouts - These handy-dandy pieces of code use javascript to detect the user’s browser size and then calls different CSS based on that size. The CSS can be completely separate style sheets or different elements within the same style sheet. Back on ‘04, Cameron Adams demonstrated how he switched between a 4-column and 1-column layout with JS and CSS (article | demo). Since then, Cameron has updated his code and others have joined the mix. Particle Tree, for example, wrote some solid code that modifies the layout a little smoother (article | demo).

   When implementing this solution, make sure that the user experience is consistent throughout the different column positions. If they’re asking, “Where the heck did that column go?” then you’ve done it wrong. Your site could seem confusing or even worse, broken. The best example I’ve found of resolution-dependent layout is UX Magazine. The transition is smooth and the site still has a consistent experience even when the column positions have been adjusted. Take a look at this not-so-great example. I spent more than a few confusing moments trying to find the second column when it relocated. Probably not how you want your potential customer to react.

3. Set Width Layouts - There are times that you’ll want to design your site with a set width. Your decision may based on the results of your market research, the complexity of your site or any other reason that strikes your fancy. After all, just because you can make a site liquid or resolution-dependent does not mean you should.

Final Thoughts
As always, make sure you know your target audience and follow the best practices of usability, design and clean code regardless of your layout choice. And, on a positive note, at least we no longer have to design for 640×480.

0 Comments  |   1,246 Views  |   Design

Digg this  |   Bookmark at del.icio.us  |   E-mail This Post