Building a Responsive Custom Block with the New Labs Feature
For this week's challenge, I experimented with the new Responsive Custom Blocks feature in Labs and used it to create a custom block that automatically adapts to desktop, tablet, and mobile views. The new container-based layout made it easy to reorganize content across breakpoints while keeping the design clean and consistent. A key objective was preserving icon quality, and the responsive controls allowed the layout to resize without stretching or distorting visual elements. The device previews and flexible container settings made testing and fine-tuning very straightforward. Overall, I found the feature intuitive and surprisingly powerful. It significantly simplifies the creation of device-friendly custom blocks, and I think it would be a fantastic addition to Rise 360 if it becomes an official feature. Great work by the Articulate team, and I'm looking forward to seeing how this feature evolves!I Built a Course on Responsive Custom Blocks. Here's Where It Broke. 💔
Long post ahead, read at your own risk 😅 (in my defense, there's an AI Avatar and a seating chart of coworkers with fake excuses involved, so it's at least a fun kind of long.) Also, quick disclaimer up front: if I'm just missing something about how this feature actually works, feel free to disregard this entire post (I did have Claude fact check for me). 🤣 Genuinely open to being told I'm wrong here. When I saw this week's challenge, I got a little too excited. A new responsive feature in Labs? 🎉 I've been building with Custom Blocks for a while now, so I figured, why not build an entire course just about the feature itself? Enter Fitz: my Pixar-style AI Avatar host. He opens the course with a warning, actually. He tells you straight up that he was expecting a glow up from this feature and got "something" instead and that he's going to show you the whole thing warts and all because that's more useful than pretending it went perfectly. Bold choice for an intro video, but stick with me, because he's not wrong. After that, Fitz introduces you to six coworkers (Marcus, Priya, Dave, Sam, Elena, and Jordan) who are all, without exception, late. Click their flip cards and you get their excuse. Some are believable. Some are not. Dave's is a lot. The plan was simple: use this cast of chronically late coworkers as a seating chart, dropped into a responsive custom block, so learners could watch the whole thing reflow beautifully across devices. Desktop View: I pictured all six of them spread out comfortably, each one with their own space and an armrest to spare, main character energy. Table View: Same group tightening up a little, like everyone just got called in for picture day. Mobile View: I wanted them squeezed into a single-file line, like they're all waiting for the one bathroom on the floor. Drama, humor, a satisfying "ooh, it resized itself" moment. That was the pitch, before Fitz talked me down to reality. Here's where it fell apart 👀 I built the fixed version first, and predictably, it didn't hold up. Here's the thing about a fixed custom block (this is my understanding): it doesn't actually change layout across devices, it just scales the same image down. So tablet portrait, tablet landscape, mobile portrait, mobile landscape, same six coworkers, same arrangement, every single time, just shrinking a little more with each device until it's borderline unreadable on mobile. Not a great learner experience, but exactly the kind of "before" screenshot I wanted for this. Then I rebuilt it as a responsive block, genuinely excited to see six people rearrange themselves gracefully across every screen size. They did not, not really. What I got instead was almost the same view, on every device, every orientation. Tablet portrait: 2 columns. Tablet landscape: 2 columns. Mobile portrait: 1 column. Mobile landscape: 2 columns. And that's when it hit me: the fixed version and the responsive version were both doing the same basic thing, showing me one layout at every size. One was scaling it down. The other was (technically) resizing containers. But side by side, they read almost identically. It responds, technically. It just doesn't behave the way I expected "responsive" to behave. Here's why: Direction only gives you two options, row or column, and it applies to the whole container. There's no wrap, no grid-template-columns, nothing that lets a container say "3 across on desktop, 2 on tablet, 1 on mobile" on its own. If you want that graduated effect, you're manually nesting containers per breakpoint and hand-managing each one. Which is exactly the kind of manual positioning I thought this feature was supposed to get me away from. That's the part that gave me pause. For anything grid-shaped, like my seating chart of six increasingly unreliable coworkers, I was still very much positioning. Just with new vocabulary. So how would I make it better? 💡 To be clear, none of this exists in the tool today. This is my wish list, the stuff I actually pitched to the Articulate team over in Product Ideas, not a preview of anything coming down the pipeline. Wrap support, or something like it, so a container can hold its shape and let items wrap into a new row or column at each breakpoint instead of needing a separate manually-built container per device. Even just a "columns: 1 to 4" style setting per breakpoint would get most of the way there. Right now getting a true grid means rebuilding the layout by hand for every screen size, which is a lot of manual work for a feature whose whole promise is not doing manual work. I'd also love a small library of interactive objects (something like a flip card, an accordion, a simple toggle) that live natively in a block, plus a lightweight trigger system so objects could show, hide, or react to each other without needing a Code Block for it. Storyline already has a version of this with its states and triggers, so there's a real model to borrow from, not a totally new invention. I sketched out a concept mockup of what this could look like across five screens (wrap-enabled containers, a resize preview per breakpoint, an object library panel, and a trigger builder), just to make the idea concrete for the pitch. It's a mockup, not a sneak peek. If you want the full breakdown and the mockup images, that's all in the Product Ideas post. Maybe I'm missing something. If there's a way to get true wrap or grid behavior out of the current tool, genuinely, please tell me, because I would love to be wrong here. But as it stands, I don't think the fixed and responsive versions of my seating chart are different enough to justify calling one of them "responsive." Yes, I'm Finally Done 🙌 All that said, I had a lot of fun building this. Fitz turned out great, Dave's excuse still makes me laugh every time I open the file, and I'd take this feature over not having it. I just don't think it's finished yet. Even Fitz would tell you that, and he's the one who has to stand there being upbeat about it. Course link here, if you want to meet Dave and the gang for yourself: Rise 360 Custom Block
