Responsive Web Design (RWD)

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.

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.

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.  

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.

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.)