Responsive Web Design (RWD)

Responsive Web Design optimizes how your pages are displayed for the device each visitor is using. Your site automatically adjusts its layout and behavior so people using smaller screens (e.g. smart phones) can easily navigate your pages.

On this page:


All UBCMS websites are automatically launched with Responsive Web Design (RWD) enabled. RWD is an approach to building Web pages which allows the pages to automatically adjust to the screen size of the viewer, not just by changing the size of components, but also by flexing where specific components are positioned. Some of this can be handled automatically, standardized for all of our websites, but often each site will need to make more specific decisions about their pages.

Why Do RWD?

Without RWD, sites simply shrink to fit a particular screen, like reducing the contents of a sheet of paper onto an index card. But the world looks much different in mobile. Even the most thoughtfully designed sites cannot maintain their utility when squeezed, unchanged, into a small space. Aware of these challenges, RWD behaves like a proud chameleon that struts how it has changed by repositioning a page’s key assets to maintain an ideal user interface across a range of devices.

On a desktop, your page’s assets have been arranged for easy accessibility, but users have to pan, scroll and pinch to find the same critical components when those pages are reduced to fit a smaller screen. RWD eliminates that need by moving those components to convenient points on a mobile device.

Best of all, RWD makes your site a one-size-fits-all experience for visitors. But optimizing your site for RWD requires work on your part. Before throwing the switch, site owners should consider how all their pages will perform in mobile. This requires a page-by-page inventory that scrutinizes your assets and evaluates your strategic objectives.

How RWD Changes Your Site

'burger' icon used as an RWD navigational element for small screen sizes.

'burger' icon used in mobile navigation

A series of changes occur automatically when someone visits an RWD-enabled UBCMS website using a small-screen device:

  • The header and heading font sizes become smaller.
  • Top navigation, search and left navigation merge into dropdown tools ("burgers").
  • The page becomes a single column, leading with the center well, then the right sidebar.
  • Multi-columns are stacked into a single column.
  • Images generally display smaller (but some may expand to fill the width of the screen).
  • The behavior of specific components changes:
    • Horizontal Slide Deck – flips, thumbnails move to bottom; gestures work for move forward/backward actions.
    • Vertical Slide Deck – collapses to a simpler stacked menu view, which expands as the user clicks through.

These changes all happen automatically—the device is told a different way to display what is otherwise the same content Desktop viewers would see. 

Currently, the smallest "break point" is 720 pixels. If you shrink an RWD-enabled page below this width in your browser, or view the page on a small-screened device, it will flip to the mobile version.  

Screens between 720 and 960 pixels (iPad Minis, iPads and other tablets) will now be zoomed out to show the full page instead of starting zoomed to 1:1 size with the right column obscured.  

When a standard three-column Web page is viewed through progressively smaller screens, the content becomes stacked as a series of breakpoints are reached.

how a simple three column page changes in response to smaller screen sizes.

When a multi-column home page is viewed through progressively smaller screens, the content becomes stacked as a series of breakpoints are reached.

how a multi-column home page changes in response to smaller screen sizes.
Live Examples of RWD-Enabled Sites

As sites become enabled, we will include them in our list of live sites.  Look for the asterisk (*).

Prepare Your Site for RWD

While your site will be launched with RWD enabled, you should still thoughtfully assess how your pages perform for smaller screen sizes. As with any project, start with a plan:

  • Review all pages in your site.
  • Review representative 'birds of a feather' pages assuming that these will inform changes needed (e.g. course descriptions).
  • Review high traffic pages or pages critical to conversions (e.g. home page or apply).
  • Audit pages with complex layouts.
  • Learn which of your pages are being viewed heavily by mobile users.

By auditing your site and creating a mitigation plan, you can identify the size and scope of changes needed to prepare your site for RWD.

RWD Preview Tools

The RWD Preview and Resizer tools will be very helpful to sites thjat are not yet RWD-enabled.
> Learn more in Additional Resources - How to Preview Your Site in RWD

Doing a Business Objectives and User Experience Audit

It is very important to review for changes that may impact your business outcomes or user experience.


  • Business Outcomes
    • Do critical call to actions fall "beneath the fold" (off the first screen in mobile)?
    • Does the user still access what they need to perform key tasks?
    • When the page changes in RWD does the order of the elements that still make sense or is reordering needed?
  • User Experience
    • Does each page have "scent of information" as to what is on that page (e.g., judicious use of the On This Page and Collapsible Content components)?
    • Can the user still perform key tasks?
    • Do overview pages introduce the content of the “child pages”
    • Is the page scannable? Are you following best practices principles on Writing for the Web?
    • Are your headlines too long or images too big?


Using Google Analytics, you can actually see which pages are being used the most on mobile devices.  

Doing a Technical Audit

No matter what your evaluation strategy is, you need to identify from a technical perspective what works (or does not work) with RWD turned on.

Evaluate EVERY page in Author view.

  • Use RWD Preview Tools if your site is not already RWD-enabled.

List all suspect components for each page (RWD Sample Inventory Worksheet).

Use the following to guide you:

Here are additional potentially troublesome elements that require close attention:

For planning purposes, based on the experiences of our pilot projects, it will take up to 30 minutes to review each class of pages. Generally, certain types of pages will have a common structure that is repeated wherever they appear on your site. For example, all of your staff or faculty profile pages will likely be very similar in appearance and structure, as will your news. Some classes of pages will not need any changes at all, but it is worth assessing all classes. You can generally save time by auditing one or two examples from each class and then assuming the pattern will hold throughout.

Issue How to resolve
A UBCMS component does not seem to work in RWD.
  • See the chart below "How RWD Affects UBCMS Components."
  • If the component behaves differently than the chart lists, report it to the DCT Help Desk. Include site name, your contact info and the URL.


A component we modified ourselves is not working well in RWD.
  • We suggest replacing modified components with standard UBCMS components.
  • If you feel you need the modified component you need to work with the technical resource that created the component for you to modify it for RWD.
A component University Communications modified for us is not working well in RWD.
  • We suggest replacing modified components with standard UBCMS components.
  • If you feel you need the modified component report it to the DCT Help Desk. Include site name, your contact info and the URL. Also include the business case for retaining the modified component. Except for rare exceptions (e.g. an active pilot), University Communications is recommending replacing any specialized components to our standard component sets.
Learn from Your Peers

Our RWD pilots (Law, UBIT and International Admissions) each took different approaches to the audit. Their lessons-learned and best practices can be viewed below in our Additional Resources - Master Classes.

Remediate Your Site

Once your audit is complete, your team needs to make any necessary adjustments before it is launched and RWD is enabled.

Spend your time thoughtfully!

Since this has such a big impact on your page effectiveness in mobile, we strongly encourage you to review and test how your site will function with RWD enabled, as simply turning on RWD does not necessarily mean your site is mobile-friendly or effective for your end users' experience.

  • Be sure to consider any additional components that may not have been part of your original site build. For example, sites do not automatically get a Mobile Menu, which is required to deliver site navigation on small screen devices.
  • Be mindful of pages that were intentionally hidden -- one of the settings is Hide in Mobile Navigation.
  • Consider adding Content Optimization Containers, which adjust content placement between large and small-screen views. (Specialist permissions are needed to work with these components.)

Additional Resources

How to Preview Your Site in RWD

RWD emulator.

RWD emulator

Any UBCMS page in Author can be viewed as if RWD was enabled and it was being viewed from a smaller-screened device.

  • In Author, switch to preview mode in the Sidekick and manually make your browser window narrower. 
  • On a live page, just manually make your browser window narrower.
Chrome Inspect Tool
Additionally, developers may wish to use a feature of the Chrome browser, part of the Inspect too.
  • In Chrome, right-click + Inspect Element (or Control-Shift-I).
  • Then click the 'Toggle device toolbar' icon (Control-Shift-M) in the upper right of the Inspect panel.
  • You will be able to cycle through a variety of standardized screen sizes that emulate different small-screen devices.

How Elements Are Reordered on a Page

Feature Notes
Audience Navigation ('Info For') In nav menu.
Breadcrumbs First link (site title) hidden.
Fat Footer Collapsed by default. Depends on click/tap.
Key Tasks Stacks under the adjacent slide deck or photo.
Left Navigation In nav menu.
Lists Lists styled as 'Teasers: with images' will display with small images.
Main Header HTML in titles is allowed (customization).
Related Content Container Will be displayed after the center well content, well below the fold. (See more comments below.)
Related Links Pulled into nav menu for top pages,  but are hidden below the second level of navigation.
Search box Icon in header next to 'burger' icon.
Simple Footer Content stacks, left column first then right column underneath.
Task Navigation (buttons to right of site name in header) In nav menu.
Top Navigation Bar and Menus Moved into menu. Audience and task nav bars also move into menu.  

Example: Related Content Container

Problem: By default this module floats as a mini-sidebar in the right margins of your center well. Generally, its purpose is to highlight important information, but in RWD this will be displayed after the center well content, well below the fold.

Solution: Use the Content Optimization Container component to mark an alternate location for the component to be displayed in a mobile layout. (Actually, you use two of these, one to label the default location and the second to mark the mobile location, with matching IDs).

You can also use the Content Optimization Container component to hide content in one view or the other.

How UBCMS Components Hold Up in RWD

Many components work well in RWD-enabled smaller screen sizes, but some function inconsistently at this time and will require further development. They are marked below as 'inconsistent' or 'in development.' We are committed to making all components RWD-friendly, but if any components essential to your site are not yet fully compatible, you might wish to wait before enabling your site as RWD.

Component Status Concerns
Audio Player Fair Display overflows small-screen devices but does not trigger horizontal scrolling. Functional, but volume controls may be cut off. No further development planned.
Body Text Good  
Breadcrumbs Good  
Button Good Shapes and text alignment ignored for all modes.
Callout Good New color/icon choices for all modes.
Call to Action Good New right-aligned 'See all' style for all modes.
Caption Good  
Carousel Good

Fully optimized for RWD with swipe and touch controls. In tablets, two slides will be shown side-by-side.

Collapsible Content
Collapsible Grid Good  
Column Control Good Always converts to one, single column. Column content is displayed full-width, sequentially. Compensate as needed with Content Optimization Container.
Content Optimization Container Good (created to support RWD)
Date Created Good  
Directory Entry Good  
Divider Good  
Dynamic List elements Good  
Emergency Alert Banner Good  
Event List Good  
External Embed Good Depends on use.
Fat Footer Good Starts collapsed, and opens up, like the navigation menu. Label setting just displays on small devices.
File Download
Flex Module Good Appearance changes slightly in small devices (right and left column modules move to bottom of page and are styled differently).
Form elements Good  
Full-Width Carousel Good Fully optimized for RWD. Will support swipe to change slides.
Header (new brand) Good Social buttons and Title links now displayed in the RWD menu.
HTML Snippet Good Depends on use.
Intro Text
Key Tasks Good Stacks under the adjacent slide deck or photo.
List Builder Good  
Map (Google) Good  
Mobile Menu Good (only shows on small screens)
News Headlines
News List Good  
On This Page Good  
Some images may enlarge as they stretch to full-width. Different images are handled with varying compression quality (file sizes) for hi-res desktop, mobile, mobile-hi-res, and tablet using picturefill.js.
(Related Content)
Photo Gallery (new) Good
On small screens, the height has a fixed aspect ratio and adjusts to the width of the device screen.
Photo Teaser Good  
Pull Quote Good  
Related Content Container (RCC) Good
On small screens, content moves to bottom of page, images go full-width, but Share This moves to top of page near Published date (if present), otherwise shifts to bottom with rest of Related Content. Print button is hidden.
Search Component Good  
Share and Print Good (see Related Content Container)
Shared Content Reference Good  
Site Map Good  
Slide Deck: Horizontal Good Some of the layout has changed. Will support swipe to change slides in RWD.
Slide Deck: Vertical Good  
Social Button Good On small screens, Social Buttons in header shift into menu.
Table Fair On small screen devices, tables are shrunk as narrow as possible. If too wide, can be dragged left or right, but no scroll tools are shown. No further development planned.
Tabs Good  
Title Good  
Top Navigation Good Related links will be shown in the menu. Menu Label (in List settings) will display a special heading only for small screens.
User Info Loader Good  
Video (YouTube) Good  
Video Gallery (YouTube) Good  

Was This Page Helpful?

(so we can thank you or request more details)
( addresses only please)