What is responsive design?
Responsive design ensures that your content adapts to different devices and screen sizes, enhancing usability and engagement for users. Let's dive into what responsive design entails and how it can benefit your Candu experiences!
The aim of responsive design is to ensure your content remains accessible, visually appealing, and user-friendly across devices, providing an excellent user experience regardless of the screen size used to view it.
In Candu, you can either create one version that utilizes Candu’s responsive controls, flexible view layouts, and scalable components to create a consistent and optimized experience for users across all devices. Alternatively, you can create separate versions for desktop, tablet, and mobile and hide/display each version on the relevant device! Either way, you're improving usability and increasing user adoption.
Check out our guides on using Candu's responsive controls to...
Create a different mobile experience by either...
Creating a separate mobile-friendly version
Creating a banner prompting users to access the content through a larger screen
Hiding the content completely from mobile users.
When should you create responsive components vs creating separate versions for each?
For more complex designs like homepages with lots of components, e.g. checklists, cards, videos, etc. we’d recommend creating a separate mobile version (either a stripped down/less noisy version or hiding it from mobile users altogether).
When it comes to more simple content like banners, cards, etc., or when creating forms, we’d recommend trying to make that responsive across all devices and screen sizes!
Candu’s responsive controls and tips for using them:
Layout Settings
> Element Alignment
Horizontal/Vertical
Choose whether you want your content to stretch and fill the space, be left/right aligned, entered, or select baseline:
Content Direction
Set your Content Direction to Column or Row:
For responsive content, use view layouts nested in view layouts with the parent set to Row direction rather than column layouts (You can wrap view layouts which makes them more responsive - see next point):
Wrap Mode
Use Wrap mode to get content to stack on top of each other on smaller screen sizes:
> Content Alignment
Horizontal
Use Start, Center, End, Space Between, Space Around, and Space Evenly to position your content in a view layout or card instead of using margins and padding (too much padding/margin can prevent your content from remaining in the correct format as the page reduces in size).
Vertical
Use Stretch, Start, Center, End, or Baseline to position your content.
> Child Layout Behavior
Grow if Possible
Use Grow if possible to get content to increase in size if space allows.
E.g. view layout with 'Grow if possible' plus 'End' content alignment to take up vertical space without using margins (margins would make the content less responsive).
Shrink if necessary
Use Shrink if necessary to get content to reduce if space doesn’t allow.
Base Size
Set base sizes for your View Layouts, e.g. 50% each to make two columns or 70% for one and 30% for the other. This allows the content to reduce in size as screen size reduces, whilst maintaining the same structure!
Size (Explicit)
Use 100% width (or leave it unset) rather than fixed px in the explicit size as the content won't be able to adjust down as a screen size reduces.
For images, if large then use % size to ensure they are responsive. If they are small images, e.g. icons, then use px to ensure they remain small if the content grows!
Note: our Drag handlers default to %, so that is an easy way to make your content responsive!
Responsive
> Display
If you want to create specific content for mobile, tablet, and desktop, then you can create the content in a view layout or card and enable it on the viewport you want it displayed on:
Switch between the viewports to see what your content looks like on each screen size:
> Size (Responsive)
If the explicit width/height is set to 100%, you can set min/max responsive widths/heights in px to create responsive content that won't go above or below a certain size.
> Spacing
Margin and Padding should be used to create space around the individual components rather than spacing your components out in your design. As mentioned above, there are many ways to effectively create space in your designs (space between, space around, space evenly, grow if possible, etc.).
Don't use negative padding/margins unless you want the content to overflow.
ℹ️ Watch this 6-minute overview of Candu's responsive controls
Still need help? Reach out to our customer success team who will be happy to help ✨