Preview Your Site in Mobile

Mobile users are major users of UB websites, so it is critical to know how your pages appear on small-screen devices and to optimize them accordingly (often called Responsive Web Design or RWD). Special tools preview your page for a variety of screen sizes.

Classic Flex UI

This information refers to the Classic version of the UBCMS.

On this page:

Last Reviewed: November 5, 2020

Overview

Many browsers have a built-in tool that automatically adjusts a preview of your page to a variety of preset screen sizes.

Instructions

The following steps are for two popular browsers, Windows Firefox and Chrome, but other browsers will likely have a similar tool.

  1. Go to the page of interest in your browser.
  2. Open the Inspect mode, usually by right-clicking on the page and then select Inspect or Inspect Element.
  3. A new screen will open, probably below your UBCMS page, but this screen can be moved around or expanded.
  4. In this inspection screen, look for a small 'Toggle Device Toolbar' button. For Firefox this is in the upper left. Chrome places it in the upper right.
  5. Engage that button and your page will reload in a mobile device view (small screen-size). You may need to refresh the page.
  6. At the top of the screen there will usually be a list of different sized devices so you can test a variety of screen sizes. Swicth between them to see a preview of your page in that screen size; e.g. we suggest iPhone 6/7/8 as a common medium-sized device.
  7. These previews do not allow for the device's browser top and bottom toolbars, so for a more accurate fit, use the Edit feature to shrink the preview even farther. The iPhone 6/7/8 would be 375x550 pixels.
  8. Click the button again in the inspect screen to turn this mode off.

Previewing a Page in the Author Environment

For a page in Author, before you switch to the Inspect mode, edit the URL in the browser location bar to strip away the Sidekick, Content Finder and some of the other extra code:

  • delete the cf#/
  • add ?wcmmode=disabled
  • e.g.
    https://ubcms-author.buffalo.edu/cf#/content/www/cmshelp.html
  • will become
    https://ubcms-author.buffalo.edu/content/www/cmshelp.html?wcmmode=disabled

If you navigate away from the page, you will probably have to adjust the new page's URL in a similar way.

Was This Information Helpful?

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