When building a design in Flexitive, you have the option of selecting from a Blank Canvas or from a pre-populated Template. Selecting a blank canvas gives you a blank starting point to begin building your design from. You can begin building both Responsive and Fixed Sized Designs using a blank canvas.
For more information on building a design using a template, see our article on Templates here.
Index
Building a Fixed Size from a Blank Canvas
To start building a fixed size design using a blank canvas, select Blank Canvas under Fixed Sizes, from the Template page.
Selecting a Blank Canvas will automatically bring you to the All Sizes Page. The tabs in the Sizes panel allow for viewing In-Page and Fullscreen fixed sizes, as well as shifting between Landscape and Portrait sizes. To begin building your design, activate any size by clicking on it.
When you finish building your first size, use it to activate the rest of your sizes that you need for your project. Flexitive will learn from your first design and adapt that design to your new size. To begin activating additional sizes, simply click on the size from the All Sizes page.
Building a Responsive Size from a Blank Canvas
Building a Responsive design using a blank canvas is done the same way as building a fixed size from a blank canvas. To start building a responsive blank canvas design, select Blank Canvas under Responsive Sizes, from the Template Page.
Choosing a Blank Canvas will automatically link to the All Sizes view for Responsive In-Page aspect ratios. The tabs in the 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.
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.
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.
Responsive designs are set to adapt to the container that they are served into. 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.