Printing out a screenshot and scribbling on it
This morning my task is to convert a static HTML design for a new website so that it can be managed within TERMINALFOUR SiteManager. I may of course be stating the obvious to all readers, but this may help someone.
Header and footer
In creating a new SiteManager style you first need to decide how to break up the page into header and footer, so that the appropriate code can be dropped into those fields within the SiteManager Style dialog. This depends on where the main content is going to be, with the code above it being the header, and the code below being the footer.
Links, menus, sections
With that decided you then need to work out where the various links, menus and sections on your design are coming from. Are they going to be pulled in with a top content item from another section, for example, or from a related content sub-section; do the links need to be hard-coded (in the case of a link to a site managed in another SiteManager channel) or dynamically generated by SiteManager using a navigation object, etc.
Print it out
I’ve find the easiest way, by far, to plan the job is to take a screenshot of your design, print it out — we have a colour A3 printer here which is perfect for the task — and then get scribbling on the page. I use coloured highlighter markers too to distinguish different kinds of treatment, e.g. blue for hard-coded links, green for new navigation objects, yellow for main content, etc.
I also make sure that I write on the print-out which unseen elements within the <head> section need to be updated/created, e.g. CSS styles, meta tags, RSS links, etc.
Build it
Once I’ve mapped out what I need to do it’s then just a case of starting somewhere and creating the new navigation objects as required. I always start at top-left and work in a clockwise direction. I also code it in my text editor of choice (Blumentals WeBuilder, thanks for asking) as I find it easier to manage code in that environment (and we also commit all our code to a Subversion repository) and then when finished cut and paste it into SiteManager.
I hope that’s of help to someone.
Gareth @ St Andrews
