SiteGrinder 2 Builds Upon Its Predecessor

Media Lab invested a lot of effort in improving SiteGrinder, and it shows.

Last year I reviewed SiteGrinder— a Photoshop plug-in that builds fully-functional webpages from Photoshop files—and found the product good but not great. I had problems recreating some parts of the website and building my webpage with a bunch of properly named Photoshop layers seemed counterintuitive. My conclusion was that SiteGrinder was a good tool for creating graphically intensive webpages but became harder to handle if pages were more complex.

The responses I got from the SiteGrinder faithful were quite spirited:

• “How [Schultz] managed to make SiteGrinder produce a fatal error is baffling. I have rarely encountered such a stable and easy to use piece of software. I’ll give it 5 stars (in fact I think I’ll give it 6).”
• “Sadly, aficionados such as Mr Shulz [sic] forget there is a real world out there, full of people who want to produce results by ‘working smart’ rather than ‘working hard.’”
• “Nice review Mr. Schultz, but, I’m curious: Were words like: “text”, “link”, and “scroll” (etc) not previously in your vocabulary? What is this learning curve you speak of? SG seems to reward logic in the naming of layers and such, what could possibly be more natural ? Fatal errors don’t sound cool though - could just be a mac thing ;)”

To be fair, other responses were more constructive:

• “A coder is rarely a good graphic artist, and so vice versa. So, in my humble designer opinion, what MediaLabs has done is a near 5 stars. Thank you Sitegrinder, because I am no longer a slave to the code.”
• “SiteGrinder definately [sic] fills a big nitche [sic] IMO by letting me build very graphic looking sites quickly for such things as portfolio or personal sites.”
• “SiteGrinder allows web-savvy designers to rapidly develop prototypes or initial pieces of their sites, like pre-linked skeletons, backgrounds and navbars. The upcoming SiteGrinder Pro will push the envelope a lot farther still.”

The last response there was from Tom Summerall of Media Lab, who was kind enough to give me another crack at the SiteGrinder experience with SiteGrinder 2 Pro (there’s now two versions of SiteGrinder, similar to Adobe’s Standard/Professional software structure). I wanted to give SiteGrinder every opportunity to succeed so I tested it with a total rebuild of a webpage I built awhile back. Eberle Animal Hospital is a Des Moines pet clinic and hospital; I built their website last year. I figured this would be a good test for SiteGrinder because:

• It uses a variety of web elements in interesting ways (such as the animated GIF background and liquid
  sidebar and navigation bar)
• The website is valid XHTML 1.0 Strict (SiteGrinder outputs valid XHTML 1.1, the bleeding-edge variety of XHTML)
• The webpage is relatively simple (no Flash, not much scripting, plain-Jane compared to some other webpages)

The original Eberle Animal Hospital homepage, created with Dreamweaver, is here; the same webpage created with SiteGrinder is here.

THE INTERFACE IS IMPROVED

I am still not a big fan of the Photoshop layer-hinting method used to give SiteGrinder its functionality. The page isn’t that complex, but it needed almost 40 layers to achieve full functionality. However, this time around I felt more comfortable with the interface. It may have been due to the experience I built up working with Altia PhotoProto, but I chalk it up to an improved SiteGrinder interface that is cleaner and more robust (see Figure 1). Here I felt like I had the same control I have in Dreamweaver: the SiteGrinder interface has sections on link and background appearance, link destinations, external media (for graphics such as my animated GIF background and media such as Flash) and so on. What I found most invaluable was the easy access to help: before building, SiteGrinder tests the Photoshop document for possible errors. Every caution or alert is linked to an online help page on the particular error. This was very valuable to me as I was preparing my file for output.

Figure 1: The SiteGrinder dialog box helps coordinate links, external media and more.

MEDIA LAB’S HELP AND SUPPORT IS EXCELLENT

Tom Summerall and Chris Perkins of Media Lab told me after the first review that they were planning to expand their help and support for SiteGrinder; they weren’t kidding. I think their online resource center and video tutorials for SiteGrinder to be way above average and an example other companies should follow when supporting their own products. Not only do they have FAQs and a hint list (which is absolutely essential), they have intermediate and advanced reading on specific website elements such as image galleries, pop-ups and menus, which I found very helpful as I tried to perfect SiteGrinder’s rebuilding of my Eberle Animal Hospital webpage. If the webpage you’re building is fairly complex, you will need the online learning center often to figure out the best tweaks to your Photoshop file; one thing SiteGrinder has in common with Dreamweaver is a need to debug and refine web designs.

The video tutorials are helpful as well, illustrating SiteGrinder in action. I think they sometimes come across as SiteGrinder commercials (”I’m going to show you why SiteGrinder is the ultimate website production tool for Photoshop users”) when I’d rather just see the product in action building great webpages, but they still are good for new users.

MY EXPERIENCE WITH EBERLE

I was impressed by SiteGrinder’s rebuild of my Eberle Animal Hospital page. After resolving various errors (again, the SiteGrinder dialog box was invaluable for this), I was able to build a webpage (perfect XHTML 1.1, no less) that works well in browsers. I would feel comfortable using SiteGrinder 2 to build webpage prototypes for my clients; I couldn’t say that with the first SiteGrinder. Some positive points:

Performance and speed is increased. SiteGrinder goes faster than before and is more efficient than ever before. When creating a large website with SiteGrinder, the performance boost is most welcome.
The user interface is more intutive. The data shown in the SiteGrinder window hasn’t gone through any major changes, but it’s better-designed and is easier to grasp quickly. Since this is a tool for creative professionals, design scores a lot of bonus points. Moreover, this redesign is a part of a larger redesign for SiteGrinder (new logo) and Media Lab (new website) which I think really show off the company and their products.
SiteGrinder really does a good job recreating the webpage. I was impressed how closely SiteGrinder was able to duplicate the layout I had created in Photoshop.

That’s not saying SiteGrinder 2 is perfect, however:

Divs are problematic. The Eberle Animal Hospital page uses the div tag to make boxes; notice the blue-lined boxes as well as the horizontal and vertical lines that delineate the navigation bar and sidebars. SiteGrinder does not build these the same way, instead considering them graphics. In the case of the navigation and sidebar lines, I had to set up the sidebar as a background tile and the navigation bar as a graphic. This caused more complications because both are supposed to extend all the way across the page; SiteGrinder does not do widths in percentages. In the end I set the sidebar graphics as a tiling background but could not do the same for the navigation bar; SiteGrinder allows only one tiling graphic. To further complicate matters, the navigation bar graphic shifted up for some reason.
The finished code is clean—maybe too clean. As far as I can tell, SiteGrinder will not do tables. I think this is because web standards frown upon using tables for webpage structure—and for good reason. But there’s still good applications for the table tag—creating bonafide tables, for example. Another casualty of SiteGrinder’s XHTML 1.1 is the image tag, which is also useful (though ultimately unnecessary when CSS is used, as it’s used here). You can force SiteGrinder to use the image tag, but it requires another layer name hint.
No way to produce a bottom margin. I wanted some white space below the text navigation at the bottom of the page, but I learned the only way to do this is to put some kind of content below it—which would then need some space below it, which would then defeat the purpose. Adding this would be a breeze if I edited the CSS manually.

This final comment about editing CSS illustrates something else I learned: SiteGrinder can’t do everything, and that’s okay. Media Lab admits that there’s some things SiteGrinder can’t do perfectly, and that’s when Dreamweaver or another HTML/CSS editing application is helpful. This two-pronged approach puts SiteGrinder’s role into perspective: it may be possible to never code again if you’re using SiteGrinder, but one day you may need something on a website that SiteGrinder can’t hack just right.

SITEGRINDER DOES MORE THAN BEFORE

SiteGrinder did a good job of recreating the Eberle Animal Hospital website, but it can do a lot more than that. Media Lab has added several capabilities that support many web technologies:

Forms. SiteGrinder 2 can generate form elements for various uses, including e-mail forms for contact pages and such (PHP and CGI forms are both supported, if you use ASP you will need a formmail script). Every good website needs a contact page, and I am really impressed Media Lab has made this easy to create.
Flash slideshows. Every application seems to be on the bandwagon when it comes to creating Flash galleries of some kind—Photoshop has been doing it since CS, and before that it was creating HTML gallery pages. SiteGrinder 2 goes for the full multimedia experience with its Flash slideshows—timing, transitions, background music, playback controls—and are robust enough to build not just slideshows but galleries and banners. All you need is a series of images and a placeholder in your Photoshop file.
Multiple pages. Use Photoshop’s Layer Comps to build multiple pages. This can make a Photoshop file really complicated and messy—think of keeping all elements for all pages in a single file!—but it makes SiteGrinder 2 a builder of entire websites rather than single pages. Linking pages is also supported.

CONCLUSION

SiteGrinder was recently reviewed by Photoshop User magazine (member access required) and given a perfect rating (five stars out of five). I couldn’t give it quite that many, since the Eberle Animal Hospital build wasn’t perfect, but SiteGrinder 2 definitely ranks higher than SiteGrinder 1. The application has improved a lot, and its help and support structure is excellent. I learned there’s some functions SiteGrinder can’t do quite right, but it does a lot and will make great websites for many web designers.

SiteGrinder 2
Pros: Creates valid XHTML 1.1. Strong interface and help support.
Cons: Some web elements are difficult or impossible to recreate.
Media Lab, Inc.
800-282-5361
Mac/Windows
$129 Basic, $249 Pro