Create mobile-friendly content

mobile phone and tablet shown in use for class

 Preparing your course materials to be mobile-friendly shouldn’t be an afterthought. Incorporating best practices for universal design will benefit all users. It is easy to do if you keep these four factors in mind when creating web-ready content.

Speed

Think about optimization. As broadband services have gotten faster, load time patience has decreased. When using images, be sure you’ve looked at the image resolution. Your images don’t need to be 300 dpi and 25 inches by  30 inches. Reduce the file size of your images before adding them to your website. You should also optimize your images before adding them to a Powerpoint or other presentation software. On a Mac you can use the Preview tool to resize images. On Windows, you can try an image size editor called Imageresize that was tested by UAF CTL on both on Windows 7 and 10.

Don’t upload a video file to your site; be sure to use a hosting service like YouTube, Google Drive, or better yet, Kaltura on the UAF media server. These hosting services take the guesswork out of optimization and do that for you. When a student accesses the video through one of these services, it detects the mode of access and shares the best viewing option by adjusting file size, type, etc.

Responsive Design

Access to your web content should exist on a website that is responsive, that is, a site that can detect what kind of a device is being used and can adapt the view for that device. Most WordPress themes and sites built on Google Sites are responsive.

How can you tell if a website is responsive? You could grab your phone and see for yourself. You can also use Google’s Mobile-Friendly Test website. Another test can be done on your computer by resizing the browser window. Simply pull the left side of your browser window to narrow the view and a responsive site will adjust its content as you make the window smaller.

The default Blackboard Learn structure (we’re using the 2012 theme) when accessed through a web browser is not optimized for mobile devices; however, the Blackboard app is responsive and built specifically for phones and tablets. Keep in mind that the content that you add to Blackboard may not be responsive. Follow the suggestions outlined in this tip to avoid any problems.

Formatting

The principles for universal design and web accessibility will benefit all users, including mobile device users.

  • use header and subheader styles instead of “bold
    and larger fonts to portray hierarchy of content
  • use bullet points
  • use a readable typeface or the default typeface and allow the browser or app to use the best option for that device
  • consider contrast to see words and letters better
  • use small chunks of content
  • links are described and not showing as “click here” or other uninformed phrases
  • avoid using an entire website site URL as the link text
  • add content directly on site instead of attaching a downloadable document that may not have a mobile device reader
  • use alt-tags to identify images and other graphics

Avoid Flash and Java

Avoid websites that have interactions that require flash. Mobile devices don’t do flash. Use this Flash Test site to see if your website uses Flash. Or Java. Many applets (small applications) use the Java framework and need an operating system that isn’t included in mobile devices by default.

If you’re interested in interactivity, consider using a tool like H5P to create your own interactive games and challenges. Everything from flashcards to drag and drop exercises to Speak the Words (answering a question with your voice) can be created and shared with your students or embedded in Blackboard, WordPress or other website.

Other Considerations

Do you use a publisher’s content or other website content as a requirement for your course? Take a few minutes and search the site to find out if the offering is mobile-friendly.

If you’re concerned that students might have difficulty completing your course solely with a mobile device, it’s highly suggested that you add notes to your course details so that students are given a head’s up when registering in UAOnline.

As you think about your forthcoming development for upcoming courses, take a few minutes to consider making a few corrections to your content so that it’s mobile-friendly–and more student-friendly in general. If you’d like assistance with any of these factors, please come to a UAF CTL Open Lab.

See also: Adapt your course for Blackboard Mobile Learn

UAF CTL logo

Heidi Olson

Instructional Designer

uaf-ecampus-design@alaska.edu

Leave a Reply

Your email address will not be published. Required fields are marked *