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.
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:
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.
As sites become enabled, we will include them in our list of live sites. Look for the asterisk (*).
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:
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.
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
It is very important to review for changes that may impact your business outcomes or user experience.
FOR YOUR ENTIRE WEBSITE
FOR YOUR MOBILE AUDIENCE
Using Google Analytics, you can actually see which pages are being used the most on mobile devices.
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.
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. || |
|A component we modified ourselves is not working well in RWD.|| |
|A component University Communications modified for us is not working well in 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.
Any UBCMS page in Author can be viewed as if RWD was enabled and it was being viewed from a smaller-screened device.
|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.
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.
|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. |
|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.|
Fully optimized for RWD with swipe and touch controls. In tablets, two slides will be shown side-by-side.
|Collapsible Content ||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)|
|Dynamic List elements||Good|
|Emergency Alert Banner||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 ||Good|
|Flex Module||Good||Appearance changes slightly in small devices (right and left column modules move to bottom of page and are styled differently).|
|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 ||Good|
|Key Tasks||Good||Stacks under the adjacent slide deck or photo.|
|Mobile Menu||Good||(only shows on small screens) |
|News Headlines ||Good|
|On This Page||Good|
|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.|
|Photo Gallery (new)||Good ||On small screens, the height has a fixed aspect ratio and adjusts to the width of the device screen.|
|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.|
|Share and Print||Good||(see Related Content Container) |
|Shared Content Reference||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.|
|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 Gallery (YouTube)||Good|
Learn from our pilots and best practices.