The Web Page Width Dilemma - Get Articles by Mario Sanchez |  |
> Get Articles > Web Site Design > The Web Page Width Dilemma The Web Page Width Dilemma Download as PDFMario Sanchez TheInternetDigesthotmail.com The Internet Digest http://www.theinternetdigest.net With so many different resolutions (640x480, 800x600, 1024x768, etc.), browsers (Internet Explorer, Netscape, etc.), and platforms (Windows, Mac, etc.) in use, it is very difficult to design a web page that looks good (or at least looks the same) in all configurations. To design a web page that looks good in most configurations, let’s start with our main objective: we must never force our visitors to scroll horizontally. In other words, our page must always fit within the available screen width. This would suggest that we have to design our page for the lowest common denominator: 640x480. However, less than 1% of Internet users now utilize this archaic resolution (which was common when 14” screens were the best you could get). Therefore, we can rationally make the decision to ignore the 640x480 resolution (since forcing 99% or users to read a low resolution page to accommodate 1% of our user base doesn’t sound too efficient), and design our page for resolutions of 800x600 and higher. Since 800x600 remains the most popular resolution today (May, 2003), we must optimize our page design for this resolution, meaning that our page should look best at 800x600. Bear in mind that I’m not saying that we must necessarily design an 800 pixel wide page, only that it must look best in screens with 800x600 resolutions. At this point, we're ready for our next decision: should we use a fixed width for our page, or should we specify it in percentage terms? There are pros and cons for both. The main advantage of a fixed-width page is that the layout will always remain as you intended, even when viewed at a higher resolution. The main disadvantage is that users with larger screens, set at higher resolutions, will not be able to fully utilize them, and will instead see large, unused blocks of space around your page (certainly, a disappointment to those users who spent a lot of money for a large computer screen). The advantage of establishing our page width in percentage terms, as 100%, is that the page will adjust itself to the full resolution of the screen. This is called a “liquid page design” (although I like to call it a “bubble-gum page design”, since the page looks as if it has been stretched horizontally when viewed at higher resolutions). The main benefit of this method is that all the available screen real estate will be utilized. The disadvantage is that the layout of your page will change, and users may find it uncomfortable to read the extremely wide sentences that will result when higher resolutions are used. If you decide to follow our advice to optimize your page for 800x600, and then decide to follow the fixed-width page method, you must take into account that not all the 800 pixels will be available (some of them will be used by the browser to display the scrollbar and other “browser chrome”). To accommodate most browsers and platforms, specify your page width at a maximum of 750 pixels. If you decide to specify your page at 100% width, you won’t have that problem, since it will adjust automatically to the available width. Just make sure that your page looks best at 800x600, and that the layout doesn't change much when you view your page at 1024x768. How useful did you find this article? This article can be downloaded freely from http://www.get-articles.com and used on your website or in your ezine so long as the author is credited and their resource box left intact. You should not change any links in the article, and where the article is used on a website it's links should be clickable. Please see our terms and conditions page for more information: http://www.get-articles.com/authors-publishers-terms.php |
|
Top Articles |
||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
May 28, 2012 © www.Get-Articles.com. All Rights Reserved.