Responsive banners are designs that adapt to any aspect ratio. This makes them perfect for full-screen advertisements, expandable designs, wallpapers and Digital Signage.
After building all of the different sizes for the project, the final banner will be able to respond to the aspect ratios that you have applied. For an example of a responsive design in action, see the GIF below.
Starting to Build a Responsive Design
To start building a Responsive Design, select a Responsive Blank Canvas or Responsive Template in the template selection screen.
Choosing one of these options will automatically link to the All Sizes view for Responsive In-Page aspect ratios. The tabs in the Create Sizes panel allow for viewing In-Page and Fullscreen aspect ratios, as well as shifting between Landscape and Portrait sizes.
Fullscreen aspect ratios are selected based on the aspect ratio of different commonly used screens to view designs, such as 16:9, 4:3 and 5:3. This makes them perfect for interstitial advertisements, landing pages and digital signage. In-Page aspect ratios are designed to be used for banners that will be displayed on the same page as other content, similar to how Fixed size banners are currently served. These are used for Responsive Wallpapers and Fixed-Dimension Responsive designs.
Building a responsive design is done the same way as building a fixed-size project. As with a fixed size design, enter the editor for the first aspect ratio by clicking on the size. After finishing the first aspect ratio, use it to activate the rest of the aspect ratios that you will need for your project.
It is recommended that you activate as any aspect that your responsive design may be viewed in. This will ensure that it will look good no matter what aspect ratio is used.
The Sizes View Toggle
In the Create Sizes Panel, you can navigate between Fixed, Responsive and Social banners, while also being able to switch between Portrait and Landscape banners using the Create Sizes Panel tabs.
You will also have the option to use the 'Sizes View Toggle' at the top of the Create Sizes Panel to navigate between All Sizes in your design, the Active Sizes in your design, or the design size you were last editing.
- Clicking 'All' will navigate you to a view with every design size available. Use this view to activate new sizes in your design.
- Clicking 'Active' will navigate you to a view with only design sizes you've activated visible, and filters out any inactive sizes. This view is perfect to review sizes you've already built.
- Clicking the 'Single Size' toggle will bring you into the editor for the last size you were editing, which will be listed in the toggle itself. The 'Single Size' toggle makes it easy to navigate back to editing a size.
Serving a Responsive Design
Responsive designs are set to adapt to the container that they are served into. In order to make sure that this design is able to adapt to different screen resolutions and sizes, it's important to make sure that the container, or "DIV", that the design is served into is also responsive.
Responsive DIVs, like responsive designs, are set to adapt to changing screen resolutions. Serving a responsive design into a fixed size DIV will not allow for the design to adapt to differing screen sizes and resolutions.