2.1.1 Mobile-friendly sites


Designing for mobile

If you are designing learning activities that will involve students using the Yorkshare VLE on their mobile device, you will need to design your VLE module site to be compatible with mobile devices. Whilst the VLE can be used on mobile device browsers, there is the option for students to use the Bb Student app. This is designed to allow quick engagement with the VLE, resources and some types of activity.

What works best for mobile access

  • Compact module sites with clearly ordered items on the left menu.
  • No more than one level of content within Content Areas (i.e. only using Folders where absolutely necessary).
  • Clear titles and descriptions.
  • Include all task details, links to resources and guidance within one content Item rather than separate links to files or resources (i.e. do not use File or Web Link tools from the Build Content menu).
  • Include text-based web-links for any embedded content.

Guides

What doesn’t work

  • Full text-editor capability.
  • Certain forms of embedded media and third-party tools. Include text web links to these resources in addition to any embedded content.
  • Descriptions on certain tools.
  • Colour schemes and colours for Item Titles (for accessibility for some disabled users you should not refer to links by colours anyway).

That’s not to say that you cannot use these approaches, just that you should not design activities that are dependent upon these tools and resource types for use in mobile contexts.

Content and site structure

Content type Mobile differences to desktop Advice if designing for mobile
Left menu links Clearer identification of the tool type that the link goes to.

Order differs from desktop version and does not show headings.

Does not use a colour scheme.

If the site has a complex structure, label links with a keyword that clusters different areas together or use an ordered reference, e.g. week number.
Items Item Title is shown. This is then clicked to access the Item content. Put all learning resources and task instructions within one content Item. Else a student will need to keep flicking back and forth to view different aspects of an activity.
Folders Folder Title is shown. This is then clicked to access the Folder contents.

Folder Description shows at top of Folder contents list, but not images or links to files.

Do not include links or images within Folder Description.
Web Link Web Links created using the Build Content menu will not show the description. Add web links within Items to ensure links are contextualised. Do not use the Web Link tool within the Build Content menu.
File Files will be opened with a supporting app on the mobile device, rather than downloaded. Files added using the File tool in the Build Menu do not allow description. As Items that otherwise provide context require extra steps to view on mobile, upload files within Items instead.
Long link text May require horizontal scrolling. Keep link text short. Rather than using the full URL for the web link, use the title of the resource. Do not use ‘click here’ as this is poor practice for accessibility.
Tables Tables can be used, but mobile screen size may require scrolling and headers will not be visible. Tables should only be used for data.
Images Images will appear, but larger images may require scrolling. Images embedded within Items do not resize to the mobile screen size. You may need to provide a link to download the image (the image itself can be made into a link). Images added using the Image tool from the Build Content menu work well on mobile, but do not present elegantly within the desktop view.
Text alignment Centre and right aligned text may not look distinctive from left aligned text due to screen width. Only use left aligned text. This is more accessible for some disabled desktop users also.
Padlet Embedded in Item Padlet loads but the content is not visible and new posts cannot be added. Include a text-based link to the Padlet URL for mobile users.
Replay Video Embedded in Item Replay embedded playback via the Mashup tool may not work via the Bb Student app. Include the Viewer URL (web link) to the video as part of the Item text. Mobile users should use this to access a mobile-friendly playback.
Audio and Video Embedded in Item Plays back natively within Bb Student after downloading. Non-streaming (should not be used for large video files >5MB), but does allow for short clips to be viewed without leaving the Bb Student app.
YouTube Mashup YouTube videos added via the Build Content Mashup tool as thumbnails will force a larger view. Use plain text links to YouTube videos within Items or the YouTube Mashup tool as an embedded player with Items to load YouTube in the Bb Student app.

Tools

The description text that appears with the link to the tool will not show in Mobile View. If designing a mobile-friendly activity with one of these tools you will need to put your instructions and links to guidance in a separate Item.

Tool Mobile differences to desktop Advice if designing for mobile
Announcements User will be prompted to open browser view. Encourage students to have their email alerts sent to their mobile. Copies of announcements are sent by email.
Assignment Submission – Anonymous (summative) User will be prompted to open browser view. Do not submit summative work using mobile devices. It is important that a successful upload occurs and students can check their submitted files.
Assignment Submission – Standard (formative) Can view deadline, instructions and can submit. Does not show preview or annotations. Can view summary feedback only and download their own file. Assignment submission is discouraged using mobile devices. For low-stakes, formative work, the Standard Assignment Tool could be used as long as the student checks submission and collects feedback using a browser.
Blogs User will be prompted to open browser view. Do not design an activity that requires use of the Blog tool on mobile devices with small screens.
Discussion Forum Plain text replies only. Mobile-friendly tool, best used for mobile discussion tasks.
Journal User will be prompted to open browser view. Do not design an activity that requires use of the Journal tool on mobile devices with small screens.
Peer Assessment User will be prompted to open browser view. Do not encourage use of Turnitin on mobile devices.
Tests and Surveys Bb Student only permits completion of Tests (Quizzes) and Surveys within the app for a limited range of question types. Ensure you only use the following question types for mobile-friendly quizzes: Multiple Choice, True/False, Either/Or, Short Answer and Essay.
Turnitin User will be prompted to open browser view. Do not encourage use of Turnitin on mobile devices.
Wiki User will be prompted to open browser view. Do not design an activity that requires use of the Wiki tool on mobile devices with small screens.