Try not to expose links - as in the example above - unless it's necessary. This makes more efficient use of the space on the page. Visit Shopify.ca.
Try to use apage resource (web page)instead of uploading large documents where possible as it frees up space on your Moodle course home page. This also gives you the freedom to edit and update your course content directly in Moodle anywhere you have a connection to the internet instead of having to go back to your home or work desktop computer to work.
Content that opens in a Moodle web page will also work well responsively as it wraps when it loads in Moodle - opening a Word document may expand beyond the limits of the viewport.
Avoid uploading many documents or using text heavy pages. Think more in terms of short "information-bytes" or leaner content as much as possible to create a better user experience on mobile devices.
If you do use documents that need to be viewed in Microsoft applications like Word or Excel ask your students to get Office for iOS or Android.
make sure activity links are descriptive or human readable - they are web site links and users should understand them at a glance for easy navigation. Example: For more information visit the CBC News website.
But - for mobile sites try not to use too many links that take the user to an outside site as it can be difficult to navigate back to the original site.
Write a very short description for home page Activities to give the mobile user more information about where the link will take them.
Compressed Or Optimized
create optimized or compressed images for fast loading of pages
use JPEG, GIF and PNG-8 file formats. Avoid PNG as iit can bloat your files sizes by 5-10 times
if you don't have Photoshop use TinyJPG for free (also a cheap Photoshop plugin available): https://tinyjpg.com/
Use Moodle's built in img-responsive CSS class to give images responsive characteristics.
1. Click on Image editing icon in Moodle HTML editor tool bar.
2. Change Class to img-responsive in drop down box of Insert/edit image tool.
See an example of a large image re-sized to see how it behaves responsively in larger viewports as well as smaller ones.
Here's an example of a YouTube video that has had some code added to it that makes the video respond to different viewing panel widths.
Try changing the video width by grabbing the right side edge of your browser window and pull it to the left. The video re-sizes with Moodle as it changes from a desktop to tablet and finally a single vertical column of blocks that displays well in phone or small mobile devices.
Create a responsive embedded video by using the code below. Wrap your <iframe> in the <div> below and add class="video-responsive" to to the <iframe>.