Mark Garcia

Verifying Mobile Friendly Web Content

Blog Post created by Mark Garcia on Jun 6, 2017

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.

Responsive

 

ESPN

 

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. 

Non-responsive

 

Ward's Science

 

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

Ward's Science site on iPhone 7+ ScreenFigure 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.

Figure 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).

Figure 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.

 

Opera

  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.

 

Safari

  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

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.

Outcomes