MeHAF Style Guide
This guide is to aid the MeHAF staff and others who create, change, and/or delete pages and content within pages on the MeHAF site. Consistency across the site supports a clean brand, messaging, and queueing from call to action boxes, action buttons, and other imagery. Further, being consistent is about user experience; it provides a great opportunity to "train" users to behaviors they can expect from the site.
Always, always: copy narrative content from Word or the current/old CMS to a text editor like Notepad before copying/pasting into the new CMS. Notepad removes extraneous extra formatting and this helps with the page load speed.
We encourage you to watch this growing playlist of CMS how-to videos: https://www.youtube.com/watch?v=EDcV9FO7WV8&list=PLiL6eOib_pybUc2MNR4qvlPaMWHMRMcoK
NOTE: THE BULLETS BELOW ARE NOT ORGANIZED YET
- When saving files for use inside the CMS, use NO spaces; you may separate words with hyphens or underscores. Correct: MeHAF2013AnnRep.png Incorrect: 2013 MeHAF Audit Disclosures Letter Final.pdf. Note this is correct: 2013-MeHAF-Audit-Disclosures-Letter-Final.pdf. CMS will add in appropriate characters eg %20 if blanks are inadvertently included.
- Use plus sign (+) not the ampersand (&) eg we designed Learning + Resources, Reports + Research, Tools + Materials inside the text.
- Open and close all links with an ending carrot: > (if you are using HTML editor).
- Use paragraph tags <p> to contain paragraphs of text, not </br> (line breaks).
- Use m-dash, which is a double dash (HTML: —) looks like this: "—") for dash with no space before and after the m-dash.
- Cap the first letter of words in Page Title, ex: The Quick Brown Fox Jumped Over ... (not: The quick brown fox jumped over ...).
- Use all lowercase letters in permalinks—NO uppercase letters, NO symbols, NO punctuation.
- Use relative links, not absolute eg /news-room/philathropy-tools/ NOT www.mehaf.org/news-room/philanthropy-tools/ when adding links on the site.
- If you are using the source button in WYSIWYG editor or the HMTL tab, be sure to use the following for text:
<h1>Title of page here</h1>
<p>You share paragraphs here.</p>
<p>This is for paragraph 2 here.</p>
<h2>Sub-title of section on a page</h2>
<p>This is for another paragraph.</p>
<h2>Another sub-title here</h2>
<ul> [this is for bulleted/unordered list]
<ol> [this is for ordered/numbered list]
<li>bullet 1</li><li>bullet 2</li></ol>
If you open a tag <p> <ul> <h1> etc, then you must close it at the end </p> </ul> </h1> etc.
- You should never (or extremely rarely) have to use the < /br> tag (line break). If you need to useseveral of them together, then first look to the design file to see how it was designed (link to design files: http://clientlab.dirigodev.com/mehaf_new/). If it’s not functioning properly, then add a card to the MeHAF Trello board or let Victoria know. While we coded the site to be as the design files reflect, you folks are loading the content and may see things we haven't yet experienced.
- Some "pages" aren't really pages, meaning that they are made up of several modules (that may or may not be available to you for viewing/editing on the front-end). The /news-room/ and /learning-resources/ are examples of looking like pages because when you are on these URLs they render like pages. These two templates, though, are blog templates, with custom functionality based on the features you requested during the design/user experience phase. And on non-content/pages you cannot hover over the boxes on the front-end to see the name of modules.
- You will find the components of the Updates to footer names and links happen in content/modules/footer links; changes to copyright line in content/modules/footer.
- When you make make additions/changes/deletions and want to view on live site, be sure to refresh your browser's page.
- Update Morgan's last name throughout the migrated pages.
- In Learning & Resources -- when adding a new L&R document, match the "program" to a "tag" name EXACTLY for filtering purposes. Filters pull from TABS, not PROGRAMS.
- News Room (the entire news room uses a BLOG format)
- Work on the first (oldest) 10-12 blog posts with a focus on building:
- no more than 6-8 categories
- apply no more than 3-6 tags per blog post
- align the permalink/URL to the blog post title and revise/shorten, if possible
- remove "stop words" from the permalink, such as a, the, an, by, etc. that search engines don't read
- If you change the permalink/URL, record the current path and the new path in the old-new URL xlsx file. This is important!!
- Use only lowercase letters inside of permalink/URL, no uppercase letter and absolutely NO symbols of any kind.
- Once you select a category, the CMS gets rid of extraneous folders in the permalink line.
- Set the blog post featured text; this should be "teaser" text, the most engaging text that will encourage users to click and read the full blog post. Think sensational but still truthful!
- Inside the SEO/Meta block, draft the meta description. Start with a verb like Learn about, Learn more, Read about, Read more, Get, Gather, Discover ... (this is the text that search engines use on the search engine results page).
- If you want the blog post to be featured inside the news room, click on the featured image box and set the featured image. The file should be the compact in size. It can be high-resolution. The CMS will not allow files 4.5 MB or larger to be added. The file name should contain no blank space(s); use dashes or underscores to separate words.
- Remove unnecessary non-breaking spaces inside the HTML editor; looks like this: . A simple space after ending-sentence punctuation is adequate. Add NO inside of a href links.
- One space after ending-sentence punctuation (remove the extra space or on old blog posts) http://www.slate.com/articles/technology/technology/2011/01/space_invaders.html http://www.cultofpedagogy.com/two-spaces-after-period/.
- Check all links of migrated content to be sure they aren't broken; set all external links in target tab to new window (_blank) and in the advanced tab set the relationship to nofollow (this assumes you are using the WYSIWYG editor). If you are working in HTML tab, use this: <a href="http://www.example.com/" rel="nofollow" target="_blank" >Text to be linked goes here</a>. If you are linking to an internal page (inside of mehaf.org), neither rel nor target are to be set. One exception is when a link contains a pdf or other media file that is housed in the CMS media repository (often the target to blank to help the user stay on the page that contains the media as well as see the media file).
- When including text such as: Tell us what you think (in a blog post) include this link: <a href="mailto:firstname.lastname@example.org?subject=Subject You Selected">Tell us what you think</a>.
- Add this link when you add a phone number: <a href="tel:207-620-8266>207-620-8266</a>; add your extension after link (not inside the link).