Upgrading a CMS from version 3

This guide is intended for people maintaining or writing a Content Management System (CMS), or web application, who want to upgrade the styles to be in line with ANU styles version 4 (responsive design). This is not intended for general content authors who are using a CMS to create webpages.

There are several parts of your CMS output that will have to be updated to use version 4 styles:

• Header: a new doctype, html tag, new metadata, and new CSS/Javascript
• Banner: the Explore ANU, A-Z, and search areas have all changed
• Menus area: there is a new mini search box and mini menu, for smaller screen sizes
• Content area: some new classes are available to your content authors to take advantage of responsive design, and the updated information for each page has changed slightly
• Footer: some new classes and updated links

A skeleton example of a version 4 site is provided below, with a diff output for quick reference of the changes between version 3 and 4:

• Version 4 example
• diff file, 3 vs 4

Header changes

With version 4 of the ANU style, we are upgrading from XHTML 1.1 to HTML 5. This requires changes to the doctype, html tag and metadata. We also include version '4' stylesheets from now on.

Doctype

The doctype for HTML 5 is now much simpler than the XHTML doctype. Browsers that understand HTML 5 use 'html' as the doctype. It's worth noting that some older browsers may interpret this as HTML 4.

HTML tag

The html tag in the new style has extra information that can be used to style things differently on various Internet Explorer version:

New metadata

There is new metadata for the character set, and an extra line of metadata has been added to set the zoom for mobile screens. Note that we have removed the metadata for http-equiv="content-type", which used to be included as part of the central style information, and you must now specify the charset metadata in your system. The metadata for the charset should appear as close to the top of the file as possible - some browsers only search the first 255 bytes of the page for the charset tag.

Updated Dublin Core metadata

With the change to HTML 5, the metadata tags have changed from 'DC' to 'dcterms'. If you don't update your metadata, your page will not be valid HTML 5. Note that some of the tags have been discontinued in HTML 5, such as the 'subject' tag, and the 'date.review' tag.

Generator metadata

With the change to HTML 5, we can no longer include some of the old metadata tags we used to identify systems. These now have to be combined into a single 'generator' tag. If you are using the central styles to create your headers, the generator tag will be included for you. You can add to the generator tag to identify your CMS - this makes it easier for us to see which CMS is being used by which site.

To have your CMS name and version appear in the generator tag (e.g. 'myCMS 2.3.12'), send an extra 'appid' argument to the style server include:

If you are generating the header without using the central style include file, you can put what you like into the 'generator' tag, but using something that identifies your CMS would be preferable.

Updated CSS & Javascript links

When updating your site to version 4, you will need to dynamically include the new central version 4 styles if possible, or cache them in some way on your system. If you are caching the central styles, be sure to keep them up to date - new stylesheets tend to come out every month or two.

Some of the version 3 CSS files have been combined in version 4, and a new stylesheet names anu-fluid.css deald with adaptability and responsiveness.

No more IE 6

We are now in a position to drop support for IE 6, unless you have a business case for it in your local area. The central styles will not be including any styles specifically for IE 6, and if you have a special style sheet for IE 6 hacks you might want to remove it from now on.

Banner changes

When updating your site to version 4, you will need to dynamically include the new central version 4 banner if possible, or cache it in some way on your system. If you are caching the banner, be sure to keep them it to date - there are occasional updates to the Explore ANU menu, and the search area.

Specific changes in the banner between version 3 and 4 include:

• links for the print icon and ANU logo updated to '4' directory
• changed padding and float positions in the Explore ANU menu
• close boxes in the Explore ANU menu and A-Z menu
• changed div positions in the search area, and a new search area for smaller screen sizes that shows/hides automatically.

Menu changes

Mini menu

The version 4 styles hide the left hand menu on smaller screen sizes, and replace them with a drop down menu button. When upgrading your site to version 4, you will need to include the new divs for the mini menu button, and a mini site search area.

Menu Javascript

Version 3 styles have a piece of Javascript that is used to expand and collapse the menu. This was included near the menu block in your site code. For version 4, we have moved this Javascript code to the footer of the page, so that the content of the page loads before the Javascript is called. This will result in your content showing more quickly on a slow network connection.

Content area changes

Content from your authors

Most of the content provided by content authors will be fine in version 4, and not require changes. You may want to keep an eye out for a few things after upgrading (we advise upgrading a test site first, with your existing content, before making changes to production):

• widths of tables may overflow the bounds of the content area on some responsive screen sizes
• narrow columns that have been floated to the right will drop down below on some screen sizes
• pages with three narrow columns will be reorganised on smaller screen sizes
• image width and height tags will be ignored in HTML 5, and the image will just fill its container

Updated & contact information

The 'Updated', 'Responsible Officer' and 'Page Contact' information at the bottom of each page has been changed slightly in version 4, adding a new class around each piece of information, so that it can be repositioned on different screen sizes.

Footer changes

When updating your site to version 4, you will need to dynamically include the new central version 4 footer if possible, or cache it in some way on your system. If you are caching the footer, be sure to keep it up-to-date – updates are rare but they do happen from time to time.

Specific changes in the footer between version 3 and 4 include:

• links for the IARU changed
• icons for the IARU and Go8 are updated to be in the '4' directory.

Menu Javascript include

The Javascript that was removed from the menu area is now added in at the bottom of the footer (with its path updated from a '3' to '4'):