In fall 2017, DePaul upgraded our installation of our learning management system, D2L, to the “Daylight” interface. One of the primary reasons D2L underwent this design overhaul of the entire system was to implement a principal called “Responsive Design.”

Responsive Design is a method of web design whereby developers build one version of a website that is designed to adapt and scale to whatever device it is accessed from. This is in contrast to the early days of smartphones, when developers would create a separate “mobile” site, which you would be redirected to if you were accessing it from a smartphone or tablet. Instead, there is only one version of the site, but the elements move, resize, and adapt depending on the size of the screen the site is viewed from.

With responsive design, users don’t need to worry about a mobile website site having limited functionality compared to the desktop site—there’s only one site, which is designed to work well across different devices.

However, just because the learning management system is responsive and mobile-friendly, that doesn’t mean that your course is. While the Daylight interface does a great job of making sure the system elements and navigation are mobile-friendly, there’s still the small matter of your course content. In this post, I’ll go over six things you should do to make sure your students can access all your course content no matter what device they’re on.

But first, you might rightfully ask:

Why would I want my students to be able to do coursework on their phones?

Three reasons:

1. It’s a basic expectation in 2017 that everything should work on your phone. It’s a rare thing to find a web service without a mobile-friendly component, be it a social network, a word processor, or a mortgage application. Students—like the rest of us—expect everything to work on their phones. A site that doesn’t work well on mobile seems archaic and reflects poorly on the institution. 
2. Sometimes it’s the only connected device students have on hand. At DePaul, many of our students spend hours on busses and trains every week. Wouldn’t we rather they have the opportunity to watch a lecture video or participate in a class discussion rather than playing Clash of Clans? 
3. Some socioeconomic groups are more likely to own a smartphone than a computer. ^[1]  Since it’s DePaul’s mission to serve these underserved populations, we should be interested in making sure they can access our course material from a mobile device.

Six steps to mobile-friendly course content

Your students will have a great experience accessing your course site on mobile if you follow these six guidelines. Note that some of these are pretty technical, so if you’re a DePaul instructor and you think any of this is over your head, I’d encourage you to reach out to your FITS consultant.

1. On your homepage, make sure the most important widgets are on the left at the top. When viewed on a mobile device, D2L will display homepage widgets in a single column, with the left column appearing first. Make sure the top-left widget is the most important, as students will need to scroll to see the others.In this example, students might not see my very important class room change News item when accessing from mobile because the lefthand Faculty Info Widget displays first in the mobile layout. 

2. Create web files in D2L rather than uploading PDFs and other documents. Word documents and PDFs often have text that’s too small to read comfortably on a small screen, forcing readers to zoom and pan left to right to read each line. Instead, copy and paste your documents into new files created within D2L.Left: unreadable PDF uploaded to D2L. Right: Web file created directly in D2L. 

3. Avoid tables. Tables never translate well to mobile devices—avoid using them if you can. 

4. Mobile-friendly images. Since an update to D2L in Fall 2017, images you insert into D2L should resize down when viewed on a smaller device by default. However, if you resize the image in D2L or if the image was inserted before Fall 2017, the image may not resize. You can add  style="max-width:100%;” to the <img> tag in the HTML source code to make the image resize.
Left: Image not set to resize for mobile partially cut off. Right: Image set to resize for mobile. 

5. Test your Links and External Learning Tools. Make sure you test anything you link to outside of D2L to see how it behaves on mobile devices. Some tools may prompt students to download an app in order to proceed. Others may tell them they must access the content via a desktop. 

6. Put videos in with the Video tool, or use responsive CSS. If you add video by going to Content and selecting “New” > “Audio or Video” your video will resize for mobile devices. If you’re embedding video content in another way, contact your FITS consultant about adding cascading style sheets (CSS) to your course, which can make your videos resize.

^[1] According to Pew Internet, 21 percent of adults with an income of 30,000 dollars or less are “Smartphone dependent,” meaning their phone is the only device they own with Internet access. Young people and racial minorities are also more likely to be smartphone dependent.