Sitecore ASP.NET CMS 6.6 Features: Device Simulation

This blog post describes aspects of the device simulation feature in the Sitecore ASP.NET web Content Management System (CMS). The content of this post derives from the “MVC and 6.6 Killer Features” presentation at Sitecore Symposium.

Device Simulation Overview

Device simulation allows CMS users to access approximations of how pages managed in the CMS will appear on various devices, in various versions of browsers, and on various operating systems. Device simulation runs dynamically in the CMS users browser so that CMS users can get an idea of how pages render on various physical devices without actually having those physical devices available.

It is important to differentiate physical devices, such as specific versions of the iPhone, from device simulators (or just simulators), which represent categories of devices such as all iPhones. Multiple physical devices map to individual device simulators. For example, all versions of iPhones map to the iPhone device simulator. Put another way, Sitecore uses a single simulator to represent multiple physical devices in a single category, but provides numerous simulators for different categories of devices. For example, Sitecore provides one device simulator for all iPhones, another for iPads, as well as additional simulators for Android tablets, large Android phones, Android phones, Blackberries, feature phones, high definition televisions, and Windows phones.

It is just as important to differentiate device simulators from layout devices. Among other uses, Sitecore uses layout devices to apply different layout details to an item based on criteria in the HTTP request. For example, you can define a mobile layout device and criteria to trigger that device, and in your content items, apply layout details for that mobile device that differ from those defined for the default layout device that by default handles requests from any other types of clients. Multiple device simulators map to a single layout device. For example, both iPhone and Android phones could trigger the mobile layout device.

It is also important to note that device simulators are exactly that: simulators. Device simulation uses the CMS user’s browser. That browser typically supports features such as Adobe Flash and Microsoft Silverlight. Therefore, the simulator defines traits, which indicate features to remove from the page for that simulator. For example, when processing a page for use with the iPhone simulator, Sitecore removes Flash and Silverlight components from that page. For Android device simulators, Sitecore removes only Silverlight components. Simulators are not full-fledged emulators with which developers may be familiar from their use in Integrated Development Environments (IDEs) such as Microsoft Visual Studio. Simulators do not support all of the characteristics of and actions available in emulators, let alone the devices they represent. For example, most CMS users still do not access the system using browsers that support touchscreen features. Simulators are convenient, lightweight, easy to use, and can help CMS users identify potential issues on a wide range of devices, but are not intended to be completely accurate.  Research, plan, design, implement, test, and maintain your solutions accordingly.

Device Simulation Usage

To access device simulation, in Preview mode (not the Page Editor), the CMS user selects the Experience tab on the ribbon that appears at the top of the page, and then selects a simulator in the Simulator group.

Screen capture of selecting a simulator

The browser refreshes to render the site using the selected simulator.

Screen capture of android simulator

For simulators that support both vertical (portrait) and horizontal (landscape) modes, a the CMS user can click a Rotate command to access the alternative orientation.

Screen capture of android simulator in landscape mode

Simulator Definitions

Sitecore defines characteristics of each device simulator using items beneath the /sitecore/layout/Simulators item using the System/Layout/Preview Simulator/Simulator data template, such as the /sitecore/layout/Simulators/iPhone item for the default iPhone simulator. Simulator definition items indicate the graphic to render for the simulator as well as screen height, width, offset, and scaling factors.

Screen capture of a simulator definition item

Each simulator contains an additional field to specify a user agent. For each incoming HTTP request processed by Sitecore, layout device resolution logic determines the appropriate device from the user agent associated with the request. When requesting a page for use in a simulator, Sitecore passes the value of that user agent when placing the HTTP request for the content to render. I recommend that you use the MobileDeviceDetector Sitecore Shared Source module to activate your mobile layout device.

A child item of the device simulator definition item based on the System/Layout/Preview Simulators/Simulator Rotated State data template provides equivalent information to use when rendering the simulator in horizontal mode (when the CMS user clicks the Rotate command while accessing a simulator). Additional children of the simulator definition item using data templates such as System/Layout/Preview Simulator/No Flash Support Trait and  System/Layout/Preview Simulator/No Silverlight Support Trait data templates define traits of the simulator.  Trait definitions can indicate JavaScript and CSS resources to include in the page, which can disable features like Adobe Flash and Microsoft Silverlight.

Screen capture of a trait definition

Sitecore customers can update existing simulators and add additional simulators. For example, it might be appropriate to add a simulator for smaller tablets such as the iPad mini. Sitecore customers that present their web sites on specific types of hardware such as on-premise kiosks can define simulators that represent those devices. Developers can create packages and serialization files for custom simulators, and other implementations can download and install those packages to define those simulators on their systems.