squareCircleZ

I have been wanting to re-design the layout of Interactive Mathematics for some time.

So a few weeks back I decided to give up on the old design for my 2-column layout. Many complications arose from that simple decision, but anyway, I persisted because I like a challenge.

The updated site needed to obey the following:

1. Liquid layout, which caters for screen resolutions from 800×600 upwards.
2. The maximum width of the page is 960px (so columns don’t become too wide on large monitors).
3. Able to cope with wide content (A lot of the images and Flash interactives are wider than 800px allows for. IE6 expands the containing DIV to fit the content, IE7 and Mozilla browsers do not, as per W3C recommendations). I used a PHP variable to handle this aspect.
4. Properly floated DIVs (as opposed to vertically positioned DIVs)
5. Of course, HTML and CSS compliant
6. A minimum of IE hacks
7. Enhanced usability
8. Simplified CSS (it was overly complicated before)
9. Use best-practice principles from Russ Weakley’s workshop

Do any of the users notice or care? Most likely not, but it should be a better user experience for them.

Footnote: The only “hacks” used are the following for the #wrapper DIV width:

/* Only Mozilla-based browsers understand this... */
#wrapper {
  min-width:740px;
  max-width:980px;
  }

/* Only IE browsers understand this... */
#wrapper {
  width:expression(
    document.body.clientWidth < 980 ?
    "740px":
    "960px" );
  }

Each one can only be understood by the browser type it is aimed at. The Mozilla one is proper CSS, but IE doesn’t understand it. The IE “expression” (which works like an “if” decision) is actually more convenient for my application, so I used it. This aspect is not as future-proofed as I would like, but it works for now.