WEB DESIGN ARTICLES

All articles on this site are Published & Distributed
by Dunway Enterprises

http://web-design.dunway.com

TO MAKE MONEY USING GOOGLE ADSENSE - CLICK HERE

An Issue of Width - the Resolution Problem

FREE ARTICLE # 69

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 640 x 480 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: 640 x 480, 800 x 600, 1024 x7 68 and 1280 x 1024.

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 800 x 600: the 640 x 480 users are now a small enough minority to mostly ignore, as they'll be used to sites displaying incorrectly. At 800 x 600 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 800 x 600 - 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 800 x 600, width: 800 px).

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.

WEB DESIGN INDEX LISTING

SITE MAP

  1. 6 Reasons Why You Need a Website
  2. How the Web Works
  3. Registering a Domain Name
  4. The Confusing World of Web Hosting - Making Your Decision
  5. How to Set Up Your Hosting in 5 Minutes Flat
  6. Websites and Web logs - What's the Difference?
  7. What Do You Want Your Website to Do?
  8. Hiring Professionals - 5 Things to Look For
  9. Working With Templates
  10. Building a Budget Website
  11. There's More than One Web Browser
  12. Image Formats: GIF, JPEG, PNG and More
  13. The Many Flavours of HTML
  14. Clean Page Structure - Headings and Lists
  15. The Importance of Validation
  16. Avoiding the Nuts and Bolts - Content Management Software
  17. FrontPage - Easy Pages
  18. Dreamweaver - The Professional Touch
  19. What You See Isn't Always What You Get
  20. Why Doing It Yourself is Best
  21. Understanding Web Jargon
  22. Don't Be Scared, It's Only Code - HTML for Beginners
  23. 5 Steps to Understanding HTML
  24. Taking HTML Further
  25. Finding a Good HTML Editor
  26. CSS and the End of Tables
  27. Column Designs with CSS
  28. The Basics of Web Servers
  29. LAMP - The Most Popular Server System Ever
  30. IIS and ASP - Microsoft's Server
  31. Setting up a Test Server on Your Own Computer
  32. How Databases Work
  33. Which Database is Right for You?
  34. Uploading Your Website with FTP
  35. PHP - Easy Dynamic Websites
  36. Perl - Cryptic Power
  37. ColdFusion - Quicker Scripting, at a Price
  38. JSP - Java on Your Server
  39. Python and Ruby - the Newer Alternatives
  40. Taking HTML Further with Javascript
  41. VBScript - Javascript Made Easy
  42. AJAX - Should You Believe the Hype?
  43. The Web Designer's Toolbox
  44. An Introduction to Paint Shop Pro
  45. Photoshop - a Graphic Designer's Dream
  46. Free Graphics Alternatives
  47. How to Install and Configure a Forum
  48. Building Online Communities
  49. Using Quizzes and Games to Get Traffic
  50. Offering Free Downloads on Your Website
  51. Putting Multimedia to Good Use
  52. Opening a Web Shop with E-Commerce Software
  53. 5 Simple Steps to Accepting Payments
  54. Encryption & Security with SSL
  55. The Basics of Web Forms
  56. 7 Ways to Make Your Web Forms Better
  57. The Web is Not Paper
  58. Writing for the Web
  59. A Question of Scroll Bars
  60. Titles and Headlines - It's Not a Newspaper
  61. All About Design - Principles and Elements
  62. Designing for Search Engines
  63. Printing and Sending - the Two Things Users Want to Do
  64. The Art of the Logo
  65. Picking a Colour Scheme
  66. Fonts are More Important Than You Think
  67. Beware the Stock Photographer - Picking Your Pictures
  68. The Smaller, the Better - Avoiding Graphical Overload
  69. An Issue of Width - the Resolution Problem
  70. Why Word is Bad for the Web
  71. The 5 Principles of Effective Navigation
  72. Focus on the User - Task-Oriented Websites
  73. Making Searches Simple
  74. Time for User Testing
  75. Hints All the Way
  76. The Case Against Flash
  77. Using Flash Sensibly
  78. The Evils of PDF's
  79. Why Java Will Drive Your Visitors Away
  80. 5 Ways to Avoid the 1998 Look
  81. Content is King
  82. Why You Should Put Your Content in a Weblog Format
  83. Cut to the Chase - How to Make Your Website Load Faster
  84. How to Run Ads Without Driving Visitors Crazy
  85. Ads Under the Radar - Linking to Affiliates
  86. Text Ads - Unobtrusive Advertising
  87. The Top 10 Biggest Web Design Mistakes
  88. Why You Should Stick to Design Conventions
  89. 10 Easy Ways to Promote Your Website
  90. Making Friends and Influencing People - the Importance of Links
  91. How to Get Your Website Talked About on Blogs
  92. Tracking Your Visitors
  93. RSS - Really Simple Syndication
  94. Taking Your Website Mobile
  95. Registering Your Users by Stealth
  96. How to Make Visitors Add You to Their Favourites
  97. Setting Up a Mailing List
  98. Designing for Sales
  99. It's a World Wide Web - Going International
  100. Some Places to Go For More Information

Article Content - Free & Re-Printable!

Guidelines & Information for Publishers

Dunway Enterprises offers free article content [this means, as a publisher you may re-print my article(s)
subject to the terms & conditions that generally apply to free content articles.

The most common of these are:

  1. The article/articles must be published "as is" (unedited).
  2. Articles must be published with my Name & Company and Copyright Information.
  3. URLs shown within any article or resource box should be set as hyperlinks
  4. Articles cannot be used in spam communications.
  5. I encourage publishers to use this site as a free content resource.
    However, if you use the content, please provide, a link to this site.

Disclaimer: Information shown in the article shown above
does not in any way constitute medical, financial or legal advice.

If you require such advice, you should seek appropriate professional guidance.

More Free Articles to Choose From!

What Google Never Told You About Making Money with AdSense!
NEW Expanded 2nd Edition!

"A battle-tested AdSense Manual that picks up where Google left off,
handing you the secret keys to multiplying your Google AdSense Income
with a series of lazy - 10 second tweaks!"

CLICK HERE TO FIND OUT MORE!

FREE GIFTS CLICK HERE

Potential keywords for your next Google ad campaign
Adsense Killer Keywords

IF YOU CAN'T FIND THE INFORMATION OR THE PRODUCT
THAT YOUR LOOKING FOR - CHECK OUT THE CLICKBANK CATALOGUE
Over 10,000 Products to Choose From!

Business to Business  -  Health & Fitness  -  Home & Family
Computing & Internet  -  Money & Employment  -  Marketing & Ads
Fun & Entertainment  -  Sports & Recreation  -  Society & Culture

ClickBank the best way to complete a digital sale.

Google

If you're into Niche Resale Rights Products then check out my eBooks Site
which has 120 + different eBook Packages and still growing.

The Ultimate Recipe Collection [Cook Books]
CURRENTLY [57] DIFFERENT RECIPE E-BOOKS ON THIS PAGE
CLICK HERE TO VIEW THE LIST

Mail Order Products

Dunway Enterprises || Dunway Sitemap

WebMaster & Site Design by Ken Dunn

Dunway's Network of Joint Venture Sites

CLICK HERE TO SEND MAIL

Copyright [c] Dunway Enterprises

ALL RIGHTS RESERVED

WEB DESIGN ARTICLES