Load Time
Before | During | After |
Be mindful that using a lot of images, videos, H5Ps ..etc on the same page will increase the load time. Reduce the dimensions of an image if it’s displayed smaller on a page to optimize the image. If you want to add icons, use Font awesome icons rather than images.
| If load time is more than 4 seconds:
You can check the load time of pages by using the following google chrome browser extension: https://chrome.google.com/webstore/detail/analyze-page-performance/hemibacgndhdhkfahkjdedjdgfapmfki?utm_source=chrome-ntp-icon
| Tech load time review is completed. |
Mobile Responsive
Before | During | After |
When designing a course, take a mobile first approach. Be mindful that some students will be completing their course on a smaller screen. | To ensure the course can be viewed on various devices, use responsive tables / grids when laying out content that will be side to side. Use percentages, not pixels, when you are assigning a width or height to an element (image, table…etc). For example: width=100% not width=350px. When you use percentages, the dimension will change based on the screen, making it responsive. Adjust the size of the screen and make sure that the content displays appropriately. To preview a page on multiple devices, you can add the following chrome browser extension: https://chrome.google.com/webstore/detail/viewport-resizer-%E2%80%93-respon/kapnjjcfcncngkadhpmijlkblpibdcgm?utm_source=chrome-ntp-icon
|
|
Links Working
Before | During | After |
| Use links to third party site with reason. When linking use reliable sites such as news sites rather than personal blogs, etc. ONLY links to word and pdf documents should be in a button labeled as: Title (PDF) Title (WORD) Links to websites, videos, and podcasts should not in buttons Once the link has been added to the course, click on it to make sure it is connected to the appropriate document/site.
| If you link to a third-party site, check if the link works after some time. |
Document and Image Size
Before | During | After |
Optimize the pdf documents to best for screen viewing. Link locally made DLC documents to drop box. Images should not be linked to other websites outside of Sask DLC Remember to save in M: drive and use the file naming structure. Large images can be resized using Adobe Photoshop Express (free online – no need to download) If there are multiple images on the same page and the file size is more than 200K, reduce the file size by either:
| Once uploaded, make sure the appearance (not blurry, stretched, placement etc.) is right
|
|
Clear Navigation Links
Before | During | After |
The name of the link should match the content it is associated with.
| Links should take the student directly to the desired location with clear instructions such as download assignment, read assignment, etc .
|
|
Using System Wide Navigation – No Interlinking Required Plug ins
- …
Content and Quiz Items Separated
Before | During | After |
| Keep lesson material and quiz items as separate files Lesson material will be its own page in the course Answer keys and assessments will be on separate tabs. Answer Keys to be clearly indicated to help when cloning course.
|
|
Live Versions Being Edited
Before | During | After |
Go through course, page by page. See if the assessments are functioning. Make sure assessments match their titles. Check all links. Make sure videos are embedded, load in an appropriate time, display clearly. Review all load times and mobile responsiveness.
| If video isn’t loading, embed the video so it’s playing properly. All locally created videos should have the DLC thumbnail and opening page and be in the DLC YouTube channel. Spelling, grammar and esthetics can be edited by the acting tech, but ANY content that takes away from or adds to the course MUST be indicated to the teacher for a decision to be made.
| DLC Tech (help desk) must be notified if new content is added (links, documents etc.) So that the partners of Sask DLC can be apprised of any course content changes. |