We'll augment this article as we get added questions about DA and its content & viewport relationship!

Question 1: Is Digital Academy responsive?

Yes, the framework for Digital Academy (DA) is indeed responsive. You'll evidence this as you visit any facet of DA and resize your browser window (it reacts to fit). We create a multitude of breakpoints to handle everything from smartphones to tablets to ultra-wide desktop monitors.

Question 2: What about demos? Are they responsive?

Here's where the answer requires a bit more insight. DA is geared to allow mobile viewers, for example, to examine desktop content. Similarly, users on desktop computers must be able to interact with the mobile version of an interface. Digital Academy relies on image-based content augmented via canvas to make this work.

Viewing a mobile demo from a desktop computer is an easy use case (because the desktop computer has more screen real-estate than a smartphone would).

Viewing desktop screens from a mobile phone while preserving readability is much more difficult. If we were to load your desktop image into a responsive viewport and scale it down so that it "fits," the human eye wouldn't be able to discern any valuable data from the screenshot. As an experiment, take a 1200x1440 image and resize it to 320 pixels wide while preserving the aspect ratio. You'll see that the image becomes useless.

To support this use case, if the image is wider than the user's viewport, Digital Academy will show an interstitial screen that tells the viewer that the content has a greater width than their screen (and that they can scroll around to view a clear picture of the content). This strategy is used to preserve image quality in this more complex case.

Question 3: Any tips toward creating a good experience for mobile viewers?

Ensure that the images you upload into your mobile-targeted demos fit within a mobile device's screen. You can experiment based on your device target to, for example, a target width of 300-320 px based on your content and presentation. A common gotcha is that wide designs/proofs are uploaded into the system (e.g., fresh out of Photoshop or Figma) without considering the "real-world" target device. Where the exported designs might be nice and crisp at 2200px wide, no smartphone has that kind of screen width.