As time to release the site drew near, I was presenting the draft AI3 site to some colleagues for commentary. I was using a projection system that forced my laptop screen display to 800 x 600, unlike my normal setting of 1024 x 768. Unfortunately, registry of key elements was totally screwed up with this lower resolution. I realized I needed to also keep in mind the 20% of users or so that use this lower resolution. (Note: up until a few years ago, we designed our products for the 640 x 480 resolution, now totally abandoned. We now standardly design to 1024 x 768, but again some users with older machines and browsers or who need larger fonts keep the 800 x 600 setting.)
What Others Have Found
Like the earlier cross-browser posting, there are differences between browsers (specifically IE) that need to be accounted for in screen resolution-compatible design. However, the major issue relates to the use (or, more accurately, the improper use) of the so-called "box" model in cascading style sheet and modern HTML design.
Here are some sites that reference the "box" model and positioning that I found helpful:
- Brainjar has a good multi-part tutorial on CSS positioning, and
- These general considerations are also related to the design of "liquid" Web pages, as a helpful The Man in Blue discussion shows.
The guidance from these sites suggested that the key aspects necessary for modifying my site for different screen resolutions were to: 1) make the display elements "relative" in positioning, and 2) set display orders (z-index) properly for wrapping and overlaps. (The z-index sets the display order of an element with negative values allowed, with a higher number always in front of another element with lower stack order. The z-index can also be set to ‘auto’, in which case it has the same display order as the parent element. Z-index only works on elements that have been positioned, e.g., ‘position: absolute‘.) However, as noted next, there were undocumented changes also necessary to get the proper display.
Specific Changes to the AI3 Site
I made all of the changes to my class definitions to ‘position: relative‘ and ‘z-index’ to reflect the display order and foreground/background preferences suggested by these references. But I was still not getting the display desired.
After experimentation, I found that I needed to wrap all display elements that occurred below the masthead in a parent class that would provide a "relative" positioning to the masthead, after which the left and right panels could be absolutely positioned below it. This I called the BoxParent class:
.BoxParent {
position: relative;
}
In addition, my index.php files also called in left or right panel includes at the bottom of the file. For some reason for registry order to still work properly, I also needed to move these up to the top of the file prior to the posting loop that occurs in the main panel. While I did not search exhaustively, I did not find any reference to why this change was necessary nor why it worked. Oh, well, another mystery for this newbie.
These changes provided proper registry in Mozilla/Firefox and IE for different screen resolutions. However, for reasons unknown, and perhaps related to missing end tags in the multiple php files that are included and invoked during the dynamic display, I found I was seeing both indent and paragraph centering problems in IE that did not show in the other browsers.
My solution was to put extra calls in my source files either for ending a center (/center) or specifically setting margins in-line rather than coming from the external CSS. These are surely hacks and probably can be chalked up to the standard cross-browser gremlins. Nonetheless, they worked for now, and I was able to move on.
What Possibly Remains
One of the compounding difficulties of the AI3 design is the use of a GIF in a table within the masthead that forces width in other columns to be narrower at lower resolutions. This effect causes the overall masthead depth to be quite large at lower resolutions, which is not aesthetically pleasing even though the efforts above fixed the registry and layout problems.
The next step is for me to include some Javascript to detect browser screen resolution. At lower resolutions, I would switch out a smaller version of the masthead GIF and lower the scaling factors for the AI3 and other fonts in other cells. When implemented, I will invoke these four changes:
- Use the Javascript to detect screen resolution, and then at lower resolution
- Replace out the masthead image
- Change the 900% scaled fonts to 600%
- Change out the 150% scaled fonts to 115%.
Author’s Note: I actually decided to commit to a blog on April 27, 2005, and began recording soon thereafter my steps in doing so. Because of work demands and other delays, the actual site was not released until July 18, 2005. To give my ‘Prepare to Blog …’ postings a more contemporaneous feel, I arbitrarily changed posting dates on this series one month forward, which means some aspects of the actual blog were better developed than some of these earlier posts indicate. However, the sequence and the content remain unchanged. A re-factored complete guide will be posted at the conclusion of the ‘Prepare to Blog …’ series, targeted for release about August 18, 2005. mkb
