WEB DESIGN -- Page Width

A 1024 Pixel Fixed-Width Design Now Seems To Be The Best Option


The Page Width Challenge

It is very difficult to design a webpage that works well with all the display configurations that are out there on the Web. There are so many different display screen resolutions being used. For example desktop computers with standard aspect-ratio monitors (4:3) have been built with 800x600 SVGA, 1024x768 XGA, 1280x1024 SXGA and 1600x1200 UXGA display resolutions, to mention only the most popular. Wide-screen displays are becoming more common, and have been built with resolutions of 1280x768 WXGA, 1600x900 HD+, 1680x1050 WSXGA+, and more. Additionally there are now extra large TFT desktop monitors and wall-mounted flat panel TV's with resolutions of 1920x1080 Full-HD, and beyond. I-pads, Kindles and other tablet computers with their smaller screens are becoming very popular indeed and are replacing many laptops in transportable use environments. Smart-phone mobile devises are increasingly being used as an Internet portal, and these have a whole new set of small resolutions that one must contend with. How is one to design an attractive and functional website with all these different display screen sizes that must be taken into consideration?


Fluid Width

Commonly referred to as fluid, liquid or dynamic width, this was at one time a good solution. The webpage was coded to fill out the available width on any size of monitor, and the width of a displayed webpage could then be manually decreased or increased by the site visitor through holding down the mouse pointer on the right edge of the page, and sliding that edge in or out according to whim. Text and its word-wrap around graphics in the body area of the webpage would automatically adjust as the page width was changed. This was off course subject to certain limitations. Web pages that made extensive use of graphical elements were more difficult, if not impractical, to implement with a fluid width design. A really good looking fluid-width nameplate header could be a tough challenge.

During the first 10 years of the public use of the Interent, say from 1995 to 2005, most computer monitors were 800x600 SVGA. So during that time an 800 pixel fixed-width design was the most common width for websites. Accordingly, the AWA7.org website when launched in 2005 had a 800 pixel fixed-width design. However shortly after the launch of the AWA7 site, sales of 1024 XGA monitors started to take off. With vacant borders on each side of the screen, websites designed for 800 width looked like they were wasting a lot of good space on the new monitors. But there were still a huge amount of 800 width monitors being used at the time, especially in developing countries. So changing a website to 1024 fixed width was not a good option, as this necessitated the use of inconvenient bottom sliders when a 1024 site was viewed on a 800 width screen. Fluid width seemed to be the ideal solution, and accordingly in 2007 the AWA7.org website was redesigned to fluid width, a design change that involved considerable webmaster time to code correctly!


Shortly thereafter 1280 pixel width monitors started to become popular, espcially in the 1280x768 WXGA wide-screen format on laptop computers. The fluid-width websites now gave a distorted  s-t-r-e-t-c-h-e-d  t-o-o  w-i-d-e  view when they first loaded onto the new 1280 and beyond wide-sceeen displays. The solution seemed to be to go back to fixed width once again, but this time designing at a nominal 1024 pixel width. Accordingly, the width of the AWA7.org website was changed again, this time to a 1024 fixed width. This was done at the time the site was migrated over to the netAdventist Content Management System around 2009.


1024 Pixel Width Webpage Design

There are several reasons why a nominal fixed width of 1024 pixels is to be recommended:

 - This is the most popular width used by commercially successful websites. People feel most comfortable with what they are used to.

 - Even though most desktop and laptop computers have a 1280 or above screen resolution, 1024 width sites still look good on them.

 - Users with very large and extra-wide screens like to place two windows side-by-side, and so a 1024 width webpage is actually perfect for them.

 - Website visitors don't like to scroll horizontally, which means that site visitors with older-generation 1024 screens are still happy!

 - Visitors with large monitors who want to view a 1024 site full-screen can always adjust their browser zoom so that the site will then display at full-screen.


A Final Word

Wide lines of text are more difficult to read, and that is off course the reason why newspapers use multiple columns. On a 1024 width webpage with a single left-hand navigation panel, the body area width will typically be around 700 pixels. If only text fills this body area, and if this webpage is viewed on a 1024 pixel monitor with a 12 inches horizontal screen length, then the width of the text will be quite comfortable to read. This convenient "readability" is another reason why a 1024 nominal fixed-width design is a good choice.