Recovered from the Wayback Machine.
I am a good bread and butter CSS designer, and can create designs that look relatively decent in browsers and validate, but I’ve never taken my design to the higher levels. When I re-make my sites over into the new layout, I want to change the design to allow for greater accessibility.
One aspect I’m exploring is the concepts of elastic design versus fluid and static. Right now I use static settings for my column and sidebar width, which means if you open the page in a smaller browser, you’re going to get a horizontal scrollbar:
width: 650px
The fluid approach is to use percentages rather than fixed values, which means the contents resize based on the browser window. However, I hate lines of text that are too long. If the browser is opened in a high resolution monitor, the writing will become very difficult to read.
width: 85%;
Enter the concept of elastic layout, as originated in A List Apart and other posts such as this at 456 Berea Street. With this approach, a maximum width is given so that regardless of browser and screen, the container doesn’t expland past a certain point. However, if the page is shrunk, the column shrinks accordingly.
max-width: 650px;
or
max-width: 40em;
Unfortunately max-width isn’t supported in IE 6, which means until IE 6 is a thing of the past, I’ll have to use a IE 6 workaround. The workaround requires I use invalid CSS, though, and regardless of how that’s packaged, it’s not something I’ve not wanted to do. However, pushing horizontal scrolls on folks also isn’t what I’ve wanted to do.
I still need to work through images in the posts, but I must say that web page design and development today is a lot more intersting than it was when we were struggling with the 4.x browsers.
A member of the webdesign-l list group send around links with good liquid and elastic CSS articles. The links to these are part of a resource site maintained by the University of Minnesota. There’s an extensive section on accessibility, JavaScript, XML, PHP, and even a section on Sites & Blogs related to web design. It’s probably the best and most comprehensive Web Design Reference site I’ve seen.