University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Sites Created Before April 10 That Are LIVE

Follow these directions to integrate with the new brand. Use the Brand Preview and RWD tools as you adjust.

New Brand Features

This page is intended for LIVE sites created before April, 2017.

On this page:

Overview

  • All UBCMS styles and many components will be updated to support the UB brand in digital.
  • For older UBCMS sites, we expect most changes will be seamless, except where custom styling has been implemented. 
  • However, LIVE sites created before April 2017, must update site header and footer pages, and should check some of their components that have new versions and settings.
  • More information is provided below.

There will be global changes to all sites based on the new brand styles. Most components on your pages (Title, Photo, Body Text, etc.) will be backwards compatible, meaning that no changes will be needed on your end except a general degree of testing like with RWD. But you may choose to adjust some components that have new options (e.g. Callout). We list all of these new features below: see the Summary of Component Changes

The header and footer elements have changed significantly. These areas will require more attention. Step by step details are provided below.

Changes to the header

  • The Main Header and Mini Header components will stop working and be retired.
  • Sites will need to switch to the new 'Header (new brand)' component.
  • The new component will support references to affiliated/parent units, as well as social media and task navigation buttons.

Specialists Only

Only a Specialist can edit header and footer files. > read more about UBCMS role

Changes to the footer

  • The Simple Footer container will stop working and be retired.
  • All sites will need to use the Footer container (which was named 'Fat Footer').
  • The updated component has additional support for an alternative, 'enhanced' layout.

Changes to other components

While many components will have stylistic changes, several will gain additional features, and you may wish to make adjustments to your pages. The current versions will only work in a non-branded site, while the new versions will only work with the Preview Tool or when the new brand has been enabled for your site. More details are in the table below.

Summary of Component Changes

A detailed table of all updated components is provided below.

Digital Brand Master Classes

We have prepared a selection of Digital Brand Master Classes and Lessons Learned to coach you through the steps of elevating your site performance.
> See the full list below in Training Resources

Step 1: Copy Your Site's Header and Footer

Copy each file using the Sidekick.

Copy each file using the Sidekick.

Make a copy of your site's current header and footer pages.

  • These are located in your site's Site-Wide Configuration folder (/content/domain/site/config).
  • The 'config/header' and 'config/footer' pages must be copied (not moved) in the same /config folder.
    • Copy 'config/header' to 'config/header-oldbrand'.
    • Copy 'config/footer' to 'config/footer-oldbrand'.
  • Open each file and use the Sidekick 'Copy' feature. This allows you to copy, paste and specify the new name in one step. *

* If you instead do this action in the Site Admin console, you will need to Copy and then Paste each file, and then seperately Move each of them from header1 to "header-oldbrand", and footer1 to "footer-oldbrand."

Screenshot of the site configuration folder showing header and footer files.

The header and footer files including -oldbrand copies.

Activate the '-oldbrand' files. *

  • You can then modify the main config/header and config/footer files to adjust for the new brand, and can most likely leave the -oldbrand copies alone.
  • The '-oldbrand' copies will be used to configure your site when it is not in normal mode (when you are not using the Brand Preview tool), and for your published site until the new brand is launched.
  • If needed, you can still modify (and reactivate) your '-oldbrand' files to update your existing website. But remember to also make these changes to your main header/footer files.
  • There are no '-newbrand' files. Once the new brand launches, your adjusted config/header and config/footer files will be used by default and the '-oldbrand' copies can just be deleted.

* If you forget to activate these copies, any digital brand modifications to your main header and footer will become visible to the public.

Remember to activate the -oldbrand copies!

Step 2: Preview Your Site

Screenshot of Brand Preview Tool.

Screenshot of Brand Preview Tool.

Use the Brand Preview Tool.

Any site within the Author environment can be viewed as it would look if the new brand were already launched. The Brand Preview tool will temporarily display these changes.

  • Once you switch to the Brand Preview mode, you can see what your site will look like after the brand is launched.
  • As you make changes to your original header/footer files, you can preview their impact using this tool.
  • Drag the above button to your browser's bookmark bar.
  • When you wish to display the new brand changes, visit the Brand Preview tool website and click the checkbox to turn on Brand Preview mode.
  • Switch to Preview mode in the Sidekick.
  • You may need to refresh the page you are viewing in Author.

This affects all pages you view in Author until you uncheck the tool.  Brand preview mode will be enabled only for this browser on this computer and automatically disabled when the browser is restarted.

The Demo Site is Already Brand-Enabled

If you want to see how components will change with the new brand, the Demo Site is already brand-enabled -- no need for the Preview Tool.

Optional: Preview the Changes Without Changing Your Site

Preview the Changes Using the Interactive Demo Site

To get a quick general view of how the brand will influence your site, without having to actually modify your own pages, you can experiment with the interactive Demo Playground.

This is on the Training Server, so you will need to use the companion Brand Preview Tool for that server. 

  1. Log into the Demo Playground on the Training Server:
    https://ubcms-training.buffalo.edu/content/demo.html
    • *If you cannot log in:
      • Log in through your VPN (wireless and off campus)
      • Contact the DCT Help Team.
  2. Turn on the Brand Preview for the Training Server:
    https://ubcms-training.buffalo.edu/etc/brand-preview.html
  3. Make changes to the various component examples.
    • Changes you make here are temporary -- the Demo Playground is automatically refreshed around 5 a.m. daily. 

Now begin to modify your site's header and footer files, to prepare for the new brand launch.

Do I Need to Update the Header?

  • If your site was built BEFORE April 10, 2017, you will need to update the Header. 
  • Sites created from April 10, 2017 forward already have the correct container, but may choose to make further adjustments.

Do I Need to Update the Footer?

  • If your site was built BEFORE April 10, 2017, you will need to update the Footer.
  • LIVE older sites must make additional adjustments. > read more about the brand transition
  • Sites created from April 10, 2017 forward already have the correct container, but may choose to make further adjustments.
  • If you have breadcrumbs showing in your footer you need to remove them

Updating your footer will depending on your current configuration.

Your site currently JUST has a Simple Footer

You will be replacing your Simple Footer with the new Footer container.

  1. Add the new Footer container to your page.
  2. Select the 'Simple Footer' layout.
  3. Copy over content from your existing Simple Footer container.
  4. Delete your existing Simple Footer container.

Your site currently has a Fat Footer AND a Simple Footer

Your existing Fat Footer is already the new Footer container, but you will need to migrate your Simple Footer content into the Footer container.

  1. If you do not see a Simple Footer area below the Fat Footer columns, click the Edit link in the Fat Footer, re-select Four, or Six-Column Fat Footer, and click Ok.
  2. The lower area is intended to house the same details as ytour existing Simple Footer. Copy over any content from your existing Simple Footer.
  3. Delete your existing Simple Footer container.

Step 4. Walk Through Your Site and Identify Opportunities

Since the new brand fonts are larger, and easier to read we reccomend you walk through every page in the site in brand preview mode (see above) and check for content that may need to be trimmed. It is also your opportunity to identify brand components that you want to upgrade or add to enhance your site. Refer to the Summary of Component Change Table below.

Site Review: Content Elevation Checklist

Take a walk through all your pages and get the real feel for if your content is working in the brand look and feel

  • Your text or images may need to be edited.
    • Look at your content length throughout your entire site and adjust as appropriate.
    • Adjust lengths for heads/modules if needed.
  • The new teasers are squares so you want to be sure your images are cropped correctly in in teaser with photo lists and grid.
    • Recrop the photo in page properties if needed.

Site Review: Header, Footer, Navigation and Background Checklist

  1. Change your header to the new brand header (real easy)
    • Set up your brand header file
    • Set up your brand headers (colors, tag lines)
    • Add your call to action buttons (if applicable)
      • Be sure to set the color
    • Activate your search (if applicable)
    • Add your social icons (if applicable)
  2. Set up your color pops in your navigation (primary, secondary)
  3. Set up your brand footer file
    • Change your footer to the new brand footer (real easy)
    • Remove the breadcrumbs (if applicable)
    • Add your call to action buttons (if applicable)
      • Be sure to set the color
    • Add your social icons (if applicable)
  4. Choose a background (you can start without one even and add later)

Site Review: User Experience Checklist

Take a walk through all your pages and identify new opportunities to use brand only features and to improve your information architecture

Step 5 details ALL the changes in our Summary of Component Changes table but these are the ones that were most popular with our pilots:

  • Update your Call Outs to the new branded styles (many more colors and choices)
    • Please note, the call out component can be reset to brand settings WITHOUT affecting your live site
  • Take a peek at the new Full Width Carousel it functions SO differently!
    • You are going to want to use it to showcase your programs or key facts
  • Change your Tabs (if applicable) to the new tabs component
  • Check that all Call to Actions are consistently applied and use the new “see all style” (brand only) call to action where applicable

Be sure to use the Brand Preview Tool as you build!
Also use the RWD Preview Tools to check smaller screen performance.

Step 5: Planning for Managing Changes on Your Site

The Challenge

  • You need to be able to elevate your designated pages, while updating your live site
  • You do not want some of the changes to go live until you are ready

Choose the most appropriate solution based on your site walk through and identified changes

Do your live pages update often? Are the brand changes to your page extensive? Solution
Yes No Work on the page in Launches
Yes Yes Work on a copy of the page
No No Work on the original OR a copy of the page
No Yes Work on a copy of the page

If You Plan on Moving, Renaming or Deleting Published Pages (really important)

Moving, renaming or deleting an activated page is IMMEDIATELY reflected on your published website.

  • This should ONLY be done by those with PUBLISHER permission
  • Deleting a page without PUBLISHER permissions creates “orphaned pages” that are deleted from Author but still live on your published site.
  • Follow the documentation steps carefully to avoid creating broken references or other issues:

If You Plan on Working on Copies of Your Pages

How to step by step add/merge copies

  1. Copy your page
  2. Rename the new page [samePageName]-NEWBRAND
  3. Make any changes to [samePageName]-NEWBRAND
  4. Delete original
  5. Rename the new page: remove the “-NEWBRAND” part
  6. Activate the page if the original was live
  7. At this point, if you need to move the page to a new location, you can. Remember to update any fixed lists or links pointing to this page.

If You Are Considering Using Launches

Pros

  • You are working on a alternative version of the designated page in Launches, which is synched to reflect changes you make to the Live page in your regular Author site.
  • Your Live page does NOT change from your activity on the Launches page (but see 'guardrails for exclusions').
  • You can easily update your Live page any time you want without showing any of your digital brand project modifications done in Launches.

Cons

  • Launches is still in development, and not yet fully functional.
  • There are very stringent guardrails (see below) restricting how you use your Launches pages.
  • You can activate pages in your regular Author site. You MUST NOT activate (or 'rollout') pages in Launches yourself.

 

Thinking of Using Launches? Here Are Some Guardrails to Keep In Mind

There are very stringent guardrails restricting how you use your Launches pages. There is no room for error as you may cause unintended issues with your site.

We are here to help. If you are considering using launches check in with the DCT Help Team, we can advise you if Launches is a fit for what you need to accomplish. You should ONLY use Launches for the identified pages that you have had a consultation for.

Note: Launches is available and will show up for ALL pages, but just because you can does not mean you should.

You CAN:

  • Enhance the content and design components on your designated pages
  • Add new pages that have been identified as belonging in launches

You SHOULD NOT:

  • Activate (or "rollout") pages in Launches yourself, work with DCT Help to activate.

You MUST work with the DCT Help Team to do the following actions in Launches:

  • Copy pages
  • Rename file names (URL) of pages
  • Move pages

Step 6: Adjusting Identified Components

As desired, adjust the other components that have been modified for the new brand.

By consulting the Summary of Component Changes table, be sure to consider:

  • Components that will be retired and no longer work.
  • Components that have new features (e.g. Callout).
  • Teaser thumbnail images will now be square.

Summary of Component Changes

Components not detailed below are not significantly affected by the digital brand transition.

Component Status
Notes
Audio Player enhanced This component is now optimized for the new brand.
Button enhanced In the new brand, can now be used in the header; shapes, color and text alignment are ignored; and 'side by side' buttons are truly side by side.  
Breadcrumbs usage change Only for use in the site header. Please remove from Footer if you have used it there.
Call to Action enhanced Optional new Display Size added for brand use only. New option has title capitalized and right-aligned. (All styles are now blue)
Callout enhanced Reimagined for new brand. In the new brand, this component is completely reimagined and has great flexibility in how it can be used. Completely new color/icon choices available--tie your choice into your overall brand strategy. Existing callout choices will be mapped to similar settings in new version but sites should check color/icon choices using Brand Preview. Headline and Text settings are the same in both versions and values will carry through between versions.
Caption enhanced In the new brand, captions are still italicized by default. However, authors can now remove that styling using the "I" tool.
Carousel enhanced This component is now optimized for RWD and will be displayed for new brand sites in RWD.
Footer
(former Fat Footer)
enhanced Will become the only footer for all sites, renamed from 'Fat Footer.'
Existing component has a choice for number of columns: 4 or 6. This will be reframed as 'Layout', with choices of 'Simple,' 'Enhanced,' 'Fat - 4 column' and 'Fat - 6 column.'  The 'Simple' and 'Enhanced' layouts can stand alone, but the 'Fat' versions are accompanied by a 'Simple Footer' area. In all cases, only one component is used.
Full Width Carousel
enhanced Reimagined for new brand. In the new brand, this component is completely reimagined and has great flexibility in how it can be used. It is also now optimized for RWD.
Header (new brand) enhanced New component developed for brand.  Incorporates site title, tagline, and up to 2 two parent  organization links. Also has placements for Social Buttons (e.g. Facebook link) and task navigation Buttons (e.g. Contact Us). Come in 3 branded color schemes--tie your choice into your overall brand strategy.
Key Tasks enhanced Component reimagined for new brand. In the new brand, this component is completely reimagined. Comes with new branded color combinations--tie your choice into your overall brand strategy. Space for slides/photos is wider so adjust content accordingly.
List Builder enhanced Teaser thumbnails will be square in most cases to better support portraits and landscapes. Authors may wish to adjust their images or designate alternate cropping in page properties.
Main Header
will be retired Will stop working when brand launches.
Authors will need to change to new 'Header' component.
Mini Header will be retired Will stop working when brand launches.
Authors will need to change to new 'Header' component.
Photo enhanced In the new brand, captions are still italicized by default. However, authors can now remove that styling using the "I" tool.
Related Content Container components still in development (Some layout changes planned for RWD.)
Simple Footer
will be retired
Will stop working when brand launches. Sites will need to switch to 'Footer' component (renamed version of current Fat Footer).
Slide Deck: Horizontal
enhanced Reimagined for new brand. In the new brand, this component is completely reimagined and has great flexibility in how it can be used. Layout has improved presentation. It will work in more column sizes and support swipe to change slides in RWD.
Slide Deck: Vertical enhanced Reimagined for new brand. New style and colors.
Social Button enhanced Reimagined for new brand. Visualizations of icons improved. Now availabled for use in Header as well as Fat Footer (same component). Is now optimized for RWD.
'Switch' will be retired Please switch to Tabs if you have used it. This early experimental version of the Tabs component was never in the Sidekick. Only select pilot sites would have used it, and they must update to the new Tabs component.
Tabs new feature New component developed for brand. Replaces an earlier experimental 'Switch' component and now available through the Sidekick. OPtimized for RWD. Has greater layout flexibility for content.
Title enhanced New brand features: H5 size added, looks like heading in flex module. H4 will become blue.
In old brand H5 and H4 look identical.
Top Navigation enhanced Reimagined for new brand. Now incorporates search and audience navigation, plus color choices--tie your choice into your overall brand strategy.

Tip: Any additional changes will be chronicled in Change History and News.

Step 7: Optimizing Your Site for Mobile (RWD)

Many of your visitors will use mobile devices to view your site. Since this is so crticial to successful web communications, we have paired enabling the new digital brand for your site with enabling it for Responsive Web Design (RWD). Thus, as you prepare for the new brand you must also consider how your pages will respond when they are viewed by mobile users on mid or small-sized screens.   

If you have not yet enabled your site for RWD, please review the documentation on Responsive Web Design and adjust your pages accordingly.

Training Resources

We have prepared a selection of Digital Brand Master Classes and Lessons Learned to coach you through the steps of elevating your site performance.

Solution Groups and Master Classes for the UB brand

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)