Style Guide and Publishing Practices
Here’s some notes to help you remember some publishing practices. You are always welcome to get in touch with Sherwin if you have questions.
Table of Contents
- Page and post titles use title caps, e.g. “Style Guide”, not “Style guide”
- Use headings (h1, h2, h3) to help with readability and scannability. Use headings like an outline. The page title is H1.
- Bold text: select some text and click the B icon (actually called a strong tag)
- Italicized text: select some text and click the I icon (actually call an em tag: emphasis)
- Blockquote: put your cursor in a paragraph and select the quotation mark icon.
- bullet points: put your cursor in a line and select the bullet point icon.
- numbered points: put your cursor in a line and select the numbered list icon
2. Uploading, Inserting Images
Images need to load fast in users’ phones, and on their dial up internet service. So crop and compress files. JPGs are good, and so are GIFs.
- All images need to have titles and ALT text.
- Images should be at least 300px wide and at least 200px high.
- Most general use images will be around 800 pixels wide or less. Landscape shaped is generally better.
- A good services for cropping, editing and compressing is webresizer.com
- A better service for cropping, editing, and applying filters and also compressing, is Pixlr Express .
- Photos need to be under 100kb. Under 50kb is even better. Bonus points for images under 25kb.
- Post should usually have featured images.
- When inserting images into a page or post, do not let the image link to itself or somewhere else. No links on images.
3. Feature Images for Pages & Posts
- Feature images are images that get uploaded to a particular page or post and are set as the FEATURED IMAGE.
- Feature images for pages are short and wide 1200 x 300 pixels. See the Team Page, for example.
- Feature images for posts are can be less rectangular (800 x 400) or even square (600×600).
- Make sure to compress the feature images so they’re nice and light.
- Online tools for editing and compressing include:
4. Uploading, Inserting PDFs
PDFs are sometimes large in file size, which is okay. It’s best if they’re as compressed as possible, and you can do this with Adobe Acrobat. But the main point is that you signal the user how large the file size is, and also that it’s a PDF.
- Upload a PDF just like uploading a photo to the media library
- Make sure you add a description
- Make sure you add a title that includes the file type and size. E.g. “Annual Report 2012 (PDF 2.4MB)” or “How to Become a Bronie (PDF 600KB)” or even “Our Team Photos (PDF 8MB)”
- Click insert media: what happens is that it wraps the title in a link to the PDF which is stored in the media library (on the web server)
Linking to a PDF is technically just like linking to another page on the web. But because PDFs act different than regular pages, we want to warn users what will happen when they click. Some folks are on mobile, or they hate PDFs, or have limited data or bandwidth, etc.
5. Writing blog posts
- Got to: Posts > New
- Add to a single category
- Add as many tags as you want
- *Slug = end part of the URL (editing optional)
- Add featured image > always put title and alt text or insert image into the post (See Adding, Inserting Images)
- Don’t forget the Excerpt: descriptive, teaser text
- Select an author
- Save as Draft, or Publish!
6. Adding a page
- Are you sure you need a new page? Double check. Search. Ask a buddy.
- What is the new page title?
- What will the new, stable, easy to reference, url be?
- Will the new page go in the main menu? A different menu?
- What template does this new page need. Default is probably fine. But maybe you want something else?
7. How to manage the menus
There are several menus. The main menu holds most of the pages.
- Find menus from the back end (dashboard): Appearance > Menus
- Select the menu you want to edit and drag and drop the pages or edit the menu labels
8. Making links
- Use descriptive anchor text. (avoid saying click here)
- Write descriptive link titles, but they’re not required.
- Make links into buttons where important calls to action happen. e.g. Contact us or Donate now, etc.
- When you make buttons, switch to the TEXT tab in the editor and add the text,
class="button_red"to the link.
VSAC is actually
<a class="button_red" href="http://vsac.ca/buttons/" target="_blank">VSAC</a>
- Avoid making links open in new tabs…. maybe