Low End Mac's Design Moves Forward with CSS and XHTML

For eight years we've been editing and designing Low End Mac using Claris Home Page, plain vanilla HTML, and tables for layout. My text editor of choice was BBEdit Lite 4.6, and I used a program called Mizer to compress each page's HTML code so it would load faster.

This was Low End Mac, and we realized that for some of our readers a 14.4k modem was the state of their art. We designed for the lowest common denominator and tried to make sure that our pages looked similar in any browser from the 2.0 era forward - and even that they worked decently on the 512 x 342 display of an SE/30.

That era has come to an end.

Raising Standards

We've been using include files and style sheets for years, and we've done some website automation using PHP and MySQL, but all of the coding has been compatible with the HTML 3.2 or 4.01 Transitional specification.

Now we're moving forward. We're making the transition to XHTML for our page code and also starting to use Cascading Style Sheets (CSS) for page design instead of old fashioned HTML tables. We're still tweaking our page template, but it's coming along nicely. We'll continue using our table design as we make the transition to CSS design.

CSS lets us do some pretty neat things, and we updated our style sheets over a week ago to include things like headers reversed against a darker background bar and to create our new navigation bar at the top of the page. The new design scales pretty nicely, whether you're using a 640 x 480 monitor or something a whole lot bigger.

10 Forward

None of this would have been possible without Style Master, which as a CSS editor with wizards (to help you design things like a navigation bar) and a tutorial that really helps you get a feel for how CSS works.

I've been using TextWrangler 2.0 ever since Bare Bones Software released it as a free product, and it's a worthy successor to BBEdit Lite in every way. And I'm using a wonderful program, Tidy Service, that works as an OS X Service within TextWrangler. Based on HTML Tidy, Tidy Service lets me clean up the HTML in an open page or convert the entire page to XHTML.

That's wonderful. I can take my current pages, tables and all, open them in TextWrangler, select all (cmd-A), and choose "Tidy to XHTML" from the Services list in the application menu. It's not quite perfect - it sometimes forgets to declare the DOCTYPE and sometimes adds a spurious � or two near the end of the file. But those are easy to fix.

Best of all, two of these three programs are free, all of them are OS X native, and I learned enough from Style Master to justify the US$60 price tag.

I'm not quite free of Classic apps. I still use Claris Home Page to write and edit articles for LEM, although I'm sure I'll find a nice replacement some day (Nvu looks very promising). And although I have Photoshop Elements 3.0 and prefer it for photo work, I find my ancient Photoshop 5.5 faster to use, as well as more powerful for creating type with drop shadows.

As for Mizer, it's been retired. While Claris Home Page had the bad habit of adding a lot of spaces to make the source HTML easier to follow and Mizer was great for deleting those spaces, Tidy Service doesn't add those spaces - so there's no need to eliminate them.

Tidy Service also makes pages that are more strictly compliant with standards, so the "unnecessary" quote marks that Mizer eliminated are restored when I Tidy a file. On average, my files were 25% smaller after using Mizer on my Home Page documents, but there's not enough extraneous stuff after Tidy Service does its thing for me to worry about an HTML compression program.

And Backward

XHTML is the next step beyond HTML 4.0, and it's intended to be pretty compatible with older browsers. Likewise, good design using CSS not only creates pages that degrade nicely with older browsers, but it also makes pages more accessible.

On the down side, pages may not work as well in older browsers once we fully implement our CSS design. And iCab really shows its noncompliance. But with 98-99% of our visitors using modern browsers, we figured it was time to make the switch.

We've also changed our color scheme, something we began implementing last week. We're using different shades of blue and a lighter shade of gray, and we've begun updating our site graphics to match, although again it's going to take some time to get everything moved to the new system.

Beyond Hard Coded Pages

After all of that's finished, I should feel confident enough of my CSS and XHTML skills to start moving Low End Mac away from hard coded pages to a publishing system. The one we're hoping to adopt is Drupal, a free content publishing system with a broad user base that still uses .html page calls (wonderful for backwards compatibility) and scales well under heavy loads.

Just like Mac OS X, Low End Mac is always under construction, and we're always trying to make it a better site for you. We hope you'll find the changes helpful.