Dashboard sizing options in Tableau - Deep Dive

Overview - Dashboard sizing options

What is it?

Dashboard sizing options in Tableau let you control how your dashboard appears on different screens. You can choose fixed sizes, automatic resizing, or range-based sizes. This helps your dashboard look good whether viewed on a small laptop or a large monitor.

Why it matters

Without proper sizing, dashboards can look cramped or have too much empty space, making them hard to read or interact with. Good sizing ensures users get a smooth experience, saving time and improving decisions. It solves the problem of dashboards breaking or looking bad on different devices.

Where it fits

Before learning dashboard sizing, you should understand basic Tableau dashboards and how to add sheets. After mastering sizing, you can learn about device layouts and responsive design for mobile and tablets.

Mental Model

Core Idea

Dashboard sizing options control how your dashboard fits and adapts to different screen sizes and devices.

Think of it like...

It's like choosing the right size box to pack your belongings: too small and things get squished, too big and items shift around or look empty.

┌───────────────────────────────┐
│       Dashboard Sizing        │
├─────────────┬───────────────┤
│ Fixed Size  │  Set exact px │
│ Automatic   │  Fits screen  │
│ Range       │  Min to Max   │
└─────────────┴───────────────┘

Build-Up - 6 Steps

1

Foundation

What is Dashboard Sizing

Concept: Introduces the basic idea of dashboard sizing and its purpose.

Dashboard sizing defines how big or small your dashboard will appear when viewed. Tableau offers three main sizing options: Fixed size, Automatic, and Range. Fixed size means the dashboard stays the same size no matter the screen. Automatic means it adjusts to fill the screen. Range lets you set minimum and maximum sizes.

Result

You understand the three sizing options and their basic behavior.

Knowing these options helps you decide how your dashboard will look on different devices.

2

Foundation

Fixed Size Explained

Concept: Explains the fixed size option and when to use it.

Fixed size means you pick exact width and height in pixels. The dashboard will always be that size. This is good when you want precise control or when your audience uses similar screen sizes. But on smaller or bigger screens, users might need to scroll or see empty space.

Result

You can set a fixed size and predict how your dashboard looks on a standard screen.

Understanding fixed size helps avoid surprises when dashboards look different on various devices.

3

Intermediate

Automatic Sizing Behavior

🤔Before reading on: do you think automatic sizing always fills the entire screen or only part of it? Commit to your answer.

Concept: Describes how automatic sizing adjusts dashboard size dynamically.

Automatic sizing lets Tableau resize the dashboard to fill the available browser or window space. It adapts to different screen sizes without scroll bars. However, the layout might shift or objects resize, which can affect readability if not designed carefully.

Result

Your dashboard changes size smoothly to fit different screens.

Knowing automatic sizing behavior helps you design flexible dashboards that work on many devices.

4

Intermediate

Range Sizing for Flexibility

🤔Before reading on: do you think range sizing restricts dashboard size or allows it to vary within limits? Commit to your answer.

Concept: Introduces range sizing which sets minimum and maximum size limits.

Range sizing lets you specify a minimum and maximum width and height. Tableau will resize the dashboard between these limits depending on screen size. This balances control and flexibility, preventing dashboards from becoming too small or too large.

Result

Dashboards resize within set boundaries, improving usability across devices.

Understanding range sizing helps create dashboards that adapt well without breaking layout.

5

Advanced

Impact of Sizing on Dashboard Layout

🤔Before reading on: do you think changing sizing affects only dashboard size or also how objects inside behave? Commit to your answer.

Concept: Explains how sizing affects the position and size of dashboard elements.

When you change sizing options, Tableau may resize or reposition charts, filters, and text boxes. Fixed size keeps objects static, while automatic and range sizing can stretch or shrink them. This can cause overlapping or misalignment if not designed with sizing in mind.

Result

You see how sizing choices impact dashboard appearance and usability.

Knowing this prevents layout issues and helps design dashboards that look good at all sizes.

6

Expert

Best Practices for Responsive Dashboards

🤔Before reading on: do you think using only sizing options is enough for mobile-friendly dashboards? Commit to your answer.

Concept: Covers combining sizing with device layouts and design techniques for responsiveness.

Experts use sizing options along with device-specific layouts to create dashboards that work well on phones, tablets, and desktops. They design flexible containers, avoid fixed pixel sizes inside dashboards, and test on multiple devices. This approach ensures a smooth user experience everywhere.

Result

You can build dashboards that adapt gracefully to any device.

Understanding the limits of sizing alone pushes you to use full responsive design strategies.

Under the Hood

Tableau dashboards are containers holding sheets and objects. Sizing options control the container's width and height. Fixed size sets exact pixel dimensions. Automatic sizing queries the browser window size and adjusts the container accordingly. Range sizing uses minimum and maximum constraints to limit resizing. Inside the container, Tableau recalculates object positions and sizes based on layout rules and container size.

Why designed this way?

Tableau needed flexible dashboards for diverse user devices. Fixed size offers control for predictable environments. Automatic sizing supports fluid layouts for unknown screen sizes. Range sizing balances control and flexibility. This design avoids forcing users to scroll unnecessarily or see broken layouts, improving usability.

┌───────────────────────────────┐
│       Dashboard Container      │
│ ┌───────────────┐             │
│ │ Sheet 1       │             │
│ ├───────────────┤             │
│ │ Sheet 2       │             │
│ └───────────────┘             │
│ Sizing Option Controls Width/Height │
│ ┌───────────────┐             │
│ │ Fixed / Automatic / Range    │
│ └───────────────┘             │
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does automatic sizing guarantee perfect layout on all screen sizes? Commit yes or no.

Common Belief: Automatic sizing always makes dashboards look perfect on any screen.

Reality: Automatic sizing adjusts size but does not guarantee layout elements won't overlap or become unreadable.

Why it matters: Believing this leads to poorly designed dashboards that confuse users on some devices.

Quick: Is fixed size the best choice for mobile dashboards? Commit yes or no.

Common Belief: Fixed size dashboards work well on all devices including mobiles.

Reality: Fixed size dashboards often require scrolling or zooming on small screens, hurting usability.

Why it matters: Using fixed size for mobile can frustrate users and reduce dashboard effectiveness.

Quick: Does range sizing let dashboards shrink to zero size? Commit yes or no.

Common Belief: Range sizing allows dashboards to become very small or very large without limits.

Reality: Range sizing enforces minimum and maximum sizes to prevent unusable layouts.

Why it matters: Misunderstanding this can cause designers to skip range sizing and lose control over dashboard appearance.

Quick: Does changing sizing options automatically fix all layout problems? Commit yes or no.

Common Belief: Switching sizing options solves all dashboard layout issues instantly.

Reality: Sizing affects container size but layout design inside the dashboard must be done carefully to avoid issues.

Why it matters: Relying only on sizing changes wastes time and leads to poor user experience.

Expert Zone

1

Automatic sizing depends on browser window size, which can vary with browser chrome and device orientation, affecting dashboard appearance subtly.

2

Range sizing is especially useful when combined with floating objects, as it prevents them from overlapping when resized.

3

Fixed size dashboards can still be made responsive by using tiled layouts and percentage-based sizing inside sheets.

When NOT to use

Avoid fixed size when your audience uses many device types or screen sizes; instead, use automatic or range sizing combined with device layouts. For highly interactive or complex dashboards, consider custom device layouts or separate dashboards per device.

Production Patterns

In production, teams often use fixed size for internal desktop dashboards with known screen sizes. For public or mobile audiences, they use automatic or range sizing with device-specific layouts. They also test dashboards on multiple devices and browsers to ensure consistent experience.

Connections

Responsive Web Design

Dashboard sizing in Tableau is similar to responsive web design principles that adapt content to screen size.

Understanding web responsiveness helps grasp why dashboard sizing options exist and how to design flexible layouts.

User Experience (UX) Design

Good dashboard sizing directly impacts UX by making dashboards easier to read and interact with.

Knowing UX principles guides better sizing choices that improve user satisfaction and decision-making.

Graphic Design Layout Grids

Sizing options relate to layout grids in graphic design that control element placement and scaling.

Familiarity with grids helps understand how dashboard elements resize and reposition with different sizing.

Common Pitfalls

#1 Choosing fixed size without considering user screen sizes.

Wrong approach:

Dashboard Size: Fixed 1200 x 800

Correct approach:

Dashboard Size: Range Width 800-1200, Height 600-800

Root cause:

Assuming all users have the same screen size leads to fixed size dashboards that don't fit smaller or larger screens.

#2 Relying on automatic sizing but designing with fixed pixel objects inside.

Wrong approach:

Dashboard with Automatic sizing but sheets and images set to fixed pixel widths.

Correct approach:

Use automatic sizing with flexible containers and percentage-based sizing inside sheets.

Root cause:

Not adapting internal elements causes layout breakage despite container resizing.

#3 Ignoring device layouts and expecting sizing alone to handle mobile views.

Wrong approach:

Single dashboard with automatic sizing used for desktop and mobile without device layouts.

Correct approach:

Create separate device layouts optimized for phone, tablet, and desktop with appropriate sizing.

Root cause:

Misunderstanding that sizing controls container size but device layouts control content arrangement.

Key Takeaways

Dashboard sizing options in Tableau control how dashboards fit different screen sizes using fixed, automatic, or range settings.

Fixed size offers precise control but can cause scrolling or empty space on varying devices.

Automatic sizing adapts to screen size but requires flexible internal design to avoid layout issues.

Range sizing balances control and flexibility by setting minimum and maximum size limits.

Combining sizing options with device layouts and responsive design techniques creates the best user experience across devices.

Practice

1. Which Tableau dashboard sizing option automatically adjusts the dashboard size to fit the screen of the device viewing it?

easy

A. Range sizing

B. Fixed sizing

C. Automatic sizing

D. Custom sizing

Solution

1. Step 1: Understand Automatic sizing

   Automatic sizing lets Tableau adjust the dashboard size dynamically based on the device screen.

2. Step 2: Compare with other sizing options

   Fixed sizing uses a set size, Range sizing allows a size range, and Custom sizing is not a standard option.

3. Final Answer:

   Automatic sizing -> Option C

4. Quick Check:

   Automatic sizing = fits screen automatically [OK]

Hint: Automatic means it fits any screen size by itself [OK]

Common Mistakes:

• Confusing Fixed sizing with Automatic
• Thinking Range sizing adjusts automatically
• Assuming Custom sizing is a Tableau option

2. Which of the following is the correct way to set a Fixed dashboard size in Tableau?

easy

A. Select 'Fixed size' and enter width and height values

B. Choose 'Automatic' and specify minimum and maximum sizes

C. Pick 'Range' and leave width and height blank

D. Set 'Floating' objects to fixed size

Solution

1. Step 1: Identify Fixed size setting

   Fixed size requires selecting 'Fixed size' and entering exact width and height.

2. Step 2: Eliminate incorrect options

   Automatic does not require fixed dimensions, Range needs min and max sizes, Floating relates to objects, not dashboard size.

3. Final Answer:

   Select 'Fixed size' and enter width and height values -> Option A

4. Quick Check:

   Fixed size = set exact width and height [OK]

Hint: Fixed size means typing exact width and height numbers [OK]

Common Mistakes:

• Confusing Automatic with Fixed size
• Leaving width and height blank for Fixed size
• Mixing Floating object size with dashboard size

3. If you set a Tableau dashboard size to Range with minimum width 800px and maximum width 1200px, what happens when viewed on a 1000px wide screen?

medium

A. Dashboard width adjusts to 1000px

B. Dashboard width stays fixed at 800px

C. Dashboard width expands to 1200px

D. Dashboard does not display properly

Solution

1. Step 1: Understand Range sizing behavior

   Range sizing allows dashboard width to adjust between minimum and maximum values based on screen size.

2. Step 2: Apply screen width to range

   Since 1000px is between 800px and 1200px, the dashboard width will be 1000px.

3. Final Answer:

   Dashboard width adjusts to 1000px -> Option A

4. Quick Check:

   Range sizing fits screen width within min and max [OK]

Hint: Range sizing picks screen width if between min and max [OK]

Common Mistakes:

• Assuming dashboard stays at minimum width
• Thinking dashboard always expands to max width
• Believing dashboard breaks if screen size is in range

4. You set a dashboard to Fixed size 1000px by 800px, but on a small laptop screen it appears cut off. What is the best fix?

medium

A. Set Range sizing with smaller minimum width

B. Change sizing to Automatic

C. Increase Fixed size dimensions

D. Use Floating layout for all objects

Solution

1. Step 1: Identify problem with Fixed size

   Fixed size does not adjust to smaller screens, causing cut off on small laptops.

2. Step 2: Choose best sizing option to fix

   Automatic sizing adjusts the dashboard dynamically to fit the viewing screen, eliminating the cut off.

3. Final Answer:

   Change sizing to Automatic -> Option B

4. Quick Check:

   Automatic sizing = fits screen automatically [OK]

Hint: Automatic adjusts to fit the screen [OK]

Common Mistakes:

• Increasing Fixed size makes problem worse
• Setting Range sizing but not small enough minimum
• Confusing Floating layout with dashboard sizing

5. You want a dashboard that looks good on desktop and tablet but never smaller than 900px wide or larger than 1400px wide. Which sizing option and settings should you choose?

hard

A. Fixed sizing at 900px width

B. Fixed sizing at 1400px width

C. Automatic sizing with custom device layouts

D. Range sizing with min width 900px and max width 1400px

Solution

1. Step 1: Analyze sizing needs

   You want the dashboard width to vary but stay between 900px and 1400px for desktop and tablet.

2. Step 2: Match sizing option to requirements

   Range sizing lets you set minimum and maximum widths, exactly fitting the requirement.

3. Step 3: Eliminate other options

   Fixed sizing locks width, Automatic may go smaller than 900px, custom device layouts are more complex and not needed here.

4. Final Answer:

   Range sizing with min width 900px and max width 1400px -> Option D

5. Quick Check:

   Range sizing controls min and max dashboard width [OK]

Hint: Range sizing sets min and max width limits [OK]

Common Mistakes:

• Choosing Fixed sizing which is not flexible
• Assuming Automatic respects min width
• Overcomplicating with custom device layouts