Verifying Mobile Friendly Web Content

18 6 2,482

We've all been there. You find the perfect website that has content that you would love to share in your Canvas course, only to find, after the fact, that the content doesn't scale appropriately or doesn't render when opened on a mobile device.

I wanted to use this post to talk a bit more about what web designers refer to as "responsive" content. For those of you who maybe aren't 100% familiar with this term, responsive content is simply content that will render the uniquely, but appropriately based on the size of the screen that is used to access it. Additionally, I wanted to discuss some additional tips and ticks for making sure that the content you are sharing will render properly on a mobile device.

Responsive vs. Non-responsive Examples 

I wanted to make sure we were all clear on the concept of responsive content first, before I reveal some easy tips and tricks to test websites as a means of determining if the content is truly responsive or not. Below I have included a few sites that have non-responsive or responsive content.



ESPN Desktop siteFigure 1. ESPN site rendered in a traditional desktop orientation on a laptop screen.

ESPN Mobile SiteFigure 2. Ward's Science site rendered on an iPhone 7+ screen.

Notice that the content for both the desktop and mobile site remains the same, but the way that the content is render changes based on the screen size of the device that is being used to access that the site. 


Ward's Science

Ward Science Desktop Site
Figure 3. Ward's Science site rendered in a traditional desktop orientation on a laptop screen.

WardFigure 4. Ward's Science site rendered on an iPhone 7+ screen.

Notice that while the site renders in an appropriate manner for desktop users, mobile users are left with small text based links to tap on. Links that are this small, and this close together can result in the user accidentally tapping on an incorrect link, which can then lead to user frustration. 

Tips and Tricks to Assessing Responsiveness of a Website

You could, in theory simply access sites from your mobile device as a means of checking their responsiveness, but I am assuming that you will most likely be building most of your Canvas courses on a traditional desktop PC or laptop. As such, it may be cumbersome and counterintuitive to your work flow to have to pull out your phone and visit a site that you currently have open in your computer's browser.

So, how can we remedy this complication, while keeping everything isolated in your desktop's/laptop's environment?

There are actually two ways that we can go about it. We can either actively resize the browser window while a website is loaded in it, or we can user developer tools in that browser to "trick" the webpage into thinking that it is loading content onto a mobile device.

Resize the Browser Window

Resizing the browser is pretty easy. Simply load any website you would like into the url bar, and then grab the right side of your browser window and pull it left to shrink the width. If the website is responsive, based on screen size, then you should see the content of the site shrink to fit the new orientation. Note: the degree of responsiveness may vary based on the website. Some websites will re-render content at a myriad of widths, while others may only re-render content at two or three distinct points. The video below demonstrates how the Canvas Community site renders at a traditional desktop and how it responds to the browser window shirking to a more mobile style width. 5. The Canvas Community page renders differently when the browser window's width shrinks.

Using Browser Developer Mode

Modern day Internet browsers have a developer mode that can be used for a variety of purposes (especially if you are a web designer/developer). One of the functions that this particular mode has in it is a Responsive View, which allows the user to render a specific site as though it were being displayed on a mobile device. The way in which you can enable this particular view may differ slightly between browsers, but, once it is enabled, it allows for versatile assessment of a website (you can set very specific widths, or even choose from a lists of devices to see how the site will render). 6. Safari's Responsive Design Mode allows for the visualization of how a website would render on different devices.

Below I have provided links that will allow you to enable this mode on any of the major browsers.

Google Chrome

  1. Enable the Developer Tools.
  2. Toggle Device Mode.

Mozilla Firefox

  1. Use the menu to enable Responsive Design Mode.

Microsoft Edge

  1. Enable the Dev Tools by pressing the F12 button (in some cases Fn + F12) on your keyboard.
  2. Enable Emulation Mode.


  1. Click on the Opera logo (Windows) or the View option in the menu bar (Mac) and select Show Developer Menu
  2. Click on the Opera logo (Windows) or the Develop option in the menu bar (Mac) and select Developer Tools
  3. Once the Developer Tools panel opens press Control + Shift + M (Windows) or Command + Shift + M (Mac) to toggle Device Toolbar on or off.


  1. Click on Safari > Preferences in the menu bar.
  2. In the window that appears click on the Advanced tab.
  3. Make sure that the checkbox next to "Show Develop in the menu bar" is checked.
  4. Click on Develop > Enter Responsive Design Mode in the menu bar or press Command + Alt + R

Additional Mobile Friendly Tips

While responsiveness is going to be one of major requirements for content that is shared to mobile devices, there are a couple of other things that you want to keep an eye out for when determining if a particular page is worth sharing or not, or if you need to include a disclaimer.

Image Size/Content

Many people don't think about this in the context of mobile devices, but if a particular page on the internet is filled with images, and each of those images is large, then it is going to take a long time for the page to load on mobile devices. More modern day websites have found a variety of ways to handle this issue, but older sites may not have such techniques implemented. If the page that you are linking to is not one that you maintain, and therefore has content/images outside of your control, you can do a very simple test to determine how quickly the page could load on mobile devices. 

Google has an excellent mobile site testing tool.


Flash was the standard for web based animations, games, and more when most websites were accessed via a traditional PC or laptop. However, Flash requires a great deal of processing power, and, as such, is a drain on the battery of most mobile devices. Additionally, both Apple and Google have deprecated their usage of Flash, or have pledged to stop support of it in the not too distant future. As such, most students will be unable to access any content on a webpage that is built on Flash when they are accessing that webpage using their mobile device or tablet.

You can use this tool to determine if a particular site uses flash.

Java (not the same thing as Javascript)

Some online applications utilize Java (applets), specifically the Java that is handled by an operating system. Mobile operating systems have no access to the Java framework from an end user standpoint, and as such, they will not be able to run any applets that rely upon Java.

Unfortunately there really isn't an easy way to quickly test if a page requires Java or not without actually visiting the page with one or more devices.

Community Coach
Community Coach

Hi msgarcia

Ummmmm.............. WOW! I have bookmarked this so that I can play around with your tips and tools.

Great job, and thank you!



Happy to help!


msgarcia My mind is officially blown! I super-heart Responsive Design Mode :smileygrin: I just feel so spiffy now and can't wait to demo it live to the rest of my team.

I'm just Ctrl-Shift-M (in Firefox) away from a totally mobile screen-size and being able to take screenshots too! Wonderful wonderful!

Now to have some fun with Flexbox and see what happens. I had previously just been resizing my browser windows by hand... but now Responsive Design Mode--oo la la!

Cheers - Shar


Happy to help.

I guess it is also worth mentioning that any domain that has an actual mobile domain (i.e. or usually won't render in the responsive manner if you aren't using a true mobile device. I think that the number of sites employing that kind of infrastructure now is pretty limited, as Bootstrap has become fairly ubiquitous with mobile-first design principles, especially now that we as a society have passed the tipping point with regards to desktop vs. mobile design.

Have fun!

Community Coach
Community Coach

Awesome post, it's the Mobile Friendly Content 101. Even though we get fixated on the Canvas Mobile app which does the heavy lifting for us, especially for Pages, we tend to forget about the sites we link to. This is a good reminder to make sure the content you link to in your course is also mobile-friendly -- when possible. 

Regardless of what you put in your course, I always say check your courses on mobile devices! With 20-30 percent of our students using mobile devices to access Canvas, that's a good number, and you want to make sure you are creating the course you want students to see on all platforms.  

Community Coach
Community Coach

msgarcia Nice Work - This is a great post! Thank you so much for taking the time to document and describe all of these scenarios for The Community! I work at a school with 1:1 iPads, and this is relevant for daily work and for when students rely on their smartphones outside of the school day to access school work and general course content. (I've bookmarked this blog post, and I intend to share it with my colleagues when we return for teacher workshop in August!) I'm with Ryan though - as a general rule, alaways check your courses on a mobile device before launching to students. It is incredibly likely that even if you don't access the site or material on a mobile device, a student or observer/parent will! Smiley Happy

About the Author
I'm a Texan, born and raised, though I spent all of my years in college and graduate school in the northeast. I attended MIT, where I obtained a BS in Biology, and then received a MS in Cell and Molecular Biology from UPenn. After leaving the northeast, I moved back to the Dallas area to be a bit closer to my family, and landed a job at Collin College. Initially, I was lab staff, and prepped and taught biology labs. I recognized early on in during my tenure that students across our campuses needed a consistent lab experience. To address this, I set to work filming video lectures and reviews and posting them to YouTube. The problem then was disseminating the information to students, and not just those in my classes. To develop a central repository of these videos, and other content, I taught myself to code in HTML and CSS. Over the last eight years, I have worked to better my understanding of web and graphic design. Along the way, I have picked up additional skills that have helped me to achieve this. Now, as I work on new strategic initiatives and projects, I do so with very distinct objectives: create functional, student facing assets, AND, ensure that those assets are clean, concise and well designed.