Blogcritics The critical lens on today's culture & entertainment
One of the inherent problems with website design is that it usually takes two types of people to create an effective site. First you have the designer who puts together all of the images, text layout, and the buttons etc. This makes for a pleasing site to visit. Then you have the programmer who takes all of those items and puts the code around them to make the pages change when the buttons are clicked and does all of those programming things to make the site come to life.
This is all fine and good for large shops that can afford to hire multiple people to accomplish these goals. But there are a lot of groups, companies, and single entities that still have problems with getting projects off the ground. First you have the designer who can put together a layout in Photoshop, but has little to no coding experience. Then there is the web designer who is good with coding, but has limited Photoshop experience; certainly not enough to do all the slicing and dicing to create a layout with any cohesiveness.
This is where SiteGrinder 2 Pro comes in. SiteGrinder 2 Pro is an automation plug-in for Adobe Photoshop that allows users with some Photoshop skills to create multiple page websites without knowledge to the underlying web technologies such as HTML, CSS, and JavaScript. Yet it is fully CSS Capable, Flash Compatible and it only takes basic Photoshop skills. Sure the more capable you are in Photoshop, the more stunning the results can be, but the basic skills needed can be fairly easily learned.
One of the fundamental Photoshop techniques needed is the use of Layer Comps. Layer Comps were first introduced in Photoshop CS and they let you save your current view of layer visibility and editing states as a snapshot. You can have as many as you like, the layer comp never trashes your layers, and it is saved with your file.
The workflow for SiteGrinder 2 Pro is design your page/page elements in Photoshop with each one having its own layer. Then you activate SiteGrinder from the Automations menu. Check for errors, click its build button, then test the page using it's publish function. From here you can refine or upload to the live site. Now granted this is the simplistic workflow, but it highlights the basics even for more complex multi-page sites as well.
Now how does SiteGrinder 2 Pro work? Well each one of those layers that you create needs be assigned a name with what is called a "hint." A hint is really a directive that tells SiteGrinder what to do with that element. For example if you make a rectangle and put the word "Page 2" on it, you can name the layer "Page 2-button," SiteGrinder will create a button out of it. There are a whole host of hints that can be used to create text, buttons, rollovers, popup's, links, and other things to enhance your page and site.
I know what many of the web developers are thinking; this will create some bloated code that would never work in the real world. It might work on some small rinky-dink site that gets no real traffic, but try to put a load on it and it would die the death of a thousand paper cuts. Well, no, I don’t think that it would. The code that it creates is really lean, clean, and functional code. Sure in the hands of a pro, it could be refined, but as it is you will find it really quick to load. To see check out some of the sites listed at the bottom to see how quickly they load.
The CSS is pretty efficient in its own way. If you add styling to a single page, it puts the CSS in the HEAD section. If you have multiple pages it creates a separate CSS file. The pro version supports the generation of image galleries. You can do this in the basic version, but there is a lot more work that needs to be done. In the pro version it is much more automatic and will create thumbnail images as well.
The Pro version also supports Flash animated Slideshows. Slideshows are similar to galleries in that they are generated from folders of images. They automatically scale to the size of the slideshow layer and the backgrounds match page backgrounds. They include a variety of timing, effects and transitions settings, and mp3 background music is supported as well.
The Pro version is able to use external multimedia elements on a page. Supported media types include Flash, animated GIF files, digital video and audio, as well as external images. Media local to your hard drive is copied to your build folder and media from the internet is linked as is via URL's and appear on your pages from their original locations.
The Pro Version has support for incorporating external HTML files into your pages either when SiteGrinder 2 Pro builds them or dynamically when a visitor to your page loads them. By doing this you can incorporate web content on pages not created in Photoshop. This can include long text or PHP controls such as calendars, blogs etc.
The basic version runs $129 USD and the Pro version is $249 USD. The version of SiteGrinder 2 that I reviewed was the Pro version. So what are the differences? You can visit MediaLab's online for a complete list, but suffice it to say that the Pro version contains those items that will give your site that professional look with things like the heavy duty multimedia, the automated image galleries, the HTML Forms and dynamic binding of external HTML via PHP.
If you want to see what kind of sites have been developed using SiteGrinder 2, MediaLab has a whole list of example sites and let me tell you, these are not simple one page sites. In fact they are quite impressive. They also have quite a few video tutorials that will walk you through how this whole system works. And if that doesn’t convince you, they have a demo version that you can get just by giving them an email address.
So what do I think about SiteGrinder 2 Pro? The terms remarkable, revolutionary, and the best thing since sliced bread come to mind. I have been a software developer and web developer for many years. I have also worked with Photoshop for many years as well. To have a product that takes the best of both worlds is a dream come true. And for it to create valid XHTML 1.1 and CSS is truly amazing. The fact that this can be done by a designer is remarkable.
Will this put web developers out of business? Of course not! There are still a lot of things that SiteGrinder won't do, nor should it. What it does do is allow the designer to put together a website based on design and functionality. Once that is done, it can be put into Dreamweaver, Golive, or just handed over to the web developer to plug in any other heavy lifting that needs to be done. It also will be a boon to anyone who needs to put together a site and does not need any additional work done.
If you need to put together a website and only have Photoshop skills, If you are a Photoshop user and want to learn more about web development, or if you are a web developer who wants to explore design and have some fundamental skills with Photoshop, then SiteGrinder 2 is very highly recommended.
