Category: General Web

Proper Content and Page Structure

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

Paste as Text

If you paste content from a document or email into Modern Campus CMS, 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.

Paste as Text icon in the toolbar.

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

Headings

Headings play a key role in accessibility requirements and general page usability. It is important to use proper HTML headings instead of bold paragraphs or single lines of text and to not use the heading styling when the content is not a heading. 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 paragraph dropdown menu in the Modern Campus CMS editor. The same method working in other online applications, such as Google Docs. For text that you want to highlight that is not actually heading content, use the font styles in the Styles dropdown menu of the Modern Campus CMS editor instead.

Google My Business

A free service called Google My Business lets small businesses update their search engine listing. This is particularly useful for Michigan Tech departments who focus on sales, who run promotions, who have distinct hours of operations, and/or which attract and serve tourists.

Customizable Content

Google My Business lets you customize various aspects of your business information in Google search results, including:

  • Address
  • Hours of Operation, including special hours for holidays
  • Phone number(s)
  • Photos of your business (inside and outside)
  • Promotions/Sales
  • Website

New Headers and Footers

Today we’re launching our new headers and footers. For many years now, we’ve offered our headers and footers as iframe codes, which worked well, until our new template came along in 2016. The new brand brought in different dimensions, styling, and navigation. This caused us a bit of trouble as the new dimensions and functionality would not work with the iframe setup found across various Tech-associated properties. This led us to seek out a new, long-term approach for headers.

Problem

Iframes are an easy way to embed pieces of content from other websites. However, they are limited in their integration with subpages. Our main issue dealt with height: all iframes were locked at 100px high. Whereas the new header changes in height depending on navigation type, and if the header is loaded on a mobile device. The same issues were found on the footer as well; the footer iframes simply can’t show enough detail, leading to contact information and other relevant links being cut off.

Solution

Use JavaScript! The new headers and footers are built with JavaScript which solves the issues mentioned above. The new headers allow you to have our horizontal navigation found throughout Tech’s site; you can pull in navigation from the CMS or build your own. Customize the navigation font size, the header type (same as before: mini, logo-only, full), custom search location, and to follow Tech’s main template: fixed header to stick to the top. Footers ship with the default contact information for the university, but information from a CMS site or custom contact information can be fed in.

Get Your New Header/Footer

Integration

Set up your new header or footer starting here. Then, copy the HTML/JavaScript snippet into where the banner(s) should show on your page. If you used our iframes in the past, you can just replace the iframes with your new snippets. And that’s it! Nothing difficult, but now you have a header or footer that follows the same style and technical build of the CMS banners. If you have any questions, please feel free to email webmaster@mtu.edu.

Website and Content Backups

There has been some confusion over what our CMS does and does not back up as a part of its revision process, so the purpose of this blog post is to clarify things.

Content Backups

Enterprise Content Management Systems store pieces of content. You have a Generic Page which stores the meat of your webpage’s content. However, there is more. Think of a sidebars and sliders (Highlights). Images. And navigation—made up of Navons. There are also Files. Maybe some Script items or Personnel Information items. All told, any given webpage is made up of 50-100 total individual items.

Any CMS does a good job of keeping track of revisions for these items. Each revision is basically a backup of that individual piece of content. As long as an item is not deleted (purged), we will have a history for that item. If the item is deleted, then its revision history is also deleted.

Avoid Duplicating Meta Descriptions

What is a Meta Description?

When looking at your content in the CMS, the meta description is populated from the “Description” field towards the top of the Properties > Parameters screen for the page. Between the “Title” and “Keywords” fields. The description provides Google and other search engines with a short, relevant summary of your webpage. When someone searches on Google, they see a list of the top results. In the results, there is the title of the webpage, the URL, and the description. Having a good description will help the user decide if they want to click on YOUR page, versus the other options.

External Links and Beware of the ‘Link Trolls’

As a web manager, you have a lot of responsibility. You have to keep your content “fresh” and accurate. It is a lot of work when you have 50+ webpages to manage along with various other job responsibilities. Making CMS updates typically falls under “and other duties assigned”—making things particularly difficult.

The ‘What’ and ‘Why’ of External Linking

We link to a lot of external websites—ones that Michigan Tech does not own or control. We link to resources about the local community and lodging, responsible research practices, and the products that our university uses. We link to information about disabilities. To our corporate partners’ websites. To sponsors, writing tips, and career advice.

Flexibility/Usability Tradeoff

As the flexibility of a system increases, its usability decreases. It sounds simple, but yet is so difficult to understand. Flexibility has costs. I would argue this holds true in general, but for now let’s focus on the web.

Making it ‘Foolproof’

Murphy’s Law claims, in part, that “nothing is foolproof to a sufficiently talented fool.” In basic terms, you cannot plan for everything. Rather, you should design and code for the critical mass of users needed to make your website successful. When you go overboard on flexibility, you decrease efficiency, added complexity, increase time, and spend more money for development. You may deliver a user experience that is worse than what you started with.

The Hierarchy of (Web) Needs

Being a web professional at a university can be difficult. Department chairs say things like “I want a website that looks different from everyone else.” A liaison says “I want the newest, craziest, most different website that you can make.” Everyone wants ‘cutting edge,’ although they don’t know what that means or why they are asking for it.

Those who don’t work in the web profession get lost in flashy designs, zany animations, and sparkles. They rarely analyze how many clicks it takes to get to the real information, how accessible a website is to those with disabilities, or how user-friendly a website is on an iPhone. They just want to be ‘wowed.’ Does their audience really want to be wowed, though?