Web Tips and News
Bookmark this web page to keep up on the latest news and techniques in web development.
Photo above is of the nature trail behind Henry Ford Community College. Currently, the trail is 1.8 miles and extends from Hines Drive, east through the HFCC campus, the University of Michigan Dearborn to Michigan Avenue. Once a walker, roller blader, runner, or cyclist reaches Hines Drive, paths on both sieds of the Drive can be taken nearly traffic light free for 17 miles west from the from the Rouge River behind the college to Northville, MI. Along Hines Drive are numerous baseball and soccer fields, fishing docks and picnic areas. The development of this trail is a part of numerous Rouge River restoration projects including water quality, ecosystem heath monitoring, and animal, plant, and erosion restoration. Eventually, the trail is to extend all the way east to downtown Detroit. Photo taken in the Winter of 2008.
Web Page Width and Fixed vs. Fluid Designs Posted: March 1, 2009
Web Page Wdith
The HFCC Web Design and Development Club just migrated its web site from a fixed width 690 pixels wide CSS design to a fixed width 900 pixels wide CSS design. Why? Because over the years the most common resolution set on monitors has increased. When 15 inch CRT monitors were the norm and people where using less powerful video cards with less memory and were running Windows 98, the most common monitor resolution setting was 640 x 480, i.e. 640 pixels. Thus, web sites were deisgned with this in mind.
While many techie's width high monitor resolution and large monitors do not maximize their web browser windows, a lot of users do. Thus, with the web browser maximized, a web designer would most likely want to build a web site to be approximately 600 pixels wide. This way, there is a small amount of white or empty space aruond the web site inside the web browser and monitor.
Between the years of 2000 to 2004, 800 x 600 monitor resolution, or 800 pixels wide slowly overtook 640 pixels wide as the most common setting. And in 2004 to 2005, 1024 pixels wide become the most common width, which it continues to be today. Many techies have their monitor resolution set higher than 1024, but the average web user does not (remember, there are stil a lot of people out there running Windows 2000 and Windows XP on older machines becauses their uses do not require an upgrade).
Fixed versus Fluid Page Design
Web sites can bd designed as either fixed-wdith or fluid. Fixed width means the web pages have a wdith that is fixed, say 900 pixels. 900 pixels would be a good width to choose for a web site now since the average monitor resolution setting for visitors is 1024. This leaves some room on the borders for white/empty space. The web pages are made fixed through the use of either tables or CSS with a width setting in pixels (px). creating web pages with a fixed width design/layout is the most common technique used today.
Fluid designs work differently. Instead of designing specifically to the most common monitor resolution fluid layouts try to accomodate all resolutions by being flexible/fluid. Table or CSS widths are defined using perctanges (%) instead of pixels. In this way, if the user has a higher monitor resolution setting, the web page expands into that size to try to fit into the entire browser window. If the user has a lower monitor resolution setting the web page width skrinks to try to fit into that browser window size.
The potential problem with fluid designs is that when the user expands or shrinks their browser window (or has a high or lower monitor resolution) the location of content on the web page may re-locate or move around to try to accomodate the different sizes of the browser window/monitor. A fixed width site will not. It is fixed and will stay the same size with higher resoltion or an maximized browser window. The only downside of a fixed width web page is if it set at too small a width. in this case, there will be too much white/empty space around a centered, fixed width page or too much space to the right if it is a fixed width left-justified page.
It should be noted, however, that many sites now are a hybrid. State of California, KMart, and Amazon.com, as discussed below are hybrids, i.e. a combination of fixed width and fluid design. This is also a nice option if it fits the amount of information on the site and design of web page. With a hybrid, if the user expands the browser window or has a high monitor resolution, the web page expands into it and still looks good. If the user shrinks their web browser window or has a lower monitor resolution, eventually content is cut off, just as it is with a fixed width.
April 2009 Statistics
| Web Site | Site Type | Width |
|---|---|---|
| JP Morgan Chase (Chase.com) | fixed width, centered | 780 pixels |
| Northwest Airlines | fixed width, centered | 970 pixels |
| Whitehouse.gov | fixed width, centered | 1006 pixels |
| University of Michigan Ann Arbor | fixed width, centered | 770 pixels |
| Microsoft | fixed width, centered | 932 pixels |
| WebMD | fixed width, centered | 985 pixels |
| fixed width, centered | 965 pixels | |
| Bed, Bath and Beyond | fixed width, left-justified | 955 pixels |
| Ford Motor Company | fixed width, left-justified | 936 pixels |
| Craig's List (main) | fixed width, left-justified | 860 pixels |
| State of Michigan | fixed width, left-justified | 905 pixels |
| KMart | fluid design (expands to fit browser windows; minimal width before content cut-off it 990 pixels) | 990 pixels |
| State of California | fluid design (expands to fit browser windows; minimal width before content cut-off it 795 pixels) | 795 pixels |
| fluid design (expands to fit browser windows; minimal width before content cut-off it 470 pixels) | 470 pixels | |
| Amazon.com | fluid design (expands to fit browser windows; minimal width before content cut-off it 980 pixels) | 980 pixels |