Overview 3. User ID and Password 4. CMS Login Page 4. CMS Components 4. Responsive Website 5. The Admin Screen 5. Folder Structure 5

Transcription

1 Page 1 of 36 Content Overview 3 User ID and Password 4 CMS Login Page 4 CMS Components 4 Responsive Website 5 The Admin Screen 5 Folder Structure 5 Publish Status of a Page or File 6 Create a Folder 6 Create a New Page 6 Landing (Home) Page 8 Images and Files 8 The Global Folder 8 Upload Files 8 Files in dotcms 10 Updating File Assets PDFs and Other Non Legacy Files 10 Working with Page Content 12 Message Area [3] 13 The Task Pane 13 Locking and Unlocking 14 Adding New Content 15 Editing Content 16 Reusing Content 17

2 Page 2 of 36 History 19 Content Structures 19 Department Footer 22 The WYSIWYG Box 23 Inserting Links 23 Linking Files 24 Images 25 Images in a Responsive Site 25 The Navigation Bar 25 Show Page on the Menu 25 Menu Link (Link to an Outside Webpage or File on your Menu) 26 Reorder Navigation Items 27 Log Out 28 Best Practices 28 Copy and Paste 28 Links 30 Naming Conventions 31 Naming a Folder 31 Naming an HTML Page 32 URL Names 32 Naming Contentlets 33 Naming Non HTML Files 33 Responsive/Mobile Considerations 34 Images 34 Tables 34

3 Page 3 of 36 Stacking order 35 Text Formatting 35 Scannability and Visual Variety 35 Headings and Emphasis 36 Alignment 36

4 Page 4 of 36 Overview A content management system (CMS) is a web application designed to make it easier for users to add, edit and manage a website. The CMS takes care of a lot of the "behind the scenes" work. The user can therefore concentrate and focus on the content of the pages, not just how the page looks. The workshop CMS for New Web Content Editors is targeted at new web content editors who wish to maintain their department's web presence. User ID and Password All web content editors are issued a unique User ID and password (all lowercase). Do not allow anyone else to use this User ID and password. If another person in your department will be sharing content editor duties, a separate User ID and Password will be provided to them on request. CMS Login Page 1. Open a web browser and navigate to 2. Type your User ID and Password in the corresponding boxes. Do not check the Remember Me box it tends to cause problems. 3. Click the button. DotCMS opens to the Site Browser admin window. CMS Components The CMS assembles web pages from components stored in a powerful database: Templates provide a framework for the structure of the page and Marywood University website branding. Containers areas on a template where content can be added. A web page usually has several containers. Contentlets (or Content) individual chunks of text and/or images that are placed in containers and which can be used on one or more web pages. If a contentlet is reused on multiple pages, updating one instance of the contentlet will update all places where it is displayed on the website. A container may contain more than one contentlet, and the contentlets can be moved up or down (reordered) within a container. Content Structures used to organize structured content, e.g., staff profiles with name, title, phone number, e mail addresses, etc. Web page content in generated from the structured content using programming code.

5 Page 5 of 36 Responsive Website Our website is responsive, which means the layout and/or content responds (or, adapts) based on the size of the screen it s presented on. A responsive website automatically changes to fit the device you re reading it on. This includes desktop and laptop computers, ipads and tablets, Kindles, iphones, Android phones, etc. Because our website works on so many devices, there are some challenges to make the content look nice on all screen sizes. More information on this can be found in the Responsive/Mobile Considerations section of this document under Best Practices.. The Admin Screen Folder Structure Your department folder (as well as a global folder) is located on/below the host (server) in the left pane. This folder contains all of your web pages and related files (pictures, documents, etc.). Click on the department folder to expand it and see the subfolders and contents of each (in the right pane). Naming conventions and file organization procedures are covered in the Best Practices section of this docuement and on the web development website at marywood.edu/web/content editors/guidelines/naming conventions.html. It s important to read these over before you get started.

6 Page 6 of 36 Publish Status of a Page or File When the Status column shows a green dot, the file has been published. A yellow dot means it has not yet been published. If both a yellow and a green dot display, you have made changes to existing content, but clicked Save instead of Save and Publish, so the older content is live on the site and the newer content is not yet public. You can quickly publish a file by right clicking the name and choosing Publish from the pop up menu. Create a Folder Folders can be used to house files (photos, documents) or secondary web pages. 1. In the Site Browser admin window, click the drop down arrow next to the button. 2. Select. 3. The Edit Folder page displays. 4. Type the name of the folder in the Title textbox. This name appears on the navigation bar (if you choose to place it there). 5. Tap the [TAB] key and the Name (URL) textbox will automatically populate. 6. If the folder name is to be added to the site menu (navigation bar), check the box, 7. Click the button. 8. Click the subfolder to begin using and saving files into it. Create a New Page 1. In the Site Browser admin window, click the drop down arrow next to the button. 2. Select.

7 Page 7 of Select the type of page on the Add HTML Page dialog box: Page Asset. Click + Select. 4. The Add/Edit Page Asset screen displays. 5. Type a name in the Page/Menu Title. This name appears on the navigation bar (if you choose to place it there) as well as in the title bar of a web browser window. 6. Tap the [TAB] key. 7. The Page URL will automatically populate, but you need to add.html at the end of the URL. You must change this to index.html if this is the home page and will be saved in a subfolder. If you are following along with this tutorial, change the name of the page url to index.html 8. Decide whether to Show on Menu (the navigation bar) by checking or unchecking the corresponding box. If you named your page index, leave the show on menu box unchecked. 9. Type a longer, more descriptive name for the web page in the Friendly Name text box. You should precede the name with your department name followed by a colon or hyphen. This is what Google and other search engines search for. This name will also appear at the top of the web page. 10. Choose a Template from the drop down list. 11. Click the button. 12. The page will display in preview mode. 13. Click the button.

8 Page 8 of Click the button to enter content in one or more of the containers. 15. See the Working with Page Content section for details about adding new content or reusing old content. 16. Click button. 17. Click the button in the left column task pane to get back to the Admin Screen Landing (Home) Page The main page of your web site is known as the landing (home) page. It must be saved in the department folder with the name index. Also, each sub folder that was created to house subsection web pages must also have an index page. See the Create a Folder section for more information about this. Please note that smaller web sites may have all of their pages are saved in the top level department folder. Images and Files The Global Folder Every content editor has access to the global folder, which contains many stock images of Marywood classrooms, buildings, and campus. These images are updated frequently and can be used on your webpage. Browse items in the global folder by visiting Upload Files One or more files can be uploaded to the CMS. 1. Click on the folder (or subfolder) where the files will be uploaded. 2. In the Site Browser admin window, click the drop down arrow next to the button.

9 Page 9 of If you have only one image of file to upload, select the button a. Select File Asset from the Add File dialog box. b. On the Add/Edit File Asset screen, click the Choose File button. c. Navigate to the file on your computer and click Open. (Be sure the filename contains only letters, numbers, hyphens and underscores. See the section on Naming Conventions in Best Practices for more information.) d. Click the button 4. If you have more than one image of file to upload select the button. a. Select File Asset from the Add File dialog box. b. S elect the file(s) to upload, navigate on your computer to the files, and select them. (Be sure the filename contains only letters, numbers, hyphens and underscores. See the section on Naming Conventions in Best Practices for more information.) c. d. Click the button.

10 Page 10 of 36 Files in dotcms An update to dotcms in June 2015 introduced a new system for handling files ( File Assets ). Files uploaded to the system before June 8, 2015, are called Legacy Files and they are not in the new handling system. For the most part, these files will continue to function as they have in the past. When they need to be updated or replaced, however, they should be deleted and replaced and any links to those files should be remade. Updating File Assets -- PDFs and Other Non-Legacy Files We've all been there. A new academic year means having to update the forms on your website. This process can be a hassle sometimes. You have to remember where you stored the form, where you linked to the form (often times this can be in many locations), and you have to make all of those changes to your website. 1. From the Admin screen, navigate to the PDF (or Word Document or image) you want to update. Usually it will be in a folder named for the type of files it contains (docs, images, pdfs, etc.). 2. Double click on the name of the file to bring up the properties box, which looks like this: Legacy You must delete this document, upload the new file and relink it. Happily, you will only have to do this once since the new file will be a File Asset. File Asset

11 Page 11 of For File Assets, click the button. 4. For File Assets, click the button in the File Asset section. 5. Click the button that appears. This will allow you to browse your computer to find the new, updated file. 6. Hit the button to update your file. Because this process removes the original file, you can replace a file of one type (e.g., pdf) with a file of another type. Links made to the original file will now link to the new one. File Assets have a history tab, so if you accidentally overwrite your file, double click on it and go to the history tab. To get back your old file, click the "Bring Back" text next to the old file Tips are available here: marywood.edu/web/content editors/tutorials/updating pdfs.html.

12 Page 12 of 36 Working with Page Content From the Site Browser admin window, double click the index.html page in your department folder to open it in preview mode. Click to enter the edit mode [1].

13 Page 13 of 36 Message Area [3] At the top of the page you will see a colored message area containing updates from the Web Team. Please check it when you log into the CMS. There is also a reporting button in this area. At any time while you are logged into the site and you see an error, you can type a quick message in the box and hit the red Report This Page button to e mail us about the problem. It will send us the page information and your e mail address automatically so you don t have to type it out. T he Task Pane A Task Pane displays on the left side of the window of the page you are editing. This pane includes various options: A. Edit, Preview, and Live modes. You will need to be in edit mode to make changes to your page. Note: you must Lock for Editing to have access to the Edit tab. B. Lock for Editing and Release Lock toggle. You must Lock for Editing before you can edit the page. Release Lock when you are done. C. Publish Page: Use to publish all changes on your page at once D. Add to Bundle. Marywood s website does not use this feature. E. Page Properties Change the Page/Menu Title, Page URL, show/hide from menu, change the Page Friendly Name and designate the Template, F. Page Statistics: We use Google Analytics to track page statistics for our website so these stats do not track anything. Contact the web team if you are interested in site statistics. G. Create a new page from this menu button H. Language Selector: Our site is not multilingual, so we use the default, English I. Takes you back to the Admin Screen J. Clicking on this bar will minimize the panel so you have more room to work. Clicking it again will open it back up. K. This button will log you out of the CMS

14 Page 14 of 36 Locking and Unlocking Content locking is in place to prevent more than one person from editing the same page or piece of content at the same time. t. Locked content will show a lock icon when it is listed in the backend. You will be required to Lock for Editing in two places: before you begin to edit a page and before you can make changes to any particular contentlet. It will actually be possible to make changes to an unlocked contentlet, but you will need to lock it before you will be able to save those changes. You are advised to lock before you begin editing, especially if another editor has access to the same content. When you save and publish your content, the content lock is released. It is not released if you simply save or cancel editing. It is important to release the lock when you are done with a piece of content and/or page. Publishing content does not release the lock on the page. That has to be done separately. Only you or an administrator can release the lock on content that you have left locked. Another editor in your department will not be able to unlock content that you have left locked. Contact the Web Development Office if you encounter locked content that you need to be able to edit.

15 Page 15 of 36 Adding New Content Containers All web pages consist of two or more containers. These containers may be empty or contain text, graphics and/or links. If there is no content in the right column container, the content from the center container will span the entire width of the screen. This can be seen by clicking on the Preview or Live tabs in the Task Pane. You can add new content to any empty container. You can also add one or more contentlets to a container with existing content (e.g., above or below coded content or a piece of content used in more than one place). 1. Select the container where you want to add content and click its button. 2. Select. 3. Enter a name for the contentlet in the Title text box. This name is important to remember because content can be used in other areas of the CMS and you will need to be able to find it. It is also important to use a consistent naming convention for all of your contentlets. For example, the Social Sciences department uses the token SocSci before their contentlet title because Contentlets for the entire website are saved in the same database. Labeling yours with your office name first makes them easier to find. UNIQUE office token name, then page name: SocSci Research and Resources

16 Page 16 of Enter your content directly in the WYSIWYG editor, using any of the buttons on its toolbar. 5. Click the button when finished. 6. You are returned to the edit mode of the web page. 7. If you want to reorder the way the contentlets are displayed in a container, use the buttons in the upper right corner of the contentlet to move it up or down. Then use the button on the left side toolbar to publish the page and make it live. 8. Click the button before you leave the page. It will return you to the Preview mode. 9. Click the button to return to the Site Browser admin window. Editing Content Containers that already hold text also display the button when in the Edit mode. 1. Locate the container that has the text that needs to be updated. 2. Click the button. 3. The Add/Edit Web Page Content page displays with the Content tab active. 4. Click. Note: This must be done before you can save changes. It is possible to edit first, but you must lock before you can save any changes. 5. The Title text box contains the name of the contentlet. This name is important to remember because content can be used in other areas of the CMS. It is also important to use a consistent naming convention (office name then page name) for all of your containers. This Title is only used to store the content. It does not display on the web page.

17 Page 17 of Make your changes directly in the WYSIWYG editor, using any of the features on its toolbar. 7. Click the button when finished. Note: saves, but does not publish, your current changes, keeps you on the same edit page, and does not release the lock. abandons any changes you made, returns to the page in edit mode, and does not change the lock status. 8. You are returned to the edit mode of the web page. 9. Click the button to return to the Site Browser admin window. NOTE: Some content is created using specialized code that pulls information from content structures. If the Edit Content button is missing the pencil icon and you are unable to click on it, it s likely that the contentlet you are trying to edit contains structured content or code. Scroll down the page a little bit to see if there is a message from the Web Team telling you what to do. Usually you will see a message, and/or individual edit buttons to the right next to each piece of content. For more information see the Structured Content section of this document. Reusing Content If you know the name of a contentlet or other identifying information, it can be used elsewhere on the CMS. You can find the name of the contentlet by clicking and looking at the Title. 1. Click the button in a container.

18 Page 18 of Select. 3. In the Search: Web Page Content window, type a search term in the Title text box. Alternatively, you can search for a keyword that is in the body of the content. TIP: Leave the search box empty to find the most recently used contentlets (by anyone in the University). This can help you find a recently edited or accidentally deleted piece of content. 4. Click the button. 5. Matching results will display. 6. Click the corresponding button. 7. The content will be placed in the container. You may have to use the arrow keys mentioned earlier to adjust the order of contentlets in the container. NOTE : If you edit text that has been reused, it is updated on every web page where it appears. Check the References tab to the pages on which a particular contentlet has been reused.

19 Page 19 of 36 History The CMS tracks all of the different versions for all of the contentlets on your pages. A new version is created each time a change is made and saved. In an emergency, or if you change your mind, you can go back to a previous version. 1. Locate the contentlet. 2. Click the button. 3. Click the History tab. A list of all the versions of the contentlet will display. Click on the title to see what a particular version looks like. 4. Select for the version you want. 5. Click on the dialog box that appears asking if you are sure you want to bring back the older version. Content Structures Some web pages in your site may be created by pulling content from customized content structures. These are used when the content on a page follows a particular pattern. For example, staff profiles might contain names, titles, phone numbers, e mail addresses and other department specific information. This information is entered and maintained by category using a back end form. Specialized programming code is used to pull the information from the content structure and format it on a web page. Content using code is usually labeled with a message that will tell you how to edit the content, as shown in the example to the right.

20 In this example: Page 20 of Click the red button to add a new staff member to the page. 2. You ll notice the main contentlet is missing the pencil from the button. This means that we locked that container so you don t accidently edit the code that makes the content structure work. Instead, read the message and use the pencils to the RIGHT of each staff entry. buttons with the 3. Fill in the fields and make any changes to the entry. The Sort Name field is very common in our structures. This is used to alphabetize the entries. For example, Mark Pitely would typically have a name of Mark Pitely but a Sort Name of pitely to organize him on the page alphabetically. However, if Mark is a Director or Program Coordinator you may want him at the top of the list, so you can put a sort name of aa or 01 in that field to bump him to the top of the staff list alphabetically. 4. When you are done hit the button. 5. To remove the staff member from the page just hit the button. This will UNPUBLISH that person s listing, not delete them. You can always put them back later.

21 To Publish an Entry Previously Removed from the Page, or to Mass Publish/Unpublish Entries from a Structure Page 21 of Return to the Web Browser Admin Screen and click on the Tab. 2. Use the Type drop down menu to select the content structure you wish to edit (The message on the page will usually note the name of the content structure). A table of entries will display in the right panel. A search function will appear in the left panel. 3. Locate the entry you wish to edit and click on it to open, lock it for editing, and edit it. 4. Save or Save/Publish as you would a web page. Release the lock if you did not publish.

22 Page 22 of To remove an entry, click the checkbox next to the entry and click the checkbox next to it. Then click the button. The green light will turn off and the yellow light will turn on to indicate that the content is no longer live. To remove the entry from the listing, select it again and click the button. You may select and unpublish or archive several entries at one time by selecting more than one checkbox. More information about structured content is available here: editors/tutorials/structures/ Department Footer We have implemented a standard department footer format throughout the website. This provides our users with consistent department contact information throughout the site and synchronizes this information in other places on the site. The same contact information in your department footer is being used to generate the Department/Office Directory ( marywood.edu/about/offices ) and to provide contact information in our Virtual Tour ( marywood.edu/virtual_tour ) and in other areas of the site. If you have social media links, they are automatically synched with our Social Media Directory ( marywood.edu/social ). This format has three parts: 1. 2 Line Standard format for Department Contact information (Name, Location, Phone, Fax, and ) 2. Optional WYSIWYG for any additional information 3. Optional inclusion of social media icons

23 Page 23 of 36 When you are logged into the CMS you will see the familiar Edit Content button on the right side of your footer. That button will take you to a form where this information is managed. On it, you will notice two fields for e mail. One for the e mail address to be displayed in the footer (usually the department web editor) and the other is for the official department e mail address which is listed in the Department /Office Directory. Now, when you update any of this information for your website, it will automatically be updated in the Office/Department Directory and in other places on the website where we list this information. Any information you want to add to your footer after the standard information should be added in the optional WSYWYG field labeled Footer Line 2. The information in this box will be automatically centered under the first two lines. At the bottom of the footer form, we have optional fields for any social media links you may have as well. When you add or edit these, besides placing the appropriate social media icons in your footer, those same links will appear in our Social Media Directory ( ). The WYSIWYG Box Inserting Links E mail 1. Highlight the e mail address. 2. Click the button in the WYSIWYG editor. 3. The Insert/edit link window opens.

24 Page 24 of In the Link URL text box type mailto: followed by the address (no spaces). 5. Click the button. To Another Page on Your Website 1. Highlight the word(s) you will link. To An External Website 1. Highlight the word(s) you will link. 2. Click the button in the WYSIWYG editor the Insert/edit link window opens. 3. Click the button next to the Link URL text box. 4. Locate the file that you want to link to and select it. 2. Click the button in the WYSIWYG editor the Insert/edit link window opens. 3. In the Link URL text box type followed by the web address (no spaces). 4. Click the button. 5. Click the button Linking Files 1. If you have not already done so, upload the file to the appropriate folder before opening the contentlet for editing. See the section on Images and Files for more information. 2. Highlight the text that will become the link to the file. 3. Click the button in the WYSIWYG editor the Insert/edit link window opens. 4. To the right of the Link URL text box, click the button. 5. Locate and choose the file. 6. Click the button.

25 Page 25 of 36 Images Images in a Responsive Site There is a big difference between the way an image displays on a desktop computer and on a smartphone. A responsive site, such as ours, is designed to resize and reposition content according to the device on which it is viewed. Traditional methods for placing images on web pages do not work well on mobile devices. While the Web Development Office is working on methods that will give all department content editors the ability to add images to their pages, for now, proper image placement requires a moderate level of skill and an ability to tweak HTML code. Because of this, we ask editors who have not been trained to do so to upload the images you wish to have placed on your pages to an appropriate folder and to contact our office to have them professionally placed on the page for you. For uploading directions, see the Upload Files section earlier in this document. For training with image placement, contact the Web Development Office. The Navigation Bar The web content editor decides which department web pages and other related Marywood web pages should appear on the navigation bar. These pages can also be reordered. Show Page on the Menu 1. From the Site Browser admin window, RIGHT click on a web page. 2. Left click on. 3. The Add/Edit HTML Page window displays. 4. Click 5. Check. This is not checked by default. 6. Click the button.

26 Page 26 of 36 Menu Link (Link to an Outside Webpage or File on your Menu) 1. In the Site Browser admin window, click the drop down arrow next to the button. 2. Select. 3. The Edit Link window displays. 4. In the Title text box, type the name of the link. 5. For an outside webpage: 6. For a file: a. Choose as the type of link (radio button). b. Pull down the menu on the first box and select the prefix (usually c. Type (or paste) the URL into the corresponding text box be sure you don t duplicate the prefix when you paste. a. Be sure that the file is already uploaded to an appropriate folder. See the Images and Files section for more information. b. Choose as the type of link (radio button). c. Click the button and browse to the file. 7. Check. It is not checked by default 8. Click the button.

27 Page 27 of 36 Reorder Navigation Items 1. In the Admin Screen, double click any of your.html files to open it in preview mode. 2. Click 3. Locate and click at the top of the Navigation Bar. 4. The Reorder Menu Items window displays. 5. Click and drag items into the order you wish you will see the move cursor appear next to the menu items. 6. Click the button.

28 Page 28 of 36 Log Out There are two ways to log out of the CMS. 1. Click the button on the task pane when in edit mode. 2. In the Site Browser admin window, click on your name in the upper right corner of the window, then click on the logout button. Best Practices Technical knowledge is only part of what you need to know to make a good website. Many factors work together to make your site informative, attractive and easy to navigate and use. The following guidelines will help you to shape and manage your site according to industry and Marywood best practices. Copy and Paste Sometimes the information you want to include on your website has been already composed in another document (Word, , etc.). Copying and pasting it from the original document into the CMS will save a lot of time and eliminate typographical errors that occur if you try to retype it. Be aware that other applications use different methods to format text that might not be compatible with, or interfere with, the way that the CMS and Marywood s website styling is supposed to work. The best way to avoid that issue, is to filter the information through a simple text editor before pasting it into the CMS. On Windows computers, Notepad is a simple text editor. Find it by going to the Start menu, select All Programs, then Accessories, and finally Notepad. Copy the original text from your source document

29 Page 29 of 36 Paste the text into Notepad. Select and copy the text you pasted in Notepad switch to the CMS and paste it into your WYSIWYG editor It is not necessary to save it in Notepad, simply pasting it there removes the background styling code that causes interference. After pasting in the CMS, look over the text and fix any formatting lost or changed in the process. Look especially at paragraph spacing, section headings, text formatting like bold and italic, and how lists are handled. Paragraph spacing is often affected. You may have either no spacing between paragraphs or too much space between them. Fix too much spacing by clicking in the space and deleting the extra space. If there are no spaces between paragraphs, paragraph breaks have been replaced with line breaks. Place your cursor at the beginning of a paragraph, hit the backspace key on your keyboard to eliminate the line break and then hit the Enter key to add a paragraph break. Section Headings should usually be formatted using HTML headings. See the section on Headings and Emphasis below. Text formatting like bold and italic may need to be reinserted. Underlining is discouraged on HTML pages (seen the Headings and Emphasis section below) so bold and/or italic should be substituted. Finally, superscripts and subscripts may need to be reformatted. Bulleted or numbered lists will also need attention. Bulleted lists may copy with bullets apparently intact, but with the text not hanging properly. A similar effect occurs with numbered lists, the numbers copy over, but, again, the text does not hang properly. In these cases, the bullets or numbers are copied over as simple text characters rather than as list elements. Here is an example of a bulleted list that needs to be reformatted: Bulleted lists may copy with bullets apparently intact, but with the text not hanging properly. A similar effect occurs with numbered lists, the numbers copy over, but, again, the text does not hang properly. In these cases, the bullets or numbers are copied over as simple text characters rather than as list elements. Notice how the 2nd and 3rd lines do not hang properly. That s because the bullets are just characters.

30 Page 30 of 36 To fix it, put your cursor in front of the first point and click the bulleted list button in the editor toolbar. Bulleted lists may copy with bullets apparently intact, but with the text not hanging properly. A similar effect occurs with numbered lists, the numbers copy over, but, again, the text does not hang properly. In these cases, the bullets or numbers are copied over as simple text characters rather than as list elements. One real bullet appears and the whole list moves as a block to hang below it. Put your cursor in front of the first work of the first bullet and use the backspace key to delete the bullet and any spaced between it and that first word. Then put your cursor in front of the first work of the next bullet and backspace until there is no space between end of the previous line, then use the enter key to bring the text down and create the second bullet. Repeat for each item in the list. In the end you will have a properly formatted HTML list. Bulleted lists may copy with bullets apparently intact, but with the text not hanging properly. A similar effect occurs with numbered lists, the numbers copy over, but, again, the text does not hang properly. In these cases, the bullets or numbers are copied over as simple text characters rather than as list elements. Links The main goal in creating links on web pages is to help our users find the information they are looking for in the most efficient manner possible. Avoid Click Here Links Many users scan pages, looking for specific information. You cannot count on them reading every single word. Links, because they are in a different color and are underlined, stand out from the rest of the text. Therefore, the words in the link should tell the user where the link is going. Words like click here do not give any information about what information is behind the link. Bad Link: Find free books at Project Gutenberg by clicking here. Good Link: Find free books at Project Gutenberg

31 Page 31 of 36 Avoid Exposed Links It is rarely necessary for the user to see the URL of a link. Users are interested in information. Links should be on words that are meaningful to people, not to URLs that are meant for machines. Bad Link: Learn more about our program in Biology at Good LInk: Learn more about our program in Biology. Create Links on Addresses Usability experts dictate that links on names should go to information about the person a biography or profile. links should be on addresses. An link on a name or other words can be very ambiguous. An address in the one kind of link that should be exposed. Bad Link: For more information, contact Joe Smith Good Link: For more information, contact Joe Smith at joesmith@mymail.com Reserve Underlining for Links For web users, underlining means links. Use other means for emphasis, like bold, italic or bold and italic, and avoid confusing people. Bad: All students must submit their health forms before using the gym. Good: All students must submit their health forms before using the gym. Naming Conventions It is important to consider how you name and place items in the CMS. You and others will need to locate them at some time in the future. You may need to replace files at a later date, other people may link to your information. Changing names and/or locations of information may cause broken links. It is helpful to understand how names are used in the CMS and on the Web. Naming a Folder There are two reasons for creating folders in the CMS: to create a subsection in your website that adds an accordion style section to your menu or to organize non html files like images or pdf files. Subsection Folders: The names of these folders appear in the sidebar menu and in the crumbtrail at the top of the page. Use a short, descriptive name (1, 2 or 3 words is usually best) that does not contain the name of your department or Marywood University. Use standard title capitalization in the name.

32 Page 32 of 36 Organizational Folders: Use these folders when you have more than two or three non html files like images or pdf files. The names of these folders do not appear in the site menu. Give these folders names that make it easy to identify the contents when viewing your site in the CMS backend. i mages, documents, pdfs, etc. make good folder names for these purposes. The CMS uses lowercase letters for all folder and file names. Naming an HTML Page There are several things to name when you create an HTML page. The first thing you do is give the page a Page/Menu Title. This is the name that will appear on the sidebar menu and in the crumbtrail for this page. Use a short, descriptive name (1, 2 or 3 words is usually best) that does not contain the name of your department or Marywood University. Use standard title capitalization. The page also has a Friendly Name. It is prefilled with the Page/Menu Name. The Friendly Name is used for the main heading on the page and is also used in search engine results, so it should include the name of the department/office (any page can be an entry page to your site). Click in the box containing the Friendly Name and edit it. For example, Page/Menu Title = Staff Directory, Friendly Name = Science Department Staff Directory. URL Names The CMS automatically fills in URL names based on the name you have given to a folder, an html page or a file. Usually, these are fine, but sometimes you may want to change them. If an html page is the landing page for the site or for a subsection (folder) of the site, it must have index.html for its URL name. When a user clicks on the folder name in the menu, the browser looks for a file named index.html. This is a standard across the Web. If the URL name the system generated is too long or you do not like it, you can change it. To change an URL name, click in the box and edit it. For example, you might want to change why you should study spanish.html to why spanish.html. Use only letters, numbers, hyphens and underscores in the URL name. Spaces and other symbols are not permitted will cause the page to be unable to be displayed. You must add.html at the end of the URL Name of a web page. It will not display without it.

33 Page 33 of 36 Naming Contentlets Each block of content (contentlet) you create for your pages needs a name. This name does not display to the user, it is only used for storage and retrieval of the information. All HTML contentlets from all departments are stored in the same place, so you need to name yours so that they can be distinguished from those of other departments. Use a department prefix for all of the content you create for your pages. For example, Fiscal Services uses fiscal as their prefix. Use your prefix as the first word in the name of all of your contentlets. For example, fiscal online forms. Then if you ever need to retrieve the contentlet, to put it on another page or if you accidentally delete it from the page, your online forms content will stand out from those of other departments when you search for it. Naming Non-HTML Files Non html files (images, pdf files, etc.) should be named and placed so that you will be able to find them later. Organizing images and departmental documents in appropriately named folders will help you to locate them when you want to link to them or to replace them. Digital cameras and smartphones give files obscure names like DX jpg. Rename them with more descriptive names before you upload them to the system. Document files are often updated/replaced as time goes on, so avoid using names that include a years or dates, designations as new, or similar labels. If you need these labels for organizing files on your computer, make a copy of the file without the labels before you upload to the CMS. E.g., instead of CSD Student Handbook updated.pdf use Student Handbook.pdf. By doing this, you can use the document replacement procedure. File names in the CMS only can contain letters, numbers, hyphens and underscores. No spaces or other characters can be used (no commas, periods, amperstands, etc.). If a file is uploaded that contains these, links made to the files will not work. Note that these files must be uploaded to the folder before you edit the page or structured content that links to or uses them.

34 Page 34 of 36 File names cannot be changed after you have uploaded the file. Be sure to name it properly before you upload it. You may, however, give it a more descriptive title in the file asset properties. Responsive/Mobile Considerations A responsive site, such as ours, is designed to resize and reposition content according to the device on which it is viewed. Images There is a big difference between the way an image displays on a desktop computer and on a smartphone. Traditional methods for placing images on web pages do not work well on mobile devices. While the Web Development Office is working on methods that will give all department content editors the ability to add images to their pages, for now, proper image placement requires a moderate level of skill and an ability to tweak HTML code. Because of this, we ask editors who have not been trained to do so to upload the images you wish to have placed on your pages to an appropriate folder and to contact our office to have them professionally placed on the page for you. For uploading directions, see the Upload Files section earlier in this document. For training with image placement, contact the Web Development Office. Tables Tables have been a great way to display complex information, but can be very difficult to view on small screens like phones. As a general rule, tables with more than three columns do not display well on mobile devices. If you are using one or more tables on your site, be sure to check it out on both large and small screens. Contact the Web Devlopment Office for assistance if needed. In some cases, we recommend an

35 Page 35 of 36 alternative to tables. At other times, we can introduce programming code to render the information in alternative formats depending on the device. Stacking order A responsive site, such as ours, resizes and repositions the information on a web page so that it can be easily viewed on the particular device that is being used. On the smallest screens (mobile phones) all content is arranged in a single column. The standard 3 column format that displays on desktop computers follows the following diagram when viewed on a mobile device: Text Formatting Reading text on a computer is more difficult than reading the same text on paper. Users seldom read pages that are dense with text. They usually scan the text, looking for specific information. Here are a few things you should be aware of to make your pages more usable for your readers. Scannability and Visual Variety Break your text into sections with meaningful headings. Use the Heading formats from the format menu in the WYSIWYG editor.

36 Page 36 of 36 Use bold, italic and bold & italic text judiciously to draw attention to important ideas. But remember, overuse of these elements dilutes their meaning. Use bulleted and numbered lists to highlight important points perhaps more than you would in ordinary writing. These elements, along with adding graphics to your text, break it up and give it more visual variety. They make the text easier to scan and read. Headings and Emphasis There are 6 levels of headings with Heading 1 being the largest. Heading 1 is used for the page title (Friendly Name) and, normally, should not be used again on the page. Use Heading 2 for the main section headings on your page, Heading 3 for the next level, and Heading 4 after that. Ordinarily, you should not skip heading levels. It is rare to use Headings 5 or 6. Headings stand alone on a line. You cannot put text that is not in the heading on the same line. Find Headings under the Format menu on the WYSIWYG editor toolbar. To add emphasis to your non heading text, use bold, italic or bold & italic. Avoid using underline (reserved for links, and they are automatically underlined) and ALL CAPITALS (that is considered to be yelling). Do not use headings for emphasis. They should only be used to define sections of your text. Alignment Use the right, left and center justification buttons on the WYSIWYG editor toolbar to align text as desired. Avoid using full justification which gives straight line edges on both the right and left of your text similar to the way books are printed. It may give the page a more pleasing look if you are not reading it, but the variances in spacing it causes between words actually makes it more difficult for you site visitors to read. Because screen reading is already more difficult than print reading, we should not be adding elements which make it more difficult.