University at Buffalo - The State University of New York
Skip to Content
UB Web Management

Transforming UB’s digital communications through process and tools

Responsive Web Design (RWD)

Responsive Web Design optimizes your site interface to whatever 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.

Digital Launch Deadline

By December 20, 2017, ALL SITES will have RWD enabled. Older sites, and those which were fast-tracked, will need to do remediation. See more details below.

New Brand Features

This page will be updated to reflect ongoing technical adjustments for the new digital brand. > read more about the digital brand transition

On this page:

Overview

Responsive Web Design (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

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 the page is viewed through progressively smaller screens, the content becomes stacked as a series of breakpoints are reached.

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

Live Examples of RWD-Enabled Sites

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

Step 1: Review the digital brand rollout timetable

As the new digital brand rolls out, new sites will be created RWD-enabled 'out of the box', but existing sites will likely need to make adjustments to the layout of their pages. By December 20, 2017, ALL SITES will have RWD enabled.

  • Older sites that are not yet RWD enabled will need to audit for smaller-sized screen use and make any adjustments to their pages preferably long before the December deadline. Follow the steps below.
  • Older, RWD-enabled sites are all set, but should still keep smaller-screened use in mind as you update your pages.
  • Sites created on or after April 10, 2017, are RWD-enabled. Keep smaller-screened use in mind as you build out your pages.
  • New sites that were fast-tracked into the UBCMS should also follow the steps below.

Digital Brand Timetable

Date Milestone
April 10, 2017
  • New brand components become available for all sites.
  • Brand Preview and deployment becomes available for all UBCMS sites.
  • All new site builds will be produced and deployed with brand standards and RWD in place.
June 1, 2017
  • All sites not deployed with the brand must identify a target deployment date. Please submit your plan.
January 18, 2018
  • All transformations must be completed.

Step 2: Audit Your Site

Older sites that are not yet RWD-enabled and brand new sites that were fast-tracked into the UBCMS should thoughtfully assess how their 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 (for example, 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 remediation 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.

FOR YOUR ENTIRE WEBSITE  

  • 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?

FOR YOUR MOBILE AUDIENCE

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.

Step 3: Remediate Your Site

Once your audit is complete, your team needs to make any necessary adjustments before requesting that your published site have RWD 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.)

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

Step 4: Turn on RWD for Your Site

When you are ready to turn on RWD for your site please fill out the form below and include the following:

  • Your name
  • Your role (if other than Site Owner)
  • Your contact information
  • Site URL
  • Date you would like to have RWD turned on

Please also affirm the following:

  • That you performed a Technical Audit
    • Did you review any snippets or embeds?
    • Did you review any components that were modified?
  • Did you remediate any issues that were identified?

Additional Resources

How to Preview Your Site in RWD

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

We provide two tools to assist you. Both can be found on the RWD Preview page.

RWD PREVIEW TOOL

  • Navigate to the RWD Preview page.
  • Click the checkbox to Enable RWD preview mode (no need to click "ok"). 
  • This temporarily enables RWD on all UBCMS Author pages you view in your browser until you deselect the box.
    (Leave the preview tool's window open, then deselect the box when you are done.)
  • Now view the pages that you want to audit in Author and manually resize the browser window to see how they change.
  • Or, use the RWD Resizer Tool to select specific device sizes.

RWD RESIZER TOOL

  • Navigate to the RWD Preview page.
  • Drag the Resizer Tool on to your browser toolbar.
  • As you view the page you are interested in, click the Resizer Tool and choose one of the listed screen sizes.
  • When you are done, click the "x" in the upper right corner of the Resizer's toolbar (not the browser!!).

Is your site already RWD-enabled?

You can also still use the Resizer Tool to preview specific device sizes. Or just use the normal preview mode in the Sidekick and manually make your browser window narrower.  

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 Old Brand Concerns New Brand Concerns
Audio Player Inconsistent Display is too wide. Functionality may be device dependent; e.g. works on iPhone.
 
Body Text Good    
Button Good   (Shapes and text alignment ignored for all modes--details.)
Callout Good   New color/icon choices for all modes--details.
Call to Action Good   New right-aligned 'See all' style for all modes--details.
Caption Text Good    
Carousel Good in new brand Only lead image is shown (first in list or first random) and no controls are provided. This is intentional and will not be fixed.

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

Collapsible Content
Good    
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 (Was created for RWD.)  
Date Created Good    
Directory Entry Good    
Divider Good    
Dynamic List Good    
Emergency Header Good    
Event List Good    
External Embed Good Depends on use. Depends on use.
Fat Footer Good Starts collapsed, and opens up, like the navigation menu. (Also note Label setting just for small-screen 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).  
Form Container Good    
Formstack Forms
Good    
Full-Width Carousel Good in new brand Bad. Hidden in RWD but descriptive text and title remain. RWD issues will not be fixed for old brand. Good. Fully optimized for RWD. Will support swipe to change slides. (details)
Header (new brand) Good n/a Social buttons and Title links now displayed in the RWD menu.
HTML Package Good Depends on use. Depends on use.
HTML Snippet Good Depends on use. Depends on use.
Intro Text
Good    
Key Tasks Good (Stacks under the adjacent slide deck or photo.) (Stacks under the adjacent slide deck or photo.)
List Builder Good (May be untested variations.) Teaser thumbnails now square. (details)
Main Header Good (Search not implemented - see Search component.)
Will stop working when digital brand launches. Authors will need to change to new 'Header' component. (details)
Map (Google) Good    
Mini Header Good   Will stop working when digital brand launches. Authors will need to change to new 'Header' component. (details)
News List Good    
On This Page Good    
Photo
(Core)
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
(Related Content)
Good    
Photo Gallery (new) Good
Created for RWD. Replaces the RWD-unfriendly Photo Gallery (RETIRED) and Photo Slideshow (RETIRED) components. In RWD, the height has a fixed aspect ratio and adjusts to the width of the device screen.
Photo Gallery (retired) Replaced Please switch to new Photo Gallery component which is more RWD-friendly.
Will be switched off completely and flagged with a red warning box in Author. (Will not appear in preview or on the live site.)
Photo Teaser Good    
Pull Quote
Good    
Photo Slideshow (retired) Replaced Please switch to new Photo Gallery component which is more RWD-friendly. (Broke the whole page, spanning off the screen to the right and adding side-to-side scrolling on the whole page.) Will be switched off completely and flagged with a red warning box in Author. (Will not appear in preview or on the live site.)
Related Content Container In development
Shifts BELOW center well. Adjust as needed with Content Optimization Container. (Some changes to layout but still in development.)
Search Good    
Share and Print Good Moves below Post Date (if on page), otherwise stays with Related Content Container. Print is hidden intentionally. (Some changes to layout but still in development.)
Shared Content Reference Good    
Simple Footer Good    Will stop working when digital brand launches. Sites will need to switch to 'Footer' component (renamed version of current Fat Footer). (details)
Site Map Good    
Slide Deck: Horizontal Good In small devices, slides appear without the descriptive text.
(Manually upgrade from the older version.)
Some of the layout has changed. Will support swipe to change slides in RWD. (details)
Slide Deck: Vertical Good (Manually upgrade from the older version.) Some changes to style and colors.
Table Ok Tables now scroll in RWD but often due to the nature of their content they require an alternate presentation for mobile (use the Content Optimization Container).  
Tabs Good    
Title Good   H5 size added, looks like heading in flex module.
H4 will become blue.
In old brand H5 and H4 look identical.
Top Navigation Good Moves into menu. Related links are hidden. (Also note Menu Label setting just for small-screen devices.)

Related links will be shown in the menu.

User Info Loader Good    
Video (YouTube) Good    
Video Gallery (YouTube) Good    

Was this page helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)