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!
You can use responsive controls to tweak and adjust the same components to appear differently across different viewports:
e.g. If your header typography is size 48 for the desktop view, you can make it size 34 for tablet and size 20 for mobile.
e.g. If your layout is 960px wide for desktop, you can make it 600px for tablet, and hide it for mobile.
You can utilize Candu’s responsive controls to create one version that's optimized 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:
If the parent component is set to flex, the components in your parent component will have additional Flex Child options, which allow you to position your child component within your parent component.
> Flex Child Settings
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.
Flex 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!
Alignment
Vertical
Choose whether you want your content to stretch and fill the space, be top/bottom aligned, centered, or select baseline:
Horizontal
Choose whether you want your content to stretch and fill the space, be left/right aligned, centered, or select baseline:
> Layout Settings
Display
Block: Most components are set to block by default, e.g. buttons, text, images, etc. They stack vertically and take up the full width available.
Flex: Components like layouts and cards can be set to flex, allowing you to change content direction, alignment, gaps, and whether it wraps or not!
Inline Block: This option places content horizontally - use this for form input fields to get the label and field to sit side by side rather than stacked.
Hidden: This option lets you hide components on different screen sizes.
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 Flex and 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:
Vertical
Use Stretch, Start, Center, End, or Baseline to position your content.
For example, Stretch is great if you have varying text lengths but want your cards to all be consistent in height:
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).
Column Gap
Use this to add space between components aligned in a component set to horizontal/row direction.
Row Gap
Use this to add space between components aligned in a component set to vertical/column direction.
> Size Settings
Explicit size
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!
Responsive Size
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.
Overflow
Use this to add a scrollbar if you have more content to show that space permits.
> Spacing Settings
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.).
Margin creates space around a component.
Padding creates space within a component.
You can set px, %, or Auto (Auto creates centers the content).
Don't use negative 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 ✨