Adaptive vs responsive strategy in Figma - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Adaptive Design

Which statement best describes an adaptive design strategy in BI dashboards?

A The dashboard uses only one fixed layout regardless of device or screen size.

B The dashboard fluidly resizes and reflows content based on screen size continuously.

C The dashboard content is hidden on smaller screens without layout changes.

D The dashboard layout changes at fixed screen widths using predefined layouts.

💡 Hint

Think about designs that switch between set layouts at specific breakpoints.

Adaptive design uses multiple fixed layouts that activate at certain screen widths. It does not fluidly resize but switches between these predefined layouts.

🧠 Conceptual

intermediate

Understanding Responsive Design

Which option best explains a responsive design strategy for BI dashboards?

A The dashboard layout adjusts fluidly and continuously to any screen size.

B The dashboard uses fixed layouts that change only at specific screen widths.

C The dashboard hides charts on smaller screens without resizing.

D The dashboard requires manual user input to switch layouts.

💡 Hint

Think about designs that smoothly adapt to any screen size without fixed breakpoints.

Responsive design fluidly adjusts layout and content size continuously to fit any screen size, providing a seamless experience.

🎯 Scenario

advanced

Choosing Between Adaptive and Responsive for BI Dashboards

You are designing a BI dashboard for a company where users mostly access it on three specific device types: desktop, tablet, and mobile phone. The dashboard needs to optimize performance and show different content on each device. Which design strategy is best?

A Use responsive design to fluidly resize content on all devices.

B Use adaptive design with fixed layouts tailored for each device type.

C Use a single fixed layout for all devices to simplify development.

D Use responsive design but hide content on smaller devices.

💡 Hint

Consider performance and content differences per device type.

Adaptive design is best when targeting specific devices with tailored layouts and content, optimizing performance and user experience.

❓ visualization

advanced

Identifying Responsive Design in a Dashboard Screenshot

Look at the dashboard screenshots below showing the same dashboard on desktop and mobile. Which feature indicates a responsive design?

Note: Screenshots show the same charts resizing smoothly and rearranging fluidly.

A Charts resize fluidly and rearrange continuously to fit screen size.

B Dashboard uses fixed pixel widths that cause horizontal scrolling.

C Charts disappear completely on smaller screens without resizing.

D Dashboard switches between two fixed layouts at specific widths.

💡 Hint

Look for smooth resizing and rearranging rather than fixed layout switches.

Responsive design is characterized by fluid resizing and rearranging of content to fit any screen size without fixed breakpoints.

🔧 Formula Fix

expert

Troubleshooting Layout Issues in Adaptive vs Responsive BI Dashboards

A BI dashboard built with an adaptive strategy shows blank spaces on some tablet devices, and a responsive version shows overlapping charts on small phones. What is the most likely cause of these issues?

A Adaptive design uses fixed layouts that don't fit all tablet sizes, causing blank spaces.

B Responsive design uses fluid layouts but lacks proper constraints, causing overlaps.

C Adaptive design fluidly resizes content causing overlaps on tablets.

D Responsive design uses fixed breakpoints causing blank spaces on phones.

💡 Hint

Think about how fixed layouts behave on devices with sizes between breakpoints.

Adaptive design relies on fixed layouts for specific screen sizes. If a device size falls between these, blank spaces can appear. Responsive design issues with overlaps usually come from missing constraints.

Practice

1. What is the main difference between adaptive and responsive design strategies in BI dashboards?

easy

A. Adaptive uses fixed layouts for specific screen sizes, responsive adjusts smoothly.

B. Adaptive adjusts smoothly, responsive uses fixed layouts.

C. Adaptive only works on desktop, responsive only on mobile.

D. Adaptive and responsive are the same with different names.

Solution

1. Step 1: Understand adaptive design

   Adaptive design uses fixed layouts tailored for specific screen sizes, like separate versions for phone and tablet.

2. Step 2: Understand responsive design

   Responsive design uses flexible layouts that smoothly adjust to any screen size by resizing and rearranging elements.

3. Final Answer:

   Adaptive uses fixed layouts for specific screen sizes, responsive adjusts smoothly. -> Option A

4. Quick Check:

   Adaptive = fixed, Responsive = flexible [OK]

Hint: Adaptive = fixed sizes, Responsive = flexible resizing [OK]

Common Mistakes:

• Confusing which strategy uses fixed layouts
• Thinking adaptive works only on desktop
• Believing adaptive and responsive are identical

2. Which of the following is a correct way to describe a responsive layout in Figma?

easy

A. Using fixed width frames for each device size

B. Using constraints and auto-layout to adjust elements fluidly

C. Creating separate pages for desktop and mobile

D. Locking element positions to prevent resizing

Solution

1. Step 1: Identify responsive layout features in Figma

   Responsive layouts use constraints and auto-layout to let elements resize and reposition fluidly as the frame size changes.

2. Step 2: Eliminate incorrect options

   Fixed width frames and separate pages are adaptive strategies; locking positions prevents responsiveness.

3. Final Answer:

   Using constraints and auto-layout to adjust elements fluidly -> Option B

4. Quick Check:

   Responsive = constraints + auto-layout [OK]

Hint: Responsive uses constraints and auto-layout in Figma [OK]

Common Mistakes:

• Choosing fixed width frames as responsive
• Confusing separate pages with responsive design
• Locking elements disables responsiveness

3. Consider a BI dashboard designed with adaptive strategy for three screen sizes: mobile (320px), tablet (768px), and desktop (1440px). What happens if a user opens the dashboard on a 500px wide device?

medium

A. The desktop layout (1440px) is shown, cropped to fit 500px.

B. The dashboard automatically resizes smoothly to 500px width.

C. The mobile layout (320px) is shown, possibly with horizontal scrolling.

D. The tablet layout (768px) is shown, scaled down to 500px.

Solution

1. Step 1: Understand adaptive layout behavior

   Adaptive design uses fixed layouts for specific sizes. For 500px width, no exact layout exists, so the closest smaller layout (mobile 320px) is used.

2. Step 2: Consider user experience on 500px device

   Since the layout is fixed at 320px, the user may see horizontal scrolling or clipped content, not smooth resizing.

3. Final Answer:

   The mobile layout (320px) is shown, possibly with horizontal scrolling. -> Option C

4. Quick Check:

   Adaptive shows closest fixed layout [OK]

Hint: Adaptive picks closest fixed layout, no smooth resize [OK]

Common Mistakes:

• Assuming adaptive layouts resize smoothly
• Thinking tablet layout scales down automatically
• Believing desktop layout crops content

4. You designed a responsive BI dashboard in Figma using auto-layout and constraints, but on small screens, some elements overlap. What is the most likely cause?

medium

A. Constraints are not set properly, causing elements to ignore resizing rules.

B. Fixed width frames were used instead of auto-layout.

C. Adaptive layouts were applied instead of responsive.

D. The dashboard was exported incorrectly.

Solution

1. Step 1: Analyze overlapping in responsive design

   Overlapping usually happens when constraints are missing or incorrect, so elements don't resize or reposition properly.

2. Step 2: Rule out other causes

   Using fixed width frames or adaptive layouts would not cause overlapping in a responsive setup; export issues don't affect layout behavior.

3. Final Answer:

   Constraints are not set properly, causing elements to ignore resizing rules. -> Option A

4. Quick Check:

   Incorrect constraints cause overlap [OK]

Hint: Check constraints first when elements overlap in responsive design [OK]

Common Mistakes:

• Blaming fixed width frames when auto-layout is used
• Confusing adaptive with responsive issues
• Assuming export errors cause layout overlap

5. You need to design a BI dashboard that works well on desktop, tablet, and mobile. You want smooth resizing on all devices but also want to optimize layout for common screen widths. Which strategy should you choose and why?

hard

A. Design only for desktop and let mobile users zoom manually.

B. Use responsive design only, relying on flexible layouts that adjust fluidly.

C. Use adaptive design only, creating fixed layouts for each device size.

D. Combine adaptive and responsive strategies: fixed layouts for key sizes plus flexible elements inside.

Solution

1. Step 1: Understand the requirements

   The dashboard must resize smoothly on all devices but also optimize layout for common screen widths.

2. Step 2: Evaluate strategies

   Adaptive alone lacks smooth resizing; responsive alone may not optimize for key sizes perfectly.

3. Step 3: Choose combined approach

   Combining adaptive fixed layouts for common sizes with responsive flexible elements inside gives best of both worlds.

4. Final Answer:

   Combine adaptive and responsive strategies: fixed layouts for key sizes plus flexible elements inside. -> Option D

5. Quick Check:

   Combine adaptive + responsive for best results [OK]

Hint: Combine fixed layouts with flexible elements for best BI dashboard [OK]

Common Mistakes:

• Choosing only adaptive and missing smooth resizing
• Choosing only responsive and missing layout optimization
• Ignoring mobile users by designing desktop only