Our brief when building the Certificate III (Individualised Support) was to build rich interactive experiences. After discovering certain limitations in RMIT’s Canvas program that would restrict the choice of technologies available for use; and considering the limited support available to program coordinators following the build process, we elected to build our custom interactivity in an RMIT hosted WordPress instance and drop them in using iframes.
Iframes? Eugh. This was supposed to be the future!
Yes. Those in the know will regard iframes a contentious methodology for serving content. Forgive them, they have their place.
Iframes are a way of embedding content from another site — most users will be familiar with Youtube videos being embedded in Facebook pages, for example. It’s a mature and well established system used throughout website front end services.
While Canvas already imbeds content from other sources (ARC, Youtube etc.) we find the Iframe to be a better method: It ensures the content is sandboxed from accidental edits by the program administrators and does not ‘break’ when Canvas updates are rolled out.
“Frames allow a visual HTML Browser window to be split into segments, each of which can show a different document. This can lower bandwidth use, as repeating parts of a layout can be used in one frame, while variable content is displayed in another.”
Canvas doesn’t handle iframes well, but we fixed that.
Canvas is inflexible in hosting external content. It has issues with dynamic content that changes in size within an iframe. There are issues with layout across device sizes. Something to consider when most internet traffic is now viewed on mobile devices. Limited frame windows end up obscuring click and reveal content such as accordions. As such, the user may not be aware there is more information available to them, and the addition of iframe scroll bars may be missed. See GIF below:
To circumvent this limitation, our team decided to use an open source script and upload it to Canvas’ JS render queue. See GIF below:
This method provided a more uniform user experience between technologies and allowed greater opportunities for rich interactive experiences.
The latest iteration is shown here.
We will share this technique —and how to implement it— with RMIT’s Canvas developer community by completion of our course build. We hope it will serve some benefit to other course facilitators and developers.
