Posted on Leave a comment

Tidying Up Digitally

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:

Continue reading Tidying Up Digitally

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

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

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.

Continue reading Video Style Guide

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

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.