Craigslist/Newsletter SOP

Monday, August 18, 2008

SOP
This 4 Step SOP is very complicated, took us a few days to go through. However, it is simple to execute, once you know it.

1. creating banner templates
banners = ccBanner.png + bgBanner.png

2. creating base pages

3. more pages by banner variation

• export all slice images in .gif format, the cc message images to set as non-transparent, the rest of bg image to set as transparent.
• upload the server/images folder to server's server/images folder(http://plus247.net/server/images)
• replace all 'src="images/' with 'src="http://plus247.net/server/images/
• copy the containing table inside the reference cc_#x.htm, and replace at the center <>
• save as an cc_page instance , cc#.htm
• repeat this step for more bg pages with different layer combination

4 more messages by page variation

• instanciate posting.htm by incresing the pic seq # (keep track of the seq set#, no duplication)
• save as c#_seq#.htm

Rules

Step 1 Banner creation

• standard banner dimension: 600x300, except those "sticking out/in/sideway"
• to have different image looks: great background, nice vectors
• the banner template is to provide a framework for different images, the image rules:
• -- do not use the same single actor
• -- use "working people" instead of just people
• -- use scene from different time i.e. season, sunset, dawn scenery
• -- use "transportation" instead of just plane
• -- use "group" instead of individuals
• -- use vector art in white on dark, or dark on white (dezignus_templates.rar - Vector Images in PNG format)

Step 2 Page Creation

• extract from the cc_pages,
  
• remove the coupon and excess infoBoxes
• fix: Craigslist limitations: p tag float, contact reference url, image url, header title, b/w letter contrast,..., i.e. convert div to table.
  
• merge banner with the cc page to a full html pages
• cc_pages/ holds 000-999 templates
• 000-399 is sloted for templates with no banners, hence simply selecting from existing pages
• the postfix x, e.g. 400x, is the reference for the next 5, 400, 401,...,404, banner variations

Step 3 Banner Variation

• change both the html and banner template settings:
  
• -- layer selection
• -- alpha on the mask
  
• -- color, border, background,...etc.
• do not touch the text or internal images (inside the .html) yet
• target to have finished 70 templates
• try to stick with one process would be easier, i.e. the same banner slicing and adding the code of the sliced image to the target template

Step 4 Page Variation

• each cc_page template will contain 11 messages
  
• 70 cc_page template can result more than 500 messages by picture variations
• use flash extraction to get a lot of different bg and thumbnails
• -- layer selection
• -- alpha on the mask
  
• -- color, border, background,...etc.
• select from the standard Components
  
• -- standard 150 px width image libraries: http://plus247.net/artworks/biz (also lux, lzr, obj, tek, tvl)
• -- standard page background image library: http//plus247.net/artworks/bg