{"id":51,"date":"2018-02-06T00:44:15","date_gmt":"2018-02-06T00:44:15","guid":{"rendered":"http:\/\/localhost\/staff-site\/?p=15"},"modified":"2018-05-24T07:16:21","modified_gmt":"2018-05-24T07:16:21","slug":"thinking-inside-the-box","status":"publish","type":"post","link":"https:\/\/emedia.rmit.edu.au\/oedvedesign\/index.php\/2018\/thinking-inside-the-box\/","title":{"rendered":"Thinking inside the box"},"content":{"rendered":"

Our brief when building the Certificate III (Individualised Support) was to build rich interactive experiences. After discovering certain limitations in RMIT\u2019s 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.<\/p>\n

Iframes? Eugh. This was supposed to be the future!<\/h3>\n

Yes. Those in the know will regard iframes a contentious methodology for serving content. Forgive them, they have their place.<\/p>\n

Iframes are a way of embedding content from another site \u2014 most users will be familiar with Youtube videos being embedded in Facebook pages, for example. It\u2019s a mature and well established system used throughout website front end services.<\/p>\n

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<\/a> from accidental edits by the program administrators and does not \u2018break\u2019 when Canvas updates are rolled out.<\/p>\n

\u201cFrames 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.\u201d <\/em><\/p>\n

source: Wikipedia<\/a><\/p>\n

Canvas doesn\u2019t handle iframes well, but we fixed that.<\/p>\n

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:<\/p>\n

\"\"<\/p>\n

To circumvent this limitation, our team decided to use an open source script<\/a> and upload it to Canvas\u2019 JS render queue. See GIF below:\"\"<\/p>\n

 <\/p>\n

This method provided a more uniform user experience between technologies and allowed greater opportunities for rich interactive experiences.<\/p>\n

The latest iteration is shown here.
\n