Follow these directions to integrate with the new brand. Use the Brand Preview and RWD tools as you adjust.
This page is intended for sites created BEFORE April, 2017, that
are NOT YET LIVE.
We have prepared a selection of Digital Brand Master Classes and
Lessons Learned to coach you through the steps of elevating your
> See the full list below in Additional Resources
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.
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.
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.
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.
Updating your footer will depend on your current
You will be replacing your Simple Footer with the new
Your existing Fat Footer is already the new Footer
container, but you will need to migrate your Simple
Footer content into the Footer container.
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.
Take a walk through all your pages and get the real feel for if your content is working in the brand look and feel
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:
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:
Just remember you must use the Brand Preview Tool until your site is fully launched.
Components not detailed below are not significantly affected by the digital brand transition.
|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.|
(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.|
||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.)
||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.|
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.
We have prepared a selection of Digital Brand Master Classes and Lessons Learned to coach you through the steps of elevating your site performance.
Was this page helpful?