Cross-Platform Web Design on the Mac
Cross-Platform Web Design on the Mac
John Bancroft (firstname.lastname@example.org)
The World Wide Web pages I design for clients and for my own site look so good (to me) on my Macintosh that it breaks my heart to think that a large proportion of visitors to those pages will be seeing them on a PC.
That, however, is reality, and all of us who design and develop on the Mac must deal with it. And that means we have to make sure our babies look as adorable on that other platform as in our own perambulators.
Fortunately, the Mac is sufficiently flexible to make realistic cross-platform testing not only possible but relatively easy -- a boast that cannot truthfully be made for the PC.
The Basic Set-Up
Even if the world were to come to its senses tomorrow and adopt the Mac as its standard, Web developers still would have to deal with a Web universe in which connection speeds varied widely, as did the clock speeds and configurations of client machines. That's why I use a two-tier set-up in my studio.
Tier One: My primary workhorse is a PowerMac 7500/100 with 32 MB of physical RAM (doubled with RAM Doubler), 2 MB of VRAM, self-driven external stereo speakers, and a 28.8 dial-up Internet connection provided by one of the big national ISPs. My monitor is a 17-inch Apple Multiple Scan 1705 set to display 256 colors at a resolution of 832 x 624 pixels (75Hz) and employing Mac Standard Gamma (1.8). Except for the reduction to 256 colors, this is pretty much the default configuration for this monitor. This machine also hosts the peripherals I use most often: an Agfa StudioScan IIsi flatbed scanner, a Zip drive, and Apple's Color StyleWriter 2400.
Tier Two: My second-string machine is a Performa 475 (68040 CPU) with 20 MB of RAM, no VRAM, stock internal speaker, and a 14.4 dial-up Internet connection via the same ISP. Its display is a default-configured Apple 13-inch RGB monitor. This machine hosts those peripherals that I use less often: a Visoneer PaperPort vx feed-through scanner (useful for faxes and other office paperwork) and a black-and-white Apple StyleWriter II.
Both rigs run Netscape Navigator 3.0 browser software, but the first-level machine also runs Navigator 2.0 and the current release of Internet Explorer, a combination that gives me the best market coverage I can hope for in an online environment that changes daily. All these browsers are configured at default settings, so that what I see when I open a Web site in any of them (this browser browsing is a routine component of my site-building process) is what a Mac user running that application off the shelf would see.
Given that at least one of the competing sets of stats currently in vogue holds that the "average" Web user jacks in over a 14.4 dial-up connection to a moderately slow machine with a 13-inch color monitor, no graphics card, and rudimentary sound capabilities, I figure that with my two-tier system I've got that part of the site-testing puzzle in place.
Now I have to deal with cross-platform issues.
Simulating Cross-Platform Results
I use BBEdit 3.5.2 to build Web pages, both because I'm a strong believer in the value of HTML as the foundation for universally accessible Web communication and because none of the allegedly WYSIWYG authoring applications I've tried lives up to its billing. Besides, I have much more control with BBEdit and can do all the fine tuning the current HTML specification and associated Netscape extensions allow.
Add Adobe Photoshop (with the Netscape 216-color cross-platform palette loaded) and GifBuilder to the toolkit and you have everything a Web developer who designs for the realistic state of the art (rather than for a future of ubiquitous high-speed computers and unlimited bandwidth) can profitably use. With this basic toolkit I have no trouble incorporating forms, frames, tables, stock and custom CGIs, GIFs animated and still, and high-quality, fast-loading JPEG images into my sites. I have made a decision to hold off on the use of Shockwave, Java, and audio/video streaming until I am convinced that these admittedly sexy technologies will no longer routinely break browsers, crash systems, or frustrate site visitors.
Sticking closely to HTML and its most commonly supported adjuncts has another benefit in an imperfect cross-platform online world: although results are guaranteed to display differently on different machines, an acceptable percentage of every site I build has a fighting chance of finding a compatible home on any given end user's desktop.
1. Build A Test Page or Two
Include text blocks, graphics, site color palette for backgrounds, links and text highlights, and, if you will use them in the finished site, mini versions of anticipated forms, tables, and frames. No matter what you used to build your pages, preview them in Netscape Navigator 3.0.
2. Equalize Monitor Resolutions
With your test page visible in Navigator, open the Monitors & Sound (System 7.5.5) control panel. You're already running at 256 colors, so just switch your monitor resolution from the common Mac setting of 832 x 624 pixels to the common PC resolution of 640 x 480. Voila. Your browser window expands to more than fill the screen and your text balloons up to PC defaults.
How are those text lines breaking now? How cool do those GIFs look? What happened to your tables?
Unless you're very smart or very lucky, you'll have some modification to do before all these standard elements work smoothly together at both resolutions. But don't tinker yet. Instead, make detailed notes of areas needing repair and repeat the experiment using the current release of Internet Explorer.
Your tables and frames are working in this version of the Microsoft browser, but what happened to your margins? Make a note to allow for the difference in browser offset (default indent) in Navigator and Explorer. Or not, as you see fit; maybe it doesn't matter to you. After all, Explorer may be creeping up on Navigator, but Mozilla still commands the dragon's share of the browser market -- and the lion's share, too. (If a client demands that you worry about all the other less capable browsers out there, each with its own microscopic share of the market, you can always build dull-but-digestible text-only alternate pages in strict compliance with the earliest HTML specs.)
3. Correcting Screen Color
You've used the 216-color cross-platform palette with Photoshop to output your original site graphics and you've carefully controlled file sizes of scanned images by deleting unused colors and by opting for the tightest appropriate compression, but what about the colors themselves? How will they look on different platforms?
Because PC monitors are not as bright as Mac monitors (insert punchline here), site designers need to have a way to simulate color display for every bar of the cross-platform spectrum from flat, hex-coded background and link colors to the many individual colors that blend to comprise photographic images. Fortunately, Photoshop and the MacOS together can handle the challenge. Photoshop ships with its own Gamma Control Panel; drop it into your system's Control Panels folder.
With this component in place, your monitor resolution still at 640 x 480, and your first test page loaded in Navigator 3.0, open the Gamma Control Panel and slide the control point left on the scale to between -30 and -60 (or a gamma of 2.2). Your screen darkens to approximate the brightness of a standard PC display. The range accounts for individual differences in monitors; you'll need to experiment to fine tune your own setup.
Wasn't that brownish navigation button supposed to be orange? As the television version of Mike Hammer was so fond of saying, make a note.
4. Tweak, Retest & Tweak Again
It may take a few rounds of tweaking and testing to arrange everything to your satisfaction, but this early investment in quality assurance will save you from apoplexy when eventually you venture out to your nearby PC-afflicted cybercafe (You wouldn't actually buy a PC, would you?) and check your site's look on a platform other than your own. (NB: Be aware that all this resetting of monitor controls eventually will drive your Mac crazy and cause it to crash. I've found that the aggravation is worth it. I just suck it up, restart, and go on. Nobody said QA was painless, right?)
5. Build Your Beta & Do It All Again
Before you present your cross-platform-tuned masterpiece to the client, run the whole site through the steps outlined above. Your client may or may not be impressed, but your hair will be perfect.
Summary - Cross Platform Mac Tips
- To Simulate a PC on a Mac
- Adjust Gamma to 2.2 (or from -30 to -60 at the default 1.8 setting), observe, and tweak
- Equalize Resolution by setting the Monitor Control panel to 640x480
- Use the 216-color palette to ensure non-dithering colors
- Test your pages on different browsers and platforms
- Optimizing Web Graphics
- "Tweaking Gamma" - From an article titled "Platform Crossing Ahead" in the October 1996 issue of MacWORLD p. 159.
- Web Graphics
# # # # #
John Bancroft (www.pictograph.com) is a founder of Bancroft & Associates, a Tampa-based network of information architects, graphic designers, and digital publishers, all of whom use the Mac to build Web Sites That Work on any platform and without overtaxing available bandwidth.
Comments are welcome
Written by John Bancroft and
Revised: Dec. 20, 1996