3.1. Designing Your Course For a Mobile Experience
The percentage of learners who access MOOCs using smartphones is increasing
every day. Most courses on edx.org can be viewed on smartphones using the edX
Android and iPhone apps, although we still recommend that learners complete
graded assignments on a desktop computer, depending on the type of assessments
that their courses include. For information on which exercises and tools are
mobile-ready, see the table in the Introduction to Exercises and
To make the course experience for mobile learners as rewarding as it is for
learners using desktop computers, keep the following best practices in mind as
you design, test, and run your course.
- Display names are critical for navigating through courses on smartphones. As
you create course content, make sure you replace the default display names
for every component with useful courseware component names.
- Keep display names and labels concise. Long display names and labels might
wrap on smaller screens, or might not be easily viewable. For example, if
several components have names that all start with the first five words and
differ only after that, learners using smartphones to access your course
might have difficulty distinguishing between components.
- Do not use Flash, which is not supported on mobile platforms, to create course
- Only use iFrames in course content where necessary, because iFrame content
might not be responsive and cannot be optimized for viewing on a range of
- If you develop course components in HTML, including course announcements, make
sure you set relative rather than explicit sizes for objects such as images,
tables, text, and so on, so that they will scale appropriately when viewed on
displays of different sizes.
- Learners might be viewing your course materials on screens as large as a
high-resolution Mac Thunderbolt display, or as small as a 5 inch smartphone
screen, so it is difficult to size an image so that it displays well at all
resolutions. In general, edX recommends keeping most images under 0.5MB in
size so that learners who have low Internet bandwidth will not have trouble
downloading the images. If you have a large image that requires zooming to
view the full detail, in addition to providing an image that can be easily
downloaded, link to a full resolution copy that can be opened separately
from the courseware.
- When you make choices about the problem types to use for graded and ungraded
assignments in your course, or which problem types to present in a single
unit, keep the mobile experience in mind. Whenever possible, use mobile-
ready assessment types. If you use assessment types that are not supported
on smartphones, notify learners in your courseware that they will not be
able to complete assignments that contain unsupported assessment types using
the edX iPhone and Android mobile apps.
- When learners access your course using the edX Android and iPhone apps, they
progress from component to component by swiping through them. It might seem
useful to include an HTML component in a unit for the purpose of providing a
demarcation point or guiding learners to the next unit, but having to swipe
through too many “markers” with no real course content is not a good
experience for mobile users.
components render correctly in the edX Android and iPhone apps as well as
directly in the LMS.
3.1.1. Testing Your Course For Mobile Devices
If you have included some of the more complex problem types, or have highly
customized the way course content displays, edX recommends that you test your
course for multiple devices and displays.
To test the mobile experience of your course, sign in to your course using the
edX Android or iPhone app, and view each courseware unit to make sure that it
renders as you expect it to.