website manager guide

User GuideEditing & maintaining the district website at SFUSD.edu

1 Part 1: The Basics 5What can I do? 6

User Groups 6Login 7The admin interface 7Working with text 10

Headings & paragraphs 10Lists & numbering 11Watch out! 11

Links 12 Linking to webpages 12Linking to files (PDF, Word, etc ) 13Inserting email links 15

Images 16Choosing the main, top-of-page image 16Other images 17

Home page 18Updating audience tabs 18Updating random photos & captions 19

2 Part 2: Sidebars & Sitewide Promotion 20Sidebar & promotion layout 21Choosing sidebars for a page 22Editing a page-specific sidebar 22Section sidebars 23

Creating a section sidebar 23Editing a section sidebar 24

Audience sidebars 25Creating an audience sidebar 25Editing an audience sidebar 25

Sitewide promotions 25Editing the sitewide promotion 25Creating a new sitewide promotion 26Swapping & pausing sitewide promotions 26

Table of Contents

3 Part 3: Page Management & Menu Order 27Making a new page 28Deleting a page 28Moving a page 29Making, moving, & deleting sections 29Re-arranging the menu order 29

Auto-publish & auto-unpublish 30

4 Part 4: News & Other Dated Stories 31Which sections contain news/dated stories? 32Adding a story 32Editing or deleting a story 33Adding news to a section that doesn’t have news 33

5 Part 5: Special Files & Board Meetings 34What makes these files special? 35Menus 36Public Notices 36Board Meeting Notices, Agendas, Minutes, & Resolutions 37

Upcoming board meetings 38

6 Part 6: School & Building Information 39What pages use this data? 40Adding a school/building 40Editing school/building info 40

Deleting a school/building 40

7 Part 7: Multilingual Content 41Best practices 42Configuration 44Making a translation 44Accessing a translation 45Work in progress 45

8 Part 8: Advanced 46Drop-down menus 47CSS & javascript 47Modx documentation 47

9 Part 9: Problems & Solutions 48

10 Part 10: Tips & Best Practices 51

5

proprietary and confidential

Part 1: The Basics

6 | Part 1: The Basics

What can I do?What you can do depends on your role There are four types of roles,

listed below

Editors can:

Edit text ♦

Upload and insert images; upload and link files ♦

Insert and remove links ♦

Turn sidebars off and on for each page ♦

Edit section-wide sidebar and page sidebar ♦

Editors can also create new sections, pages, and other resources, but will need to ask a Manager to “publish” before they can be viewed on the live website

Managers can do everything above, plus:

Make new sections & pages live ♦

Move pages ♦

Change ♦ Published On datesAuto-publish and auto-unpublish ♦

Webmasters can do everything above, plus:

Edit sitewide promotion and audience sidebars ♦

Delete sections and pages ♦

Re-arrange the global left-hand menu ♦

Create new sections/pages at the “root” of the website (outside of ♦existing section)Edit home page ♦

Web developers can do everything above, plus:

Rename images, files, and image/file folders ♦

Delete files and images from the web server ♦

Create, edit, and delete other users ♦

Just about anything else you can think of! ♦

User GroupsEach user also belongs to a User Group that determines which pages and sections s/he has access to For instance, EPC staff all belong to the EPC Group, which allows them to edit any page of the Enroll-ment section and school data, but does not allow them to edit other pages

7


LoginTo login, go to https://www sfusd edu/manager/ and enter the username and password you’ve been assigned (Note, during the pre-launch period before the new website is live, login here instead: https://156 1 240 50/manager/)

Be sure to keep your username and password secure If you ever forget your login, you can click the “Forgot your login?” link and enter your SFUSD email address

The admin interfaceOnce you login, you’ll see a home screen that looks something like this You may see slightly different options based on your login

Notice how the menu on the left mirrors the global navigation menu of the website Again, you may not see all pages, depending on your login

You can click on a page in the menu to edit it


Once you click on a page, you’ll see a screen something like this:

Only pages that are published appear on the live public website

The Title is the text that appears in the global navigation, and as the main page heading, and as the text in the very top of the browser window

If you ever have reason to change this text, the Spanish and Chinese “cousin” pages (if they exist) should also be updated to match

Resource Content is the guts” of the page

Changes you make will not show on the live website until you click Save

9


These are the corresponding areas of the live public page:

Title is used in these three places

Resource Content


Working with textYou can type, copy, and paste in the Resource Content window

You can apply bold, italic, bullets, and number lists by highlighting text and then clicking the appropriate icons There are also icons to undo, spell check (English and Spanish), and insert special characters If you hover over each icon for a moment, you’ll see a label that explains what that button does

The quote button may not look like it does much, but if you save your work and then look at the live page, you’ll see that it styles the quote in blue, en-larges the quote marks, automatically aligns the name to the right (as long as it’s in a new paragraph)

Headings & paragraphsThe first dropdown menu allows you to turn regular text into headings, or headings into regular text (paragraphs)

11


Lists & numberingThe second dropdown allows you to apply special styles At the time of this writing, the only special styles created for text are for styling ordered (number or alpha) lists

To create an ordered list, first highlight text and click the number list icon Then, choose the type of numbering you want from the Styles dropdown

To create a bullet list, choose the bullet list icon (next to the number list icon) There’s no need to apply special styles from the dropdown menu

Watch out!If you see text in brackets, like [[[$This_is_the_Choose_A_School_Dropdown]]], it’s just what it says — a dropdown menu or other special chunk of code Don’t edit or remove these (If you do, ask a Web Developer to restore a backup of the page, or to re-insert the bracketed text They’ll have a list of the small handful of pages that contain these special pieces, as well as exactly what the text should be )


LinksLinking to webpagesTo insert a link to a webpage (whether it’s within sfusd edu or an out-side site), first navigate to that page

Then, highlight and copy the entire URL from the address bar

Next, in the admin interface, highlight the text you’d like to link, and click the chain link icon

A little window will pop up Paste the URL into the URL field, and type a title that explains where that link will go Then, click Insert

13


Linking to files (PDF, Word, etc.)Highlight the text you’d like to link, and then click the chain link icon In the window that pops up, click the icon labeled browse

This launches a new window that lets you browse files

If the file already exists on the website, you can navigate to it, select it, and click OK.

If the file does not already exist on the website, first make sure you have the correct folder selected, then click the upload icon

A note about folders

As of the time of this writing, it was not yet possible to direct users straight to the folder that applies to their section of the website That’s why you see so many folders in the graphic at left

Every section of the website has its own folder, with a name that matches the section name You should only use the folder that belongs to the section you’re editing

Within that folder, there is an images folder for graphics only, and a files folder for PDFs, Word docs, and everything else


This launches another window that lets you upload files from your computer Click the Add button

(What are we waiting for? The Waiting... message means it’s waiting for you to choose files )

Navigate to the file you want, and double-click it (You can click Add again to queue multiple files if you like ) Click the Upload button to copy the file from your computer to the website

Click the Close button when you’re done

Then select the file and click OK to insert the link to it (See the second graphic on the previous page )

File Names

It’s best to re-name files if needed before uploading, to make sure that they have a clear name that’ll be understood by anyone else browsing or linking to files later

Spanish & Chinese: Recommend saving these files with names identical to the English version, then adding -SP or -CH at the end of the file name That way, anyone can tell at a glance which languages a files is available in

Replacing files: Whenever possible, use exactly the same file name for a new version of the file, and overwrite the existing file This will ensure that all links pointing to the file automatically point to the current version It will also prevent web visitors from seeing “page cannot be found” errors when clicking links or clicking from search results

15


Inserting email linksHighlight the text you’d like to link, then click the chain link icon Type or paste the email address in the Link URL field, and enter a title something like the one below

A warning window will pop up and ask you if you’d like to “insert the required mailto: prefix” for email addresses Click Yes (Otherwise, the link won’t work )


ImagesChoosing the main, top-of-page imageFirst, click the Main Photo tab Then, click the arrow

This launches a window to browse existing website images Choose an image from the images subfolder of your section folder Or, click the Upload icon to upload an image from your computer (see pages 13-14) (If it’s available to you, you may also choose an image from the _site-wide folder )

Be sure to enter a meaningful Photo Title to describe the image This is essential for website accessibility Write the description as if you’re describing the image to someone who can’t see it (Chances are, your text will end up doing just that )

To remove the image, just use your mouse to highlight the entire im-age path, and delete it

Important

The image you choose for this spot should be exactly 470 pixels wide (It can be any length )

We recommend that images of that width be labeled with -470 in the file name to make them easy to spot at a glance

Adobe Fireworks is a great tool for web image resizing

17


Other ImagesYou can insert other images anywhere you like on the page Place your cursor where you’d like the image, then click the image icon

Choose an existing image from within your section’s images folder or click the Upload icon to upload an image from your computer (see pages 13-14) Be sure to enter a meaningful Image description to de-scribe the image This is essential for website accessibility

Be sure any image you insert is less than 440 pixels wide (that’s the max width for the main content area)

To wrap text around an image, click the image, then select either image-align-left or image-align-right from the styles dropdown menu

The result should look something like


this:

Home PageUpdating audience tabs If you select Home from the left-hand admin menu, you’ll see that it has special boxes for updating these tabs (These fields only display for those who have access permission ) Do watch out, per note on page 11

19


Updating random photos & captionsClick Home from the left-hand admin menu Then click on Main Photo tab This works just like the Main Photo for other pages (see page 16), except that:

the required dimensions are different (and must be followed to ♦ensure layout doesn’t break)there are multiple photo slots (a photo is pulled at random each ♦time someone visits the home page)there’s an optional caption slot, which contains the text that dis- ♦plays on top of the photo

20

Part 2: Sidebars & Sitewide Promotion

21


Sidebar & promotion layout

The page-specific sidebar content, if it exists, displays first

The section sidebar content, if it exists, and if it is turned on for this page

Audience sidebar content, for each audience selected for this page

Site-wide promotion, if it is turned on for this page

The Spotlight displays on every page (this could change in the future; web developers may remove this or insert other items that display in this slot on every page)

The site-wide promotion also displays on the home page

22 | Part 2: Sidebars & Sitewide Promotion

Choosing sidebars for a page Click the Sidebar tab Here, you can add or edit page-specific sidebar content, and add or remove sitewide promotion, section sidebars, and audience sidebars

It’s recommended that you always keep Sitewide Promotion and Section Sidebars checked They’re optional just in case one of them promotes this page — then, you might not want to include it

Note, some pages have two or more section sidebars available. In this case, choose the most relevant one

It’s also recommended that you always include the sidebar for the rel-evant audience(s), since this enables promotion of critical items

Editing a page-specific sidebarYou can edit the page specific sidebar anytime by clicking on the Sidebar tab and editing the content that displays in the box labeled Page-specific sidebar (See above )

23


Section sidebars Creating a section sidebarTo create a new section sidebar, right-click (or control-click on Mac) the Section sidebars folder (located inside Sidebars folder)

Choose Create > Create a Document Here


Give the sidebar a title that includes its section name, starting with Sidebar: If it’ll be used for a sub-section, include the parent section name, too, like: Sidebar: Programs: Special Education (Website visitors will not see the title; it’s just for your reference )

Next, choose the section you’d like this sidebar to be available to (Note, for the sidebar to begin showing in that section, you’ll need to enable it on a page-by-page basis ) You can assign multiple sidebars to any sec-tion, for instance, if you want sub-section sidebars to be available (See how Section Sidebar: Programs: English Language Learners is set up )

As always, make sure the Published box is checked, and click the Save button when done

Editing a section sidebarYou can edit section sidebar content any time by navigating to it in the left-hand menu (Sidebars > Section-specific sidebars), and then click-ing on it The content appears in the Resource Content area, just like it would for a page

25


Audience sidebarsCreating an audience sidebar Creating an audience sidebar is very similar to creating a section side-bar (pages 23-24) Instead of right-clicking on the Section sidebars folder, you’ll right-click on the Audience sidebars folder (located inside Sidebars)

Unlike Section sidebars, there’s no drop-down to assign the audience sidebar to a certain section of the site That’s because it can be used on any page

Editing an audience sidebarYou can edit an audience sidebar any time by navigating to it in the left-hand menu (Sidebars > Audience sidebars), and then clicking on it The content appears in the Resource Content area, just like it would for a page

Sitewide promotions Editing the sitewide promotion You can edit the current sitewide promotion by opening the Promo-tions folder in the left-hand menu, and then clicking on it You’ll see a Resource Content field, just like you see for pages and other elements

The promo spot on the homepage has been designed to hold an image 162 pixels wide by 100 pixels tall, or a small amount of text that takes about that much space

However, programming has been developed to automatically insert a slim scrollbar in the event that a longer chunk of content is needed for the promotion (Recommend always keeping it as brief as possible; it’s just an attention grabber to direct people to the page where the full info is )

Be sure to link the image or text you insert!


Creating a new sitewide promotionYou can create a new promotion the same way you create other new items You right-click on the Promotions folder, and choose Create > Create a Document Here

Swapping & pausing sitewide promotionsOnce you understand how sitewide promotions work, you’ll be able to:

Temporarily replace a sitewide promotion for a certain length of ♦time, and then revert back to the originalPermanently replace a sitewide promotion ♦

Program promotions to swap in the future ♦

Create a draft promotion and save it until you’re ready to have it ♦display on the site

This is the logic that governs the sitewide promotion:

Only one promotion can show at a time ♦

A promotion that is not published will not display ♦

If more than one promotion is published, the promotion with the ♦most recent published on date will be the one that displays

Notes:

It’s okay not to have any promotions; this will not cause empty ♦slots to display on home or interior pages To change publish dates or set auto-publish or auto-unpublish, ♦edit dates in the Page Settings tab For more information, see page 30

Why not multiple promotions?

The sitewide promotion was designed to be the single-most important message that needs to be communicated If there were multiple promotions, they would dilute one another’s importance

27


Part 3: Page Management & Menu Order

28 | Part 3: Page Management & Menu Order

Making a new page You can make a new page anywhere you’re authorized by right-click-ing on the folder where you’d like to insert the page Choose Create > Create a Document Here.

If you don’t want the page contained in an existing folder, just right-click the web folder instead; this’ll create a main-level page at the “root” of the site

Be sure to give the page a Title If you’d like to save it and work on it without it appearing on the live public website, be sure to uncheck the Published checkbox (See page 8 for a refresher on these items )

(If you’re an Editor, you won’t be able to publish, but you can save your draft and have a Manager, Webmaster, or Web Developer publish it )

Deleting a page To temporarily remove a page from the live website, just uncheck the Published button

To permanently remove it, right-click it in the menu and choose De-lete Resource

You’ll notice it will disappear from the live website but it will continue to show in the admin menu with a red line through it Users with ap-propriate access can click the trashcan icon to permanently remove deleted resources Until that happens, a page can be un-deleted by right-clicking again and choosing Undelete Resource

Be sure to delete Spanish and Chinese versions, too, if they exist.

29


Moving a page Dragging and dropping pages within the left-hand menu of the admin area will allow you to:

move a page from one section to another ♦

move a main-level page into a section ♦

move a page out of a section and make it a main-level page ♦

Making, moving, & deleting sections You can add, delete, or move sections following the same steps you use to add, delete, or move pages (See previous page )

Two things to remember about sections:

Website visitors cannot click on a section; they can only click on a ♦page within a section So there’s no reason to enter Resource Con-tent or main page photo If you’d like a starter/landing page for a section, you can name the first page something like Overview or Introduction Any page can become a section by having a page placed inside it ♦Any section can become a page by having its subpages removed If the menu doesn’t look right after you’ve made a section into a ♦page or vice-versa, you can check or uncheck the Container check-box in the Page Settings tab (check for sections; uncheck for pages)

Re-arranging the menu order You can re-arrange the menu on the live website by dragging and dropping pages and folders to change the order in which they appear in the admin area menu Any changes you make will instantly be vis-ible on the live site

(Note, there’s one situation in which this won’t work If you’ve edited the menu-sorting display to something other than the default, you’ll want to first re-set it Click the Sorting Options icon, then choose Menu Order from the Sort By: dropdown )

An Important Note About Translated Pages

Changes you make to the arrangement of English page also need to be manu-ally made to the Chinese and Spanish pages

It’s important that arrange-ment of all three continue to mirror one another

(In case you’re wondering, the Spanish and Chinese pages will continue to stay linked to their English cousins, even if you move them around )

Yet Another An Important Note About Translated Pages

Basically same as above if the English menu is re-arranged, the Spanish and Chinese menus need to be re-arranged to match

30 | Part 3: Page Management & Menu Order

Auto-publish & auto-unpublish If you want a page to go live on a certain day, uncheck the Published checkbox (under Create/Edit Document tab), then enter the publication date and time you want under Publish Date As always, be sure to click the Save button when you’re done

If you want a page to disappear on a certain day, enter the day and time you want under Unpublish Date

Note, you should exercise great care in unpublishing. This can cause users to get “Page Cannot Be Found” errors if links have been created that point to the page The vast majority (if not all) pages should never be unpublished, or at least not automatically unpublished

Auto-unpublishing should not be used to set a date at which con-tent needs to be updated. Instead, put a reminder on your calendar or use another outside system to manage update dates On that date, if all of the new information isn’t ready yet, you can replace current content with a note that reads something like, “Please check back More infor-mation coming soon!”

Pages should only be unpublished when they’ll be removed for good

31


Part 4: News & Other Dated Stories

32 | Part 4: News & Other Dated Stories

Which sections contain news/dated stories? The information in this section will enable you to update the following sections:

Current News ♦

Spotlight ♦

Hot Topics ♦

Nutrition News ♦

Notice, each of these sections contains subpages that don’t appear in the left-hand menu of the public site, and each of these pages is “newsy” or only makes sense with a publication date

Another thing these items have in common is that any of them can be pulled into the home page, sidebars, or other pages dynamically This means automated programming can grab the most recent story blurb (or a set of the most recent titles) and automatically display anywhere in the site For instance, no one has to manually go in and update the list of news story links that display on the home page, or the Spotlight blurb that displays in sidebars

Adding a story Navigate to the particular news area you want, then expand the menu to the year and month you want to place the story in Right-click and choose Create > Create a Document Here (just as you would for a regular page)

You’ll see all of the same options and fields as a normal page, including Title, Resource Content area, Sidebar, and Main Photo

If you add a main photo, you’ll notice that in addition to appearing at the top of that news story page, a smaller version will automatically appear anywhere that the news story blurb appears

There are two additional fields that are especially important for news stories

Additional Folders

If additional folders are needed (for 2009 or 2016, etc ), just duplicate an existing folder set by right-clicking Be sure that it has no stories in it, or else manually delete those stories after duplicating

(Web Developers can also just create new folders from scratch All the folders need to work correctly is the correct template applied )

Annual Update

Each new year, you’ll want to make a small edit Click on each parent news folder (Current News, Spotlight, Nutrition News, etc ) and locate the Symlink field under the first tab Replace the number that’s there with the numeric ID of the new current year folder For instance, in 2012, the Current News Symlink should be 298

33


The Summary field is for the blurb you want to display for the story

The date that displays with the story on the public website comes from the Published On field, found on Page Settings tab No special ac-tion needed here, unless you want to backdate a story

Editing or deleting a storyEdit any story the same way you would edit a regular page: find it in the left-hand menu by expanding its parent sections, then right-click and choose Edit Resource Delete a story the same way you would a regular page: right-click it in the left-hand admin menu, and choose Delete Resource

Adding news to a section that doesn’t have newsTo add news functionality to another section of the site, just duplicate an existing news folder (such as Current News), and then move to the place where you want to create news Keep duplicate children checked

Delete any individual stories from the duplicated folder You can re-name the folder to whatever you want to call the new news section Note, it’s important to keep year and month folders intact (A Web Developer may find it easier to create new folders from scratch and apply the appropriate templates )

If you want Spanish and Chinese versions of any new news sections you make, you’ll create those by clicking Create Translation for each folder and subfolder, and any story pages you want to translate (This also can be done via the database )

34

Part 5: Special Files & Board Meetings

35


What makes these files special?The files discussed below are special because they have one or more of the following characteristics:

specific date associated with the file ♦(for instance, the date for any meeting minutes file is a critical piece of info for that file)

many documents of the same category ♦(for instance, there are many resolutions)

document list needs to be pulled into more than one area of the ♦site (for instance, lunch menus are available on the home page in addition to the Nutrition & Meals section)

For any of these documents, it would be a real hassle for someone to manual create and update links to them For instance, someone would have to get up early and login first thing New Year’s Day to remove the December lunch menu and post the January on started displaying They’d also have to edit the same set of links in at least two places

As of the time of this writing, the are several groups of special docu-ments:

Menus ♦

Public Notices ♦

Board Meeting info & files, including Notices, Agendas, Minutes, ♦Resolutions, & K Resolutions

In case you’re wondering, school-related files (SARCs, etc ) are up-dated in the same place that all other school info is updated See School Information, starting on page 39

A note about terminology

The system on which your admin interface is built, modx, uses document to refer to anything in the left-hand menu of the admin area, including pages, sidebars, and special files

On this page, we’ve also used document to refer to a file (PDF, Word, etc )

This guide uses the words document and file interchangeably because neither one seems to fit perfectly all of the time

36 | Part 5: Special Files & Board Meetings

MenusTo upload a menu, open Nutrition & School Meals, then School Menus in the left-hand admin menu Then click Upload School Menus

Choose the correct options from each drop-down menu, then click the Choose File button to upload a file from your computer

To replace an existing menu document, simply upload a new PDF with the same meal, school type, year, and month

Current menus will automatically display on the home page and in date order on the Menus page; there’s no need to update either of these manually

Public Notices To upload a notice, open News & Calendars, then Public Notices in the left-hand admin menu Then click Upload Public Notices Click the Choose File button to upload a file from your computer, then give the notice a title, and choose date and language

37


Note, if the notice is in Spanish or Chinese, the title must also be in Spanish or Chinese (And it should be the actual title, rather than the name of the language )

The Public Notices page will automatically display only notices for the last year, in reverse chronological order

Board Meeting Notices, Agendas, Minutes, & Resolutions To upload meeting documents, first create a meeting Choose About SFUSD, then Board of Education, then Meetings, Info, & Files in the left-hand admin menu Right-click the appropriate year folder and choose Create a Document Here Enter the month and date as a title

Be sure to choose Meeting Type and enter Date All other fields are optional (If you choose Other, then be sure to enter the type of meet-ing in the text field )

When inserting files, be sure choose the appropriate folder for each file For instance, minutes should go in board-minutes folder; agendas should go in board-agendas folder, etc (Note to Web Developers: Modx functionality does not currently allow us to automatically direct these to a particular folder However, that functionality is planned for ver-sion 2 1 )

Once a meeting exists, you can edit files and other information for that meeting by clicking it in the menu and updating any fields you like

38 | Part 5: Special Files & Board Meetings

Upcoming board meetingsYou actually update all meeting info here Use the same procedure described on previous page

The system will automatically pull only upcoming meetings into home page and Upcoming Meetings section of the Board Meetings page; there’s no need to manually go in and remove old dates

Adding an upcoming meeting date without adding a file:This is no problem If you’d like to post dates on the website, and there are no associated files, just complete the form without uploading any files

39


Part 6: School & Building Information

40 | Part 6: School & Building Information

What pages use this data? All of the pages in the Schools & Facilities section use this data But it’s also used by these pages:

ADA Access > Access Guides for Schools & Buildings ♦

Enroll in SFUSD Schools > Interactive School Selector ♦

Transportation > School Bus Schedules ♦(dynamically pulls a list of all bus schedule PDFs, each labeled with school name)

Programs > After School Programs > School Sites ♦

Adding a school /buildingTo add a school or building, open Schools & Facilities in the left-hand admin menu Right-click School Information and select Create > Create a Document Here.

Editing school/building info To edit a school or building, open Schools & Facilities > School Informa-tion in the left-hand admin menu, and click the name of the school/building you want to edit

Note, even if the info you want to edit appears elsewhere — for instance, the ADA Access Guides page, you still edit it from this loca-tion

You can edit anything that shows on a school page from here — map, photo, contact info, blurbs, documents, etc

Deleting a school/buildingFind the school or building in the left-hand admin menu Right-click it and choose Delete Resource

41


Part 7: Multilingual Content

42 | Part 7: Multilingual Content

Best PracticesThe architecture and user interface of your website was designed based on current research regarding optimum setup for multilingual websites, and was carefully planned with best practices in mind (Your CMS provides you with full flexibility to move outside these best practices if/when you deem necessary We recommend giving careful consider-ation before doing so )

Some of these best practices include:

1. Keep the user in the language s/he has chosen. Once a user enters the Spanish or Chinese site, core navigation and everything else they see should be in that language If a user has entered the Spanish or Chinese site, they shouldn’t be mysteriously switched back to English when they click to another page (One exception to “everything” being in that language: the links in the top right of the white content box of each page, which allow for number 2 below )

2. Let the user move in any direction s/he chooses, with as few clicks as possible. (This rule applies to single-language website, as well.)Once in the Chinese site, the user should always have the power to flip over to the English version of the page they’re on Users shouldn’t have to click to the English home page first, then hunt around for the English version of the Chinese subpage they were just on

To make this possible, the system always shows links to the “cousins” of each page (if cousins exist) in the upper right corner of the white content area of each page

Remember that often about half of web visitors don’t start on the home page (They start their visit on another page after clicking from a search engine or entering a special URL directly ) This system is important for them It’s also especially important for bilingual web visitors, who should be given the freedom to toggle if they choose

3. Always keep content organization among languages parallel. Often, it may not be practical to include all of the info that’s on the English page on the Spanish version of the page It’s okay for a parallel page to have somewhat less content than its “cousin”

However, if ABC content exists as a single page on the English site, and there is some ABC content in Spanish, it should have its own page on the Spanish site It should never be combined with content from another short page

To put it another way, there should never be one Chinese page that’s equivalent to three English pages It doesn’t matter how short the page is Even very short pages are always preferable to combined pages that break the parallel, cousin-to-cousin setup.

Additionally, this enables content owners and translators to monitor content much more closely, and update and maintain content much

43


more efficiently It also ensures that the right slots will be available for future additions

4. Link text should be written in the language of the page it’s pointing to. In addition, it should never be or include the language name, like: Chinese, or Spanish version, or click here for Spanish page (even if the text itself is in that language)

For example, the English link pointing to the Strategic Plan page reads, Strategic Plan: Beyond the Talk Likewise, the link that points to the Spanish version of the page reads, El plan estratégico: Más allá de las Palabras

5. Never place a Spanish or Chinese downloads or text on the Eng-lish pages, or vice versa.With Spanish and Chinese sites, no one will know to search the Eng-lish pages for a download in Spanish or Chinese The download should be placed on Spanish/Chinese page, even it requires a page that has nothing else on it

6. Be transparent.This is part of why numbers 2 and 3 are so important Users shouldn’t have to wonder “what’s on the other side” The hierarchy and sitemap, and the relationship among “cousin pages” should always be clear

7. Don’t give the Translation Department ten times more work than is humanly possible.Or, to put it another way, keep the system manageable In a perfect world, the Spanish and Chinese sites would each be a perfect mirror of the English site (However, the new setup with partial content in Spanish and Chinese is a huge improvement over the old site, and will surely provide a much better user experience for web visitors browsing in Spanish and Chinese )

The best system is one that is practical and that can be maintained and kept up to date. That’s why the site was built in such a way that multilingual content is optional on a per-page basis It’s best to keep only as much multilingual content as can be kept up-to-date

44 | Part 7: Multilingual Content

ConfigurationThe system is designed as follows:

Every element (section, page, sidebar, sitewide promotion, news ♦story, etc ) can have a parallel “cousin” in another language

These cousins are linked in the database ♦

By default, pages only pull items such as sidebars and promotions ♦in their own languages

What’s automated:If you create a page translation, and if it’s published, a link to it ♦will display on each of its “cousin” pages

If you create a translation, the system will insert it in the same ♦place in the hierarchy as the page you created the translation from That is, if the parent section(s) already existed in the new language — see below

What’s not automated:If you make a translation of page B (a subpage of section A), but ♦section A doesn’t exist in the other language the system will just place the translated version of the page as a main-level, “root” item It won’t be able to make a translation of section A in an automated way Therefore, before you make a translated version of any page, you should first make translated version(s) of any/all of its parent sections (If you make a mistake, you can always make a section afterwards and move the page into it by dragging and dropping in menu )

If the English menu is re-arranged, or English pages or sections ♦are moved or re-arranged, the Spanish and Chinese pages need to be manually adjusted to match

Making a translationYou can make a translation of anything (page, sidebar, etc ) that displays in the left-hand admin menu by opening it, then clicking the Spanish or Chinese button at the top of the page Next, click Create translation

Unlinking

You may see this option, de-pending on your access level It’s strongly recommended that you never “unlink” cous-in pages, or make pages in Spanish or Chinese that do not have a parallel English page

45


Accessing a translationIf a translated version of the page already exists, you can access it by opening the English page, then clicking the Spanish or Chinese button

Note that if a translation already exists, those buttons are green

It’s also possible to access Spanish and Chinese pages using the left-hand admin menu, by opening the Spanish and Chinese folders at the bottom of the menu If you use this method, take care not to create new translations here, but to do so following the method on page 44

Files (PDFs, Word docs, etc.) in Spanish and Chinese are stored in the same folders as the English versions We recommend consistently applying the following naming convention:

exactly the same file name as the English version, then ♦

add -SP or -CH at the end of the file name ♦

Work in progressIf a translation is in progress, needs to be reviewed by others, or is already live and needs to be temporarily hidden, just unpublish the page the same way you would any other page (Uncheck the Published checkbox under the Create/Edit Document tab )

This will allow staff to review, edit, save, etc , while keeping it off of the public site

Unpublishing also removes the automatic links (from main menu and from cousin pages) Publishing will re-insert those links

46

Part 8: Advanced

47


Drop-down menusDropdown menus (How do I, Quick Links, etc ) use code (html), so Web Developers can update them To edit the options in the dropdown menus, go to the Elements tab Open Chunks > Forms, and choose the dropdown menu you’d like to edit

CSS & javascriptTo edit CSS or javascript, download and upload individual stylesheets via FTP Stylesheets are located in /assets/css subfolder; javascript in the /assets/js subfolder

Modx documentationFor full modx documentation, visit http://rtfm modx com/display/revolution20/ You can also find links to the Support Forum and more at modxcms com

48

Part 9: Problems & Solutions

49


I can’t copy and paste! This only affects some people, and only happens when using the mouse Try using Ctrl +V to paste instead

When I paste content into a page, it doesn’t look right. Try highlighting the text, and then clicking the eraser icon to remove formatting

You can also clear out formatting by pasting into Notepad first, then copying and pasting from Notepad (You’ll probably find this program in Start > Programs > Accessories)

I’m trying to make a heading, but the style just seems to seems to spread to all of the surrounding text.This means you have soft breaks between paragraphs and headings, rather than hard returns To fix it, delete all of the space between para-graphs Then, hit the Enter key to insert hard returns

I made a quote and styled it by clicking the quote button, but it doesn’t look styled on the website, even after I saved my work and then refreshed the public page.The style requires that there be a paragraph tag inside the blockquote tag, and that the person’s name be in a paragraph tag outside the block-quote This usually happens by itself If not, a web developer can adjust the code for you There also can’t be extra spaces in the html (For web developer reference, the code should look like: <blockquote><p>“)

I really want to do some fancy customization and have more fun with fonts on my pages. Why doesn’t the CMS let me do this?It’s not because the CMS is not advanced enough to allow font ma-nipulation Most font formatting options (other than bold, italic, and pre-set heading styles) were intentionally removed from the interface This helps ensure a consistent look and feel across all pages and sec-tions of the site Otherwise, if everyone could do their own thing, over time it would result in some pages with big text, some small, and there would be a lot of different colors and fonts basically, too many dif-ferent looks and styles

Later, if the decision is made to change styles, all pages can be changed at one time with a few edits to the stylesheets

I’d like to center my text. Why isn’t there a button for this?Centered text, although it may feel special, is actually a lot harder to read than left-aligned text, especially on web pages One of the consis-tent rules applied across the entire website is that text is left-aligned

I have an image that’s aligned to one side, but now other images or text slide up next to it, and it looks funny.Select the text that you want to move down past the image Then select move-below-image from the Styles dropdown menu

I want an image to be linked and also to align left or right. It doesn’t seem to work.The order in which you do the steps affects the code that’s generated To fix the problem, do the steps in a different order First, apply the alignment style Then apply the link

50 | Part 9: Problems & Solutions

I really want to insert a table in a page. Why can’t I?One of the web developers can insert a table for you if one is needed Ta-bles should only be inserted for the purpose of holding tabular data, such as a list of dates with corresponding locations, or a list of schools with corresponding statistics — basically, information that comes in “sets”

Tables should not be used to create layout columns, insert break-out boxes, or style a page in any way There are many reasons this practice is no longer acceptable, including accessibility

Once you have a table in your page, you’ll see little icons in the inter-face that will allow you to add and remove columns

I accessed the html window in the editor, and now everything in the WYSIWYG editor is spread out and funny-looking. This doesn’t actually affect the code or the page display on public site, although it is annoying It seems to be a bug that is only triggered in Firefox The solution is to save the page once you’re done editing html Then reload it if you want to do WYSIWYG editing again; it’ll look normal when you reload

I made a new page, but it doesn’t show up on the site. Make sure you have the Published checkbox checked (You’ll find this under the Create/Edit Document tab)

If you already had it checked, try refreshing the public webpage If that doesn’t work, ask a web developer to clear site cache (under Site in main menu)

A page has that little arrow in the menu, even though it doesn’t have any subpages. Admin must edit that section, choose Page Settings tab, and then un-check the Container checkbox

I made a new section with subpages, but it doesn’t have that little arrow in the menu that other sections have. Admin must edit that section, choose Page Settings tab, and then check the Container checkbox

I deleted a page but later changed my mind. So I undeleted it, but when I edit and re-save, it shows as deleted again.Uncheck the Deleted checkbox under Page Settings tab and re-save

The page I want to edit says it’s locked by someone else, but that person isn’t editing it anymore.If you both logout and log back in, the problem should clear itself

Assorted problems with News sections: I inserted a new News item, and now it shows up in the main menu, plus the main News link doesn’t work! Or, something else strange happens with the links.Check the box that reads hide from menu on the Create/Edit tab of the parent year folder Uncheck the container box under Page Settings tab of the parent year folder

51


Part 10: Tips & Best Practices

52 | Part 10: Tips & Best Practices

Resist the urge to place content as a top-level item in the menu just because it’s a hot item, sensitive, critical, super-important, etc. It may seem like adding it as a main link will help people notice it But the truth is that the more items that display in the menu (in its collapsed state), the harder it is for visitors to find what they want. Research shows that users will actually find content more easily when pages and subsections are grouped logically and filed under appropriate main-level headings

Remember that if something needs extra promotion, you can advertise it in Parent/Student sidebar that appears on almost every page; Com-munity sidebar; home page, or Quick Links It could also be made the Sitewide Promotion Or, you could add a blurb about it as a Hot Topic item (that then points to the page for full info)

Create content where it will live forever, not where you want it to show for right now. Remember that you can add a link to it from any other page, so when you’re deciding where to add new content, create it where it really “lives” and belongs Then, just link to it from other places that are related

For instance: If there’s a new initiative, the page about it shouldn’t be created under Hot Topics, even if it’s a really hot topic Instead, it should be created under Initiatives in the About SFUSD section, because that’s its logical permanent home Then, you can add an intro blurb about it as a Hot Topics item (The intro blurb then links to it ) You can still add a link from the Parents or Community sidebars

Another example: You want to create a Spotlight item featuring the new placement policy Rather than post all of the info about the policy within the Spotlight article, you can create a Placement Policy page un-der the Enroll in SFUSD section, because that’s where the Placement Policy info will “live” forever Then, you can create a Spotlight item with a brief teaser, or the perhaps the time-sensitive portion of the info (such as, “The Board voted this week…”) Then, you add a link at the end of your teaser that’ll take people to the Placement Policy page to read the full details

Before linking to a PDF, ask whether that content should really be a web page instead. PDFs are great for some things like forms or of-ficial documents But real web pages are much more user-friendly than multiple PDFs for regular content

Use meaningful link text. Avoid using “click here”, such as “click here for Placement Policy” Instead, use the destination as the text for the link, such as just “Placement Policy” Or, if you want it in sentence form, you can say something like “Read more about the Placement Policy ”

Check the live page after you make an update. Make sure it looks right, make sure the links work, etc Even the experts who edit web-sites every day have to do this (every time!)

53


Don’t type in ALL CAPS, and use bold sparingly. Web visitors don’t wants to feel like they’re in trouble when they visit the website Ad-ditionally, headings typed in ALL CAPS actually break the defined styles created for the website Visitors should see headings styled ex-actly the same way on every single page of the website, because that’s part of the consistent look and feel

Keep accessibility in mind. These items will help keep the website content accessible:

Always enter meaningful text in the “alt” field when you insert an ♦

image This text should describe exactly what you see For instance “photo of two girls talking on the stairs”, or “cover of the enroll-ment guide” Don’t insert Flash, because Flash content is not accessible to all ♦

Don’t insert text in an image Again, the text will not be accessible ♦

to all Only text that is typed directly is accessible Don’t insert new font styling on a page, even if you can figure out ♦

how to work around the system (Only web developers should do this They can apply it sitewide and ensure that it’s done in an ac-cessible way, including good contrast )Ensure your code is structurally/semantically correct Most of this ♦

is up to the Web Developers But for basic webpage editing, this just means using heading styles and bullet lists appropriately: > Don’t apply a heading just to make something stand out Use headings to illustrate the outline of the content on the page, nest-ing each heading level accordingly So if a page has three main parts, each has a Heading 2 as it’s heading Then, if those three parts each of subparts, they should be Heading 3 > If you’re inserting a list, use the list buttons to style automati-cally, rather than inserting your own dingbats or numbers Don’t insert tables to style a page, create columns, or change ♦

layout Do insert tables for data or sets of info Do use row and column header tags as appropriate (Web Developers)Ensure the site still works and all components are accessible with- ♦

out javascript (again, this probably affects only Web Developers) If forms are added, ensure that they can be completed with assis- ♦

tive technologies

Don’t add pages more than two levels deep in menu, if it can be avoided. Groups and subgroups are good, but having to drill down too far isn’t user-friendly (If it’s determined that additional levels really are needed in the future, some small CSS tweaks may be needed to style that level of the menu )

Prepared by The Grossbauer Group www meetGG com February 2011

website manager guide

Documents

new page

page sidebar editors

pagespecific sidebar

page image

section sidebars

sidebars sitewide promotion

audience sidebars

new sitewide promotion