SOP: web publishing
Table of Contents
Why standard operating procedures ↓
Publishing pages ↓
Publishing posts ↓
Making links ↓
Making buttons ↓
Uploading and using images ↓
Uploading and inserting PDFs ↓
How to use shortcodes ↓
Inserting video ↓
How to make columns on pages (shortcodes) ↓
Why standard operating procedures
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.
- Make absolutely sure that the content doesn’t already exist somewhere else
- duplicate content is hard to manage
- duplicate content is hard for users
- duplicate content is bad for your SEO
- use the search function,
- ask for help from other editors
- the site already has a lot of pages and we should generally try to reduce the number of pages, if possible
- Give pages a simple descriptive title
- Give pages a simple, clear, direct, easy to remember and easy to guess URL
- Pages should have stable, long lasting (length is partly a heuristic)
- Don’t change any URLs of existing pages (or posts): if you want to change one, consult with Sherwin
- Generally speaking, pages don’t need to have a parent assigned to it: sometimes it helps to organize pages under a parent page.
- ask yourself, is this easier for users?
- remember: where pages go in menu, is not related to child/parent relationships
- 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
- generally, don’t make headings into links
- don’t bold headings, or use <strong> tags in headings
- 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.
- Use the B and I functions to give strength and emphasis to important words and phrases – but don’t overuse them.
- Link to relevant resources that are helpful for users. See Links for more info.
- If the page is going to be used in a loop elsewhere, consider adding a featured image and also a manual excerpt.
- 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
- Every page can have an action item at the bottom or in the middle, or at the top.
- ask yourself, what do we want people to do here? contact us? donate? sign a petition? give us their email? visit another related page?
- 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
- Key features: title, subtitle, author, excerpt, featured image, category, tags,
- Titles and URLs for posts don’t have to be short – let them be as descriptive as is helpful: this is different than pages
- Do always write a manual excerpt
- Don’t use the MORE tag (don’t worry if you don’t know what this is)
- Do always try to use a featured image – can also be added later, after publishing
- Do consider using subtitles: 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.” Sentence fragments are fine in subtitles
- Use headings (h2, h3) to make articles scannable and readable
- Include links, aka deep links, to link into the site to relevant campaigns, reports and articles
- Consider using short paragraphs (even one sentence per!)
- We have shortcodes that insert calls to action and short bios into the body of a post.
- Use meaningful anchor text for links. Avoid writing “click here” or “
- Indicate to users where the link is going to go
- If you’re linking to a PDF, make sure the anchor text says so, eg: https://www.raincoast.org/tracking-raincoast/
- Generally, do not have links open new tabs or windows
- Don’t generally make images into links
- But, linking images to PDFs is acceptable, if the image conveys this, and if you write a caption that indicates this.
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/
- This is what the code for regular links looks like:
- With the button code added:
- There are multiple kinds of buttons:
- <a class=”button_red”>anchor text</a>
- <a class=”button_grey”>anchor text</a>
- <a class=”button_blue”>anchor text</a>
Uploading and using images
- Images need to be resized and compressed before uploading them to the site
- 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.
- Images are also measured in file size, or bytes: KB or MB. Smaller is faster; smaller is better. Changing the file size is compressing.
- A handy online tool for resizing and compressing is webresizer.com and also Pixlr Express.
- Images should be 1200px wide at max, 800px wide at min
- Landscape images are generally better (less scrolly on mobile devices)
- Every image requires a human readable title and alt text
- 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?
- good titles and alt text can help your SEO on the open web: ask yourself, what are my readers and audience looking for?
- Alt text should describe the photo
- alt text is essential for sight impaired people
- alt text is an accessibility issue
- alt text is required for good SEO
- Titles can be shorter than alt text
- 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
- Captions are bonus
Use as featured image
For posts, the recommended size of image to upload as a featured image is approximately 1200px by 630px, and roughly less than 160kb.
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
- All PDFs need to be compressed, or saved for web, before upload
- 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?
- If the PDF is more than 2 or 3 MBs, consider saying how many MBs the PDF is, in the title: (PDF, 4.5MB).
- 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 shortcodes
Shortcodes are words and numbers surrounded by square brackets.
- Shortcodes pull content and code from other locations.
- Don’t use square brackets for anything other than shortcodes.
We will have new and improved ad insertion soon.
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:
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:
How to make columns on pages (shortcodes)
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:
Content that goes in the first column goes here.
The content that goes in the second column goes here.
Don’t update anything
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
- 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.
- Do upload JPGs, GIFs, PNGs, PDFs.
- 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).
- 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.
- every image needs a human readable title and a properly descriptive ALT text
- every PDF needs a title with “(PDF)” in it and a description
- 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.
How to use the sidebars
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.
Using the slideshow
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
All files used on the website should be converted to MP3 files. We host these files elsewhere (Google, Cloudup) 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. 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
Use this code template:
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.