Create responsive design rules

With Sitefinity CMS you can configure pages to be displayed differently on mobile devices. You can configure different display settings for different mobile devices. You must first define the rules for the output devices, then for each of the defined devices, choose how to display the pages.

For more information about rules, see Responsive design rules.

For example, you can define that for a tablet, if a page has 4 columns, they will be displayed as 2 rows and 2 columns, but for a smartphone, 4 columns will be displayed as 4 rows.

1. Click Design » Responsive & Mobile design.
   A list of all created rules appears.
2. Click Create a group of rules.
3. In Name input field, name the group.
   The group name will be used by Sitefinity CMS only to refer to the rules in the list of rules.
4. In the dropdown box, choose the group of devices for which you want to define rules.
   For example, choose tablets or smartphones.
   A list of the most popular devices appears. They have predefined rules, such as screen resolution, orientation, etc.
   To see the predefined rules, click Details button of the respective device.
5. Select one or more devices for which you want to setup the way page content is displayed.
   The settings that you define in Step 6 will be applied to any of the devices you have selected.

   If you want to define rules for a device that is not in the list, click Add custom… button.
   You can define criteria that will be met by more than one device. For example, all devices whose height is less than 600 pixels or apply to all devices in landscape mode.

   1. Enter a description of the device(s).
      For example, enter the resolution or the model.
   2. Define one or more criteria for the media for which the setting in Step 6 will apply:
      • Choose the Size of the display.
        You can enter either Width or the Height of the browser or the Device width and Device height. You can enter fixed values or a range of values.
        Wight and Height media feature describe the width and the height of the targeted display area of the output device.
        Device width and Device height media feature describe the width of the rendering surface of the output device.
      • Choose for which orientation the setting will be applicable.
      • Enter the Aspect ratio.
        This media feature is defining the ratio of the value of the Width media feature to the value of the Height media feature.
      • Enter the Resolution.
      • Choose whether the display is monochrome by selecting Monochrome checkbox.
      • Choose whether the device having Grid display.
        This media feature is used to query whether the output device is grid or bitmap.
   3. In Result: media query css the system automatically generates the media query, which you can directly edit by clicking Edit button and when finished clicking Reset.
   4. When finished setting the rules for the output device, click Save.
      For more information about, see Media features.

      EXAMPLE: You want to define how a page will look like on a group of devices whose targeted display area is less than 300 pixels wide and you want to define how the content will look like in landscape orientation. To do this, click Add custom… button. In Size select Range (min, max-width) and in Max-width input field, enter 300. Under Orientation, choose Landscape and click Done.

6. Under Apply behavior to..., choose how to display the pages on mobile devices.
   Select one of the following:
• Transform the layout
  • Under Specific CSS file for transforming layout and design, choose whether you want to apply a CSS file or a theme to the selected devices.
    1. To apply a CSS file, click Select a CSS file and browse your project’s folders to find the file.
       The CSS will be applied every time a device like the one specified in Step 5 is detected.
    2. To apply the default themes, select The CSS file inherits the default theme checkbox.
       The default theme will be applied and then the selected CSS file will be applied.
  • On the mobile devices, you can choose to display the columns of your original page as rows or fewer columns.
    For example, if you have a 5 columns layout element, the columns will look too narrow and difficult to read on a smartphone. You can choose to display the columns as rows by clicking 5 rows element.
• Open a specially prepared site.
  If you already have a mobile version of your website, you can redirect the mobile devices specified in Step 5 to your mobile pages.
  To do this, you must select the root page of your specially prepared mobile site.
  1. Under Root page of the specially prepared site, click Select a page.
  2. Select the root page and click Done.
7. To apply transformation to the Navigation widget, expand Navigation transformation and perform the following:
   1. Click Add transformation button.
   2. In the first dropdown box, choose one of the following:
      • All navigation widgets
        The transformation you specify is applied to all Navigation widgets on your website.
      • Navigation widgets with css
        The transformation is applied to all widgets that have a specific CSS class applied.
        In the input field that appears, type one or more CSS classes that are applied to Navigation widgets, whose layout you want to transform.
   3. In the last input field, select how you want to transform the navigation, by choosing one of the following:
      • Toggle vertical menu
        Regardless of the type of the navigation that is selected in the different widgets, the navigation is transformed to a toggle vertical menu.
      • Dropdown list
        Regardless of the type of the navigation that is selected in the different widgets, the navigation is transformed to a dropdown menu.
      • Hide navigation
        The selected navigation widgets are not displayed.
   4. You can add more than one navigation transformation, by clicking the Add transformation button.
8. To immediately activate a group of rules, select This group of rules is active checkbox.
9. Click Done.

You can preview how page content will look like on some predefined mobile devices in page editing mode. Open a page for editing and click More actions » Preview on Smartphones & Tablets.

NOTE: You can apply responsive design on template level and on page level.
For more information see Apply responsive design to templates and Apply responsive design to pages.