Review: SiteGrinder 2 Pro

Product	SiteGrinder 2 Pro
Rating
Pros	Easy to learn; produces XHTML-compliant code; intelligent CSS and page organisation enables easy code tweaking; creates expanding and contracting menus and rich-media elements.
Cons	Coding needed for visited link formatting, and for adding heading tags or anchors; cannot create subdirectories (within one document) for simple URLs.
Company	MediaLab
Price as rated	$US349 ($A479); Basic version, $US129 ($A177)
OS compatibility	10.2 (Jaguar), 10.3 (Panther), 10.4 (Tiger), 10.5 (Leopard)
Processor compatibility	Universal

Graphic artists and designers who are comfortable with mocking up Web sites in Photoshop will love SiteGrinder 2 Pro. This Photoshop plug-in (accessed from the File -> Automate menu) works extremely well at converting layered Photoshop designs into highly functional and respectably coded Web sites. SiteGrinder Pro can help you build sites based on impressive technologies, such as CSS, photo galleries, Flash slide shows, videos, forms, widgets, and more, without any coding knowledge needed. It will even take a simple text box and turn it into a search engine-friendly menu.

How SiteGrinder works. If you’re using any version of Photoshop from CS up to CS4, SiteGrinder lets you create an entire site (or section of a site) from a single Photoshop file. It does this by recognising Photoshop’s layer comps as pages and reading specific hints that you add to the layer name of each page element. Additionally, you can enter a few link and browser-specific settings in SiteGrinder’s window.

Creating sites in Photoshop 7 works similarly, except that you need to use SiteGrinder’s page definition tool in lieu of layer comps (which were not available until Photoshop CS). You can also use SiteGrinder with Photoshop Elements. However, you must create a new document for each page.

To preview or build your site, move to SiteGrinder’s own window. It’ll alert you to any problems that may affect your pages and let you fix them. When you’re happy with your design, choose the build option, then simply upload the generated files to your Web server.

SiteGrinder does an excellent job of rendering your design on the Web, retaining styles, formatting, and positioning. It creates a common stylesheet for your site, and stylesheets for individual pages as needed.

For the most part, you simply design as usual in Photoshop, keeping in mind the usual browser rules and restrictions. For example, you should try to limit your content text to common Web fonts and avoid advanced typography for text. Only once did I have to move elements on my Photoshop page a tad to prevent overlap in the resulting Web page.

There are a few things SiteGrinder does not do. There’s no way to format visited links, add heading tags, add anchors, or create subdirectories (within one document) for simple URLs. You have to know how to code those elements if you want them.

Hints and links. A large part of the SiteGrinder magic is in its Hints feature. Hints are specific words preceded by a hyphen that tell the program what to do with your text and graphics.

For example, hinting a text layer with –text creates real text on your Web page. Omitting the hint (if you use anti-aliasing) creates a graphic of your text. Adding –scroll creates a scrolling text box.

Much linking within your site is automatic. For example, a type or image layer named About Us-button automatically links to a page created from a layer comp named About Us-page. And About Us–popup creates something that appears when rolling over that About Us button or text. You can also create links in SiteGrinder’s Buttons panel.

SiteGrinder grinds away, building a site derived from Photoshop's Layer Comps and Layer Groups.

Basic vs. Pro. SiteGrinder comes in two versions: Basic and Pro. There are big differences between the two in price and capabilities, so you’ll want to figure out whether you really need the features in the Pro version. The Basic version includes favicons, along with the ability to spam-proof your e-mail address, create sticky menus, and add your own code into a page’s Head tag. Your pages can only have a solid color background, though, and the images on your pages won’t print unless browsers are set to print backgrounds.

The Pro version additionally provides advanced multimedia and dynamic content features and enables background tiling. You can easily create photo galleries with thumbnails and Flash-animated slide shows, or include audio and videos. You can even incorporate data from other sources to create vertically expanding documents with movable footers. You can create forms and more.

Search engines and accessibility. SiteGrinder helps you optimise your pages for search engines by giving you control of each page’s title, author, keyword, description, language, and copyright meta tags. Though it lacks an image alt tag interface, it nicely uses image layer names to provide control and to help designers meet accessibility compliance standards. The text menus you can create via the -menu hint allow search engines to crawl your site.

Unfortunately, there’s no way to create accessible heading tags within Photoshop, but you can add them in an HTML editor later.

You can design your Web site in Photoshop and then view it in the browser.

While I wish some of SiteGrinder’s documentation had more detail for beginners, there’s easy access to helpful support staff. I recommend the live Webinar and the Zero to Hero guide.

Macworld’s buying advice. If you use any version of Photoshop CS to design your Web sites, I highly recommend SiteGrinder 2 Pro (I tested the software in Photoshop CS3). If you don’t need multimedia, dynamic content, forms, or tiled backgrounds, the less expensive Basic version may be enough. SiteGrinder also works in the earliest versions of OS X with Photoshop 7, although without layer comps the process of page creation is a bit clunky.

[Deborah Shadovitz started using Photoshop at version 2 and has been designing Web sites since 1996.]