JCC Web Standards & Usability Guidelines | Judicial Branch of California

How To

Prepare Content

expand all
collapse all

Before Creating Content

Before creating content all Content Contributors should:

Review the AOC Editorial Standards (see AOC Editorial Style Cheat Sheet)
Review the AOC Web Accessibility Policy (see AOC Web Accessibility Tip Sheet)
Understand target audience and associated website (see Audiences & Web Properties).
Understand correct use of templates and callouts by reviewing the Page Layouts & Callouts section.
Know the timeline for creating, QAing, and supplying content in time for live publishing.
Prepare content, seek content approvals with your manager(s), and have the text edited by the Editing and Graphics Group (EGG).

Create New Content

Understand target audience and associated website (see Audiences & Web Properties).
Know the timeline for creating, QAing, and supplying content in time for live publishing.
Prepare content
Seek content approvals with your manager(s)
Submit text / images for editing by the Editing and Graphics Group (EGG).
If you have images or videos, please refer to the respective sections below.
Submit a request to webcontent@jud.ca.gov in order to translate your content into user-friendly web pages.

Editing Existing Content

Editing existing content refers to minor changes that can be done within an existing callout. For example, correcting spelling mistakes, changing event dates, or updating in-line text. Please refer to the “Creating new content” section above to address major rework or redesign.

To make minor edits to existing content, be sure to:

Double check spelling and grammar
If you have images or videos, please refer to the respective sections below
Proceed with minor changes and submit to workflow

Prepare Images

Obtain all rights to the image(s) required for posting and/or editing.
Be sure to provide alt-tags (alternative text tags) for all images. The alt-tags will need to be placed into the code or by pushing the image button in the WYSIWYG editor of Red Dot.
For graphic work or edits to an existing image, or to hyperlink an image, contact webcontent@jud.ca.gov for help. Do not hyperlink an image without prior knowledge of how that impacts the look and feel of the page.
If you are in search of an image to use, please contact the editing and graphics group (EGG) at Eggjobs@jud.ca.gov.

Prepare a Video

AOC-produced videos

Obtain a transcript for the video
If the video has not yet been posted on the California Courts YouTube channel, contact Penne.Soltysik@jud.ca.gov to see if your video needs to live there.
Obtain an embed code by submitting a request to Penne.Soltysik@jud.ca.gov, and determine under what category the video should live.
Use the Video Callout to post with an embed code. If there is no room for a video callout, contact webcontent@jud.ca.gov for assistance with the display of the video.

Third-party videos

Ensure that the video is available for public use.
Write a disclaimer that the video is not a product of the AOC.
Cite the owner of the video.

Publish Content

expand all
collapse all

Naming Conventions for PDFs and Other Files

File assets (pdf, doc, xls...) and images (gif, jpg, png) need to be named correctly for them to be accessible. Keep these tips in mind when naming files for use on the Courts websites.

File names must not have any spaces in them
- Good: "goodfilename.pdf"
- Bad: "bad file name.pdf"
Separate using hyphens or underscores
- good-file_name.pdf
Do not use special characters in file names. Here are some characters to avoid:
- ! @ # $ % ^ & * ( ) ? < > " : ; [ ] | \ ~ ` + =
If submitting a group of documents that may share a common theme, such as a Judicial Council meeting, or quarterly finance report, create a file name that will tie the documents together in some fashion.
- jc-20111213-agenda.pdf - December 13, 2011 Judicial Council Meeting Agenda
- qfs-2011-q4-alameda.pdf - Q4 2011 Quarterly Financial Statement for Alameda
- ror-2011-q3-los-angeles.pdf - Q3 2011 Report on Revenue for Los Angeles

Delete a Page or Callout

Please follow these steps:

Re-title the callout/page so that the title is prefixed with the word: DELETE (e.g., “DELETE – Self-Help for Seniors”).
Release the edited page from your Drafts.
Once in workflow, WebComm staff will notice the “DELETE” prefix and remove the page from the site.

Additional notes:

If the page is used elsewhere on the site, WebComm will consult with you to determine whether the item should be deleted from the site entirely or just for a single instance/location.
The word “Delete” in RedDot typically means the content will be removed *completely* from RedDot (think: recycle bin). Comparatively, RedDot uses the word “Remove” to mean that it will remove the content from a page or list, but retain the content within the system.
So as not to get “Delete” and “Remove” confused, most of you will not see the “Delete” function as a menu option within the system.

H2 and H3 Headers

H2 and H3 headers help the content owner (you) create more readable and organized content. There are some things to keep in mind when choosing which one to use.

Use H2 when you want to create a content section on a page. The styling of H2 encapsulates the header text inside of an upper and lower horizontal rule that stretches across the entire content area.

Use H3 when you would like to create a header for a new topic within a page or content section

A nice example of the correct use of the H2 header can be found on the CFCC page. Notice that different content areas, like "What's New at CFCC", "Family Law", "Juvenile Law" etc, use the H2 header to group the information into small clusters of like content. Since the subject matter is varied through the page, the H2 is a good choice.

The Judicial Council Advisory Groups page shows a good use of H3. By using H3 the page is separated into easy to read chunks of like information featured within accordions. Since the information on this page is all related to different aspects of the Advisory Groups, H3 is a better choice than H2.

Of Current Interest (OCI) Publishing

Of Current Interest items call attention to a specific news, resource, deadline, or calendar items. Most OCI items are created by the Office of Communications. Web Services also has OCI publishing permissions.

The following should be applied to all OCI items:

“35/35”
The title should not exceed 35 characters and the description should be no longer than 35 words (approx 200 characters).

Link references
External links cannot be used in OCI’s. The reason for this business policy is to minimize redirecting users who intended to visit the branch site, to another site so quickly. If the announcement is in reference to a partner, i.e. CalBar, the announcement must first be placed somewhere on the branch web site, then linked from the OCI. This rarely happens and in most cases is an item that can be placed on the Chief Justice’s page (13330.htm).

Do not link to a PDF or DOC in the title
Link only to html pages. (Again, some instances present themselves where a file link has to be used. This is ok as long as the link is in the text and not in the title). (For the person posting the OCI in RedDot, be sure to “Reference” rather than “Connect” to the desired linked page.

Do not place photos or graphics in an OCI
There have been a few occasions where a logo or an image was placed within the text box of an OCI. This is exercised very rarely.

Review + Approval
Before pushing live, all OCI’s get approval from either the subject matter contact or a supervisor/manager within the Office of Communications.

Number of OCI’s
Currently, the front page features three OCI’s. As a general rule-of-thumb, the OCI feature should not extend beyond the height of the other columns on the home page. The goal is to have a visually balanced display of news.

Requests for and questions about OCI stories and publishing should be directed to Penne.Soltysik@jud.ca.gov or webcontent@jud.ca.gov.

Applying Note Class to your Content

The Note class is a nice feature when you would like to have some of your content stand out from the rest. The Note class places text and images inside of a light blue container. Use the Note class when you have a quote, or other information that you would like to see contained, separate from the surrounding content.

It is very easy to do. Simply highlight the text you wish to be wrapped in the Note container. Using the Class Dropdown in the WYSIWYG editor select Note, and you will see the text now contained inside of a box.

Don't use it too much, because it is designed to make content contained within more visible on the page.

RSS Feeds

To produce an RSS feed, first contact the Web Services team to discuss your requirements.
Content for a new RSS feed should resemble the California Courts News Release page, that lists news story headlines, as seen below. http://courts.ca.gov/16592.htm
The page should be a list of links to pages that do not appear in the left hand navigation bar. For instance, on the following news story, the headline (title of the web page) does not appear in the left hand navigation bar, but the headline does appear in the breadcrumb.

Banners, Animation, & Photo Galleries

We have a variety of rich media tools at our disposal for displaying specialized content or to 'jazz' up the look of a page. If you are interested in any rich media features (listed below or otherwise), contact the Web Communications group.

Pictobrowser

Pictobrowser is a widget that can be used as an in-page photo gallery using a Picasa Web Album as the image source.

var so = new SWFObject("http://www.db798.com/pictobrowserp.swf", "PictoBrowser", "430", "370", "8", "#EEEEEE"); so.addVariable("source", "album"); so.addVariable("userName", "courtnews@jud.ca.gov"); so.addVariable("names", "ChiefJusticeRecentActivities"); so.addVariable("albumId", "5655204650024099937"); so.addVariable("titles", "off"); so.addVariable("displayNotes", "on"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "46"); so.addVariable("colorHexVar", "EEEEEE"); so.addVariable("initialScale", "off"); so.addVariable("bgAlpha", "90"); so.write("PictoBrowser110922083211");

Banners

Banners can be added to pages to spruce things up. These are custom-made images by the Web Communications team.

An animated banner

Create Links in Red Dot

expand all
collapse all

Find the ID Number for a Page or Callout

There are times when it is necessary to know the ID for a callout or page

When linking to a page
Connecting existing content
Deep linking to accordion sections or tabs
When wanting to add a callout that exists elsewhere on the site onto another page

When in SmartEdit CTRL+Click any link or nav item. This will open the site in a new tab. You will notice that threre are red dots, just like you see when in SmartEdit. These don't function, they are simply there for reference. You can now navigate to the page you want to find the ID.

ID for a specific page is found at the top of the page as illustrated in this image.

ID for a side callout can be found by hovering over the red dot, revealing an info flag with the ID

ID for deep linking into a tab is found by selecting the tab. The deep linking ID will appear like #tab1234

Link to a PDF or Word Doc

Frequently a user may want to provide a link to a media element such as a PDF or Word doc within a right or left side module (such as Quick Links). To do this follow the steps below. This example assumes that the media element is already loaded into the Asset Manager.

Open the side callout
Select the red dot for "add/re-order/remove links"
"Create and Connect Page"
Choose "Special" in the Content Class Groups
Choose "Attach Media Element" in the List of Content Classes
Enter a descriptive headline for the link and click OK. This will result in a text link appearing in the Quick Links module
Back in SmartEdit click on the newly created link in the module
Choose the "Open Content" Red Dot
A Red Dot called "Document" will appear, select it. This will open the Asset Manager
If the asset is already in the asset manager go to step 13, otherwise continue to the next step
To Upload the asset choose Select Asset from Local File System
You will be asked to locate the file on your computer. Follow the steps until it is added, Proceed to 15
If Asset is already on the server, locate it via search
Choose the Asset by selecting the file name. This will open an information screen on the right side of Asset Manager.
Select OK
Back in the SmartEdit screen for this item, select Back. This will return you to the page where you began.

E-mail linking

It is easier than you may think to create a link for an e-mail address. Using the WYSIWYG editor, simply type in the e-mail address and hit the space bar. Red Dot will automatically make the address into a mailto: link that opens up your e-mail client (like Outlook) when you click on it.

See, that was easy.

Linking Text in the WYSIWYG Editor

The default WYSIWYG editor has a mind of its own when it comes to highlighting text to create a link. The problem is the editor sometimes appends an extra space of highlighting at the end of the text you want to link. This results in the Insert/Edit Link not functioning. Likewise, highlighting also carries into surrounding words or letters.

To make sure this doesn't happen, simply place your cursor at the first letter of the word or words you would like linked. Hold down SHIFT and Arrow over until all of the text to be linked is highlighted. From there you can select the Insert/Edit Link.

Another method is with a combination of mouse and keyboard. Click at the begining of linked word(s), hold down SHIFT, click mouse at the end of the word(s) you want linked. Select the link menu and you are on your way. Happy linking.

Deep Linking to Accordions or Tabs

There are times when you might want to link to a specific item that is found within an accordion or tab, and would like the link to go right there instead of just landing on the page where it exists. This is possible through a method called Deep Linking.

There are two important bits of information you need to make this happen.

Page ID where the Accordion or Tab resides
Deep Linking ID of the accordion or tab.

First, locate the Deep Linking ID for the accordion or tab you wish to link to. Also, note the Page ID as you will need it to create the link

Accordion: Open the accordion item where you want to link. There will be a Deep Linking ID below the headline. Write the number down. Note, the Deep Linking ID for accordion items is the same ID as the accordion item, with #acc at the beginning. So an accordion item ID 9120 will have a Deep Linking ID #acc9210.
Tab: Open the tab you want to deep link. The first line in the content area will contain the Deep Linking ID. The Deep Linking ID for Tabs will look like this, #tab3696.

Next, linking to the Accordion or Tab via deep linking.

In the Red Dot WYSIWYG editor, select the text you wish to make a link.

In the Insert/Edit link pop up choose Insert Link in Page (white sheet of paper icon).

In the "You can add more search criteria..." portion of the form, choose PageID from the drop down and select the green plus button. Make sure there isn't any text in the Content or Headline area above.

Enter the Page ID in the Value box, making sure the Operator is Equal.

Select Start

A list will appear with the page you queried. Select the page title. This will populate the href line of the Insert/Edit Link window.

At the end of the ioID string, add the Deep Linking ID for the accordion or tab. Click OK.
Accordion:

Tab:

Note: If you are linking into a page that has been assigned a vanity URL, searching for the page in #3 above will still require the numeric Page ID.

Obtain Metrics on Your Pages

expand all
collapse all

Google Analytics

Requesting and Interpreting Reports

To request a monthly Google Analytics report for your group or for help in interpreting your numbers, please contact us at webcontent@jud.ca.gov.

View Your Reports

After you login to Google Analytics, on the left hand navigation bar, select Content – then All Pages.
In the middle of the page, below the chart, you will see Primary Dimension: Page Page Title Other – from here, click on Page Title.
Next, in the search bar, enter the keyword assigned to your pages. (Contact webcontent@jud.ca.gov if you are unsure of the keyword that your pages have been tagged with).
This brings up the Collaborative Justice pages that have been tagged and visited. You will see the top 10 pages here and at the bottom of the page, you can select Show rows: 100 to view all of the pages.
You are most likely seeing numbers for a date range of the 30 days prior to today – if you’d like to change the date range for the report, you can do this by clicking on the date range displayed at the top of the page.