Responsiveness Overview

What is responsiveness? How can I make my Candu content responsive? Want tips for creating a responsive design? We've got you covered!

Flora Sanders avatar
Written by Flora Sanders
Updated over a week ago

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...

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

    Screenshot of toolbox - element alignment
    • Choose whether you want your content to stretch and fill the space, be left/right aligned, entered, or select baseline:

GIF showing element alignment
  • Content Direction

Screenshot of toolbox - content direction
  • Set your Content Direction to Column or Row:

GIF showing content direction
  • 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):

GIF showing view layouts nested in view layouts
  • Wrap Mode

    Screenshot of toolbox - wrap mode
    • Use Wrap mode to get content to stack on top of each other on smaller screen sizes:

GIF showing wrap vs no wrap

> Content Alignment

  • Horizontal

    Screenshot of toolbox - horizontal content alignment
    • 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).

GIF showing content alignment
  • Vertical

    Screenshot of toolbox - vertical content alignment
    • Use Stretch, Start, Center, End, or Baseline to position your content.

> Child Layout Behavior

  • Grow if Possible

    Screenshot of toolbox - 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).

GIF of grow if possible
  • Shrink if necessary

    Screenshot of toolbox - shrink if necessary
    • Use Shrink if necessary to get content to reduce if space doesn’t allow.

  • Base Size

    Screenshot of toolbox - 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!

GIF of base size

Size (Explicit)

Screenshot of toolbox - 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.

Screenshot of % size
  • 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!

Screenshot of px image size for icons
  • Note: our Drag handlers default to %, so that is an easy way to make your content responsive!

GIF of drag handlers

Responsive

> Display

Screenshot of toolbox - 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:

GIF of hiding/showing content on different devices
  • Switch between the viewports to see what your content looks like on each screen size:

GIF of switching between viewports

> Size (Responsive)

Screenshot of toolbox - responsive min/max 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.

GIF of min/max width in use

> Spacing

Screenshot of toolbox - 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 ✨

Did this answer your question?