An Issue of Width: The Resolution Problem

By:Floyd Bogart

There is a problem that has plagued the web ever since graphical designs for web pages started to become common, and yet it's a problem that's never been solved. You see, different sized monitors can handle different widths of page, and yet HTML doesn't really let you take width into consideration when you're designing. Why is this such a problem? Well, let me explain.

What is Resolution?

Before we can get to the problem, you need to know what a screen resolution is. To put it simply, your resolution is the number of pixels that can be displayed across your monitor, horizontally and vertically. For example, at 640x480 resolution (the lowest anyone still uses), your screen is 640 pixels wide by 480 pixels high.

Most monitors can handle more than one resolution, and will give you a choice between them. Typically, there will be a lower resolution that fits less pixels on the screen but makes them look bigger, and a higher one that fits more but makes everything look small. The default is usually somewhere in the middle.

To check the resolution you're using now, right click on your desktop and choose Properties. Now go to the Settings tab and look at the screen resolution section. On most computers, there will be up to four settings to choose from: 640x480, 800x600, 1024x768 and 1280x1024. It's worth changing your resolution a few times and going to some web pages, to get an idea of how much width each setting gives you.

Now, you have to realise that the maximum width of your website, in pixels, will be the lowest width you expect your site's visitors to be using. In almost all cases, this is 800x600: the 640x480 users are now a small enough minority to mostly ignore, as they'll be used to sites displaying incorrectly. At 800x600 and up, though, you should test your site to make sure it looks good.

The Price of Failure.

If you don't test your site correctly, then various things will go wrong. At resolutions lower than the one you designed the site for, visitors may see horizontal scrollbars. If you fix the site's width too low, though, visitors using higher resolutions may just see a thin strip of your website in the middle of their screen.

Possible Solutions.

The most popular solution to the resolution problem is to just design as if everyone was using 800x600. After all, people with big monitors can just make their browser windows smaller. To make a fixed width design, simply set the CSS width of your body tag to the width you want in pixels (so for 800x600, width: 800px). If you take this approach, you will probably want to set the CSS margins to auto, as this will put your fixed-width page in the centre of larger screens. If you leave the margins alone, then your page will appear on the far left of the web browser at high resolutions, which is common to see but still looks bad.

Of course, the more complicated but better way of doing things is to make sure that your design will work just as well no matter how wide the browser is, because it stretches to fit. These kinds of designs are known as 'elastic'. This can be difficult, but it's doable, especially for relatively simple designs. If your design has three columns, for example, you can make the left and right columns fixed-width but leave the middle column to take up all the remaining width.

The biggest concern with elastic designs tends to be the graphics: if you have a fixed-width header, how can you adjust your site for any possible width? In most cases, the solution is to make your header an image that floats over a background continuing it. For example, you might use an image of navigation text floating over a line. You can then continue that line as the background image, to avoid it suddenly appearing to stop if the viewer's resolution is wider than your navigation images. CSS gives you a lot of power to create illusions like this: make good use of it.

Digg del.icio.us Blink Stumble Spurl Reddit Netscape Furl

Article keywords: web site design, web page design, web site development, web design templates, web page designs

Article Source: http://www.articles2k.com

Floyd Bogart has been in the Marketing field for his entire 26 year career. He is now focusing all of his efforts to online marketing. For more information on website design go to:
http://websitedesign.hijackmyebooks.com

Top Web Design Articles
1). Advanced Joomla Templating (pt1) Using Module Class Suffix By : Robert Palmer an article from User Written Resources 1. duplicate the styles already used for the particular module, adding a suffix to each style name. this will definitely include some of the following; 1. .module {} 2. div.moduletable {} 3. div.moduletable h3 {} 4. table.moduletable {}/li> 5. table.moduletable th 6. table.moduletable td and can include other styles used on the content in that section, such as; 1.
2). Irish Graphic Design Industry By : dave4 Graphic design is the use of color, light, balance, contrast, emphasis, proportion, proximity, repetition, texture and a plethora of other elements to create a work of digital art that is pleasing to the eye. Graphic design is about seamlessly molding image and text to convey a theme, message, or often advertise a product or service. Graphic design dates back to prehistoric times.
3). Adsense: The Smart Investment By : Pat Lovell & Jon Atwood Over the last 2 years, We have been building a Virtual Adsense Empire of over 500 websites and making some good money. We've also been building content sites for clients using the same system. The system we use is not something that produces 1000's of sites with a click of a button, our system does not build spam websites, nor does it produce the same sites you see over and over and over again.
4). Some guidelines for Website Design By : Angela Oliver You have a great product. You also have a great company image and marketing model. Now it is time to implement all your plans and bring together a website. You know very little about websites. Finding websites that have failed is easier than shooting fish in a barrel. Many people come into the internet business with the notion that if they are on the web, they are guaranteed to make money.
5). Does Your Web Design Include Background Music? By : Mark Nenadic When you design your website, you may wonder whether or not you should include background music in your web design. The answer to this requires you to ask two additional questions:
6). Develop Your Business Web Site for Profits By : Jay Peterson Looking into developing your business web site? Whether creating a business web site to sell your business products online or just to give the public valuable information, creating a business web site can be an important first step to creating an important presence on the web. Here are some tips on creating a business web site as well as what is involved in getting your business web site off the ground.
7). Is your printing costs sky rocketing? By : Florie Lyn Masarate Here are some things you can do to be able to lower your printing costs. 1. Cheap but good quality printer. There was a time when only a handful of people can afford having one of those colored and digital printers. Now that these things are more rampant, they have become more affordable. Color printers of good quality are even inexpensive already.
8). Creating A Quality Web Site Design! By : Martin Lemieux In this article, I will attempt to cover the basics of creating a great quality web design template for your site. Now it's a known fact that the layout or "eye candy" as I put it will determine whether your visitors will stay more than 15 seconds or they will just become another statistic. In this article, I will attempt to cover the basics of creating a great quality web design template for your site.
9). How Does Your Website Make Me Feel? By : Philippa Gamse When people think about the Internet, they think about technology. When people hear that I am a Website strategy expert, they see me as a "techy type". But for me, the most intriguing aspect of your online business isn't about the technology. It's about human connections, and how you can create these in a virtual environment. It's commonly understood that "people buy emotionally, not intellectually.
10). For Automated Sites - PHP and MySQL Are A Perfect Match By : Halstatt Pires You’ve decided to automate your web site. Now what? Here are some ideas to help you choose how to automate your site. A bit of programming is going to be necessary if you want to automate a site. There are many types of programs that can be used to automate a web site including JavaScript, PHP, Perl, ASP, Java and more. So, which do you use? For many, it is a personal choice.

New Web Design Articles
1). Professional Web Design for Home Based Business Owners By : Anthony Samuel Realize the importance of having a website for your home based business.
2). Web Design ,Will Visual Effects Catch a Viewers Eye By : Gordon Petten Web Design does not necessarily have to be as complicated as it may seem. With a little ingenuity and some creative work a website with a clever web design can take form.
3). Spring Cleaning and Website Maintenance for Your Website By : Cliff Posey This article shows how to do professional website maintenance when budget web design is important
4). Color Plays An Important Role In Design And Graphics By : Ken Snow Color schemes are fun no matter what they are being used for. Color schemes come into play when decorating a room or painting a house.
5). Will Baby Boomers Impact Your Website Design? By : Illa maden Article stresses the point of making website design that accomodates specific visitor needs.
6). A Brief Introduction to E4X By : Jim Pretin Find out what E4X is and why it might be important for web designers to learn to use it
7). Graphic Artists - Who Needs One When You Can Do It Yourself Online? By : Pearl Deloria Image is everything! Think about it. How many times have you made a judgment about a company based on the quality of the junk mail that you have been sent? Other people make similar judgements, too. Businesses cannot afford to be thought of as cheapskate in their marketing. You know that most of your mail goes straight in the trash, and it may grieve you to spend four times the amount, just for it to be thrown away.
8). How To Style Your Text With CSS By : Hilco van der Meer Styling text with CSS is really simple. We can define colors, underline it, make it bold, define the font etc etc. We will start with some basics. First we define the html where we will be working with. This is the text 1. Colorize your text We can select the P tag and add some styles to it. p { color:red; } Now our text will turn red. You can define any color code your want or choose one of the 16 standard color names.
9). What is a web designer anyway? By : Alicia Harper As a web designer, I get all kinds of requests , for information other than web design, and as a web designer I'm not suppose to really to be able to do things outside of the web design area. I believe there are a few misconceptions about what exactly a web designer does. In this article I am going to nail down exactly what a web designer is and what they should be able to do.
10). Advanced Joomla Templating (pt1) Using Module Class Suffix By : Robert Palmer an article from User Written Resources 1. duplicate the styles already used for the particular module, adding a suffix to each style name. this will definitely include some of the following; 1. .module {} 2. div.moduletable {} 3. div.moduletable h3 {} 4. table.moduletable {}/li> 5. table.moduletable th 6. table.moduletable td and can include other styles used on the content in that section, such as; 1.