Design for any browser

Designing Web sites that look good in every browser can be heartbreaking work. Your carefully crafted site may look great in Mozilla Firefox and Apple Safari, and then become a jumbled mess in Microsoft Internet Explorer 6, the default browser for roughly 75 percent of Web users. But how do you test pages in a browser that doesn’t run in OS X?

Most Mac designers solve this problem by setting up an old PC next to their Mac—swiveling between the two to check changes. Other people rely on online services that create screenshots of a page using a variety of browsers—a process that can be unbearably slow. But now, thanks to Apple’s Intel Macs, Mac Web designers can have the best of all worlds—creating sites in OS X and testing them in Windows without so much as turning their heads. In fact, switching between the two involves just pressing the keys.

What you’ll need

In addition to having an Intel Mac, you’ll need some special software to set up your test system.

Parallels Desktop Similar to Apple’s Boot Camp software, Parallels Desktop (   ) lets you run multiple operating systems at once without significantly slowing down either system. But unlike Boot Camp, Parallels Desktop doesn’t require you to reboot your computer every time you want to switch operating systems. This $80 application can run Windows side by side with OS X, making it easy to jump between designing and testing your Web pages. You can download a free 15-day trial version if you want to test it out.

Microsoft Windows If you don’t already have a copy of Windows, you’ll need to buy one. You can use any flavor of Windows XP that you like. Windows XP Home is $199 and is perfect for testing your Web designs.

VirtueDesktops This free software (virtuedesktops .info) lets you run both Windows and OS X in full-screen mode—switching back and forth with a simple keyboard command.

Step 1: Set up Parallels Desktop

To install Windows on your Intel Mac, you must first create a virtual machine (VM). For this, you’ll need Parallels Desktop. Once you’ve installed Parallels, double-click on the application (/Applications/Parallels/) to launch it. In the dialog box that appears, click on the New VM button to open the setup wizard. Follow the steps—select Windows from the Guest OS Type menu and Windows XP from the Guest OS Version menu—until the process is complete. When you’re done, you should see the VM Property Page (see “Heart of a Virtual Machine”).

Step 2: Install Windows

Insert the Windows Installer CD. Return to Parallels’ VM Property Page and click on the green Power On arrow to begin the Windows installation process. You’ll be asked about your settings and preferences; you can stick to the default options by pressing the return key. After this process, which takes about half an hour, you’ll have a fully functional Windows machine running inside a floating Parallels Desktop window on your Mac (see “A Window for Windows”).

Step 3: Install Parallels Tools

If you click inside the Windows workspace, it captures your cursor, preventing you from clicking outside that window. You can release the cursor by pressing control-option. To prevent this from happening at all, install Parallels Tools, included with Parallels Desktop. Parallels Tools makes it easy to display Windows at full-screen resolution and share files between the Mac and Windows.

From the Parallels menu bar on your Mac, choose VM: Install Parallels Tools. In the Parallels Tools setup wizard, click on Next until you get to the Setup Type pane. Select Complete, click on the Next button, and then click on Install. When you’re done, restart Windows.

Step 4: Share files

To view your Web pages in Windows, you’ll need to give Internet Explorer access to them. Parallels lets you define one or more folders on your Mac as shared. Windows can view, add, and edit files in any shared folder. This means that if you define the folder holding your Web pages as shared, you can open those pages using Internet Explorer in Windows.

First shut down Windows if it’s running (click on the Start button in the lower left corner of the Windows desktop and choose Turn Off Computer, then click on the red Power Off button in the Parallels window). Then return to Parallels’ VM Property Page window and click on the Edit button at the bottom of the window. This opens the Configuration Editor. Click on Shared Folders in the Resource column, and then click on the plus-sign (+) button in the right pane (see “Simple Sharing”). Name the folder, click on the Browse button, and then locate the folder on your hard drive that holds your Web pages. Click on OK to close the Configuration Editor. In the VM Property Page, click on the Save button, and then click on the green arrow to launch Windows.

You should now see a Parallels Shared Folders shortcut on your Windows desktop. Double-click on this icon to see any shared folders you defined in Parallels.

Step 5: Create virtual desktops

At this point, Windows appears inside a small Parallels Desktop window—which isn’t an ideal setup if you’re trying to get a sense of how your Web page will look to an Internet Explorer user. You can run Windows in full-screen mode by choosing View: Fullscreen. You won’t see any of the Parallels software menus or windows, nor will you see OS X’s desktop. It’ll look just like you’re working on a Windows machine. The problem is that anytime you want to return to your Mac and make a quick change to your Web page, you have to press option-return and leave full-screen mode. All that clicking can become painfully tedious.

The solution is to install VirtueDesktops. This application lets you create multiple virtual screens—one for your Mac system and one for a full-screen view of Windows—and then switch between them with a simple keyboard command. It’s like having multiple monitors, though only one is visible at a time.

Once you’ve downloaded VirtueDesktops, put it in your Applications folder. When you double-click on the VirtueDesktops application, an icon (resembling two overlapping rectangles) appears in the Mac’s upper right menu bar. Click on it and choose Preferences from the pull-down menu. In the Preferences window, select the Launch Virtue On Login option. To see the name of the desktop you’re currently viewing in the Mac’s menu bar, select the Display Desktop Name option, and then close the window.

Click on the VirtueDesktops menu once more and choose Inspection: Desktops. On the left side of the window you should see a list of four virtual desktops (if you don’t, try restarting). Double-click on the one labeled Mail and rename it Windows.

If Windows is currently running, shut it down. Quit Parallels Desktop. Press control-shift-right arrow to switch to the Windows virtual desktop. Launch Par-allels Desktop and start Windows by clicking on the green Power On button. Finally, switch to full-screen mode by selecting View: Fullscreen. To return to your Mac desktop, simply press control-shift-left arrow. You can move back and forth this way as often as you like without ever leaving full-screen mode.

[ David Sawyer McFarland is the author of CSS: The Missing Manual (O’Reilly, 2006) and Dreamweaver 8: The Missing Manual (O’Reilly, 2005). ]

Heart of a Virtual Machine: Parallels Desktop’s Property Page controls the settings for the Virtual Machine that runs Windows.A Window for Windows: Parallels Desktop can run Windows XP in full-screen mode or inside a floating window on your Mac desktop (pictured here).Simple Sharing: Parallel’s Shared Folders feature gives a local copy of Windows access to folders on a Mac.

Subscribe to the Apple @ Work Newsletter

Comments