Website Documentation for Page Editors

When writing, think about the person who's actually reading your content -- the user.

The user likely has no knowledge about how your program works, how county government is structured, or even what agency is responsible for what. The user simply wants to complete a task, whether that's applying for a program, reading a document, or learning more about something we do.

Our site is created around the principles of user-centered design:

• always keep the user in mind
• listen to feedback from the user
• make adjustments to content if it's too confusing for the user

Remember, this website isn't for us - it's for our constituents! 

In government, we tend to write at a college-educated level. But the average reading level is around 6th or 7th grade! Also, on the web, people scan much more than they read. And many of our users know English as a second language, or use Google Translate to view our pages in other languages. 

Therefore, when you're writing for the web, use what's called plain language to get your point across. The basic principles of plain language are:

• keep your sentences short
• use bullets to break up lists
• use short paragraphs
• don't use acronyms
• use direct language - "We," "you," instead of "the agency" or "the applicant"

This will make it easier for EVERYONE to understand!

View examples on PlainLanguage.gov to get started.

When you're writing, type your content into the Hemingway App first! This app will tell you the reading level, if you have run-on or long sentences, and other plain language no-nos!

Websites are public spaces - they need to be accessible to everyone, including people with vision, hearing, or other ability issues.

The Office for Civil Rights (OCR) at the U.S. Department of Education defines accessibility as meaning “when a person with a disability is afforded the opportunity to acquire the same information, engage in the same interactions, and enjoy the same services as a person without a disability in an equally integrated and equally effective manner, with substantially equivalent ease of use.”

As a government, we want to make sure that our website is compliant with the Americans With Disabilities Act, and the Web Content Access Guidelines, to make sure that all of our constituents are able to access services online.

For a website to be accessible, people with disabilities need to be able to use the site. This includes:

• people with vision issues should be able to use a screen reader to read the content of the site to them
• people with vision issues, who have partial vision, should be able to read the text of the website (this includes having proper color contrast between the text and background, and allowing users to increase the text size)
• people with mobility issues should be able to tab through the website using their keyboard, and be fully aware of what they are selecting (this is called "focus")
• people with hearing issues should be able to access any audio-visual content, such as videos, by means of closed captions
• people with cognitive issues need to be able to understand what they are reading; text should be written in plain language

Morris County and our vendor, OpenCities, have created an accessible, ADA-compliant website that meets these standards.

Help us keep our site accessible by:

• using the built-in colors and fonts (don't change the colors!)
• adding alternative text, or alt text, to any images you insert. Alt text is what a screen reader reads to a person who can't see an image. Without alt text, the user won't know what the image is about! When you upload your image, add alt text as seen here:
  
• if you upload any videos to social media, make sure to add captions to them (if using Hootsuite, you'll need to create and upload your own srt file)
• write in plain language - short, simple sentences, short paragraphs, simple words

In order for our website to be accessible, our documents - PDFs, Word docs, and Excel sheets - also need to be made accessible before uploading.

Here are tips on how to make these types of documents accessible:

• Word documents
• Excel sheets
• PDFs
  • Note: PDFs are very tricky to make accessible, and you need a licensed copy of Acrobat Pro or DC to use PDF accessibility tools. If you start with an accessible document, it's very likely that your PDF will be accessible too.

A style guide contains the fonts, colors, and other graphical elements of a website.

View our style guide

You can also use this printable version of the style guide(PDF, 843KB) for reference.

We recommend that, in your print publications, you refer to these colors and fonts. That way, your publications will reflect the website, and everything will look consistent.

When you log into OpenCities, you'll be greeted by the dashboard!

Navigation

At the top of the page, you'll see a navigation bar.

• Dashboard brings you back to the main dashboard.
• Pages takes you to the fill list of pages on the website.
• Files brings you to the file repository, where all of the sites' images and documents are stored.
• We are not using "Forms," since we have SeamlessDocs - ignore this.
• We are not currently using "Approvals," so ignore this too.
• View Site will take you to the live county website.
• Log Out will log you out of the platform.

Search Bar

Below the navigation, you'll see a search bar. If you know the page title of the page you're looking to work on, you can type it in, and click on the proper result:

Shortcuts

The shortcut boxes are there to help you complete specific tasks. If you hover over a shortcut, you'll get two options: to create something to view all of something.

For example, there is a shortcut box to create Prosecutor Press Releases. Hovering over the shortcut will let you either create a new release or view all previous releases.

Use these shortcuts to make your life easier - find the one you need to get your task done.

My Content

Scroll below the shortcuts, and you'll find My Content. This is a useful section of the dashboard that will let you quickly access the pages you're working on.

• My WIP, or My Works-in-Progress, shows you pages that you've checked out and are working on.
• My Pages shows you all of the pages you are the owner of.
• Activity Stream shows you everything that's been happening on the website - when pages are updated, added, or removed.

The Basics 

In OpenCities, there are different types of pages, such as "OC Event" ("OC" for "OpenCities"), "OC News Article," and "OC General." 

"Event" pages let you add things like "Event Location" and "Host Information," and "News Article" pages let you add appropriate things like a "News Image" and a "Publish Date."

However, every type of OpenCities page has a lot in common. Each page type lets you do the following:

• Add the page name, title, and description of the page
• Insert a page image
• Add some supporting information, such as links, documents, and common search terms
• Use the text editor (also known as the WYSIWYG, what you see is what you get, editor) to add content to the body of the page

And once you're done with your edits, every page lets you save your work, preview what it looks like, and publish the page.

Let's go through these in more detail.

---

Name, Title, and Description

Every page in OpenCities has some variety of the following:

The Page name is how the page will be referred to in the back end of the platform. You can search for this name to quickly find a page. This is also the name the page appears in on the "Pages" menu.

The Page title (or "News title" or "Event title") is the title that appears on the live page.

Note that in this example, the page name "Documentation" shows up in the site tree, like so:

and the page title "Website Documentation for Page Editors" shows up on the live website:

The description, sometimes called things like "Event description," "News Summary," "Position Summary," or "What is the purpose of this content?," does not appear on the live page. Instead, this is used for search engines.

When someone searches on the website, the description text appears under the page title, like so:

---

Insert a Page Image

The page image, sometimes called "main image," "news image" or "event image," is not required, but may be helpful when you work on your page. This image serves two purposes:

1. It can appear on your page, and
2. It is automatically used on social media, and in other places where your pages are being "pulled in" on the website, such as the calendar on the home page.

To insert a main image, click "Add image." A new window will pop up. Navigate to the folder that's appropriate for your agency, which will be located under Shared Files > Public > Departments > [agency]. In this example, I want to add an image to an Elections page:

If there's already an image there you'd like to use, click on it, and click "Insert" on the bottom right.

If you need to upload a new image, click on the Upload button:

Follow the instructions, then select your newly uploaded image and click "Insert."

---

Supporting information

You won't need to use this too often, but if you click on the "Supporting information" header, you get a lot of useful options:

• Side panels let you add, well, a side panel to your page. You can give it a name and add content to it. This can be useful for supplemental information, like the name of a manager or contact information.
• Supporting links and documents let you add links to web pages and documents to the sidebar of your page.
• Common search terms help the site's search engine find your page faster. If your page is about SNAP benefits, for example, search terms could be "SNAP, food stamps, assistance, public assistance, food, help," etc.
• Content labels are used by the platform to pull page content onto other parts of the website. We use this for events pretty often. This is mainly used for events and services. Here's a real-world example:
  • Planning board meetings are labeled using the content label "planning-board."
  • On the Planning Board page, we use a content list to display all events with the "planning-board" label.

If you see a content label on a page you're editing, don't touch it! It's there for a reason.

---

Saving and Publishing

As you work on your page, make sure to click on the green "Save" button on the top right. This will save your progress.

Note that if your page is already published, this will save your changes without publishing them. The original version of the page will be public, but your changes will only be visible to you and others who are logged into the platform. So don't be afraid to work on your pages! :)

Once you're satisfied with your changes, click on the green "Publish" button to make them live.

A box will come up, asking you to describe the changes you've made. This is useful because each page has a history tab which shows all the different versions of a page. Use this to keep track of what you've done! 

---

We'll talk about the text editor in the next section of this documentation, The Text Editor.

A text, or WYSIWYG editor (or just ‘WYSIWYG’) is where you create the body content for a page. 'WYSIWYG' stands for 'What You See Is What You Get', and it works a bit like Microsoft Word.

When you’re editing a page, you’ll see the WYSIWYG selector on the right of the page details area. Open a WYSIWYG by clicking on an area of the page where it will appear. Most pages will only have 1 WYSIWYG area, but some pages will have more.

Get Started

Click on the the blue area, as indicated in the image above, to open the text editor. It will open as a popup.

Get started by simply typing into the WYSIWYG's text box. You can add as much or as little content as you want.

You can change what you've typed into the WYSIWYG by using the toolbar, or you can switch to the HTML view to edit the HTML directly.

The Toolbar

The toolbar at the top is very similar to Microsoft Word. You can edit your text by:

• making it bold, italic, or underlined (for accessibility reasons, do not use the underline feature if you can help it)
• adding bulleted or numbered lists
• left, center, or right-aligning your text
• indenting your text
• adding a horizontal rule, strikeout, sub- and super-script, or special characters

You can use the paragraph style drop-down to select the type of text - paragraph or header. The page title is shown as a Heading level 1, so any headers you use should start at Heading 2, 3, etc.

Add a link

If you want to link to another web page, select the text you want to create the link out of, and click the hyperlink button (looks like a globe with a chain). This will bring up the Hyperlink Manager.

From here, you can do the following:

• click Internal Link to link to a page on THIS website. Click through the folders until you find the page you want to link to. Click on that page, then click Insert.
• click Hyperlink to link to a page on ANOTHER website. You can copy/paste the URL, or type it in directly.
• You can also link to an email address by clicking Email, or a phone number (for mobile devices) by clicking Phone.

Add an Image

Click on the Image Manager button (the icon of a photograph) to insert an image from your files library.

If the image you want to insert hasn’t been uploaded to your files library yet, you can upload it here and insert it straight away.

Open the Image Manager and choose a folder:

• for departments, this will be Shared Files > Public > Departments > [your department] > Images
• for Administration/Communications & Digital Media functions (such as overall county financial documents), Shared Files > Public > Main Site > Images

Then click the Upload Files icon in the top right - this looks like an arrow.

Select Upload a File, choose an image from your computer, then press Upload.

To insert an image, select it, add Alt text to improve accessibility, choose the image's Appearance, then press Insert.

Add a Document

Adding a document is very similar to adding an image. Instead of clicking on the Image Manager button, click on the Document Manager button (this looks like a piece of paper with a paper clip).

If the document you want to insert hasn’t been uploaded to your files library yet, you can upload it here and insert it straight away.

Open the Document Manager and choose a folder:

• for departments, this will be Shared Files > Public > Departments > [your department]. Depending on the type of file, you should look for a subfolder, such as "Minutes" or "Bill Lists," if available
• for Administration/Communications & Digital Media functions (such as overall county financial documents), Shared Files > Public > Main Site. Depending on the type of file, you should look for a subfolder, such as "Minutes" or "Bill Lists," if available

Then click the Upload Files icon in the top right.

Select Upload a File, choose a document from your computer, then press Upload.

To insert a link to a document, select it, then press Insert.

Save!

When you're done editing, click "Save" to preserve your work in the text editor, or "Save and Close" to return to the main OpenCities backend page.

Make sure to save on the main page too! If you don't save, OpenCities won't remember your changes! So when working with the text editor, you're going to save twice: in the editor itself, and on the page.

Troubleshooting and Tips

Strip Formatting

Is your text looking strange when you preview it? Highlight it, then click the Format Stripper button (on the left side - looks like a paintbrush). This should remove formatting from your text, and you can re-format.

Copy and Paste from Word

You can copy and paste directly from Word! Select your text in Word, copy it, then hit Ctrl V on your keyboard while in the text editor to paste it in. Re-format the text as needed.

Stick to Our Styles

We have a very specific set of colors, fonts, and font sizes that are built-in to the site to make things consistent. While the text editor allows you to manually increase the text size or text color, we ask you to refrain from using these tools. Sticking to our styles will make the site easier to use for everyone!

Tables

Tables should only be used for tabular data, not layout/formatting. Use the justification tools (center, left, right) to align images and paragraphs, not tables.

If you do need to insert a table, please read these instructions first: Customize a table(PDF, 140KB)

Plugins and Content Lists

When working in the text editor, you may see what looks like a green-outlined box, such as this:

Do not edit these unless you are an administrator. These boxes are used to pull in pieces of content from other parts of the site, such as:

• a list of upcoming events with a specific content label
• a list of services with a specific content label
• a code snippet

If you see one of these boxes, simply ignore it, and don't delete it. :)

If you're a site administrator - learn more about content lists(PDF, 162KB).

Throughout the website, we use a few different page types. 

OC General

OC General pages are just what they sound like - they aren't specific and can be used for anything! Most pages on the site are OC General pages.

Example: https://www.morriscountynj.gov/Residents/County-History/History-of-the-Morris-County-Courthouse

OC News Articles

OC News Articles are used for press releases. We've created a few different versions of this page type for our different agencies - County, Prosecutor, Sheriff, Surrogate, Improvement Authority, etc. News Articles include special fields like "Official Publish Date" and "News Image." Use the shortcut to your agency's Press Releases on the dashboard.

Example: https://www.morriscountynj.gov/Morris-County-News/CCM-Student-Fine-Art-and-Animation-Exhibit-Opens-to-Public

Read a full set of instructions here:

• Adding a press release: Communications & Digital Media(PDF, 337KB)
• Adding a press release: Other agencies(PDF, 332KB) (Sheriff, Prosecutor, Surrogate, Improvement Authority, Mosquito Control, Stigma-Free Committee)

OC Events (including Academy Classes)

OC Events are used for calendar events. These include meetings, Hope One and Navigating Hope stops, and Stigma-Free events, among other things. OC Events have extra fields, such as date, location, and host, where you can provide additional information about the event. Use the shortcut to your agency's Events (such as "Planning Meetings," "Hope One Stop," or "Stigma Free Event") on the dashboard.

Example: https://www.morriscountynj.gov/Departments/Sheriff/Hope-One-Events/330-Dover-Probation

Read full instructions here:

• Post an event to the calendar(PDF, 678KB)
• Enter new Public Safety Training Academy courses(PDF, 456KB)

OC Services

OC Services are used to create service pages: pages that describe how someone does business with the County. This includes everything from signing up for SNAP benefits to registering to vote!

Example: https://www.morriscountynj.gov/Departments/Personnel/Apply-for-a-Job

Service pages have two special properties:

• they automatically get pulled onto our main "Services" page
• they let you add step-by-step instructions using the "Modes of Interaction" panel

Learn more about OC Service pages.(PDF, 3MB)

OC Job Listings

OC Job Listings are a specific type of page meant to list open requisitions. Fields included in this content type are "Select a job type," "Position summary," "Package summary," and other job-specific entries.

This is only used by Personnel. If you need to have a job listing posted, email the Personnel office.

Other page types

There are many other page types available in the OpenCities platform, including OC Module Interface (a type of page that displays OTHER types of pages), OC Redirect Page (which just redirects to another page, like an external website or a PDF document), and OC Folder (just what it sounds like - a folder containing other pages in the site tree).

As a site editor, you aren't going to use or edit these pages, but any site administrators should be aware that they are in use.

At the top of every OpenCities page, there's a taskbar with 5 tabs - Overview, Settings, Engagement, Links, and History. While you won't often use every tab, it's good to know what they all do and what options you have when working on your page.

Overview

The overview tab is what's selected by default when you're on an OpenCities page. This is where you enter in the page name and page title, description, the body content in the text editor, and any other content. 

Settings

The settings tab allows you to do the following:

• hide, or show, the page you're working on from internal site search, navigation menus, and external search engines like Google. (If your page is, or isn't, showing up in the page navigation like you expect it to, this is where you can fix that.)
• schedule the page to be published, set a reminder date for you to review the page, or set a date to deactivate the page (i.e., take it offline). Read more about this in the Schedule changes section of this documentation.
• change the page owner. If you created the page, you're the page owner, but you can assign this to another user of OpenCities if necessary.
• change the content type. You shouldn't need to use this option, but if you accidentally created an OC Service page when you meant to create an OC News Article page, you can change it here.
• create another URL for the page.

Engagement

This tab allows you to toggle the Page subscription feature. Essentially, if this is turned on, people can subscribe to this particular page via email, and get an email notification if anything is changed on the page.

This feature is generally turned off by default except on specific pages, like job listings.

Links

The links tab shows you what pages and files you're linking to on this page. It will also show you if there are any broken links. This is a very useful page to check before you publish!

Note: you must save the page you're working on for the list of links to appear.

History

This tab shows the previously saved versions of the page.

• Click on an old version to see it.
• To unpublish a current version, select Roll Back.
• To re-publish an old version, select Update > Publish.

You will more than likely be working on an existing page - making tweaks to the text, or adding documents. Here's how you can find the page you want to work on, and make those edits:

Find a page

There are a few ways to find a page in OpenCities:

Use the dashboard search

On the dashboard, there's a big search bar - use this to your advantage! If you know the Page name of the page you're looking to edit, search for it - it will come up in the predictive search, and you can click on the title to access the page. In this case, our COVID-19 page's Page name is "Coronavirus," so as I start typing in "corona," the page comes up. I can click on this page to access it:

Use the page search under "Pages"

On the top menu, you can click on "Pages:"

This will bring up a comprehensive search. You can search by the Page name, as with the dashboard search, as well as who last published the page, who owns the page, and what type of content type it is (OC General, OC Event), etc. 

Use the site tree

When you click on "Pages," you'll notice that on the side, there's a listing of all the content on the website - the site tree:

You can use this to navigate to the exact page you want to edit. Click on the little black triangles to expand each category.

Use dashboard shortcuts

If the type of content you want to edit is represented by a dashboard shortcut (this applies to Events and News Articles from various agencies), hover over that shortcut.

You'll get two options: Create and See all. Click on "See all" to view all of that type of page.

For example, if you click "See all" when hovering over "Job Listing," it will take you to a list of all job listings! You can select which page you want to edit from that list.

Use the "My Content" area of the dashboard

If you recall from The Dashboard, the bottom of the page has a section called "My Content." If you are the creator of a page, or have been working on a page previously, you'll see it listed here!

Now that you know how the platform works and have found the page you want to edit, it's time to update the page!

When you get to the page, you may see that the form fields on the page are grayed out, and when you click on them, you aren't allowed to make edits:

Before making page edits, you are required to have the page Checked Out, and click the Update button. This is to prevent accidental page edits.

If you didn't create the page, you may first need to click a button at the bottom that says Undo Checkout. Then you can click the Undo Checkout button at the bottom:

Finally, click the Update button at the top:

You're now able to edit the page! You can now save, preview, and review your page:

If you don't see the green buttons, then you aren't able to make updates! Make sure to hit the Update button, or Check Out the page to yourself in order to make those edits.

Instead of starting your page from scratch, you can copy an existing page!

This is by far the easiest way to create repetitive calendar events, such as board meetings or Hope One/Navigating Hope stops - the event image, content label, and body text are already in place, and you just need to change out the date and location! This is how the Office of Communications & Digital Media adds calendar events like these.

Here's how to copy a page:

Find the page you want to copy

Search for the page you want to copy via the Pages tab, the search bar on the dashboard, or your agency's appropriate dashboard shortcut.

However you access it, find the page you want to copy, and open it in the platform.

Right-click on the page name in the site tree

You'll notice that the page you have open is listed, and highlighted, in the site tree:

Right-click on the highlighted page name, and select Copy Page.

This will create an exact duplicate of the page. The only difference will be that the page name will say "Copy of..." the original page:

Change the page name, make your edits, preview your changes, and publish! :)

OpenCities allows you to schedule changes to your pages. You can either schedule a new page to publish, or schedule changes to an existing page.

To understand how to schedule changes, you first need to understand the difference between a Work In Progress (WIP) and a Published page:

"WIP" and "Published"

A page in OpenCities is generally in one of two states:

• a "WIP" - work in progress
• "Published"

A "WIP" page is essentially a draft version of the page.

The "Published" version of a page is what shows up LIVE on the site.

 

In the above example, the live page is version 4. The version in draft, that's being worked on right now - the WIP - is version 5. If you're working on a page, it's a WIP. When you hit Publish, it becomes Published.

However, we're able to schedule out when a WIP becomes Published - live - on the site!

Schedule a new page to publish

Maybe you're working on a press release (or, in OpenCities-speak, an OC News Article), and you want it to publish in a few days. Your goal is to complete the release, schedule it, and have it publish at that scheduled date. That's simple to do in OpenCities!

1. First, create your page (in this example, your News Article) as you normally would - the body content, the title, description, and any other additional content that needs to be added.
2. Next, at the top of the page, click on the Settings tab:
   
   
3. Under schedule, put in the Publish Date. This is the date and time when you want the page to publish.
   
4.  Finally, hit the Publish button.

Your page is now in the queue to be published at the Publish Date you entered!

Note: News Articles and Events have date settings on the Overview tab. These settings are for display ONLY, and don't pertain to scheduling. If you want to schedule something, you must use Schedule > Publish Date under the Settings tab

Schedule changes to an existing page to publish

You can work on an existing, already published page, and schedule those changes to publish at a specific date, using the exact same steps as above. 

What OpenCities is actually doing is scheduling a WIP to publish - whether its a completely new page or a WIP of an existing page. So follow the same steps:

1. Update an existing page
2. Go to the Settings tab
3. Put the date you want your changes to publish in Publish Date
4. Hit the Publish button

This will put your changes in the queue to update at the time you've specified.