If you’re a designer, odds are you stick to one platform or another. If you learned to design on a Mac, you probably only boot up your PC to make sure everything is coming out right. Some of you may not even own a machine with a different operating system on it.
That’s understandable for a small design firm or freelance designer. By the time you spend all your money on software, and hardware, such as printers and scanners, an extra machine just to check your work might not be a high priority. After all, isn’t there only one way to view an image, isn’t text just text, and doesn’t Dreamweaver write it’s HTML the same regardless of what OS you are using? If this isn’t the case, then why have standards at all? Well, that all may be true, but the probable rears it’s ugly head when you find out just how the different operating systems configure their hardware. Windows treats a monitor’s resolution differently than a Mac. And both use different color correction.
So what are you to do? Some will say, “Well, most of my visitors use PCs, so lets forget about those other outcast.” Others will says, “PC users are just drones anyway, so who cares?” Well if you’re in the business of trying to make money through any means on a website, whether that means an e-commerce site or just trying to promote your portfolio, you should want to make sure every visitor has an equal shot at viewing your site. Truthfully, do you want to be flooded with returns because that teal shirt “Bob” thought he bought came to his door forest green?
Making your Images Compatible
You as a designer probably threw all the defaults out the door the first time you booted up your system and cranked your video card wide open, meaning you’ve got your color settings in True-color, viewing millions of colors and a resolution with more zeros than Bill Gates bank account. That’s all fine and dandy, but remember, a great deal of surfers have their systems setup just the way they came, system defaults through and through. Add that to the fact that Macs and PC use different systems palettes and you’ve got yourself alot to worry about.
There wouldn’t be much to concern yourself with if there was greater support for 32-bit PNGs, which in my humble opinion should have wiped the GIF and JPEG format off of the face of the planet by now.
(Warning: A Tangent Rant follows!)
I mean seriously, with the uprising of Flash and PNG’s superior image quality and relatively small file sizes, there’s not a need for GIF. Do your animation in Flash and your static images as PNGs. Not to mention PNG’s automatic gamma correction, which we’ll get into later. And lets not even talk about the transparency capabilities of PNGs.
(End of Warning)
So what are your options? Well, the majority would say to use a web safe palette of the 216 colors shared by both operating systems. I guess you could do that, and if you kept an eye on things, you could keep your images looking somewhat clean. You would have very little worries about the differences in the presentation on the two major operating systems. But God bless Macromedia for Fireworks. Their export option called “WebSnap Adaptive” is far better than any other image editor’s offering. This can do a world of justice in keeping your images true to form. According to them this is how it works:
“WebSnap Adaptive, creates a color palette for the GIF by first choosing the Websafe colors in the GIF, then adding the non-Websafe colors. However, if a non-Websafe color is within 7 units of a Websafe color, the WebSnap Adaptive Palette will shift the “close” color to Websafe. Using this palette, GIFs can be created that will, on the whole, approximate the colors of the original image and somewhat conform to Websafe colors.”
This will greatly increase the quality of your images. Any colors you lose between systems will now be minimal and the color substitutions shouldn’t make a noticeable difference.
Now that being said, you have one more consideration when exporting your images, gamma correction. Most systems use gamma correction, as do your image editors such as Fireworks and Photoshop. Basically, gamma handles the contrast and brightness between light and dark within your colors. Now Macs and PCs use different settings for their gamma correction resulting in lighter, less contrast in Macs and the opposite for PCs. So what you would want to do is make sure you colors fall between what you want on both systems. Meaning, if you’re on a PC, use colors slightly darker than what you want, but just enough so that not even yourself can really tell a difference. Both Fireworks and Photoshop have ways of letting you check what you work will look like on the other OS. In Fireworks go to : View > Macintosh/Windows Gamma and in Photoshop go to: View > Proof Setup > Macintosh/Windows RGB.
If you see no absurd differences, then you’re fine and you can go on with your project.
Text: The Next Big Issue
Who would have thought that the fonts and their attributes you choose for your HTML documents would make that big of a difference. Guess what? They make a huge difference! If your fonts show up wrong on another machine, next thing you know, the paragraph where you’re talking about Sparky the dog could end up next to a for sale sign on the page, and you don’t really want to sell Sparky do you?
First things first: AVOID STRANGE FONTS. Just because you downloaded some fancy wingding font on FreeFonts.com doesn’t mean your visitors did. Nothing looks more unprofessional than a page loading up and all the text is the system default because your computer couldn’t find some obscure font the designer has on their personal machine. So try to stick to the basics such as Verdana, Arial, Helvetica and if you must, Times New Roman. (Remember, Arial isn’t as common as most PC designers think).
You can also avoid problems by listing multiple fonts in your tags and style sheets to assure the page pulls up with some resemblance to what you intended.
But the big difference between the two operating systems is how they work with font sizes. It really has little to do with the OS itself and more to do with their handling of the hardware. Macs render text on the monitor at a resolution of 72 pixels per inch, while PCs render at 96ppi. Basically this means that fonts look larger on a Windows machine. So if you have a tag in your HTML that looks like this:
<Font size=”1″>
it may be perfectly readable on a PC and so small on a Mac that you need a magnifying glass. This is because size=”1″ is a relative attribute. It’s both relative to the operating system and the users personal settings. That is why I hate font tags with a passion. So let me get on my little CSS pedestal and preach. Style sheets allow you to define everything about a font using pixels, not points. This greatly eliminates much of the variation of fonts from system to system and browser to browser. By simply putting something like “font-size: 10px;” in your style sheet or inline style, you can reduce much of worry.
Hope this has helped a few of you. If you need any help, let me know!
Scott Harris a former graphic designer for Murdok and currently the design manager for C.A.D. Website Design and RSStatic
