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 That Are Not Live

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

Digital Brand Launch

This page is intended for sites created BEFORE April, 2017, that are NOT YET LIVE.

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, older sites that are not yet live still must update site header and footer components, and may wish to adjust some components for new versions or settings.
  • More information 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 Additional Resources

Step 1: 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 will affect all pages you visit in Author until you uncheck the Brand Preview 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.

Specialists Only

Only those with a Specialist role in the UBCMS can edit header and footer files.

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 depend 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 3. 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 4: Adjust Identified Components

As a new site, you can focus on adding your new content. If you have already started building your site, consult the Summary of Component Changes table (below) and adjust your components as applicable. When you do, 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.

Just remember you must use the Brand Preview Tool until your site is fully launched.

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 5: Optimize 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)