Posted on

Tidying Up Digitally

Originally published as Tidying Up Digitally at www.mcneill.io.

Marie Kondo is an expert on tidying a house. Her Netflix series Tidying Up with Marie Kondo and two books (both of which are worth reading, best in chronological order) are best-sellers: - The Life-Changing Magic of Tidying Up: The Japanese Art of Decluttering and Organizing (The Life Changing Magic of Tidying Up) - Spark Joy: An Illustrated Master Class on the Art of Organizing and Tidying Up (The Life Changing Magic of Tidying Up) She suggests that her principles can apply to organizations and work life as well. However in both respects the digital aspect is not tackled at all. Even the humble inbox is not discussed, though of course Inbox Zero is an obvious fit to her approach toward paper-based information (which is essentially, to have none of it, or only the bare minimum of contracts and warranties). While other industries have looked to a bit of click-bait around Marie Kondo, such as the Financial Times woefully inadequate How to Marie Kondo your investment portfolio, the idea of using intuitive judgment is certainly something that can apply to other aspects of our lives. Because financial investing is something only experts in financial investing have intuitive expertise in, this application does not work out very well. Gary Klein's Sources of Power is still the best account of how intuition works for experts in time-limited, high-risk situations. For Klein, the subject of research was experts with 15 or more years of experience in high risk decision-making. For everyone who has lived through adolesence, intuition regarding ones household possessions have crossed into that line where there is functioning intuition which can be drawn upon.

Digital Tidying

Applying tidying principles of the Kon-Marie method makes perfect sense in terms of the digital landscape: - Applications and Apps - Email, Documents, and Media (Ebooks, Audio, Video)

Two-Stage Tidying

The two stages of tidying are: - Discarding - Organizing

Digital Discarding

Discarding fairly straightforward: does this application, data, or media provide any spark of joy. One can't hold it in one's hand, but one can nevertheless reach a conclusion. In the case of mobile apps and desktop applications it is fairly straightforward. In some cases, necessity may posit the need to keep something around that is less-than-joyful but also might as well inspire a search for a more joyful replacement.

Digital Organizing

The basics of organizing are putting related things (category, size) in one location. Since digital things are not generally put away, it is the original location that is key (and finding things later). Since files are sometimes best kept by file time (that is, so that programs editing those files can go to a single location, for a certain class of file). Example: Which of the following is preferred: - /brands/brand-x/images/... - /brands/images/brand-x/... In some cases where a given file may deal with more than one brand, then clearly the second is more effective, but in the case of a larger set of files for a specific brand, then the first is definitely a better organization. Obviously both are possible, but it is important not to get too imprecise and flexible, as that generally yields only confusion and file disorganization.

Digital Space

Even given very large storage space, data and applications can clutter a device. Marie Kondo suggests that not the place of use but the place of return is most important (that is, give things a home that it is easy to return it to, rather than trying to optimize for where it is easy to pick up). As mentioned above, storing things in easy-to-remember locations will be key, as putting things back into those locations (a digital file structure) will be very important. Visual clutter is still present when viewing directory trees, and is a significant failing in terms of Linux distributions and their file structures in terms of where applications and related data lives in logical drives.

Image Metadata

While this is an aspect of a style guide (for the structure of the metadata itself), this is very much a devops document, for use and manipulation of metadata in publishing. The basic point is that certain kinds of information about an image file is most conveniently kept inside the file itself, accessed and manipulated programmatically. One example use is presenting the dimensions of images in web pages using CSS. Since the dimensional information (width and height) is already present in the image itself, there is no reason why that information cannot be read and the CSS generated from it. A more crude, but effective approach is to put this same information in the image filename, in some consistent way. However, there is more information that may be needed, such as title, caption, source, author, date, etc. The best approach would be to ensure that all editors can read (and manipulate) such information, and at the least not discard it.

Preferred Workflow

It would be best if metadata could be added, modified at each stage of editing, and by default would be preserved on copy, export, format changes, compression, etc. Generally things start with or result in various formats, including: - .svg (native Inkscape) - .xcf (native GIMP - .png - .ico is essentially a .png renamed - .jpg - .gif (rarely, if ever)

Metadata Standards

Turns out there is more than one way to stuff a keyword. For JPG there is EXIF, but for PNG or SVG there are other standards, as in PNG does not have EXIF. The common is XMP, an adobe XML format. Also there is IPTC tags. When looking at a file with a tool, generally a few different bits and bobs are present. In SVG this is a Dublin Core standard, and in PNG the same is generally available.

Image Editors and Metadata Behavior

Currently, the most convenient tools (aka, the ones I use), and their status on JPG Exif and PNG metadata (XMP):

OSX Preview

  • Will blank overwrite PNG metadata added by ImageMagick or Exiftool.1 However, if the metadata is written by Inkscape in an SVG file and then exported as PNG, it will read it correctly. This is because Inkscape puts the info in front of IDAT, but the others do not.
  • Cannot edit PNG metadata

Inkscape

  • Somewhat awkward XML editor for SVG metadata. Don't use this or it will corrupt the file.
  • File > Document Metadata provides a nice Dublin Core interface
  • Various chunks n stuff in PNG files

GIMP

  • EXIF, XMP metadata editor/viewer added as of Gimp 2.9.4 (possibly 2.9.2). It is under the menu > Image > Image Metadata. Note that these are the experimental/unstable releases (stable releases are every few years, so if you want this functionality, have to live on the edge a bit).
  • Partha's McGimp variants, the McGimp 2.9.5 64-bit Experimental, or McGimp 2.9.5 64-bit Color Corrected Experimental, are based on 2.9.4 (and are interesting projects in their own right, with HDR extensions and plugins).
  • Unfortunately GIMP won't keep metadata in the XCF native GIMP file.
  • Too bad this doesn't work, that is it cannot edit metadata in JPG files.

ImageOptim

  • Turn off remove metadata options to preserve metadata

ImageMagick

  • Can read and write all metadata, but does it in a way that OSX Preview will ignore/overwrite
  • If the metadata is originally created by Inkscape, it can edit it in a way that preserves

  1. Turns out Apple's implementation of XMP in Preview does not follow the specification (what's new here, who'da guessed...) and overwrites XMP if it comes after IDAT. - Supposedly ImageMagick can read and write and not lose anything between JPG and PNG, need to explore this further, as this is unclear with both statements being made.

    Exiftool

    Turns out that Exiftool sucks equally as bad. Not to mention the university site hosting Exiftool is down.

    PNGCommentator

    • Like Inkscape, PNGCommentator actually implements things correctly. Oddly, it will show two Titles if one is inserted by ImageMagick or ExifTool. It will also crash a bit.
    • Overall, good results. Works well, has wildcard and batch processing options, but only deals with PNG.

    Exiv2

    So there is this tool called Exiv2 that can do exactly the issue, namely cross-filetype, multi-faceted metadata editing. No Exiv2 binary/DMG for OSX, though lots of people put in the time to compile Exiv2 from source. So, I went the BREW path, as I believe it has fewer issues (for me) than PORTS. First, my BREW was messed up because of Yosemite, but I got this unwedged. - Note there is a handy NodeJS for Exiv2 as well. - Too bad the damned thing wouldn't read my files, every attempt said no EXIF or XMP data present 

Image Style Guide

This Style Guide is one member of a Complete Set of Style Guides


Purpose of an Image Style Guide

This Image Style Guide is for all visual communication including photographs, drawings and the like on websites, social media, static images in video, as well as all printed material.

Here are some guidelines that should help photographers and photo editors, as well as webmasters and website editors. If the photographer or editor does not understand or has any questions about these, please contact me. This will help us quite a bit as these guidelines will help ensure a sufficient level of quality, usability, and effectiveness regarding images for websites, printed material including books, as well as display advertisements. This should mean more customers, and more satisfaction.

Image Sizing (Mainly for the Web)

All images should be set to standard sizes and have an original (which may or may not be larger than the large size. Here are the widths. Height is less of an issue, though there are:

  • a range of preferred height dimensions with medium
  • small images will have text wrapping issues if much larger than the preferred size
  • required width dimension with thumbnails, though height is not fixed (can be 4:3 in landscape or 3:4 in portrait for best aesthetics (e.g., 160 x 120px or 160 x 213px). The main issue is consistency, and so following preferred dimensions will allow for future-proofing mix-and-match of images in galleries.

Example Image Display

Thumbnails with Lightbox for Large Version

Hover the mouse over the image to see the magnifying glass icon, then click to see a larger version of the image (and continue clicking through all images that have a larger version available).

Code to generate that

[![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-t.jpg){.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-t.jpg){.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-t.jpg){.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)
[![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-t.jpg){.img-thumb}]
(/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-l.jpg)

Small Image, Left Aligned with Text Wrap

Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).

Code to generate that

![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-s.jpg){.img-left}

Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).

  • Github Issue: Can fix this with an upscaling media query for this size, with overrides to the .img-left and .img-right.

Small Image, Right Aligned with Text Wrap

Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).

Code to generate that

![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-s.jpg){.img-right}

Note that text will wrap around to the opposite side quite nicely, though on small devices it fits the width of the screen (except on iPhone 6P where it has a gap, but does not have wrapping).

Medium Image

Code to generate that

![](/images/mcneill/2016/future-of-the-desktop/intel-compute-stick-m.jpg){.img-full}

Thumbnail Size Image Dimensions

  • 160px width - thumb -t.jpg (preferred 4:3 120px height)
  • Thumbnail sets of images are 160x120px wide and landscape (we crop for portrait images)

Note: we use media queries to get the thumbnails and full width images to work out well on about 10 different sizes (portrait and landscape of a variety of devices) so the thumbnails have to be 160px in width to get that to work. All other sizes are generally more flexible in terms of exact width.

Small Size Image Dimensions

  • 320px width - small -s.jpg (preferred 4:3 240px height)
  • Small images are left or right aligned with text wrapping around them, are 320x240px wide and landscape, cropping as well if an original portrait image

Medium Size Image Dimensions

  • 680px width - medium -m.jpg
  • Preferred 680x960px < 60kb, 680x480px < 30kb, (or anything in between, actually). The two sizes mentioned work best for ebooks, for half-page, and full-page images.
  • 4:3 is 510px, 16:9 is 382.5px
  • One reason we don't simply do 640px width is that we want the image to be wider than the page width, and also the smaller images, along with space between them should be the same width as a full-width image on a web page.

Large Size Image Dimensions

  • 980px width - large -l.jpg
  • Large images can be any height.

HD Image Dimensions

  • 1920px width - hd -h.jpg
  • HD images are 1920x1080px and are used as images in HD video. Though the image is large, it can't use small text or image elements, because video is played from very small to very large screens.
    • Treat the image as viewable on an iphone 5 landscape of 568px and still maintain legibility.
  • While everything we have as standard, though other aspects are not prohibited, is 4:3 aspect ratio, while 1080p is 16:9 (widescreen), so it has to be cropped differently than our thumbnails and small images.

4K Image Dimensions

  • 4096px width - 4k -k.jpg
  • Not currently using this image size

Original and Modified Image Names

  • original width - original -o.jpg (which may be any size)
  • modified original -modified -x.jpg (again, any size)

An intermediary file -x.jpg is created so that no operations (beyond copy and rename) are done on the -o.jpg original.

Sometimes it is useful to have some images with size naming conventions, that are not fully that size, e.g., even if the largest image version is 680px, having a large size image file (which is identical to the medium size file, but with a different name) will allow for the lightbox effect without it breaking, and without having to treat the image differently in terms of markdown markup.

It is also important to note that depending upon the original size, the scripts for generating various sizes out of originals may be upscaling rather than downscaling. That is, the script will try and resize from a smaller to a larger version. This usually means using a filter of some kind. We aren't dealing with that here just yet, which is why simply having a duplicate image with a larger file size name is currently recommended. - Github Issue

Image Directory Structure

For sanity, arranging a directory structure is important:

  • archive - Archived images once in use but not currently, originals, possibly edited versions as well (in subdirectories). Should be organized, not just a dumping ground.
  • draft - Draft images changes (this is where editing takes place).
  • live - Images currently in use, this is mirrored on the web server.
  • originals - Untouched originals, currently in use
  • unused - Never used originals, possibly edited versions as well (in subdirectories), Should be organized, not just a dumping ground.
  • working - Where intermediate files are kept, e.g., cropped/brightened or otherwise enhanced versions of originals (but not resized). Gimp .XCF and Inkscape .SVG files live here as well.

Note that this structure can be present in any given directory which is a repository of content (that is, single pages or small groups of pages). The idea is to have wide and shallow directory structure for various reasons, such as technical performance and usability.

In general, images should have their own root directory on a website, though if the wordpress installation is multisite, an intermediate folder name identifying the site or location, so that an aggregate of sites/images can be managed together.

Image file structure on developer machine for the home page

/images/sitename/home/archive
/images/sitename/home/draft
/images/sitename/home/live
/images/sitename/home/originals
/images/sitename/home/unused
/images/sitename/home/working

Image file structure on live site

/images/sitename/home/

Image file structure on developer machine for any given 2016 post

/images/sitename/2016/post-url/archive
/images/sitename/2016/post-url/draft
/images/sitename/2016/post-url/live
/images/sitename/2016/post-url/originals
/images/sitename/2016/post-url/unused
/images/sitename/2016/post-url/working

Image file structure on live site

/images/sitename/2016/post-url/

Styles for images

There are several styles we use for images.

  • {.img-left} float left
  • {.img-right} float right
  • {.img-thumb} gallery thumbnails (160px landscape)

The gallery thumbnails use media queries, so that images are slightly resized for a better viewing experience on different devices, while able to maintain a single processed thumbnail width, and keeping the markdown markup extremely clean and easy to maintain.

  • Note: we use floats and clears instead of inline-block which is not fully supported by all visitor's browsers

Workflow

  • Initial crop and any color/brightness changes
    • Crop for HD, for Large, and for Small/Thumbnail (which might be different, if image is portrait originally)
  • For some systematic changes to groups of images, such as brightening a set of images, use ImageMagick Convert
  • Automated resized versions through ImageMagick scripts
  • Compression through ImageOptim
  • Directory creation/upload to site
  • Text generation for links
  • Add links to page(s) on the website

Using ImageMagick Convert on the Command Line

There are copy and convert commands which are faster to process inside of a directory (bulk). Once cropping and any basic image processing, creating different size versions of images can be done with ImageMagick convert -resize scripts.

Increase brightness with -Modulate

If it is necessary to lighten or otherwise manipulate an image, make an intermediary, use the convert -modulate command. This is a bit slow (around 1 second per operation). To be able to test and choose between levels of lightness, generate several in 5% increments, such as:

set a 105%;
set b 110%;
set c 115%;
set d 120%;
set e 125%;
for light in a b c d e;
  for file in *.png;
    convert $file -modulate $$light (basename $file .png)$light.jpg;
  end;
end

And for a given brightness:

for file in *o.jpg;
    convert $file -modulate 110% (basename $file o.jpg)x.jpg;
end

Basic Compression with convert

This works in-place with fairly good results, without any resizing of the image:

for file in *.jpg;
    convert -strip -interlace Plane -gaussian-blur 0.05 -quality 85% $file $file;
end

Note: remove the -gaussian-blur if there is text in the images, as it will render it less sharp and at small font size, illegible.

Generate different image dimensions with -resize

Note the code below uses a .png file source

set l 980;
set m 680;
set s 320;
set t 160;
for size in l m s t;
  for file in *o.png;
    convert $file -filter Lanczos -resize $$size (basename $file o.png)$size.png;
  end;
end

Note if generating images from other images that have already been compressed, it is necessary to set the quality somewhere between 90-100%, after -resize $$size.

-quality 90

Generating Markdown Text for Images in a Directory

To generate the text for markdown markup of the images, use the command

for file in *t.png;
  echo "[![](/images/directory/$file){.img-thumb}](/images/directory/"(basename $file t.png)l.png")";
end

Media Query Breakpoints

While not targeting devices, there should be some correlation between looking nice on multiple devices, and easy to manage code. I prefer some complexity in the CSS rather than editor (since the CSS is managed site-wide, vs. x number of articles).

People talk about three or a few more media query breakpoints but that is not at all reality. We have landscape and portrait, as well as fine points of screen widths. Since I don't want the images to actually resize dynamically (not in a row of images, in any case) I need to resize the images based on screen real estate availability. Here is how it works out these days, for a 160px thumbnail, and the desire to make as large as possible, while increasing number of images in a row when possible. The range of sizes is 127px to 160px.

Note these are initial empirical numbers using Chrome Dev Tools for simulation. This only works on a particular width and breakpoint theme.

Break Thumb Full Device Orient
320 130 270 Iphone 5 Portrait
360 150 310 Galaxy S5 Portrait
375 155 320 Iphone 6 Portrait
411 113 360 I6P,Nex5x Portrait
435 121 384 Nexus 5x Landscape
568 122 517 Iphone 5 Landscape
640 140 588 Galaxy S5 Landscape
667 146 614 Iphone 6 Landscape
736 128 680 Iphone 6P Landscape
768 153 480 Ipad/Desk Portrait
980 151 634 Ipad/Desk Landscape

Even though this information is useful, here we are really only dealing with device widths and now browser widths. Devices match up to browsers for portrait mobile widths (to some degree), and amazingly don't often for the vertical dimension. However, when we are dealing with anything that can have windowed browsers, that concept goes away entirely. What is the use of pulling a device-width of 1920x1080px if the browser is resized to 700px? Completely useless. So what we need are actual browser widths in the wild and not theoretically popular potentials. Thankfully as of January 2016, Google has Browser Width as a variable to check. Otherwise some coding is in order.

Empirical Screen Resolution Popularity

Break Thumb Full Device Orient
1366 130 270 Iphone 5 Portrait
360 150 310 Galaxy S5 Portrait
1280 155 320 Iphone 6 Portrait
1920 113 360 I6P,Nex5x Portrait
435 121 384 Nexus 5x Landscape
568 122 517 Iphone 5 Landscape
640 140 588 Galaxy S5 Landscape
667 146 614 Iphone 6 Landscape
736 128 680 Iphone 6P Landscape
768 153 480 Ipad/Desk Portrait
980 151 634 Ipad/Desk Landscape

WordPress Plugin and CSS Code

We currently use the Jquery Colorbox WordPress plugin, the Markdown Extra WordPress plugin, and a set of CSS directives for functionality.

CSS Code

img {
  max-width: 100% !important;
  max-height: 100% !important;
  height: inherit !important;
  border-radius: 10px !important; /* Nah, not really, but it makes the edges round */
  float: left !important;
}
.img-left {
  float: left !important;
  margin: 5px 20px 10px 0px;
  border-radius: 10px !important; /* for rounded corners */
}
.img-right {
  float: right !important;
  margin: 5px 0px 10px 20px;
  border-radius: 10px !important; /* for rounded corners */
}
.img-thumb {
  margin: 0px 10px 10px 0px !important; /* markup all thumbnails with this class */
}
@media only screen
  and (min-width: 320px) {
  .img-thumb {
    max-width: 130px !important; /* iphone 5 portrait */
  }
  .img-full {
    max-width: 270px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 360px) {
  .img-thumb {
    max-width: 150px !important; /* Galaxy S5 portrait */
  }
  .img-full {
    max-width: 310px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 375px) {
  .img-thumb {
    max-width: 155px !important; /* iphone 6 portrait */
  }
  .img-full {
    max-width: 320px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 411px) {
  .img-thumb {
    max-width: 113px !important; /* iphone 6p, Nexus 5x portrait */
  }
  .img-full {
    max-width: 360px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 435px) {
  .img-thumb {
    max-width: 121px !important; /* nexus 5s landscape */
  }
  .img-full {
    max-width: 384px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 568px) {
  .img-thumb {
    max-width: 122px !important; /* iphone 5 landscape */
    margin: 0px 10px 10px 0px !important; /* reset the margin to standard */
  }
  .img-full {
    max-width: 517px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 640px) {
  .img-thumb {
    max-width: 140px !important; /* Galaxy S5 landscape */
  }
 .img-full {
    max-width: 588px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 667px) {
  .img-thumb {
    max-width: 146px !important; /*  iphone 6 landscape */
  }
 .img-full {
    max-width: 614px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 736px) {
  .img-thumb {
    max-width: 128px !important; /* iphone 6p landscape */
  }
 .img-full {
    max-width: 680px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 768px) {
  .img-thumb {
    max-width: 153px !important; /* ipad portrait + standard desktop */
  }
 .img-full {
    max-width: 480px !important; /* align width with thumbnails */
  }
}
@media only screen
  and (min-width: 980px) {
  .img-thumb {
    max-width: 151px !important; /* ipad landscape + wide desktop */
  }
 .img-full {
    max-width: 634px !important; /* align width with thumbnails */
  }
}

ImageOptim CLI Image Compression

ImageOptim (which I have found is actually fine on it's own, without ImageAlpha or JpegMini) has a command line interface, the aptly named ImageOptimCLI. To be honest, the drag and drop part works pretty well with ImageOptim on its own. Note there are various versions and other options for the Non OSX temperment.

Photo Shooting Guidelines

  • We want Landscape photos (longer in width than in height). These are predominantly what we use so a lot of portrait shots are not useful. We can always crop portraits for interesting Thumbnail sized portrait images on the website. Shoot Landscape.
  • Use HDR when possible. Good HDR helps a lot especially with outside shots that have bright sun or both light and shadow. It is better to use HDR in-camera instead of trying to do corrections. Of course HDR can have a problem with speed, especially moving subjects. HDR can help make photos better before editing. However, HDR is not best on every occasion, so use judgement or take two photos (the iPhone 5 can automatically shoot an HDR and a non-HDR at the same time).
  • RAW is not necessary (and can slow down the photographer, especially when trying to use HDR. There has never been a point when we are making images for the web and for books, when RAW actually helps. RAW images are much larger and can require additional editing. In most cases, shooting RAW is simply a waste of time and energy. Good, large JPG images are fine, and that is what we want.
  • Smiling, laughing people are the goal. People show happiness by smiling and laughing. These kinds of images are very useful. Frowns and neutral faces do not encourage people to buy. Sometimes people smile with their eyes.
  • Images need to be in focus. Blurry faces are not usable (unless done on purpose, though if anonymity is required, shoot with the face occluded by hair, hat, some part of the setting, etc.).
  • Images should have a good straight, head-on view of the subjects. Shoot at the same level as the subjects, especially heads and faces. Do not shoot or angle the camera lens below them or above them. Shoot straight across the horizon rather than at an angle away from the subjects. Have the camera frame in line with the horizon so the image does not need to be rotated.
  • Do not shoot subjects who have a shadow pattern across their face, or bright sun in their face. Use a reflector to project soft light, or filter sun. Squinting eyes from too much sun, or a face in shadow does not look good and we prefer not to use it.
  • Have photos with a mix of subjects, many people in the picture. It is best to have both boys and girls together, men and women together. Photos with a group of people interacting or hanging out in the same place, both local and foreign people together is best.
  • Photos showing authentic activity are much, much better than staged/posed photos. Some staged photos are fine, especially showing a group together, but action photos, activity photos are more in need. We need both, but more action/activity photos.
  • Photos of locations should have people in them, not empty rooms and buildings. For example, a photo of a classroom should have at least one person in that room. A photo of a bedroom or kitchen should have staff. Photos of bathrooms do not need people, but it is best to put down the toilet seat (if there is one).
  • Include nature in photos when possible. Besides plants, animals, trees, birds, etc.
  • Do not shoot to the edges of the camera frame. In many cases we crop inside the image, so leave room on all sides to be cropped.
  • Shoot at the highest resolution of the camera. Make sure as many pixels are being used as possible.
  • Share images using a USB or SDCard if more than 10mb of files. Or better, use Google Drive or similar.

Color Profiles and Monitor Calibration

Also, I highly recommend optimizing ClearType first, before calibration. And then repeat the optimization of ClearType after the calibration. That should be optimal. The main issues are to get the gamma correct, and of course have the colors be accurate.

Website

  • Header image (full width) should be 980x200px (1:4.9) jpg, < 50kb
  • Images in the body can be 680x480px for a good landscape jpg that should resize nicely, at < 75kb
  • Thumbnails can be as small as 260x370px portrait or 260x185px landscape jpg, at < 20kb / 10kb
  • Logo image should be 980x200 (1:4.9) png w/o transparency, at < 50kb (Inkscape/SVG file)
  • Large versions of photos/images should also be produced for inclusion in video (e.g., 1920x1080px)
  • Sidebar house ads should be 260x86px png w/o transparency, at .png
  • GIMP (photos): .xcf to .jpg

Website Images

  • Header image (full width) should be 980x200px (1:4.9) to 980x326px (1:sqrt2) jpg, < 50kb
  • Images in the body can be 680x480px for a good landscape jpg that should resize nicely, at < 75kb
  • Thumbnails can be as small as 260x370px portrait or 260x185px landscape jpg, at < 20kb / 10kb
  • Logo image should be 980x200 (1:4.9) png w/o transparency, at < 50kb
  • Maps should fit the body
  • Optimize all images within the GIMP/Inkscape editors and compress with external tools

Sprites

Note: Sprites also have limitations on mobile. - Sprites for social media (e.g., Galactic Social and Friend/Connect/Follow) - Sprite optimization for flags in the flag switcher of WPML and also this sprite hack

Social Media Images

For all Social Media profile images, use a 500x500px png with no transparency, ensure the profile image can support rounded corners (YouTube/Facebook) as well as a complete circular mask (G+). In some cases it is useful to create different profile images, optimizing for each social media platform. - Facebook header 851x315px (1:2.70) - Twitter header 1500x500px (1:3) but with less usable - Google Plus header 1080x608px (1:1.78) can be larger but this is better for smaller

App Icons


This Style Guide is one member of a Complete Set of Style Guides

Video Style Guide

This Document Part of a Complete Set of Style Guides


This document provides guidance on the creation and management of video for social media, as well as advertising on video platforms. In particular, video needs to be optimized for SEO purposes and for particular platforms. Just as written content and image content needs to be optimized in order to match or beat the competition, video is just as important. Video SEO needs as much, if not more, planning and thoughtful editing and curation as text and image content SEO.

Caution: leaving video content and production in the hands of others without providing proper guidelines and guidance will not be effective. Not only are there content guidelines, but specific kinds of videos need to be created, with specific length, as well as the use of brand imagery within the video, and the proper observation of copyright law. Not providing these guidelines, much less not having them is a waste of time and money.

This document is a part of a series on SEO for Content, which includes:

  • Image SEO
  • Text SEO
  • Video SEO

Many of the same features of Text and Image SEO apply to Video. In particular:

  • Length
  • Format
  • Metadata (Title, description, keywords, annotations, transcript, etc.)
  • Copyright (and other intellectual property infringement)

Copyright in Video

Copyright in particular is very important, especially in Thailand where most video and graphic designers routinely are unaware, and even when aware do not abide by the law. There are a few simple guidelines that can help produce legal content:

  • All music/audio must be legally licensed and referenced. Even in the case of Creative Commons / Open Content and Public Domain content, the sources of the audio and the license under which it is used must be declared. This is not actually difficult as there is a lot of public domain and creative commons-licensed work available. Also, one can simply ask for permission to use, especially for those artists one can deal with directly (vs. through a music label).
  • All brand and organization names / graphic art / logos, obvious product examples, and representations must be licensed or have a written waiver to allow use. This can be problematic when taking video or still photos in public. When some imagery is unavoidable, a video editor should be able to remove restricted content. Trademark and Trade Dress are the laws being violated, as well as occasionally copyright in general.
  • All likenesses and identifiable individuals need to consent to use. In the case of public spaces generally it is thought to be legal to take photos and video. However, the law can be different in different countries, and the use of video in packaged products (such as in a documentary, or even on a videotape package) may infringe in certain circumstances. Whenever there is commercial use (for money), then consent should always be acquired. Defamation is a particular risk.
  • All video should be work-for-hire so that it (original video / audio content and the complete, edited project, in an accessible format (that is, that could be edited later) completely belongs to the organization commissioning the video. Work-for-hire contracts should be used for legal clarity.
  • Actors should have actor releases. Anyone who is hired (for pay or volunteer basis) to appear in the video needs to sign an actor release or a general release, or be covered by other work-for-hire or employment agreements.

The key is to get written consent when there may be a question, or even if permanent consent is needed (for example, someone could provide verbal consent, and then upon viewing a video, withdraw that consent. See also When is it Legal to Film People without their Consent.

Video Platforms

While there are many different platforms for video, focusing on Facebook, Instagram, Twitter, and YouTube makes the most sense. These platforms all allow for advertising and are highly social. Instagram is owned by Facebook and campaigns can target that platform. Twitter is still very disappointing as an advertising platform, but it is still a viable and popular social media platform. YouTube is integrated as video in Google Plus pages (including Google Local / Google My Business map listing).

Technical formats and limitations

MP4 H264 with AAC 128k (mono) / 384k (stereo) / 512k (5.1) is the best format. The idea is to use two-pass encoding or 8mbps 1080p / 4mbps 720p, 24/25/30fps. Instagram supports 3-15 second length, Twitter supports 30 second length. Both Instagram and Twitter require mobile for video upload.

Technical References

Video Length and Objectives

Besides the technical specifications, video length requirements are important for specific marketing objectives. A key factor is to not "create videos" but rather to tell the story of the brand that fits various segments and will be used in various ways. Obviously, some video elements will be used in multiple videos, such as brand intro and outro, that can include a logo, (limited) animation, audio, or other identifying marks that are consistent across all media. These are the shortest elements and should have care and thought put into. This is akin to logo / organization visual style guide in terms of colors, typography, etc.

  • Brand intro (bumper), 1 second
  • Brand outro, 1-3 seconds
  • 15 second (Instagram length)
  • 30 second (Twitter length, YouTube channel trailer length)
  • Searchable length (YouTube)
    • Short (less than 4 minutes) ~3 minutes
    • Long (more than 20 minutes) ~21 minutes
  • Shorter video for Facebook, does not support long-form like YouTube does
  • Longer the video, more engagement, so don't be afraid of long

Other Important Video Elements

  • YouTube Channel art
  • Video title, description, tags
  • Playlists (YouTube, Facebook)
  • Subscribers (YouTube), Followers (other social video accounts: Facebook, Instagram, Twitter)
  • Clickable annotations (mid-reel calls-to-action), at the 30 second mark + near end)
  • Transcripts (manually edited) / Close Captioning
  • See also https://creatoracademy.withgoogle.com/page/lesson/brand-identity

Video Marketing and Video Structure

Basics include: shareability, entertainment, and information needs. The key will be to focus on information needs, that is "How do I ... " Many people create one long video then slice and dice into smaller segments. This is backwards. The key is to create several small gems (which may be further edited down) and then piece them together for longer videos.

In addition, the idea should be a video series, akin to a content series (or chapters of a book). A single video is ok, but that won't get very far. What you want are follow-on videos targeting the same market, so that people click through, favorite / like on multiple videos, and subscribe to a channel / follow an account. This then allows you to market to them through advertising (remarketing) or follow-on video. The goal is to collect followers who like and share your content.

That said, the content needs to be informational, aspirational, and on-brand in terms of personality. It should seamlessly fit in already existing social media accounts and web pages and not be out-of-place.

Video structure

  • 3-7 second intro
  • bumper (brand intro) 1 second
  • content
    • Call to action clickable annotations (30 seconds into video and near end)
  • outro / call to action 1 second
  • brand outro 1 second

Note that even a 15 second video can have much of this structure (though for platforms besides YouTube a clickable annotation is not available).

Remarketing on Video

For Facebook, Instagram and Twitter, videos are associated with an account (or page). Facebook does allow some organization of videos into groups, but that is the extent of it. YouTube has channels which are unique collections of videos and playlists. While an organization is likely to have a single channel, the use of playlists and subscriptions to video can create excellent remarketing opportunities.

Video Advertising

Facebook, Instagram, Twitter and YouTube all allow video advertising. YouTube is slightly different in that Video is being advertised on top of, whereas with the other three, video is simply the medium of advertising (as opposed to text, display, or flash advertising).

Facebook and the others allow for view-based bidding and campaign goals. YouTube can both advertise video (on the video platform) as well as advertise on video (with video or text overlay ads). Adsense is used as the platform for allowing publishers to display ads on their content and to manage that monetization.

In sum, on YouTube one can:

  • Have a video be an advertisement
  • Advertise on other people's videos
  • Advertise on one's own videos

Also, Google Analytics allows for YouTube channel data. As with adwords in general, YouTube advertising can be as focused and keyword-specific, and there is also geographical and demographical data.

Video Advertising Effectiveness

Video ads are known to be the most effective format, better than flash animation ads for increasing intent-to-purchase, including top of funnel brand awareness and bottom of funnel brand favorability. See this paper https://drive.google.com/open?id=0B2q0T9IiNNfaOUhzaE1ON1hWb1k and while the research is a bit old, these are scientific studies which show durable psychological effects).

However, the key is in being cost-effective, not just effective. This means an ad that is well-crafted and on-message. In order to magnify the brand effects, there needs to be some call to action that is free to perform, such as viewing other videos, downloading a pdf, visiting a website, etc.

Also, the video ad needs to be very well crafted and lead to other video viewing/liking and subscribing to your channel. It will take work to set this up, but then you will be able to leverage a place where your competitors are not doing much (yes, some competitors have more videos but they are not being advertised).

There are several video formats/uses/ads that can be combined:

  • Channel advertisement (this promotes the channel and channel subscribing), usually ~30 seconds
  • Featured video (this is promoted on all of your videos, though most recent upload could be the default, and can be the YouTube Channel advertisement)
  • Preroll/in-stream advertisement (this is optional but YouTube charges for preroll views if 30 seconds of the video has been watched (or if watched completely when < 30 seconds). Therefore it makes sense to have a 30 second video advertisement and the call to action be on the website
  • Standard in-display ads show as related videos, search results, a YouTube video overlay, or on the content network. The landing page is either the channel (if the video is the default channel ad video), or a video's own landing page.

Process for Video Production

The following process is meant to help bridge the gap between the previous sections and having video that is well-designed for SEO.

  • Identify goals for the videos (that is, if successful, what will they have achieved -- usually this is an increase in customers as well as brand awareness).
  • Identify the key selling points and product/brand differentiation vs. competition
    • This will result in a list of concrete statements, which will then be told via moving pictures
    • Examples: inexpensive/affordable, high quality (in concrete terms of quality "what"), friendly (brand personality), professional (brand personality/service quality), results-oriented, etc. And then more specific elements of the product/service being presented.
  • Once this list is compiled, then bring in the videographers/video editors for a meeting (1 hour should be sufficient). Present the list of statements and have them understand they need to convey these in visuals and ~10-20 seconds per item. Discussion should focus on what is meant by each of these statements and how to convey them visually. After the discussion the focus should move to example visuals/video that does something "like" what you want. That is, before shooting any video, there should be actual examples found (online or in other places) that do the job.
  • The second meeting should make corrections so that again, everyone is very clear what you want conveyed, and what does and does not convey effectively. If everyone agrees, then at this meeting the parameters for legality need to be gone over, including work-for-hire contracts, release forms, guidelines for audio, etc. The work that will be produced from that point forward needs to be legal, ethical, and meeting the terms of the contract.
  • Good videographers and video editors should have a shot list (which should be reviewed) and create a lot of raw content. All of this is included in the work product and belongs to the client, who should have some large backup drives or better, a new Google Drive account to store everything as it is produced. All legal documents need to be stored in the Drive including any signed documents that are scanned.
  • Initial draft of each of the elements that can be put into Instagram and Twitter-sized video (15 seconds, 30 seconds). Consider these as polished gems that are then fitted together in a larger piece of jewelry. Polished gems can then be released as they are finished, and the video editor then should work toward larger and larger groupings. Finally, one or more 3.5 minute videos should be completed, and possibly even a 21 minute video.
  • 6 @ 15 second videos + 3 @ 30 second videos = 1 @ 3.5 minute video
  • 6 @ 3.5 minute video = 1 @ 21 minute video

The point is that some elements of a story can be told in 15 seconds, some can be told in 30 seconds, and then many of these weaved together then become a standard short-length video.

Six of these short-length videos can be reworked together to reach 21 minutes in length.

Not only are video shots optimized in this process, but also editing is not a "cutting down" so much as a pairing and building up. As well, additional video can be added and removed in the future as new gems become more important or some elements might change.

Obviously each gem need not be exactly 15 seconds or 30 seconds, but these are useful targets because of the vast potential for mini-video consumption on social media (and most importantly on mobile), in particular Instagram, Twitter and Facebook.

To reinforce: it is vital to have all the work product including the video elements as they are saved inside of a video editing program. That way one can make changes (to overlay text, audio, and any image/video elements) in the future. There are several standard video editors, but the best are cross-platform and open source. Blender is highly recommended, but most video editors do not have experience with this tool.

What is Left to Do

After video is edited, overlay audio, text, and / or annotations are needed, as well as titles, descriptions, possibly custom thumbnails, other metadata, and the use of linking (from shared video, or within video descriptions) to website pages, and when to launch video campaigns.

In addition, running ads on top of videos, or running these videos as ads, as well as remarketing audience creation and ad management needs to take place as part of the planning effort.

Eventually I will create a checklist out of this document, which can help manage the process. Also, I have legal documents such as release forms, work-for-hire contracts, etc. These are available for clients interested in creating video and/or having SEO consulting on the effective media format.


This Document Part of a Complete Set of Style Guides

Identity Style Guide

This Document Part of a Complete Set of Style Guides


Purpose of Brand Style Guide

This Brand Style Guide is for all brand communication including in email, website and social media as well as all printed material. This document is the source of typography, color palette, logo and other brand elements. This is the definitive guide such that any new documents or media being produced, or new internal or external communication should follow this guide. All organizational members should be educated about and adhere to this guide.

Note: below are included examples of other brand style information. Until this document is complete, there should be exemplars to help guide creation of the brand style guide elements.

Brand Name

There is a big challenge in the name as on the one hand having generic keywords in the url provides tangible SEO value, on the other hand those generic keywords are not memorable nor are they protectable (via trademark).

Colors and Color Palette

Pantone and Web

Logo Colors

...

Social Media + Website Header Images

Currently, Facebook headers are 851x315px and Twitter headers are 1500x500 (but with about 55px strip at top and bottom which become invisible in many forms). Also, the Twitter header is cropped on right and left at about 20% each in the mobile app. The website header is 930x300px. It is possible to have an image fit into approximately the same space, though it does take some tweaking to get the image set and then generate the three versions.

Color Palette

Web / Mobile Layout

Fonts/Typography

  • Current Fonts
  • Other Options
  • Font-family stack
  • Google Fonts (if needed, a single font)
  • body, h1, h2, h3, h4, h5, h6
  • {font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;}

Acoustic Branding

What notes evoke a brand identity? See:

Brand Meaning


This Document Part of a Complete Set of Style Guides

Writing Style Guide

This Document Part of a Complete Set of Style Guides

Purpose of Text Style Guide

This Text Style Guide is for all textual communication including email, website, social media, brochures, ebooks, etc. as well as all printed material. This guide includes markup style and writing style. Markup Style Google Docs will be the primary repository of edited documents. However, there are additional editors which can be used, with documents saved in Google Docs and/or Dropbox. This is based on writer choice. Markup using Google Drive First, turn off the Smart Quotes and Automatic Substitution in Google Drive: (TOOLS > PREFERENCES). This needs to be done one time apparently for the user. So open a document, change the preference, close the document, then open other documents the setting should remain changed.

Markup using WriteBox

Writebox has several options including iOS, Android and Chrome apps as well as a generic webapp. It is fast and works well, though it does not have a side-by-side code/preview pane as Stackedit supports. Writebox also supports Google Drive and Dropbox storage. http://writeboxapps.com/

Standard Markdown Syntax

## H2 (subheads) ### H3 (sub-subheads) *italic* italic **bold** bold - Bullet - Bullet - Bullet - Bullet > Quote (use this for callouts, note that this can wrap but if there is a new line, there needs to be a new greater-than sign and space. > For multiple paragraph asides, there needs to be another right angle bracket + space for each subsequently indented paragraph or element. > > This would be a second paragraph. It is suggested to have a line space between paragraphs, but there should not be when dealing with such things as bulleted lists, such as: > - This is the first bullet point > - This is the second bullet point NOTE: the Quote format should be use for "Asides" or "Side Text". See also "Callouts/Pullquotes" section in the writing style guide below. Tables Item | Value --------- | ----- Item A | 1600 USD Item B | 12 USD Item C | 1 USD Specify column alignment with one or two colons: | Item | Value | Qty | | :-------- | --------:| :--: | | Item A | 1600 USD | 5 | | Item B | 12 USD | 121 | | Item C | 1 USD| | 234 | (Left align, right align, center align) Comments We can use the extended HTML comment syntax. Note that there are three hyphens ("-") on the left side, and two on the right site. There should be no spaces between angle bracket, bang and hyphen on either side. For readability there should be a space separating the actual comment from the comment markup: It is best to have an extra line spacing between the paragraph text, the comment, and the next paragraph text. When using this comment markup, in Multimarkdown and Pandoc, the comment is stripped out of LaTeX generation (given directives) but does not show up visibly in preview (though it does exist as an HTML comment, therefore invisible). In Stackedit.io the comment apprears as highlighted in red, but in Writebox it does not display (being treated like raw HTML markup). Footnotes, Citations and References To make things easy, we will use a simple footnote syntax for all citations, glossary terms and references: Some text1. Final sentences at end of the paragraph.


  1. Here is the text of the footnote. Note that the [^footnote] name can be named anything (no spaces or numbers, prefer lower-case, short, descriptive of the source and the information. Note also that there needs to be an extra blank line between these two lines, as well as an extra blank line to begin the next paragraph. Third note: the footnote text should not be placed at the end of the edited chapter or book, but rather in the immediate vicinity of the initial footnote indicator. Automation software (XeLaTeX) will be used to move it to be an in-line footnote, an endnote, or a chaptered end-of-book footnote, as needed. Note that Stackedit is "smarter" than the markdown parsers we use on the website and also when generating pdf/epub. So we need to use the "dumber" syntax as found in the style guide. There are two problems. The first is that the footnote link is not in a lowercase-plus-hyphen source description format. The second is that the URLs being put into the footnote text are not being marked up as URLs. Again, Stackedit can deal with this, so it looks ok in that editor, but other parsers cannot. Below is an example of your markup, and corrected version to use. CURRENT MARKUP ... a staggering 400 million people -- are enrolled in some degree of English-language instruction2. As more people learn to speak English... 

  2. 2010 data, http://english.people.com.cn/90001/90776/90882/7093494.html CORRECTED MARKUP ... a staggering 400 million people -- are enrolled in some degree of English-language instruction3. As more people learn to speak English... 

  3. China Daily 2010 data English course enrolment Note that the footnote marker is more descriptive of the source and kind of data, and the footnote itself has more descriptive link text as well as link markup. Images For a book, we want captions to display under the images, so use the following syntax: ![Figure Caption][image-filename.jpg "Figure Caption"] Figure Caption The Figure Caption is written three times (once for the ALT, once for the TITLE, and once for the Caption formatted in italics) it should be the same in all three cases. The image-filename.jpg should be short, descriptive, lowercase and using hyphens between words ("-"). For various reasons regarding Kindle, all images should be .jpg files. Note: There are more sophisticated captioning syntax but our wordpress plugin does not support this, so the text cannot be reused there. See also the Image Style Guide for more information about Image parameters and naming. URLs URLs should be used only in footnotes, not throughout the text. Linked text or if an email address is used, or a full website address: Writing Style Guide Writer Profile The best writer is one who is a dedicated professional, has a thick skin, is detail-oriented and client-focused. This is the writer who can adapt their writing to the style and form needed, and understand that the writing required will help them develop professionally. Because we are focused, some might say picky or detail-obsessed, the writer and the writing reaches a higher level of specificity. This is then recognized by our readers and becomes a part of our brand. Original Writing and Writing Style All writing needs to be original. Paraphrase of ideas and facts is generally fine, especially where a link to the source can be found. These are not research papers, obviously. However, paraphrasing the sentence-level construction should not be done. No chapters or chapter sections should feel like rewritten articles found on other websites. The simple approach is to have unique articles which have different meaning (and therefore will have to have different words). This is actually a lot less tedious than trying to find new ways of saying the same thing in different articles. Writing should be robust and break away from a conventional guidebook style. Each chapter or chapter section should be less conversational and more straightforward and pithy. Easy generalizations that are overly positive should be dispensed with. Words such as amazing, wonderful, great, beautiful, stunning, and the like should be used sparingly, and more subdued adjectives and adverbs deployed, such as interesting, unique, worthwhile, and the like. Significant factual detail - such as that found in historical sections of articles, or detailing climates, or a long list of airports - should be reduced or eliminated. It is enough to point to this information in other onsite articles or other websites. Organizing information in chapters and chapter sections so that each component tells a small but interesting and important story and provides insight and utility. The Lonely Planet guidebook style of including all detail at one-size-fits-all is not relevant for our purposes. Chapter Style for Books Chapters are usually around 2,000-3,000 words. In a 50,000 word book around 20 chapters is the appropriate target. However, the actual material may create shorter or longer chapters, as well as fewer or more of them. Chapters should be ordered in a way that they develop from each other and form a useful narrative. At the same time each chapter should be self-contained as much as possible, and should be meaningful if read alone. Reference to other chapters is entirely appropriate, e.g., "See the chapter on Risks and Hazards for more information about inoculations and other health precautions previous to travel to Thailand". Inverted Pyramid Facts and keywords should be near the front of the chapter, just as they should be up front in a given section and a given paragraph. Supporting information falls below. This is known as the inverted pyramid of journalism. Cultural Elements and Teacher Experiences Two kinds of specific information can be highlighted throughout the book in two ways: in a section near the end of most chapters, or using Asides. These are Cultural Elements and Teacher Experiences. Because culture touches nearly everything, even in chapters where it is not the focus, some elements of culture can be mentioned as asides or perhaps as a section near the end of the chapter. Teacher experiences are similar, that is actual experiences of actual teachers in any of the situations/logistics discussed can be presented, again as asides, or as a section at the end of the chapter. Chapter Summary and Further Reading At the end of each chapter should a summary of 4-7 one-sentence bullet points. This section should have a subhead of Chapter Summary. There should also be a subsection called Further Reading with 2-4 references. Some may be websites, especially Wikipedia pages, but it is strongly preferred to have full-length books or more extensive references. The goal is to provide a short, curated list of references in which the reader would find more information, rather than the same information. Call-Outs (Pull-Quotes) and Asides Some published works use include asides, which are generally used to introduce new but tangential material, examples or stories/references. Some works use call-outs (sometimes called pull-quotes), which emphasize a particular part of the text, usually a prominent statement or quotation. We want asides in our work, but want to avoid call-outs. From one to five asides can be used in a given chapter. An example would be reference to a scientific study or publication that might illustrate a claim being made in the text. Another example would be illustrating a point by making reference to a prominent individual involved with the topic at hand. Asides should have references so that the reader may seek more information if they so desire. Asides can also be used for anecdotes and personal stories and experiences, as well as direct quotation. We use the quotation markup to indicate an aside, as in: > Quote (use this for callouts, note that this can wrap but if there is a new line (second paragraph), there needs to be another greater-than sign after two hard returns). Section Style Each chapter, article, press release or web page has several sections to it and each section should start with a subhead. These subheads are marked up with double hash marks and a space before the subhead, concluding with a space and double hash marks again. Note that the subheads need to include keywords, be clear and descriptive. After the subhead, a hard-return (ENTER key) should be used before the start of the first paragraph of the section. Subheads should be in Title Capitalization Format. A section should be a logical division of the chapter which is not too long or too short relative to other sections. Sections can be 250-500 words on average, but they can be longer or shorter. The subhead itself should be clear, concise and descriptive of the content in the section, and should be meaningful to someone who is browsing through the book. Use of common terms is strongly preferred over terms that are themselves defined in the section. However, if the section is about that topic then the use of the term as well as a short description may be best for the subhead. E.g., poor subhead: Krabi Krabong, better subhead: Krabi Krabong - Thai Weapons Martial Art; best subhead: Thai Weapons Martial Art - Krabi Krabong. Having the more common term of Thai Weapons Martial Art come first is better for the reader as well as online SEO of this section. Note: the Editor/Publisher can help with Headers and Subheads, don't worry too much about this. A section should be somewhat self-contained. That is, the section would make sense if read on its own. Sections should be in order of more general to more specific, as well as more important to less important. The first paragraph of the section should be descriptive of the content in the section and a general statement of that content. However, language such as "this section is about..." should be strongly avoided. (These formulations are unnecessary and represent a more academic style.) Paragraph style Paragraphs are roughly 4-5 sentences in length and should be thought of as a coherent subsection of the given section they are in. Individual writing style may have more say over paragraph-level organization. Between two paragraphs should be two hard-returns (ENTER key strokes). Spelling, Grammar and Punctuation It is best to avoid single quotes and double quotes as much as possible, especially when they are used semantically, e.g., to change the meaning or offset the words as being not fully literal. In most cases these marks are not needed, and when clarification of a term or some editorial distance, then the word so-called can be used or in some (few) cases, the italics formatting. For book-length content, any one single English, e.g., American English, Australian English, British English, should be used throughout a given work. Pick one standard and stick to it, is the only firm rule. Spelling and usage should be consistent. Overall, shorter sentences with few punctuation marks are strongly preferred. Each sentence should have no more than one idea, whenever possible. Avoid contractions such as it’s for it is, they’ve for they have, etc. In many cases the grammar can be changed to remove these words, or simply remove the contraction and replace with component words. - American English Comma Usage: http://owl.english.purdue.edu/owl/resource/607/02/ - Differences between American and British English Comma Usage https://en.wikipedia.org/wiki/Comma#Differences_between_American_and_British_usage - Use or discarding of Serial Comma should be decided upon and then consistently applied. Diacritics Please avoid use of any Diacritics: http://en.wikipedia.org/wiki/Diacritic The reason is, people do not use them when they search in English, and Google in many cases treats them as different words. For example: http://www.google.com/trends/?q=Caf%C3%A9,+Cafe This makes Vietnamese especially difficult, by the way. The French really cursed them. The diacritics have a lot of information but they are dropped when interacting in email/texting and the web. Avoid all sub/superscripts. http://en.wikipedia.org/wiki/Superscript These are generally formatting issues in Word (as well for the spelling corrections which add diacritics). You have to train/configure your text editor not to do these things. Diacritics just don't work on the web in terms of search. Word Choice, Voice, Pronouns and Reference Word choice should be common language usage at all times, except in terms of necessarily technical discussion. Do not use a more obscure word when a plain, everyday word is available. Contraindications should become warning signs; assuage should be reduce; cultivated should become developed; realm should become area. In most cases the word like is not appropriate when providing examples, but should be replaced with such as. In nearly all cases a neutral, 3rd person voice should be employed. The imperative can be used, e.g., Contact someone for help. But the first and second person should be largely avoided, e.g., do not write You should contact someone for help. Affect vs Effect: http://grammar.quickanddirtytips.com/affect-versus-effect.aspx Use of Third Person For gender pronouns with indeterminate reference (i.e., not to a specific known individual), use of the third person plural is preferred, e.g., use they or their for he/she or his/her. Lists, Tables and Figures The use of lists, tables and figures are strongly encouraged. When done well, these are very helpful to the reader and especially the potential customer who is browsing through the work. Whenever a list of things are discussed, a bulleted list should likely be included. Tables are very helpful for any systematically discussed comparisons or contrasts. Any pictures or drawings which can help illustrate the work should be identified, if only as an idea. All figures and tables need a caption in italic, such as: Asean countries with English teacher salary and cost of living comparison Citation, Reference and Copyright Quotation should be avoided whenever possible. Paraphrase is ideal, however it is not always possible. For direct quotation, an in-line citation should be used, but full bibliographic information is not needed. Use of Foreign Language Terms Use of foreign language terms which are common should be formatted in italics (surrounded by a single asterisk, e.g., krengjai), along with a parenthetical original script and definition, e.g., Kreng jai (เกรงใจ) means being considerate or respectful, not wanting to bother someone. Note that any definitions should also be included in the Glossary document. Please copy/paste the term (and definition) into the glossary as well. We will ensure that the Glossary definitions match the text within the chapters as part of the final editing process, so there is no need to manually keep these in sync. Currency Codes and Currency Conversion For currency, the capitalized, three letter currency code from the ISO 4217 specification: https://en.wikipedia.org/wiki/ISO_4217. This should be appended as a suffix after a space, e.g., 100 THB. If the currency needs to be spelled out, use capitalization, e.g., One Hundred Thai Baht. Avoid using the dollar, baht, pound, euro and other currency symbols. These are ambiguous and also not effective in search. When discussing currency exchange rates, it is useful to mention (e.g., regarding the Thai Baht) the Bangkok Bank conversion page: http://www.bangkokbank.com/BangkokBank/WebServices/Rates/Pages/FX_Rates.aspx as well as the XE.com site (which is commonly used) http://www.xe.com/ as well as the approximation found in search engines Google, Yahoo, Bing, Wolfram Alpha, etc. For example, typing in "1 USD in THB" into search engines will produce a conversion rate calculation. Another point is when trying to do currency conversion between two currencies which are not geographically or economically close to each other, it is best to use a more common currency as an intermediary. For example, THB to VND or IDR to THB. The most efficient approach is to change THB into USD while in Thailand, and then once arriving in say Vietnam, change USD into VND. The same would be true in traveling from Indonesia to Thailand, first change IDR into USD and then upon arrival in Thailand, USD into THB. Punctuation - Use of a parenthetical dash shall be " -- " (space, hyphen, hyphen, space). - Only a single space after a period. - There should not be any double spaces anywhere in the text (these can have negative effects when transforming from markdown to LaTeX). - For apostrophe and single quote use only the character ('), and not a so-called fancy quote or the backtick. Many text editing programs do automatic substitution, but the characters are different from each other in terms of unicode, and cause problems. - The same goes for double quote marks, use only (") and not fancy double quotes. - There should not be any spacing or tab marks to begin paragraphs. These will be placed in the text upon transformation. Instead, there should be double-enter/return characters so that there is a blank line between each paragraph. Notes on Interviewing

    As a technique for interviewing, it is a good idea to get some yes/no questions, some “how important is”-type questions, and several open-ended questions that may result in useful information not previously known to the interviewer. Get permission in writing to use the interview. We can provide anonymity to our sources and still use their words and ideas, but we still need written permission. Anything said in public does not require the same level of permission, but it is always good to seek this out.

    This Document Part of a Complete Set of Style Guides 

Contact Information – Style Guides

This Document Part of a Complete Set of Style Guides


Purpose of Contact Information Document

This Contact Information Document is for all textual communication including email, website and social media as well as all printed material. It is the single source for all communication internally and externally. All changes to the organizational contact information should be reflected here first, and communication organization-wide should then be made to ensure this source of information is presented everywhere.

Because of the costs of change, generic email and other contact should be used when possible, for example: ceo@domain.com could be used by the current CEO (and as a mailbox that is forwarded to the incumbent, but preserves all past inbound communication). However, the reality is that mailboxes can have primary email addresses changed and still preserve past correspondence, and so whatever preference an organization has for email user names will likely be fine. First names first@domain.com or firstlast@domain.com are the best, as they are less ambiguous than use of any hyphens, periods, etc.

If an organization needs the personal touch, then first names or full names are a natural fit. Try and avoid the use of punctuation or non-standard characters as well as uppercase. The former become easy to forget, while the latter doesn't matter (email addresses are case-insensitive).

Regardless of the actual use of communication channels, the specific names and addresses and how contacts should be presented internally and externally is the main purpose of this document. It is meant to help aid direction for the organization, and should never be an afterthought.

  • Commonly Used Name
  • Full Legal Name
  • Phone number(s)
  • Email address(es)
  • Any useful social media contact handles

This Document Part of a Complete Set of Style Guides

Social Media Style Guide

A social media style guide is only necessary in a narrow technical sense, as much of what the other style guides include applies to external / public communication, of which social media is a mere element. However, it is always useful to have particular protocols and concrete guidelines so there is no confusion.

Social Media Style Guide

Social Media What, Where, How

First, the value of social media is the conversation thread. Anything that can encourage these to generate and for customers, stakeholders, and the public to participate is usually good. Of course all other style guidelines should prevail.

The what of social media is more of a which, and that is usually best determined by goals. The most relevant goals, from an SEO perspective, should be relevance and access. This means those social media for whom others can easily discover and engage, and of course, that show up in search engine results pages.

This usually varies across organizations, but there is a range of 1-6 networks and/or platforms that make sense. As well resources are needed. The media can be categorized by various functions, such as: chat, image/video sharing, audio/video calls/conferencing, blogging, status/link updates/general social, etc. Obviously there is overlap and many platforms trying to add the functionality of their rivals in other categories. The most common platforms (and therefore the most relevant in terms of raw numbers, though market demographics may indicate better foci), include:

Image/Video Sharing

  • Instagram
  • Snapchat

Chat/Calls

  • Facebook Messenger
  • Kik
  • Line
  • Skype
  • WeChat
  • Whatsapp

Blog/Status

  • Facebook
  • Google Plus
  • LinkedIn
  • Medium
  • Twitter
  • WordPress.com

Relevance, Relevance, Relevance

Relevance for the potential customer means acting appropriate for a brand, which means occasional, relevant messaging and also availability for interaction. The content needs to be brief and in context. Talking for the sake of talking won't work out well. Not being authentic in communication threads also turns off people and may develop brand backlash. Here are some findings/guidelines:

  • For Image/Video sharing there needs to be very good creativity, very brief messages, in context and relevant. This may be the most difficult social media category to perform well in, but it can pay off in widespread messages.
  • For Chat/Calls, brands are accepted if they keep their messaging one of pull, not push. Being available for Skype or Line messaging can be convenient for potential or actual customers, as long as the focus is on transactions rather than social.
  • For Blog/Status this is usually acceptable since people seek out affiliation. Careful with advertising on these platforms as they will not be cost-effective unless focused. But keeping a well-stocked facebook page or Twitter account can be effective at displaying professional behavior.

Answer the Phone

If accounts are created, and more importantly, listed as ways to communicate, ensure that the chat message or phone call is answered in a reasonable amount of time. One can accept only text and does not have to support voice or video calls for these platforms, and therefore effectively use chat as another asynchronous textual communications channel (second to email).

Check your Email

Turn on email alerts for specific kinds of communication, such as messages addressed to the organization's social media account(s). Don't rely on apps providing alerts, but have some secondary messaging system in place, which could be email, chat (.e.g, a Telegram Bot), or something else.

Text, Text, Text

The text is the key part here, even with voice being popular. For example, maybe it isn't a habit to have Skype on all the time (and it certainly drains batteries), but configuring skype to forward inbound text messages as SMS to a phone, and be able to reply via SMS, is a great way of being available through a channel potential customers may want to use.

SEO Longform and Links

Of special interest is the kind of link-building and link-following from content (either URL or complete) that is posted to social media.

  • Links to Articles (posted on organization website)
    • Facebook status update (and sponsored post), Twitter status update, Google Plus post
  • Article reposts (copied/pasted with some edit on 3rd party websites)
    • LinkedIn, Medium, WordPress.com

Duplicate Content

Duplicate content -- to Google at least -- is not the same content on different websites but the same content on different pages of the same site. Therefore the key is to ensure Google is aware which copy of a given piece of content is the canonical one. They simple way is that all non-canonical copies link back to the original, with text such as:

Style Guides for Brands

Style guides are just that, guides or guidelines to maintain a particular style of presentation. Guides instruct on correct usage. They are essential for maintaining consistency of an organizations and brands presentation across various media. Because of a proliferation of media, as well as media-specific goals on the Internet (aka search and social discovery), style guides have increased in importance and complexity. I prefer to include technical detail in style guides as it can help provide information that makes all the difference in achieving the implementation and ongoing relevance and adherence to the desired style guide.

Complete Set of Style Guides

Jump ahead if you are looking for something in particular, otherwise the discussion continues below.

Note: these style guides are incomplete and in-progress (continually)

Background and Discussion

There are a variety of style guides for brands and organizations (that is, organizational brands and brand brands). The most well-known kind of style guide is a writing style guide, including punctuation, English preference (American, Commonwealth, etc.), voice, capitalization, place names, etc. However, corporate or brand style guides are now well known in terms of basic brand imagery, colors, typography, logos, etc. Beyond that we can focus on things like image style guides, video style guides, as well as usability style guides.

Brand Style Guides and Organizational Information

Style guides are internal information which help shape both internal and external communication and as such are a part of corporate communication. I taught many semesters of Organizational Communication courses at the university level and found Paul Argenti's take on it the most comprehensive and clear, from a single source. Unfortunately his book Corporate Communication is ridiculously expensive, and to be frank I haven't looked at it in 10 years, so who knows if we've fundamentally changed as a species (likely not). The third edition worked for me, and one can pick up a copy for about 0.01 USD + 5.00 USD shipping on Amazon. Just be sure to supplement with a reasonable approach to social media and Internet marketing in general. For the more academically inclined, he has published over the years as an academic.

Style Guides and SEO Guides

Modern style guides, as intimated above, need to be aware at a fundamental level of the search and social optimization requirements. This needs to be baked in and can also provide useful information as to not only the how but the why in terms of style choices and adherence to guidelines.

Style Guide-Driven Development (SDD)

There is even now a thing called Style Guide-Driven Development (SDD) which basically helps a designer and developer out quite a bit, as generally shrinking the design exploration space is a huge help when trying to get something done.

I would suggest even more so, that a styleguide acts as a strategic as well as tactical guide (though it can also be informed by strategy, and thereby evolve incrementally or evolutionarily. All device and interface development as well as any new initiatives should be informed by style guides at various levels.

Style Guides and Web Design and Redesign

Brad Frost makes a compelling argument for style guides in terms of web design. He has a slightly different list, but makes pretty much the same argument in the following video:

List of Style Guides

I'm going to put my style guides up on the web. This is normally something closely held, but it may help others and frankly organizational change is normally so difficult. Even if someone were giving out gold, if only an organization would change its business process and workflow, most organizations would be too hidebound to take advantage.

The first on our list of style guides is not a style guide but core metadata of an organization, namely an identity and contact guide. After that the normal identity/brand style guide, writing style guide and other issues.

Note: these style guides are incomplete and in-progress (continually)

  • Contact information - This has basic textual information in terms of names, numbers, addresses and the like
  • Identity style guide - This is the core brand persona in terms of names, logos, colors, typography, as well as taglines, basic brand and/or organizational values and goals
  • Image style guide - All images, diagrams, figures, including photography guidelines
  • Social Media style guide - And we wouldn't be complete without a social media style guide. In this case how to interact on other sites that are generally social
  • Usability style guide - This sets the tone for tradeoffs between functionality, usability, simplicity, etc., and may include specific technologies or techniques
  • Video style guide - Guidelines for video production and the outcomes objectives
  • Writing style guide - All writing in whatever format (from brief text ads to complete manuscripts)

Note that all style guides must be regularly revisited in the face of changes which are taking place within and outside the organization.