Device Specific Layouts
Author: Phil Chambers | Devices
Sometimes in instructional design, people will ask if you can build something a little out of the ordinary for them - I like when that happens because I can go away and research something new.
For this one, the SME wanted to know if it were possible to create a desktop layout of a page with interactive elements like buttons that revealed content, but when browsing from mobile, it would just display text and images.
So yes, that is possible in regular web development, but it can take a bit of work when you are using an LMS like Canvas. This tutorial is going to be split up into various parts to make it easier to read. The Devices section will have the complete list of this series.
Building on Canvas
With this build, the content to be seperated is going to be inside two different containers. We can start with the desktop one:
<div class="visible-desktop visible-tablet" style="text-align: left;">
This is where the desktop content will go.
</div>
Underneath that, we want this mobile only view:
<div class="hidden-desktop hidden-tablet">
This is where the mobile content will go.
</div>
Note: the mobile view is technically going to be duplicating information, so we do not want screen readers to read it twice. The hidden-* classes seem to hide this from screenreader view on both device layouts, so an additional aria-hidden="true" should not be needed.
Add no-print to the container class as well if you do not want learners to print either version of the containers
The Canvas App
The Canvas App functions a little differently to the regular mobile view. To make something for the app only, you should be able to take the mobile verison and just add hidden-phone to the class attributes. It will look something like this:
<div class="hidden-desktop hidden-tablet hidden-phone">
This is where the Canvas App content will go.
</div>
A combination
As quite a lot of things work similarly on a mobile browser as they do on desktop, you may want one container for all browsers, and one for the mobile app.
Just be aware that if you are going to do this, interactive elements will need to be tested on a mobile browser as well the mobile app.
Use the following to display something for everyone, and something extra for mobile app users:
<div>
This is where the regular content will go.
</div>
<div class="hidden-desktop hidden-tablet hidden-phone">
This is where the Canvas App content will go.
</div>
Note: Using the HTML above, both containers will be visible on the mobile app. Change it to your preferred visibility depending on the element/content you wish to separate.
Next Steps
Once the containers are set up, you can start adding things in.
In the next tutorial in this series, I will add an interactive button to reveal hidden content with the dekstop view, while the mobile view simply has the content revealed from the start.
Go to: Device Specific Layouts: Adding Elements for one example of how to separate content.