SOP //

SOP: web publishing


Why standard operating procedures top↑

Adherence to some publishing best practices will help our website to:

  • be more usable, readable, and scannable by users
  • be more usable on a wider range of devices
  • be more findable on search engines

Failure to comply with these guidelines can hurt the effectiveness of the outreach work that we do, and can cause additional unnecessary work for other publishers and editors.

These guidelines are a work in progress and ought to be questioned.

Publishing pages top↑

  1. Make absolutely sure that the content doesn’t already exist somewhere else
    1. duplicate content is hard to manage
    2. duplicate content is hard for users
    3. duplicate content is bad for your SEO
    4. use the search function,
    5. ask for help from other editors
    6. the site already has a lot of pages and we should generally try to reduce the number of pages, if possible
  2. Give pages a simple descriptive title
  3. Give pages a simple, clear, direct, easy to remember and easy to guess URL
  4. Pages should have stable, long lasting (length is partly a heuristic)
  5. Don’t change any URLs of existing pages (or posts): if you want to change one, consult with Sherwin
  6. Generally speaking, pages don’t need to have a parent assigned to it: sometimes it helps to organize pages under a parent page.
    1. ask yourself, is this easier for users?
    2. remember: where pages go in menu, is not related to child/parent relationships
  7. Every page starts with a single heading, H1 and all subsections will have a heading h2, and all sub-subsections will have a heading h3
    1. generally, don’t make headings into links
    2. don’t bold headings, or use <strong> tags in headings
  8. Headings make pages easier to scan and read, and search engines like them. Consider making an outline for every page, consisting of the heading structure.
  9. Use the B and I functions to give strength and emphasis to important words and phrases – but don’t overuse them.
  10. Link to relevant resources that are helpful for users. See Links for more info.
  11. If the page is going to be used in a loop elsewhere, consider adding a featured image and also a manual excerpt.
  12. If a page is not meant for public consumption (like this page), make sure you check off the Search Exclude option, which removes the page from front end searches
  13. Every page can have an action item at the bottom or in the middle, or at the top.
    1. ask yourself, what do we want people to do here? contact us? donate? sign a petition? give us their email? visit another related page?
    2. An action item can simply be a link, but if you want to make that link a more prominent button, see the making buttons section

Publishing posts top↑

  1. Key features: title, subtitle, author, excerpt, featured image, category, tags,
  2. Titles and URLs for posts don’t have to be short – let them be as descriptive as is helpful: this is different than pages
  3. Do always write a manual excerpt
    1. Don’t use the MORE tag (don’t worry if you don’t know what this is)
  4. Do always try to use a featured image – can also be added later, after publishing
  5. Do consider using the new subtitle feature
    1. we should probably develop a style-guide for this: I recommend that subtitles use ending punctuation, and mimic sentences. So if a title, for example, is “Why apples are better than oranges”, then the subtitle could be “Reflections on why comparisons are always complicated.”
    2. eg: https://www.raincoast.org/2014/08/reminiscing-about-a-beary-epic-field-season-guest-blog-by-lia-chalifour/
    3. eg. https://www.raincoast.org/2013/12/tracking-raincoast-into-2014/
  6. NEW: use the “turn off the featured image” feature if you don’t want the featured image to appear on the single post view. Featured images are important for other contexts though and this function leaves the featured image for use in other feeds. Using this is effective on posts featuring mostly a video, especially when the feature image is just a thumbnail of the video, e.g. https://www.raincoast.org/2012/05/12979/
  7. We have new shortcodes that insert advertisements (that we write) into the body of a post. More here soon, once I finalize the improved system.
  1. Use meaningful anchor text for links. Avoid writing “click here” or “
  2. Indicate to users where the link is going to go
    1. If you’re linking to a PDF, make sure the anchor text says so, eg: https://www.raincoast.org/tracking-raincoast/
  3. Generally, do not have links open new tabs or windows
  4. Don’t generally make images into links
  5. But, linking images to PDFs is acceptable, if the image conveys this, and if you write a caption that indicates this.

Making buttons

You can turn links into buttons by applying a little bit of code to the hyperlink. You can see button examples here: www.raincoast.org/tracking-raincoast/

  1. This is what the code for regular links looks like:
    <a href=”https://www.raincoast.org” >Check out Raincoast</a>
    regular link
  2. With the button code added:
  3. There are multiple kinds of buttons:
    1. <a class=”button_red”>anchor text</a>
    2. <a class=”button_grey”>anchor text</a>
    3. <a class=”button_blue”>anchor text</a>
    4. <a class="button_green">anchor text</a>

Uploading and using images top↑

  1. Images need to be resized and compressed before uploading them to the site
  2. Images are measure in pixels (width by height, eg. 600px x 400px is 600 pixels wide and 400 pixels high). Changing the dimensions is resizing, or cropping.
  3. Images are also measured in file size, or bytes: KB or MB. Smaller is faster; smaller is better. Changing the file size is compressing.
  4. A handy online tool for resizing and compressing is webresizer.com and also Pixlr Express.
  5. Images should be 1200px wide at max, 800px wide at min
  6. Landscape images are generally better (less scrolly on mobile devices)
  7. Every image requires a human readable title and alt text
    1. good titles and alt text help you manage your media library: ask yourself, if I’m looking for this image in three years, can I search the media library with relevant words and phrases and find it?
    2. good titles and alt text can help your SEO on the open web: ask yourself, what are my readers and audience looking for?
  8. Alt text should describe the photo
    1. alt text is essential for sight impaired people
    2. alt text is an accessibility issue
    3. alt text is required for good SEO
  9. Titles can be shorter than alt text
  10. Descriptions can be added only if the titles and alt text are complete, and you want ot add additional information about the image, eg. author
  11. Captions are bonus

Use as featured image

For posts, the recommended size of image to upload as a featured image is approximately 1200px x 600px, or 900px x 450px. But you want to try to compress it to less than 100kb. For large images, with lots of detail, this is hard and then 150kb is also acceptable. But smaller is better.

Featured images are often displayed as thumbnails wherever the excerpts to posts, or even pages, are displayed. But featured images are also displayed on the feature pages (first tier, aka main pages), and on the posts.

  • The feature template for pages requires photos that are at least 1200 pixels in width and will make an image that is 1200×400. So, for example, if you upload an image that is 1200px x 600px a version will be auto cropped that is 1200px x 400px for display.

Inserted into the content areas

  • When inserted into pages and posts, they should generally not be linked to anything
  • You can add a caption if you want
  • generally photos that are inserted do not need to be left-aligned or right-aligned, they can have “none” alignment – this makes them act like paragraphs so that text will start below them
  • it’s nice if the photos you insert are 600px wide or so, so that on the single column view (tablets and mobile) the photo takes up the full width of the column

Uploading and inserting PDFs top↑

  1. All PDFs need to be compressed, or saved for web, before upload
  2. Titles require human readable text with “(PDF)” somewhere near the end. Titles for PDFs commonly are the title of the document, but not necessarily. Ask yourself, what is most helpful for the user?
  3. If the PDF is more than 2 or 3 MBs, consider saying how many MBs the PDF is, in the title: (PDF, 4.5MB).
  4. Descriptions are optional and help give context and meaning to the PDF. Use a description if you think it might help you find this particular PDF later in the media library.

How to use page templates top↑

Feature page template

  1. We’ll probably only use these for top tier pages (we have a three tier menu)
  2. This template is made to display the feature image very well (1200px x 400px) (or legacy version 1200px x 400px
  3. This template has a left hand submenu

Default page template

  1. If you don’t instruct a page, it will default to this
  2. This template has a sidebar on the right
  3. This template has a left hand submenu

Wide Page Template

  1. This template is wider and has no right sidebar
  2. This template has a left hand submenu

How to use shortcodes top↑

Shortcodes are words and numbers surrounded by square brackets.

  1. Shortcodes pull content and code from other locations.
  2. Don’t use square brackets for anything other than shortcodes.

Ad insertion

We will have new and improved ad insertion soon.

Example: Oil spill simulation gets locals talking…

Putting post excerpts (and page excerpts) on pages; post loops

This is used to pull the most recent posts in the category, Artists:

[ic_add_posts category='artists' template='raincoast-pip-excerpts-posts.php']
Loop for artists category

The following shortcode example is used to include posts in a category, e.g. Best Ever Topic, and exclude posts in certain tags (the numbers are the tag IDs of those tags):

[ic_add_posts category='best-ever-topic' template='raincoast-pip-excerpts-posts.php' showposts='4' tag__not_in='820,836,833']
Loop excludes tag ids

Clearing sections

Occasionally, you might align a photo to the left. And sometimes this might cause heading text below it to get hung up on the image in a way that is confusing for users. So occasionally you might want to “clear” the section. To do this use:

[clear]

Video embeds

When you embed a Youtube video, or a Vimeo video, you want it to look great on desktop as well as mobile. The best way to accomplish this is to put the embed code inside of some shortcode:

[video_embed]embed code goes here[/video_embed]
Embedding video

E.g.

How to make columns on pages (shortcodes) top↑

Shortcodes are anything in square brackets. Example: [  ] Don’t use square brackets for anything else. The short codes that make columns look like this, but replace round brackets with square brackets:

{one_half}
Content that goes in the first column goes here.
{/one_half}{one_half_last}
The content that goes in the second column goes here.
{/one_half_last}

Something top↑

Don’t update anything top↑

From time to time, you might see “Update Now” notices. Don’t update anything. Let Sherwin do that.

Don’t upload plugins without consulting with Sherwin. Untested plugins can destroy the site. Always consult with Sherwin before you upload plugins.

General notes about the media library

  1. Don’t upload Word Documents and other software to the media library. These kinds of files can have malware hidden in them. If malware is discovered on our website, Google will heavily reduce the traffic to our site.
  2. Do upload JPGs, GIFs, PNGs, PDFs.
  3. We don’t upload video or audio files to our media library. All videos will be uploaded to our Youtube account, and then embed on our site. And all audio files will either be uploaded directly to our server via FTP (ask Sherwin for assistance) or they will be uploaded to our Soundcloud account (forthcoming).
  4. Items in our media library need to be properly labelled. Proper titles, ALT text, and descriptions are important! Labels are metadata that help users who are vision impaired, and give context to our content to various relevant devices, improve our SEO. Perhaps most importantly, good labels help us find the content later in our own media library.
    1. every image needs a human readable title and a properly descriptive ALT text
    2. every PDF needs a title with “(PDF)” in it and a description
    3. Unfortunately, many images and PDFs in our media library have not been properly labelled and we must fix this.

General notes on Search Engine Optimization (SEO)

Much of what is published about SEO is not true, so beware of industry snake oil. Generally speaking, if we care about our content, our users, and about web standards, we will also take care of our SEO. SEO is in many ways reputation management, so it’s important that we continue to maintain high ethical principles in our communications with supporters and officials.

Just as an example of how SEO is a changing landscape, for years SEO ‘experts’ recommended key word loading headers and content. Last year this was all the rage. This year, this can actually harm our SEO because search engine algorithms are looking for folks who are trying to game the system.

Search engines want us to write good content, in a real human format, with our readers (not robots) in mind. So our job is to try to stay above the SEO fashion fray, and to keep our eye on the long term.

Sidebars are somewhat misleadingly managed through the Widgets area. Widgets go into sidebars. Sidebars are displayed on page templates, the single post template, category templates, the blog template, etc.

Some sidebars are made explicitly in order to insert widgets into pages, using shortcodes.

Find sidebars under Appearance, in Widgets, and find Widget Blocks here.

Using the slideshow top↑

We can make and insert as many slideshows as we want. The homepage slideshow uses images that are 1200px by 300px. This wide and short system makes it easier to scroll over on mobile. But on other pages we might want to use slideshows that are squarer or smaller. Find slideshows here

Embedding audio top↑

All files used on the website should be converted to MP3 files. Ideally, we’ll open a soundcloud account soon and upload our audio files there and then embed them on our site, much like a Youtube video.

If we need to upload our own audio to our own site, send the MP3 file to Sherwin. He will give you a URL back once he’s uploaded the file. You can then use a shortcode to display the audio file: {audio http://url-that-sherwin-gives-you-goes-here}. It is a nice additional usability feature to add a link to the audio source file.

You can see an example of how to display audio here.

Tweet this blockquote top↑

Use this code template:

<blockquote class="pullout">[tweetthis hashtag="#test"]Quote goes here.[/tweetthis]</blockquote>
Tweetthis shortcode

Adding sponsors top↑

New sponsors and partners are added in the LINKS section. They are currently displayed here: https://www.raincoast.org/sponsors/

The sponsor logos can be smallish. Landscape is better. 200 pixels by 150 or so would be good (but logos often come in different dimensions). But as always, the number of KB is more important, so try to keep it below 20kb for logos.

This technique is not really that great. Ask Sherwin before proceeding with this. There might be other better solutions to your interest.

Something top↑

Investigate. Inform. Inspire.

Publications | Scientific Papers | Reports & Books

Find us & follow

You can help Save the Great Bears: find out how