Responsive Design: Crafting Online Content to fit Every Device

“Responsive design” — once merely a trendy but esoteric topic among web designers — is no longer optional for content creators. It’s a vital necessity. And that goes for online presentations, too.

Responsive web design is an approach to building websites that delivers a smooth and consistent experience across every conceivable desktop and mobile device. That means making reading and navigation easy — with a minimum of panning and scrolling — whether you’re looking at content on a sprawling 27-inch iMac screen or the tiniest of smartphone displays.

Responsive content is “aware” of the size and orientation of the browser window or device that’s displaying it. And it adapts — not just by shrinking in place, but by moving content elements around and collapsing them as need be to preserve the legibility that’s key to a good content consumption experience.

Take this website, for example, and experiment with its home page (click here to open it in another browser window). If you’re reading on a desktop browser, watch what happens when you make the browser window narrower and narrower. Menus collapse into pulldowns, multi-column sections turn into single-column, and other page elements move around into a scrollable stack that suits the width of the screen real estate available. If you’re reading on a mobile device, you may already be seeing some content moved around, but try rotating from landscape to portrait orientation and see what happens. That’s all the result of responsive design.

So if all this effort is going into making websites more responsive, shouldn’t we be putting the same effort into the content we distribute for marketing and learning?

We asked ourselves that at KnowledgeVision, as we contemplated the future of online presentations in a mobile, anytime/anywhere world. KnowledgeVision presentations are content-rich, highly interactive video presentations when viewed in a Flash-enabled desktop browser; how would we deliver a presentation experience that adapted to the explosion of screen sizes and shapes in a mobile world?

So started a two-year “KnowledgeVision Anywhere” initiative, which culminated in the release of a whole new generation of online presentation creation tools this week. KnowledgeVision co-founder Alex Kieft and his team resisted the notion of forcing every device owner to install a special app in order to view content optimally. Instead, they did the hard work of designing a browser-based presentation player that can sense and adapt to the size and shape of the device or browser window in a true responsive design.

It wasn’t easy: mobile phones in particular have a very peculiar way of displaying video, requiring that it take up the full screen while playing, rather than being embedded in a larger window. So for mobile phones, the presentation content needs to be converted into a single video stream that takes over the screen when played, but displays navigation options and footnotes when paused.

To see the result of the team’s work, click the link below to view the demo presentation on different devices and, if you’re on a desktop, try narrowing and widening the browser window.

More and more, content creators are going to be called upon to introduce responsive design not only to their websites but throughout their entire suite of content. The “KnowledgeVision Anywhere” initiative is a significant contribution in that area, and we’re continuing to seek ways to make our online presentation designs even more adaptive to an increasingly more varied world of devices.