Working with responsive content

Responsive titles adapt automatically to the view sizes of your users' devices. Built-in features allow you to create titles that automatically adapt to different devices and device orientations. These responsive design features eliminate having to maintain multiple titles or implement complex branching.

To enable the responsive features and start with a responsive title, click New Responsive Title from the Getting Started window or click Create New Title from the File tab and select Responsive Title. To enable an existing title, click Title Options on the Design ribbon and enable the Enable Responsive Title check box. For details, see Designating a title as responsive.

When your title is enabled for responsive design, a device selection bar is added to your display area. The device selection bar contains five graphics representing the views popular with today's devices.

From left to right, the device views are:

	Phone Portrait View
	Tablet Portrait View
	Desktop View
	Tablet Landscape View
	Phone Landscape View

The view bar allows you to quickly switch between views to verify how your text and objects are displayed in each view. When you add objects to the title, the objects are optimally scaled and moved for each device view. Click a device graphic within the selection bar to see how your content will look on each device.

The arrows displayed next to the device graphics in the device selection bar represent the flow of inheritance of the development changes that you make in the current device view. The arrows indicate the direction of the responsive inheritance flow, starting from the desktop to the tablet and then to the phone. Additionally, the color of the arrow is representative of the device on which a override was made in a particular device view (green if the override was done/inherited from the tablet view or orange if the override was done on the phone). For example, the properties for the objects displayed in the Phone Portrait View are inherited from the current settings of the properties of the objects in the Tablet Portrait View.

A change you make in the non-deskop device view is considered an override to the responsive inheritance setting from the parent device. To see how overrides on an object are indicated in the work area, add an object, like an image or text block, change to a device view, and move the object. Notice also that the color of the adorners around the object and the color of the label of the property in the ribbon area also change when you move the object. The color indicates that device in which an override was placed on the object. Change the device view again and notice how the override is placed in the view.

If you prefer not to make customizations (overrides) for a particular view, or you are not yet ready to make those customizations available to reviewers or learners, you can disable the view. To do so, use the switches on the device selection bar for the appropriate view. Enable the switch () to edit and publish the view. Disable the switch () to temporarily prevent editing or publishing of the view. If a phone view is disabled when the title is published, that device will instead display the parent tablet view. If the tablet view is disabled, it will display the desktop view. For example, to disable the phone landscape view and publish with tablet landscape displayed on the phone in landscape mode, disable the corresponding switch as follows:

You may enable or disable a view as frequently as desired while you are developing the title. You will not lose customizations if you disable a view. Be sure the view is appropriately enable or disabled when you publish the title.

If you do not like how an override is displayed, you can quickly undo the override and reset the object to its original property setting. You can reset the override in the current view or in all views. To reset an override on an object, click Reset in the Overrides group on the Properties ribbons (Properties, Style, Position & Size) for the object or right-click on the object and select Reset Overrides. To reset an override for an assignable unit, chapter, section, or page, right-click it and select Reset override. For details, see Resetting overrides on an object in a responsive title, Resetting overrides on a chapter, section or page in a responsive title, and Resetting overrides on an assignable unit in a responsive title.

Off-page object placement

For responsive title designs that need to have different objects appear instead of others on the different devices, you can swap the objects on and off the page. For example, you may want Image1 to appear on the desktop and tablet, but want Image2 to appear on the phone. During run mode, only objects on the page will be displayed, meaning if you drag objects off a page for a specific device, they will not appear during Run Mode and Preview Mode and also during publishing. So in this scenario, you would position Image1 on the page and place Image2 off the page for desktop and tablet views. In the phone views, you would drag Image2 onto the page and drag Image1 off.

When you delete an object from a responsive title, the object is deleted from the Title Explorer and all device views in the title. You will receive a warning message when deleting the object from non-desktop views. For details, see Deleting an object in an responsive title.
You can use conditional actions to place the appropriate images on (or off) the page. For details, see Specifying conditions.
Off-page objects are not published. Objects placed off the page in a view are not referenced in the published content unless there is a Move To action associated with the object The significance here is that the object’s resources will not be downloaded to the viewing device.

Quickly moving and resizing objects across all devices views

You can quickly move and resize objects across all the devices without changing to each view. This will allow you to force-move an object to a desired position/size regardless of its inheritance state. While moving or resizing one or several selected objects, drag while holding down Shift and Ctrl. The objects on all devices are changed accordingly. For more information about moving objects using Ctrl+Shift drag and the rules that are applied, see Moving and resizing objects.

Responsively scaling objects

By default, most objects are scaled for each device view after insertion using a calculated formula. This involves taking the object’s rectangular information and the current device the user is in. Upon switching devices, the objects size and position are proportionally scaled based on the width of the two devices using the constants below:

Device View	Width	Height
Phone Portrait	480	763
Phone Landscape	785	450
Tablet Portrait	785	1000
Tablet Landscape	1009	662
Desktop	1009	662

In non-deskop view, menus and form objects are not scaled. Additionally, there is no scaling for when the display for audio is a controller or a speaker icon and for tables of content when the type is drop-down list.

Page height growth rules

For objects that fit within the desktop page height, the page height of other views (in particular Tablet Landscape and Phone Landscape) grow so that those objects will remain on the page. (This is also true from TabletLandscape to Phone Landscape.) This applies to objects that are completely on the page as well as partially on/off the page. If an object is completely off the page, then the page will not grow for the other devices.

If the width of a text block on desktop view is such that it has to be narrowed - and the text block vertically grown - on other views, the page height in those other views will also grow to accommodate the text block.

Responsive rules for objects and text

Here's what to expect when developing with these elements in responsive titles:

Chapters, Sections, Pages, and AUs	The page width is adjustable in the desktop view only (on both the Design ribbon and the Properties ribbon. In the other responsive views, the width is always fixed. The page height is inherited only at the object level. In other words, the page inherits from the section, the chapter inherits from the title, and so on. The page height does not get inherited across views (from desktop to lower views). You can change the page height in all views on the Design ribbon and the Properties ribbon. The Inherit Page Size check box on the Properties ribbon applies to the desktop view only; and appears as Auto Page Height on the non-desktop views because the page width cannot be changed. The default HTML page alignment for responsive titles is Centered. Additionally, you cannot adjust the HTML page alignment in responsive titles. For existing titles, if a regular (not responsive) title is enabled to be responsive, then the Centered HTML page alignment will be applied and the control disabled (and the responsive rules apply). If a responsive title is changed a regular title, the HTML page alignment is still Centered and the control is enabled so you can change it if desired.
Text	For responsive titles, options are available for you to conveniently scale the text within a text block. This is helpful when adjusting how the text in a text block appears within the different device views for responsive titles. Scaling the text creates an override of the default responsive inheritance. (The text scaling controls are disabled on the desktop view since you cannot create overrides in that view. Additionally, the labels in fields will change colors to reflect the current override values for each device view). In cases where there are multiple text styles in a text block the base values in the Text panel will show the text style of the first text in the block and an indicator - ± - that multiple values exist, for example 12±. Buttons have automatic overrides if they contain text and will not scale for font size. This ensures that the button text appears the same size across all devices instead of scaling downward from desktop and becoming smaller in the lower devices.
Buttons	Buttons do not scale.
Images	Images have normal scaling upon being inserted into a device. If the image fits on the page by default, it is also inserted into every other device as an override so that it is the same exact size.If the image is larger than the current device’s page either horizontally or vertically, the image is placed in desktop device then scaled down for the device views. If the image is larger than the current device’s page and larger than desktop, the image is placed into desktop view and scaled down to the boundaries of desktop. From there it is scaled further down for to your current device. Images are not be scaled up. For images used in a background, the image is scaled using the scaling rules. Additionally, if the background image resource on desktop repeats or tiles, then it will repeat or tile in lower views. If it does not repeat or tile on desktop, then it is prevented from repeating or /tiling in lower views.
Shapes	Shapes have normal scaling upon being inserted into a device. If the shape fits on the page by default, it is also inserted into every other device as an override so that it is the same exact size.If the shape is larger than the current device’s page either horizontally or vertically, the shape is placed in desktop device then scaled down for the device views. If the image is larger than the current device’s page and larger than desktop, the image is placed into desktop view and scaled down to the boundaries of desktop. From there it is scaled further down for to your current device. Shapes are scaled-up to the desktop if it is drawn elsewhere, then follow the responsive inheritance to flow the size back down to lower views. This maintains the original size in the view where drawn without creating an override. For shapes used in a background, the shape is scaled using the scaling rules. Additionally, if the background shape on desktop repeats or tiles, then it will repeat or tile in lower views. If it does not repeat or tile on desktop, then it is prevented from repeating or /tiling in lower views.
Character Poses	Character poses are images and therefore use the same responsive scaling rules.
Animations	The size is scaled regardless of the of the view and then scaled responsively. The playing continues when a device is rotated. The resource is be overridable in other device views.
Audio	Audio objects need separate rules for scaling and size overrides due to the controllers. The standard audio controller or speaker icon will not scale and not have an override able size. If using an image as the controller, the audio object is scaled like other image objects and allows size overrides. The playing continues when a device is rotated. The resource is be overridable in other device views. On mobile devices, only .mp3 audio file types are supported.
Video	The video size is scaled regardless of the of the view and then scaled responsively. The playing of video continues when a device is rotated. The video controller is not overridable. The currently selected controller or image is applied across all devices and views. The video resource is be overridable in other device views. On mobile devices, only .mp4 video file types are supported.
YouTube Videos	The playing of video continues when a device is rotated. The video controller is not overridable. The currently selected controller or image is applied across all devices and views. The video resource is be overridable in other device views.
Questions, Tests, and Surveys	In responsive titles, questions are inserted with automatic overrides on the question's size and position across all devices. Property changes for questions, tests, and surveys will be propagated to all views. Only unique position and size changes will be permitted for question element objects (such as text and image resources). The default width of text blocks are increased within questions so that when scaled down they will help prevent text from scrunching or wrapping. An additional 10 px is placed between radio buttons/check boxes and their label text. Drag and drop and hot spot questions must include an image with the question. For this image the image resource drop-down list on the image’s Properties ribbon is disabled. The image can only be changed using the Question Creator. As with other question changes, this change is applied to the question across all views. For hot spot questions, the spots are automatically adjusted across the device views.
Menus	The menu object is treated like other text-based objects. The size is not scaled in non-desktop views. You can scale text in non-desktop views (on the Properties ribbon and Home ribbon). You can increase the text (Text Increase/Decrease) in all views (on Properties ribbon and Home ribbon).
Tables of Contents	Table of contents objects are treated like other text-based objects. The size of the object is not automatically changed. Text scaling is available on non-desktop views (on the Properties ribbon and Home ribbon). You can increase the text (Text Increase/Decrease) in all views (on Properties ribbon and Home ribbon).
Progress Bars	For progress bars that contain images, the same image-scaling rules are applied. Currently, only progress bar orientation is overridable.
Form Objects	The size of form objects do not get automatically scaled based on inheritance..You will need to make them a different size if desired. This includes the associated text label for check boxes and radio buttons. Text scaling is available on non-desktop views (on the Properties ribbon and Home ribbon). You can increase the text (Text Increase/Decrease) in all views (on Properties ribbon and Home ribbon). Scaling the text up or down will not automatically change the size of the form object. You will need to change the size to be appropriate to the text size, if desired. Form object properties will not be overridable.
HTML Extensions, RSS Feeds, and Web Windows	The container for these objects are scaled by position and size similar to images.
Smart text objects	These include date/time, page title, page number, and breadcrumbs. They are handled the same as a text block when determining the responsive size and position. You can increase the text (Text Increase/Decrease) in all views (on Properties ribbon and Home ribbon). You can increase the text (Text Increase/Decrease) in all views (on Properties ribbon and Home ribbon).
Charts	Charts are images and therefore use the same responsive scaling rules.
Equations	Equations are images and therefore use the same responsive scaling rules.
Actions, Triggers, and Variables	Actions and triggers are not be overridable. You can use multiple actions and conditional actions to change the behavior between views. Use the Device Rotation trigger to set actions to occur when a tablet or phone’s orientation is rotated. Page level triggers (On Show, On PageShow) are not refired when a device is rotated. This prevents objects from hiding or showing inappropriately or - more importantly - Modify Variable actions from being doubled-up. If you want an action to occur in that scenario, use the Device Rotation trigger to accomplish it. Actions can be made conditional to allow you to invoke different behaviors on alternative device views. Use the reserved variable CurrentView to compare against. The stored values are: Desktop TabletLandscape TabletPortrait PhoneLandscape PhonePortrait For example, you can compare that CurrentView “Is Equal to” TabletLandscape or “Contains” Phone or “Does Not Contain” Desktop. (You can also shortcut, for example, “Contains” “T” since only the Tablet choices contain a capital T, or “Contains” “L” since only the Landscape choices contain a capital L.) If a Change Contents action is executed on the page after the initial load (for example, using a button click), then the resulting condition/appearance is displayed even when the device is rotated. For example, if Change Contents A to new value B is executed on the device in landscape, when the device is rotated to portrait the new image B will still be shown.
Page Layouts	You can add and manage page layouts on the Properties ribbon for the page. Page layouts are remapped for each device view for optimal spacing, while still taking into account the majority of themes. (Some themes have unusually wide border, header or footer graphics. In those cases the layout may overlap slightly.) If you create a page with a layout and then decide to change the layout for the page. as long as there are no objects yet added (that is, contains empty layout containers), the existing layout is removed and replaced with the new layout. Note that if objects exist, they are not applied to the new layout. The newly selected layout is applied to the page.
Transitions	Transitions are not overridable.

For more information, visit these RCD-related submissions in our eLearning Brothers Community: