Content managers may occasionally want to search for specific phrases within the content of their CMS website. To search your site for a specific phrase, follow these steps.

1. Log into the CMS and select the search icon in the main toolbar
   
2. Click on the Advanced dropdown menu
   
3. Open the Type dropdown menu
   
4. Select only the text-based files and/or assets options
   
5. Enter your search phrase in the Contains the Words textbox
   
6. If you chose only the text-based files option, you can select a specific Location (folder) in the CMS to search within.
   
7. Click the blue Apply button in the bottom right corner to see results.
   
8. To edit content, click on the blue Title link as outlined in the above example.

Continue Reading →

Redirects are important when webpage URLs change on your website. There are many reasons why this could happen:

1. your site’s root folder name may need to change because your department is going through a name change
2. you may change the name of a folder or subfolder
3. you may move a page, folder, or file
4. you may delete a page, folder, or file

When any of these actions occur, it is important that a proper redirect is put into place. This ensures that the old URL continues to work for any users who find it or have it saved.

Redirects help preserve the search engine rankings that you have built up over time and shows search engines that you responsibly manage your website. A failure to place or request proper redirects can leave your users frustrated with 404 errors and can cause your search engine rankings to plummet, making it harder to find your website moving forward.

Placing or Requesting Redirects

If your website is in OU Campus, the UMC web team will manage redirects for you. All we need are two pieces of information:

1. the old URL(s) (e.g.: https://www.mtu.edu/umc/services/web/)
2. the new URL(s) (e.g.: https://www.mtu.edu/umc/services/digital/)

If you are deleting content, you may not have a new URL. However, we can still redirect that content to something relevant (at a minimum, your homepage).

Email cmshelp@mtu.edu with the redirect information and we will place your redirects for you.

If your website is not in OU Campus, you may still be able to request a redirect through Central IT. Email your website, old URL, and now URL to ithelp@mtu.edu and they will let you know what they are able to do.

Continue Reading →

There are many instances when you need to display hours on your webpage—hours of operation, advisor walk-in hours, and learning center times to name a few. The following formatting recommendations and tips for displaying basic hours will make them easy to see and understand by both sighted users and anyone using a screen reader. Additional formatting information can be found in the University Editorial Guide.

• Use the boxed sidebar with an appropriate title.
• Use headings.*
  • The title is a heading 2, so start content headings with heading 3.
  • Make the days of the week a heading.
• Spell out the days of the week, do not use abbreviations.*
  • Days of the week should be singular.*
  • Use an En Dash (Alt + 0150 on Windows, option + – on Mac) for an inclusive range of days, such as “Tuesday–Thursday” meaning Tuesday, Wednesday, and Thursday.*
  • Use “and” for specific, individual days, such as “Tuesday and Thursday” meaning just those two days of the week.*
• Use a.m. and p.m. to specify times.*
  • Only list it once if the start and end times are both the same, such as 1–5 p.m. or 10 a.m.–5 p.m.*
  • Use an En Dash (Alt + 0150 on Windows, option + – on Mac) for an inclusive time range.*

*These tips also apply to hours information within the body of a page.

Continue Reading →

ALT tags (also known as alternative text, ALT text, or image descriptions) are an important factor in making your webpages accessible. This is also true for images used in your blog posts. Michigan Tech’s Accessible Technology Training Resources provides a training resource and guidelines for image ALT tags.

When uploading a new image to the Media Library, selecting an existing image from the library, or editing an image in the library or within a post, look for the “Alternative Text” or “Alt Text” field in the image details. Enter your text in that field.

This text is saved with the image and reused when that image is inserted into additional posts.

This text is not saved with the image and only used for the instance of the image you are editing.

Continue Reading →

It is important to use properly structured HTML headings when organizing your web content. Think of webpage headings as a table of contents for a story.

Headings are not required on webpages. However, they help break up and organize lengthy informational webpages—improving readability. Proper heading use is not only important for accessibility, it also has search engine optimization benefits, which can help your webpages rank higher in Google’s search results.

Heading Order

A webpage should only have one heading level 1 <h1>. Your page’s title is automatically the <h1> of the webpage, so you do not need to apply that heading level yourself.

Any headings used in your body copy (after your page title) with then be an <h2> or lower. In total you can use headings 2-6. At Michigan Tech, we recommend sticking to headings 2-5 as an <h6> is not typically needed.

Nesting Headings

If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an <h2> and you want to follow it with with a subheading, use an <h3>. If you follow that with a subheading of “equal weight”—use an <h3> again. A subhead of a subhead would be <h4>. Once you are done with subheadings, you can return to <h2>.

Please also keep in mind that sliders titles and sidebar titles are automatically <h2>s. If you choose to nest any headings inside a slider or sidebar, you should begin with the <h3> heading level.

Summary

Properly ordering your headings is important. You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. You can instead use bold, italics, or the options in the Styles dropdown like Large, Larger, Largest, Small, or Smaller to style paragraph text to look unique and stand out.

Creating Headings

To apply a heading style to a line of text, put your cursor inside of the line of text that you want to turn into a heading and then select a heading level from the left-most dropdown menu in the editor bar.

To learn more about creating special heading styles:

• H2 Graybar and H2 Top Title Snippets
• H2 Top Title w/More Links Snippet

Continue Reading →

The following tips are meant to help CMS liaisons with day-to-day maintenance of basic content on their websites.

Paste as Text

If you paste content from a document or email into OU Campus, you will likely get a bunch of bad code added behind the scenes that will effect how your webpage will look at function. To avoid issues, try clicking the “Paste as Text” button before pasting your content or use the Ctrl + Shift + V key combination.

The negative to pasting as text is that you will have to do some formatting manually (adding bold, adding links, etc). However, this will ensure that your website meets brand standards and works correctly on all devices.

Headings

It is important to use proper HTML headings instead of bold paragraphs or single lines of text. To apply a heading style to a line of text, put your cursor inside of the line of text and then select a heading level from the left-most dropdown menu in OU Campus. The same method working in other online applications, such as Google Docs.

Heading Order

Headings must follow a logical order to be compliant with web accessibility requirements. Your page’s title is automatically the H1 of the webpage. Any headings that you use should begin with H2. If you “nest” headings—in other words if you have a subheading of a heading—you should not skip heading levels. If you have an H2 and you want to follow it with with a subheading, use an H3. If you follow that with a subheading of “equal weight”—use an H3 again. A subhead of a subhead would be an H4. Once you are done with subheadings, you can return to the H2 level. For example:

Heading 2 Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 3 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 4 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Heading 2 Subheading Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam aliquam lorem dignissim, ultricies lacus quis, venenatis lacus. Suspendisse vitae malesuada velit, ut ullamcorper sem. Sed ut dignissim tortor. Nullam eu lectus sapien. Cras at nulla nec nisl posuere elementum. Nam mi nibh, consequat vitae placerat non, blandit id est. Maecenas vitae massa et enim rhoncus pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

You should not use headings to achieve visual-only results. For instance, if you have an announcement that you want to stand out, but which is not a heading for the content afterward—you should not use a heading. Always think of screen reader users when you are adding headings to your webpage.

Headings Inside of Right Sidebars and Sliders

When using a right sidebar or slider, please consider the title of the sidebar or slider to be an H2. Any headings that you add should begin with the H3 heading, because any content added would be considered a subheading of the title of the sidebar or slider.

Ordered / Unordered /Bulleted Lists

If you want to list items or links, with or without numbers, please use an unordered or ordered list. This helps screen readers used by those with disabilities and helps search engines understand your content. When creating an unordered or numbered list, you do not need to also include paragraph tags.

Correct Code

<ul class="none">
     <li>Bullet 1</li>
     <li>Bullet 2</li>
     <li>Bullet 3</li>
</ul>

Incorrect Code

<ul class="none">
     <li><p>Bullet 1</p></li>
     <li><p>Bullet 2</p></li>
     <li><p>Bullet 3</p></li>
</ul>

If you do not want to use bullets, you can add a class of “none” to your unordered list.

Correct Code

<ul class="none">
     <li>Shortcut/Link 1</li>
     <li>Shortcut/Link 2</li>
     <li>Shortcut/Link 3</li>
</ul>

Incorrect Code

<p>Shortcut/Link 1</p>
<p>Shortcut/Link 2</p>
<p>Shortcut/Link 3</p>

Use of ALL CAPS

We have systematically removed the use of ALL CAPS from our web design due to growing concerns that it is difficult to read. Please keep this in mind as you create headings on your websites. If you must use ALL CAPS, please do so sparingly.

Replace & with “and”

Do not use ampersands where they are not appropriate—spell out the word ‘and’ instead. This includes in headings, titles, and sentences. The official name of most departments and buildings do not include an ampersand. In addition to improving readability and professionalism, avoiding using “&” will also ensure that your webpage content is compatible with other technologies.

Continue Reading →

ALT tags (also known as Image Descriptions) are a very important feature involving all images on any given website. Moz does a good job of explaining what ALT tags are. Please take a moment to read up on what ALT tags are and why they are important. Moz also provides some tips for how to write good ones.

There are many uses for ALT tags. The most well-known ones are:

1. Screen readers will speak the ALT tag of an image for users who cannot see
2. If an image cannot be loaded due to some sort of network or IT error, the ALT tag will display instead
3. ALT tags boost search engine rankings and can help your website’s images display in Google search results

Guidelines

We need to write meaningful Image Descriptions for any images that we put on our websites at Michigan Tech. Not only is it a legal requirement, but it is also the right thing to do. When writing ALT tags, please keep these guidelines in mind (borrowed from WebAIM):

• Be accurate and equivalent in presenting the same content and function of the image.
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
• DO NOT use the phrases “image of …” or “graphic of …” to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Other tips include:

• A good rule of thumb is to keep ALT text between 5 and 15 words
• Do not worry about keywords or SEO. Just focus on describing what is in the photo. SEO should be considered a side benefit and not the goal for writing good ALTs.

Examples

Here are some good examples of Image Descriptions. Note the concept and/or function in each:

1. Graduate student taking notes during a class lecture.
2. Facilities Management staff member leading a safety inspection.
3. Chemistry students in lab safety gear, testing vials of liquid.
4. Aerial view of Michigan Tech’s campus.

Notes: In example #1, if it isn’t important that the student is a graduate student, you could simply say ‘Student’. For #2, if the user is already on the Facilities Management website, you could simply say “Staff member”. Same with #3; you could simply say “Students”. In #4, if it was important to mention that the campus was snowy in the photo (for instance if the website was about winter in the Keweenaw, you would say “Aerail view of Michigan Tech’s campus on a snowy winter day”.

CMS Use

In Michigan Tech’s OU Campus CMS, there are a couple places you may come across the need for Image Descriptions. The first is the “Description” field when you are inserting an image onto your page or in a snippet. The second is in the “Image Description” field of the MultiEdit Content screen for both pages and personnel items.

Continue Reading →

Have you ever pasted content into the CMS, and it just do_esn’t look right? You’re probably carrying old formatting code into the new CMS. Common culprits are copying from a Word document, copying text from one browser and pasting it into another, or copying text that was formatted in-line (using <span> and <style> tags directly in the code instead of letting the preformatted stylesheets do the work.)

Adding content with this type of formatting is bad for a couple of reasons:

• It doesn’t let your page update with the rest of the CMS. We may decide to change the font size or style to make the site more accessible or to keep up with modern design trends. By using the standard heading (<h1>, <h2>, etc) and paragraph (<p>) tags, your content will be ready to shift in an instant. If you leave hard-coded styles in the page, your look won’t automatically change.
• It can look strange on different devices. Everything on our new template is designed to expand and contract with the user’s screen size. Hard-coded styles may not change in the right way between desktop and mobile.
• It’s annoying for you, the CMS user. Sometimes you’ll have lines and lines of needless code – annoying when you’re trying to find one or two words in pages of <span>s and <color>s. For example, look at the coding on the links below—the <u> and <span> tags make for messy code on the back and and ugly links on the front end.

How to Remove Extra Code

The best way to remove the extra formatting is to copy text from your original source, and paste it into NotePad (PC) or TextEdit (iOS). (If you’re using TextEdit, make sure to select “Format > Make Plain Text” before you paste.) Then copy this text, and paste it into the CMS. From there, you’ll need to reformat your styles and links.

Continue Reading →

Google has some great help pages for using analytics, but there is a lot of information because there are so many things you can track.

Google Analytics is updated daily. You will be able to see information for yesterday and before. If you do not have access to analytics for a CMS site that you manage, contact cmshelp@mtu.edu for access.

Because there are so many blog sites within our system, we can provide specific reports for those when needed. If you are interested in analytics for a separate C-panel or WordPress installation you can contact IT Help to inquire about how to set up.

To get started, go to http://analytics.google.com/ and sign in with your Michigan Tech email account.

Select and Compare Date Ranges

Google Analytics allows you to view data for a specified date range. The Select and compare date ranges page will show you how to change that date range and even how to view a comparison of two date ranges.

Behavior

One of the analytics sections that the web team looks at the most is within the Behavior section. This section of analytics is all about what users are doing when they are on your site. Here you will be able to dig down into specific pages and see their performance. Google explains more about the Behavior Reports.

Under Behavior on the left, go to Site Content and All Pages. This is a great basic report to look at. There is a graph of the traffic for your site at the top. Beneath that are several statistics with columns of data. The rows are ordered by the pages with the most amount of traffic.

• Pageviews: Pageviews is the total number of pages viewed. Repeated views of a single page are counted.
• Unique Pageviews: Unique Pageviews is the number of sessions during which the specified page was viewed at least once. A unique pageview is counted for each Page URL + Page Title combination. If I were to look at a page and refresh it five times, that would only count as one unique pageview.
• Avg. Time on Page: The average amount of time users spent viewing a specified page or screen, or set of pages or screens. Generally, more is better as most of our webpages are informational rather than transactional, but you do want to consider the content and purpose of the specific page when evaluating this. Two to three minutes is a good range. If a user has multiple tabs open and a particular page is just sitting open but not active, Google detects this and times out or discounts this behavior. There is a cap of 30 minutes for any one measurement. One thing that can affect this number is people having a certain page as their home page on a browser.
• Entrance: The number of times that this page was the first page that a user went to for your site. If it wasn’t the homepage, maybe they got to the page from a social media promotion or a link from a publication, the A to Z page, or an email.
• Bounce Rate: The percentage of single-page sessions in which there was no interaction with the page. A bounced session has a duration of 0 seconds. Learn more. This is generally not good. If a certain page has a high bounce rate, you should probably revisit the page, its purpose, and the content. Generally, we want to keep the bounce rate below 50%.
• Exit %: When a user has been on at least two pages in your site then leave, the last page they were on is the exit page. Whether this number is good or bad depends on the purpose of the page. There is no magic number for this. If the purpose of the page is to get them to apply or to give a donation, you want your Exit % to be higher showing they are leaving your site and going to apply or donate.
• Page Value: This does not apply to our sites as it is for purchase transactions and we don’t do that.

If you click on one of the pages listed in the statistics you will see a graph and the stats for just that one page.

Audience Overview

When you first log into Google Analytics the Audience Overview page is displayed. This page will show you a snapshot of the traffic on your site within the date parameters you set. At the bottom of the page are links to additional information about your audience. Google has more information about all of the Audience Reports.

There are a lot of places throughout Google Analytics where you can hover your cursor over content to learn more. This is the case with the numbers listed under the graph. In addition to some of the statistics shown on the Behavior, Site Content, All Pages analytics, there are a few more.

• Sessions: Total number of Sessions within the date range. A session is the period time a user is actively engaged with your website, app, etc. All usage data (Screen Views, Events, Ecommerce, etc.) is associated with a session.
• Users: Users who have initiated at least one session during the date range. Learn more about how Analytics calculates the number of users.
• Pages/Session: Pages/Session (Average Page Depth) is the average number of pages viewed during a session. Repeated views of a single page are counted.
• Avg. Session Duration: The average length of a Session. This is for the site as a whole, rather than any one specific page.
• % New Sessions: An estimate of the percentage of first time visits. This is normally determined by the device’s IP address. The number you want to see here depends on the purpose of your site. If you have an internal audience you probably will have a lower percentage in this statistic, but that is fine because you are more interested in the people that are already here coming back.
• In the Demographics area of this page you can choose to see information about language, country, or city. For more details about country or city demographics go to the report at Audience, Geo, Location. You can also see reports on System and Mobile information. Overall, the University traffic is close to 50% mobile.

Acquisition

This section of analytics tells you how your users got to your site and what they are doing on your site once they get there. You can read more about Acquisition Reports on Google’s site.

• Organic Search is traffic coming in from a search engine. This includes the search bar in the header of Michigan Tech websites.
• Direct is a user going to a bookmark or directly typing the URL in.
• Referral comes from links on sites outside of Michigan Tech, search engines, or social media.
• Social is any link coming from one of the social media networks like Facebook and Twitter. For more details on Social Media traffic, go to the report at Acquisition, Social, Overview.

Real-Time

The real-time reports show information about what is currently happening. This could be useful in certain situations. For example, if you send out an email sending people to your website, you could look at the real-time analytics to see if users are going to the link.

If you want to learn more, Google offers free online courses for analytics.

Continue Reading →

Michigan Tech faculty, staff, and students win numerous awards each year. UMC has been asked to recommend a template for promoting award winners on departmental and academic websites.

Posting the Award

We recommend creating a new post on your WordPress blog. Follow these steps:

1. Post Title: this should include the name of the award and the winner(s) if they are able to fit.
2. Post Description: this is the information about the person, award, location, date, etc.
3. Profile Link: if the award winner has a profile webpage on your CMS website, it is nice to link their name to that profile, so that readers can learn more about the person.
4. Photo(s): these are optional. If you have a related photo, it would be great to use it. If you do not, you could opt to use the award winner’s portrait photo from your staff listing. Simply download the photo from the staff listing page and load it into WordPress.
5. Category: we recommend adding an “Awards” category to your blog and selecting this category each time you post an award winner.
6. Tags: we recommend tagging each award a “faculty,” “staff,” and/or “students” depending on who the award is going to.

Sample Award Posting

The following is a sample of what an award post may look like:

Joel Vertin recognized at Student Affairs Celebration

At the Student Affairs and Advancement celebration held on May 4, Joel Vertin received The Force award. The award recognizes people that go above and beyond to get the work done. The award is described as:

How does this person do it? The Force Award goes to a person, who somehow, someway, manages to get big things done no matter what kind of odds are stacked against them. The Force is strong with this one.

Mr. Vertin was nominated for the award by Bonnie Gorman, Dean of Students at Michigan Technological University.

Ian Repp, Director of University Marketing and Communications stated: “I have no idea how Joel gets so many websites finished each year. It is amazing.”

Mr. Vertin is the Digital Services Manager within University Marketing and Communications. He has managed the web team since 2012 and has been a part of UMC since 2010. He enjoys golfing, softball, and long walks on the beach.

Feeding your CMS Site

Once the award is posted to your departments blog, it should automatically feed into your homepage news widget (if you have one). If you do not have a news feed set up already, please email cmshelp@mtu.edu for assistance.

If you use an “Award” category in your blog, we can also create a special feed that is only of award winners. This may be useful if you have any internal webpages where an awards feed would make sense. If you would like a specific awards feed created, please email cmshelp@mtu.edu.

If you have any questions about posting awards, organizing them, or making them appear on your website, please let us know.

Continue Reading →