🎓 Lesson 7: Responsive Design & Previewing Across Devices

📱 Why Responsive Matters

"Responsive" means a course automatically adapts its layout to the screen it's viewed on — roomy and multi-column on a desktop, stacked and finger-friendly on a phone — instead of showing one rigid layout that only fits one size. It's the same idea that makes good websites usable on any device.

Why care so much? Because your learners are on phones more than you think. Consider a retail chain rolling out safety training to floor staff who don't sit at desks, a hospital pushing a policy update to nurses between rounds, or a field team completing certification on tablets in a truck. If your course forces them to pinch-zoom and scroll sideways to read a paragraph, many simply won't finish — and completion is the whole point of training. Responsive design isn't a nice extra; it's the difference between a course people complete and one they abandon.

🔄 Responsive by Default & How Reflow Works

Remember the component/block model from Lesson 5? This is where it pays off enormously. Because your slide is a stack of standard components rather than boxes pinned to fixed pixel coordinates, Captivate knows how to rearrange them when space changes. As the screen narrows, components reflow: they resize, and side-by-side items stack vertically so everything stays readable. You built once; Captivate adapts it — that's what "responsive by default" means.

Figure 1 — One set of component blocks reflows to fit desktop, tablet, and mobile automatically.

Captivate organizes this around device views (often tied to breakpoints — the screen widths at which the layout shifts). You'll typically see views for Desktop, Tablet, and Mobile. Switching between them shows you the same slide as it will appear at that size, and — crucially — lets you make view-specific adjustments when the automatic reflow needs a nudge. Most of the time you won't need to; the reflow is smart. But when a heading is too long for a phone or an image dominates a small screen, the device views are where you fix it.

💡 How Classic does it (a quick contrast). The older Captivate Classic Classic achieves responsiveness through fluid boxes — containers you set up manually so objects snap in and reflow. It's powerful and precise, but it's more hands-on: you do more of the layout work yourself. The all-new tool flips that — responsiveness is the default behavior, not something you assemble. We give fluid boxes a proper look in Lesson 17; for now, just know the all-new way asks less of you.

The design principle behind all of this has a name worth remembering: "design once, adapt everywhere." You invest your effort in one well-built slide, and it serves every device. Compared to the bad old days of building and maintaining separate desktop and mobile versions, this is a genuine productivity leap — and a big part of why modern authoring tools are worth learning.

👀 Device Views & Previewing

There are two complementary ways to see how your course behaves at different sizes, and good authors use both.

1. Device views inside the editor. Right on the canvas, Captivate gives you chips to switch between Desktop, Tablet, and Mobile (you saw them in Lessons 5 and 6). Clicking through them is your quick, constant sanity check while you build — a glance at the Mobile view after adding a component tells you immediately whether it'll behave.

Figure 2 — All-new Captivate (a simplified mock-up, not a real screenshot): the Mobile device view active, with the slide's components stacked for a narrow screen.

2. Preview. The device chips show a static layout; Preview lets you actually use the course — click buttons, page through slides, feel the flow. Captivate offers preview options that include seeing your project at different device sizes and, importantly, previewing in a browser. That browser preview matters because your course is ultimately published as HTML5 and runs in a browser (Lesson 15), so a browser preview is the closest thing to the real learner experience. Resize the browser window and watch your slide reflow live — it's the most honest test you can run without a real phone in hand.

🔧 Fine-Tuning for Mobile (and the Limits)

Automatic reflow handles most of the work, but a few things reliably need a human eye on small screens. Here's your practical checklist of what to look for and fix in the Mobile view:

The guiding rule for mobile: fingertips are bigger than mouse pointers, and phone screens are smaller than patience. Generous buttons, short lines, and a clean top-to-bottom flow win every time. A neat habit is to design your content with mobile in mind from the start — concise headings, punchy text, one clear action per screen — so there's simply less to fix later.

One more encouragement: you don't need every slide pixel-perfect on every device today. The professional standard is "reads clearly and works correctly everywhere," not "identical everywhere." A phone learner needs to read your text and tap your buttons comfortably — that's the bar. Clear the bar, and you've done responsive right.

🎯 Try It: Make It Work on a Phone

📓 Learning Journal

📝 Lesson Summary

🎉 What You've Accomplished

Your course now works where your learners actually are. You understand why the component model makes responsiveness almost free, you can move fluently between device views and previews, and you can spot and fix the handful of mobile issues that automation can't judge for you. That's a skill many self-taught authors never quite nail — and you've got it early.

❓ Common Questions at This Stage

🔭 Looking Ahead

Your course looks good and works on any device — now let's make it do something. In Lesson 8: Interactions, States & Widgets — Custom Interactivity, you'll add real interactivity — buttons that respond, click-to-reveal content, and object states that make your course feel alive — all without writing a line of code.

✅ Before the Next Lesson

• Make sure your mobile-fixed project is saved
• Write this lesson's journal prompt — what broke, how you fixed it, and your audience's devices
• Optional: open your browser preview on an actual phone to see it as a learner would

📚 Additional Resources

• Course Glossary — see Responsive design, Breakpoint, and Fluid box
• Quick-Reference Cheat Sheet — including the component/block quick list
• Captivate Help & Support — official documentation on responsive projects and previewing