OU Campus Content Management System
Previewing a Page
The Multi-Browser Preview feature is a tool that provides cross-browser, cross-platform
rendering of web pages prior to publishing to the production server or publish target.
A page can be previewed as it would render with specific browsers and on specific
operating systems, including mobile platforms. This allows for testing a page to ensure
compatibility with five desktop browsers: Chrome, Firefox, MS Internet Explorer, Opera,
and Safari, as well as versions of iOS and Android for eight types of mobile hardware.
Several versions of Windows, Mac, and mobile operating systems are supported as well
as the most current and previous releases of each browser version providing a wide
variety of testing scenarios that can render a side-by-side comparison in order to
languages included in the code.
After making a selection of browsers, the previews are provided as thumbnail images,
which can then be shown in a new tab and viewed as a slide show. Additionally, the
screenshots can be downloaded in PNG format as a ZIP file and shared. Up to 25 combinations
can be chosen at one time. An OU Campus user can bookmark the page and then navigate
to other areas of the CMS to perform tasks such as editing a page and then return
to the view when the notification is shown indicating the rendering has completed.
The Multi-Browser selection screen includes the following features and functionality:
- Choosing a publish target
- Selecting up to 25 combinations of browser versions and platforms
- Automating the choice to include just the latest three releases of a browser version
- Resetting the selection
- Choosing to view mobile as portrait or landscape
- Initiating the preview
The Multi-Browser Preview screen includes the following features and functionality:
- Lists the number of rendered previews
- Filtering of the rendered thumbnails specific to OS, browser, and device
- Exporting the previews as PNG images in a ZIP package
- Grouping by browser or by operating system
- Previewing as slideshow
- Previewing in a larger window
To Initiate a Mulit-Browser Preview
- After saving a page or from Preview mode, click the Multi-Browser Preview icon in
the upper, right corner of the preview screen. This displays the combinations of browsers
and platforms that can be selected for Multi-Browser Preview.
- Select the OS Version and Browser Version combinations to preview by clicking on the
Up to 25 may be selected. The counter next to the Reset button shows how many previews
have already been chosen. Each individual selection can be cleared by clicking the
name or number again, or the entire field may be cleared by clicking Reset.
- If necessary, choose a Mobile Orientation:Portrait or Landscape.
- Click Preview. It is possible to bookmark the page in order to return to the view later. Bookmarking
a page is browser dependent, but for some browsers this may be accomplished by dragging
the page icon in the URL bar to the bookmark bar. The last-used selection is made
It is also possible after clicking Preview to return to the browser selection view
by clicking the Multi-Browser Preview icon.
During the time it takes to render the previews, the number of completed previews
is shown as a subset of the total number, and previews not yet completed are shown
as queued. If it is not possible to render one or more previews, then the number of
previews that could not be rendered in the elapsed time frame is indicated within
each preview thumbnail.
Viewing Image Previews
When completed, thumbnail images of the page show what the page will look like in
the selected browsers.
Click on a thumbnail image (or the linked text identifying the browser/platform combination)
to view the screenshot. From this view it is also possible to navigate slide-show
style through the available images. It is possible to click the image to enlarge it
to a full size image.
The grouping of the thumbnails can be changed with the Group By buttons by selecting
either Browser or OS.
This changes the organization of the thumbnails, which can aid in troubleshooting
issues by isolating the issue as a browser-specific or platform-dependent.
Exporting Image Previews
Click the Export ZIP button to create the ZIP package that can be exported to one's
local computer. The ZIP package includes each individual thumbnail image as a PNG