Responsive Design (22 min)
Completion requirements
01 Getting Started
This tutorial covers responsive design, including:
- Two approaches for responsive design.
- Creating a fully automatic layout.
- Independent device versions.
- Device dropdown structure and options.
- Best practices.
- Ways to set up your device versions with auto and manual layout.
- General principles.
- Turning off the responsive AI toggle.
02 Responsive Design
Creating a responsive layout ensures your content displays correctly across a range of different devices. There are two options when creating a responsive layout:
- Fully automatic with no devices set up.
- Setting up separate devices.
03 Fully Automatic Layout
Responsive AI ensures that your content will be called according to the user’s device. When using this feature, it is best practice to divide your strips into columns. This ensures that your content can easily be organized when automatic adjustments are made.
1. Expand the device dropdown.
2. Enable the Responsive AI toggle switch.
1. Expand the device dropdown.
2. Enable the Responsive AI toggle switch.
04 Setting Up Different Devices
This means you can set up different content for each device type. Once you have configured your devices, any changes made to the project afterward will require configuration in the device dropdown.
1. Expand the device dropdown.
The dropdown lists the devices from the widest to the narrowest screen types. When you start designing your project, the desktop layout will be automatically selected. Once you have designed your content, you can start to configure how the content will look on each device. Each device will inherit the design and style choices from the device listed above.
2. To start designing on a different device, select the device from the dropdown. Your strip perimeters will automatically adjust to match the device you selected.
When you are designing for a specific device, all changes will apply to that device only. This means you can choose to hide images on smaller devices or even change the look and feel of your content.
1. Expand the device dropdown.
The dropdown lists the devices from the widest to the narrowest screen types. When you start designing your project, the desktop layout will be automatically selected. Once you have designed your content, you can start to configure how the content will look on each device. Each device will inherit the design and style choices from the device listed above.
2. To start designing on a different device, select the device from the dropdown. Your strip perimeters will automatically adjust to match the device you selected.
When you are designing for a specific device, all changes will apply to that device only. This means you can choose to hide images on smaller devices or even change the look and feel of your content.
05 Device Options
Each enabled device displays a kebab menu. Select the kebab menu to delete the version you have created, and reset or refresh the device. The difference between resetting and deleting a device is that resetting the device will refresh the current design settings, and deleting a device will remove it completely.
The Reset Warning option is used when you make changes to the desktop content after your devices are configured. Each device affected will display an orange dot. To remove this warning, select the reset warning option.
You can choose to reset all the layouts of your devices, refresh will reload all the configured layouts without making any design structure updates. You can also choose to delete all configured devices.
The Reset Warning option is used when you make changes to the desktop content after your devices are configured. Each device affected will display an orange dot. To remove this warning, select the reset warning option.
You can choose to reset all the layouts of your devices, refresh will reload all the configured layouts without making any design structure updates. You can also choose to delete all configured devices.
06 Device Versions
After you have completed the configuration for your desktop versions, navigate to the other devices you need to configure and make any adjustments required.
07 Best Practice
Before you start to configure the layout of your different devices, ensure you are happy with your desktop design.
Ensure you have completed your changes for each device in descending order, as the devices inherit the styles from the previous one.
If you need to make changes to the desktop design, after all the devices have been configured, use the refresh device option to ensure the changes are reflected in your other devices.
Ensure you have completed your changes for each device in descending order, as the devices inherit the styles from the previous one.
If you need to make changes to the desktop design, after all the devices have been configured, use the refresh device option to ensure the changes are reflected in your other devices.
08 Manual vs. Auto Layout
When configuring devices from Tablet (S), an automatic popup is displayed. You can choose the auto layout for Titan to automatically structure your content to display in a single column. The manual layout option allows you to place your content within the strip yourself.
09 General Principles
You need to keep in mind that each device inherits its style from the previous one, this means any changes that you make to the previous device will pull through to a smaller device. Once you start to make changes to the smaller device, they will apply to that specific device only.
If you make structural changes to the desktop strips, such as adding a column or more elements, this will automatically display on the smaller devices.
If you make structural changes to the desktop strips, such as adding a column or more elements, this will automatically display on the smaller devices.
10 Turning the Responsive AI Off
If you want your content to only be displayed with your specific device configuration.
1. Expand the device dropdown.
2. Disable the Responsive AI toggle switch.
1. Expand the device dropdown.
2. Disable the Responsive AI toggle switch.