Review: SiteGrinder 3, more a CMS than a Photoshop plug-in

If your web development is highly design orientated there are plenty of applications that will help creative workers in your team with creating a web site. Few applications exist that allow the design to be created in a true designers’ application like Photoshop while still giving users all the tools they and you need to end up with a Content Management System (CMS) driven web site.

Dreamweaver expects web designers to know all about HTML and CSS. Even iWeb or RapidWeaver or Karelia’s Sandvox expect at least some insight in how HTML works. Not so with SiteGrinder 3. This newest version of SiteGrinder is a combination of a Photoshop plug-in and stand-alone application that combine to deliver a complete CMS without the user ever having to touch on HTML, CSS or Javascript –even for complex web pages or blogs. All he/she needs is a good knowledge of Photoshop CS3, CS4 or CS5 (32-bit).

When I reviewed SiteGrinder some 4 years ago, I was impressed with what you could do with it in terms of quickly turning a Photoshop layered composition into a web page. Media Lab‘s SiteGrinder 3 is in a completely different league. It goes much deeper than its predecessor. It’s no longer confined to the boundaries of a Photoshop plug-in.

SiteGrinder 3 is without exaggeration a complete CMS. It may lack enterprise-scale robustness and scalability –for example, it’s not database driven– but for designers who create web sites for clients, SiteGrinder 3 has not only a local, Photoshop independent browser-based content management system, but optionally also a remote Content Manager.

You can even have an e-Commerce solution with SiteGrinder 3, using Foxycart as its commerce back-end.

SiteGrinder 3 –as version 2– works with ‘hints’, which are names preceded by a dash that you have to add to your layer names. The hints tell the SiteGrinder system what to do with the layer. For example, if you create a button and you want a click on that button to result in a hidden layer becoming visible, then these two elements should share layer names, but the button layer should have the hint “-button” added to it and the -clickshow hint to make it visible. That way, SiteGrinder knows the button is ‘linked’ to the text layer and turns it on when the button gets clicked.

In the Design Manager, which automatically starts up in your web browser after building your page in the Photoshop plug-in interface, you can then set the elements to act according to settings and parameters you enter in the Design Manager. The Design Manager is a browser interface to SiteGrinder’s advanced design and development features.

It is only after deploying a web page the Content Manager becomes available. Again, browser-based the Content Manager allows you to enter text and images and even other stuff into the page –much the same way as you would work with WordPress or Drupal (but easier).

While the workflow is something you’ll soon get used to, the dazzling array of hints and hint combinations may require you to keep the Hints reference close to hand. SiteGrinder 3 not just has hints for building simple pages, but also for blogs, column designs (both stretch as content grows) and footers. Footers used in combination with a page or column hint forces the footer to ‘stick’ to the bottom of the page. There are several dozens of tricks and clever hint and workflow combinations that let you ultimately build a web site that is just as flexible and dynamic as a WordPress site with the exception of the database underpinnings (and therefore less scalable).

For example, after trying out the many different ‘ordinary’ page building tricks SiteGrinder 3 has up its sleeve, I set my thoughts on creating a gallery. The first problem was to decide which type of Gallery I wanted. There is a relatively simple CSS driven gallery, but in combination with Fancybox and other eye candy capabilities, even that ‘simple’ CSS gallery can quickly end up in a huge array of possibilities to choose from.

Another example of this feature abundance can be found in the three possible image thumbnail sheets you can make. You can have “growing” CSS image thumbnail sheets that show all the thumbs at the same time, Flash thumbs that slide, or paged CSS thumbs that show groups of thumbs and let you navigate from group to group. Any of these can be used as “viewsheets” which show alternate views of a gallery exhibit.

It all adds to the richness of the design that you can create with SiteGrinder 3, but also to a major difficulty: choosing the right combination. Working with SiteGrinder 3 therefore requires some good planning ahead, both in the area of looks and web 2.0 functionality.

With the gallery test I also hit SiteGrinder 3’s limitations. There aren’t many, but one of the limitations I found was that –although you can create complicated forms– you can’t have a search system made from within SiteGrinder 3. Now I wouldn’t be too surprised to learn the developers are busy developing an optional plug-in to add this feature, but in my version there wasn’t such a plug-in available.

The e-commerce plug-in on the other hand does allow you to sell your images through a Foxycart managed system. The plug-in integrates with a real payment gateway, by the way. Foxycart is nothing less.

The most striking features of SiteGrinder 3 however, are its CMS capabilities:

  • The output to PHP as well as static HTML
  • The ability to have columns that automatically resize with content
  • The Gallery functionality which is incredibly powerful and complete
  • The plug-in architecture which allows for extensive functionality
  • The availability of the Remote Control and eCommerce plug-ins
  • The use of CSS throughout
  • The clean code that is being generated
  • The possibility to use multimedia in a web design –including video and audio
  • The interactivity that is possible using CSS and Javascript
  • The fact that at no time in the process you need to know about the code that makes your interactive elements work

The downside of this power is that you will definitely need to take the video course on the SiteGrinder site. I found it indispensable to also print the complete –excellent and very concise– help system. Perhaps I’m showing my age, but I felt I needed this guide constantly in the neighbourhood in order not to miss out on any of the features and capabilities.

Even after having read the guide upfront, I couldn’t build a complex web page in a couple of hours. Instead, it did take me a couple of days before I finally got my head around the SiteGrinder way of doing things. The workflow by itself is simple enough: you design your page in Photoshop, then go to the SiteGrinder plug-in and build the page, then fine-tune in Photoshop and build again, until you’re satisfied and ready to deploy the page.

In Photoshop, you must keep in mind that you need to design your page elements in such a way that SiteGrinder understands what it is that you want each element to do. That takes a bit of learning. For example, to create an animation –a text block that I wanted to slide in from one location to another at the click of a button– I needed to create a button and two identical blocks. The difference between them were the hints. For a background to appear behind a sliding element, I had to create another layer below it, that only contained the colour and texture I wanted the slider to have.

The code being generated can be static HTML but also –and probably more modern in its approach– PHP. I consistently chose PHP for my tests and it worked like a charm. You’ll definitely need to choose PHP as output if you want to use SiteGrinder 3 as a CMS. This allows you to add pages based on existing page design, much the same way as what you can do with WordPress, Joomla! and Drupal.

Your standard SiteGrinder 3 setup will allow you to use the system as a CMS on a local machine, but if you have the optional Remote Control plug-in, you’ll also be able to add pages with content from any machine using the web browser and a specific URL. This is the closest any ‘lightweight’ CMS can come to the functionality delivered by database-driven systems.

With that statement, which is really a compliment, I’m rounding up the review. After having spent a good couple of weeks with SiteGrinder 3 I can only say I am still discovering new things, things that I can do differently in order to get different results. The beauty of SiteGrinder 3 is that it works. It works so well that results are always predictable, i.e. you’re never caught off-guard, ending up with a design that is a mess.

Criticism? Yes, I do have some criticism. The help guide should have more screenshots of Photoshop layer setups to grasp the way hints work faster. There should ideally be a search system added to SiteGrinder 3 –not just the ability to integrate with Google Web Search. And if there could be integration with a database system that would put SiteGrinder 3 into serious competition with existing CMS systems, although it would also be nice if there was a way to create designs and pages that allow you to integrate a SiteGrinder design into WordPress or Drupal one way or another (perhaps this could be an advanced user guide?).

The end conclusion of my review is that Media Lab, the developers of SiteGrinder 3 have accomplished something that I didn’t believe is possible: creating a tool that allows for very complex sites without adding to the complexity of the tool itself.

SiteGrinder 3 costs 349.00 USD. Each of the currently available add-ons (Control and eCommerce at the time of writing) cost 159.00 USD. The complete bundle, however, has an introduction price of 279.00 USD.

I normally never comment on prices, but in this case I’m inclined to make an exception: these prices may seem expensive at first, and they would be if SiteGrinder were just a plug-in with little else in terms of CMS functionality. In the case of SiteGrinder 3, I personally believe you’re certainly not paying too much –especially not if you make good use of MediaLab’s introduction price!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s