The SiteGrinder Workflow: An In-Depth Look

Tasks Organized Into Workflow Phases

Different parts of your site are created and edited in different parts of the SiteGrinder workflow.  This post lists all of the common activities organized by which phase they are created or modified in.

Site creation takes place in two phases: the design phase and the content phase:

Workflow Part 1: Design

Create Your Page Designs in Photoshop: The first step, where you will spend the majority of your time, is simply creating the layers that make up your site design in Photoshop and giving them hints when necessary.  You can start from scratch with a new empty document, or you may find it easier to start with one of the Sample Files found here. You can also use a pre-made PSD template, including the ones that we offer, which are already hinted for SiteGrinder . If you decide to start from scratch you can find guidelines for the initial dimensions and other settings to use when you create your file in the Page Size and Alignment Reference.

Check SiteGrinder’s Report: Here SiteGrinder advises you if anything in your design seems problematic.  Some of these suggestions are more crucial than others, so they are divided into errors, which are usually important to deal with, and warnings, which are less important and can sometimes be ignored.  If you see an error you should make note of it, close SiteGrinder, address the problem in your Photoshop file, and open SiteGrinder again. Because you can’t use any of Photoshop’s tools when SiteGrinder is open you may wish to save the report so you can refer to it as you make the suggested adjustments.  To create an HTML version of the report that you can view or print using your web browser  select “Save Report” from SiteGrinder’s File menu or click the “Save Report” button in the Report Panel.

Build and Adjust Your Designs: Select the page designs you want to build and click the “Build” button.  You can always rebuild page designs later so don’t worry about having everything perfect before you build! SiteGrinder will show the selected page on the right and you can now alter any design settings you need to using the controls on the left.  These include text menu rollover appearance, borders and background colors for various page areas, appearance and functional options for image galleries, appearance of web forms, etc.  Keep in mind that this phase is only for altering how these things look.

This video covers the content portion of the workflow. We show how to deploy pages to a site, edit page content right in a browser window using the amazing Content Manager, and finally upload our pages to the web.

Workflow Part 2: Content

Creating Your SiteGrinder Site: When you are happy with your page designs it is time to “deploy” them, which locks in the design choices you made in the Design Manager and allows you to move forward to the browser-based Content Manager.

Deploying Your Site: Choose whichever of your previously built page designs you’d like to deploy to the Content Manager by placing checkmarks in the “Deploy?” column.  You can deploy different pages at different times so you don’t have to worry about finishing all of them before deploying any of them.

Finishing Your Content In The Content Manager: After deploying your pages, SiteGrinder will open them in a browser along with SiteGrinder’s Content Manager in an area to the left of the page content, much like the Design Manager from the previous phase.  When you click on a page in the list it will become visible in the main browser window and editing controls will appear in panels in the Content Manager listing editable page elements.

This video covers the content portion of the workflow. We show how to deploy pages to a site, edit page content right in a browser window using the amazing Content Manager, and finally upload our pages to the web.

OK. Ready to go over a step-by-step list of what to do where?

What You Create In Photoshop With Layers & Hints

For most of your page contents, layout, and background options, you simply create and position type and image layers in Photoshop and add hints when required.

These elements include:

  • Images for background and content
  • Image buttons with optional hover and click versions
  • CSS styled text content using the -text and optional -h1,-h2 (etc) hints on Photoshop type layers
  • External media placeholders using the -xmedia hint
  • Gallery placeholder layers
  • Styled CSS text menus and submenus (but not their interactive effects like rollover styles)
  • Embedded code to add things like YouTube videos, Twitter Feeds, and Paypal buttons using the -embed hint on type layers
  • Form fields and controls using type layers with the -form hint
  • CMS-editable layers using hints ilke -content and -noedit
  • Ecommerce controls using the -$ hint
  • Page and column size and layout using image layer placement in concert with the -background, -column and browser-background hints
  • Text wrapping around images using the -wrap hint on image layers and positioning them over type layers
  • Animation start and end locations for button-triggered effects using the -movefrom hint
  • Favicon for your pages using the -fav hint
  • Footer content using a footer-background or footer-background layer. All layers above these are automatically placed into the footer. Optionally, layer group with the -footer hint

What You Control from the SiteGrinder 3 Plug-in Window Before Building

Whenever you are ready to see your work make the leap from PSD to browser, whether you have finished a design or are just doing a quick test of a single feature, you will open SiteGrinder from Photoshop’s File->Automate menu.

In this window you can set certain options before you build, including:

  • Check for problems in the Report panel
  • Image compression settings using the “Compression” Tab
  • HTML additions (like meta keywords, and any extra HTML to add to, for example, the document head section) using the SiteGrinder menu’s “Edit->Settings” command
  • Form settings, like what email address to send form-generated emails to, in the “Forms” panel
  • Popup menu timing using the SiteGrinder “Edit->Settings” menu command
  • Which pages you want to build using the checkboxes in the “Build & Deploy” panel

What You Control In the Design Manager After Building

When SiteGrinder starts building, it will open the “Design Manager” in your web browser.  As the pages finish building, you can change design options right in the browser using the controls to the left of the content.  The settings changed here affect what your site looks like and behaves in terms of visual design, not what the content is.

These include:

  • Text menu and Text button appearance using the “Text Button Styles” panel
  • Button and menu animation settings using the “Animations” panel
  • Borders and background colors for appropriate elements using the “Decorations” panel
  • Gallery component types, appearance, and functionality using the “Gallery” panel
  • Form appearance settings, such as colors and layout using the “Forms” panel

What You Control From the SiteGrinder 3 Plug-in Window Before Deploying

When you have finished changing the design settings in the design manager, it is time to deploy.  This is also accomplished in the SiteGrinder plug-in window’s “Build and Deploy” panel.

Before you deploy you will need to select a “site” or create a new one.  A site is just a folder on your hard disk along with a few settings, such as the name of the site and what kind of content management and ecommerce you want to use with the site.

You can also choose to deploy, keep or replace changes you have made in the Content Manager to pages you are redeploying to the same site.

The things you control when making a new site include:

  • Which ecommerce module your ecommerce-enabled buttons and forms will use
  • What kind of Content Management (if any) you want to use
  • Which server language (like PHP) the remote Content Management System should use

What You Control In the Local Content Manager After Deploying

When SiteGrinder finishes deploying, it will open the “Content Manager” in your web browser.  Select a page from the page list in the upper right of the browser window to start adding or modifying its contents.

The things you can do in the Content Manager include:

  • Add or edit text content to editable text areas using the “editable content” panel
  • Set links for your buttons and menu items
  • Add/Delete/Reorder text menu items using the”editable content” panel
  • Set external content, such as videos or Adobe Lightroom galleries for your -xmedia hinted layers using the external content editor.
  • Set HTML page titles for your pages
  • Create new pages based on existing pages
  • Create folders in your site for organizing pages
  • Set source images for your SiteGrinder gallery components using the gallery editor opened from the “Editable Content” panel
  • Add/Delete/Reorder your SiteGrinder gallery images using the gallery editor opened from the “Editable Content” panel
  • Edit the metadata associated with your SiteGrinder gallery images using the gallery editor opened from the “Editable Content” panel
  • Configure ecommerce settings using the “editable content” panel
  • Configure blogs : blog name, blog user and password, captchas.
  • Upload your site via ftp for the first time
  • Synchronize your site so the version on the server is updated with any changes you’ve made on your local computer (and vice versa – any remote changes will be retrieved so that both the local and remote versions are in synch).
  • Configure Connection Settings – FTP login info, set CMS password.

In the Remote Content Manager

Pretty much everything you can do in the Local CMS, except Upload, Synchronize, and Configuring Connection Settings. Occasionally in the Local CMS there are buttons or menus that are gold colored. These controls are only available in the Local CMS. In the Remote CMS they will not be present.

Workflow Webinar

For more info check out this recorded webinar:

Power User Workflow
Hosted by Eric Hussmann
Length: 1 hour 40 minutes
Topics: Exploring some of the advanced workflow techniques available in SiteGrinder 3. Shared versus Unique content. Using Layer Comps as templates. Synchronizing Remote and Local Sites. Re-skinning your design.


One comment on “The SiteGrinder Workflow: An In-Depth Look

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>