Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Mobile device support: Difference between revisions

From MoodleDocs
m (typo)
m (Text replacement - "class="nicetable"" to "class="wikitable"")
 
(7 intermediate revisions by 4 users not shown)
Line 18: Line 18:
===3. Admins===
===3. Admins===
Site administration is expected to still be performed primarily on desktop and laptop computers. Mobile optimization of admin tasks may occur in the future but is not a priority for this release.
Site administration is expected to still be performed primarily on desktop and laptop computers. Mobile optimization of admin tasks may occur in the future but is not a priority for this release.


=== Summary ===
=== Summary ===
Line 24: Line 23:
In summary, the following types of use are anticipated:
In summary, the following types of use are anticipated:


{| class="nicetable"
{| class="wikitable"
|-
|-
! Activity
! Activity
Line 114: Line 113:
|-
|-
|iOS
|iOS
|iphone 3gs
|iPhone 3gs
|Safari
|Safari
|-
|-
Line 156: Line 155:


===Blocks===
===Blocks===
*MDL-39715
*Navigation - Major improvement could be done here. The hamburger menu icon could display a navigation side bar similar to the current HTML5 mobile app. Also the paddding, font size is too small (Xoom, HTC Desire) MDL-39715
*MDL-39812
*Calendar - Use ajax to avoid reloading MDL-39818 MDL-38347
*MDL-39813
*Add New Block - Samsung tab II & LG Optimus L7: Chrome and Stock browsers. Adding new block doesn't automatically added the block to the page. It requires tabbing the select option box to initiate the process. (And Xoom and HTC Desire) MDL-39776
*MDL-39735
*MDL-39814
*MDL-39749
*MDL-39815
*MDL-39749
*MDL-39796


===Front Page===
===Front Page===
*MDL-39798
*Reports - On Front page settings > reports > course participation, improve alignment/layout for the page. MDL-39798


===Course Page===
===Course Page===
*MDL-39750
*Adding activities/resources - Could be improved. Not working on Nexus 4 - 4.2 - Chrome. Selecting 'folder' do not redirect to the folder creation page. However the second time you click on it, the select box automatically trigger the exist choice and this time goes to the 'folder' creation page. Not working on HTC Desire at all (can't trigger select). Not working on Xoom at all - activity chooser locked up. MDL-39750 MDL-39816
*MDL-39816
*Grading - Smaller screens have a really long scroll before you can start to move horizontally, then a big scroll back to the area you wanted to see MDL-39817
*MDL-39817


===Activities/Resources===
===Activities/Resources===
*MDL-39748
*Assignment - Using advanced grading: add new criteria and edit the levels - the size of the input boxes for name and points are too wide.  Then, add new level for the criteria, input text for the name is smaller than the point input text. The size of input boxes should be consistent and smaller. MDL-39748
*MDL-39746
*Forum - ipod touch/iphone 4s (potrait view): on discussion page, user name is overlapping with profile picture MDL-39746
*MDL-39736
*SCORM - <480px screens don't have enough space to display SCORM at present. Semi Working on <768px screens. Totally broken again on <980px and <1200px screens. Doesn't reflow along with the rest of the page. It needs to in order to allow for rotation of the screen. MDL-39736 MDL-39737
*MDL-39737
*Folders/Files - Mobile friendly. Works well.
*MDL-39773
*Lesson - At the end of lesson page, add a space between "Return to lesson" and "View grades" MDL-39773
*MDL-39770
*Chat - Some bugs to fix but it is usable. On an iphone users can currently choose between tiny text or lots of scrolling MDL-39770 MDL-39705 MDL-39704
*MDL-39705
*Wiki - Fix alignment for required field (red *) on creating new wiki page MDL-39779
*MDL-39704
*URL - Embedded URLs display at a fixed width that is small on a desktop and too large on a small screen. Embedded URLs do not load on an iphone 3gs. MDL-39766 MDL-39771
*MDL-39779
*MDL-39766
*MDL-39771
*MDL-39715
*MDL-39818
*MDL-38347


==Major Projects==
==Major Projects==
Line 199: Line 185:
===Relative Scaling===
===Relative Scaling===
Text sizing in Moodle is currently often done with hard coded pixel sizes. This makes scaling for different devices difficult. Switching Moodle to using relative scaling based around the html concepts of "em" and "rem" should allow us to make better use of the available screen real estate throughout Moodle.
Text sizing in Moodle is currently often done with hard coded pixel sizes. This makes scaling for different devices difficult. Switching Moodle to using relative scaling based around the html concepts of "em" and "rem" should allow us to make better use of the available screen real estate throughout Moodle.
* MDL-39843 - Use REM on bootstrapbase to make font-size cascade and scalable
===Blocks===
===Blocks===
Where and how the blocks should be displayed on small screens is the subject of debate. See MDL-39715.
Where and how the blocks should be displayed on small screens is the subject of debate. See MDL-39715.

Latest revision as of 15:11, 10 August 2021

Moodle 2.6

This pages summarizes development efforts being made as part of the development of Moodle 2.6. Specifically, enhancing the experience for users accessing Moodle via a tablet or smartphone. Mobile devices are now extremely common and Moodle must evolve to allow Moodle users to make full use of their devices.

Priorities

Mobile device support will be an ongoing priority for Moodle HQ. With additional core development and base theme alterations Moodle should be able to function equally well on desktops, tablets and smartphones. This will enable Moodle sites to be confident that their Moodle installation will be usable on whatever devices are in use by their students and staff.

To enable us to achieve the greatest impact with finite resources we have decided on the following set of priorities.

Content Before Configuration

It's extremely important that users be able to easily access course content on their various devices. For the time being it is acceptable to require the user to use a desktop or laptop computer to perform site or course configuration. Once we have ensured that users can easily access course content we will move on to improving the mobile experience for admins and users who are creating courses.

1. Students

Students typically outnumber staff by a large margin and have a very high rate of mobile device ownership. "Read only" tasks like checking assignment due dates, retrieving grades and accessing course resources must be painless. "Write" tasks like submitting photos taken with the device camera should be accommodated as much as possible.

2. Teachers

Less numerous than students. They should be able to participate in their courses, for example participating in forum discussions, as well as perform some core activities like grading of assignment submissions. Some areas, most notably the gradebook, will likely not be optimized for mobile devices until a later release.

3. Admins

Site administration is expected to still be performed primarily on desktop and laptop computers. Mobile optimization of admin tasks may occur in the future but is not a priority for this release.

Summary

In summary, the following types of use are anticipated:

Activity Student Teacher Administrator
Checking Assignment metadata M / T / D M / T / D M / T / D
Viewing Gradebook M / T / D M / T / D M / T / D
Editing Gradebook N/A T / D N/A
Accessing Course Resources M / T / D M / T / D M / T / D
Reading forum discussions M / T / D M / T / D M / T / D
Participating in forum discussions M / T / D M / T / D M / T / D
Uploading multimedia (images, video, audio) M / T / D M / T / D M / T / D
Uploading other files D D D
Site administration N/A N/A D

M = Mobile; T = Tablet; D = Desktop (or Laptop).

Device Support

Rather than listing or blacklisting devices that do or do not present Moodle correctly, we are aiming to create a list of recommended specifications for a device in order to have an optimum experience with Moodle.

Android

We recommend a 1GHz single core, or better device, with 512MB or more RAM. A resolution of 480x320 in Landscape mode is also recommended.

iOS

Any device capable of running iOS 4 or greater is recommended.

Device Testing

Testing of current Moodle functionality on a range of mobile devices has been performed. iPads, recent iPhones, Android tablets and Android phones have been targeted for thorough testing. This testing will be repeated in the future to detect device specific problems.

Testing is limited by what devices are physically available to HQ staff. As we near the release of 2.6 testing by the community will be required to test additional devices, most notably the iPhone 5.

High Priority Devices Available to HQ

Operating System Device Browser
iOS iPad 2 Safari
iOS iPad 3 Safari
iOS iPod Touch Safari
iOS iPhone 3gs Safari
iOS iPhone 4s Safari, Chrome and Opera
Android Acer Iconia 10" Stock 4.0.3
Android HTC Sensation 4" Stock 4.0.2
Android LG Optimus L7 Stock (Android 4) and Chrome
Android Samsung Tab 2 7" Stock (Android 4) and Chrome
Android Nexus 4 Chrome
Android HTC Desire Stock (Android 2.3)
Android Motorola Xoom 10" Chrome

Getting It Done

Tracker issues have been created as part of device testing and also after discussions about possible improvements. The tracker issues are sub-tasks of MDL-38856 and MDL-39665.

Broadly speaking the issues can be grouped by area. Note that this listing will fall out of date very quickly. It is only intended to provide an approximate sense of where work is to be done. Please consult MDL-38856 and MDL-39665 for a completely up to date summary of the work being done.

Blocks

  • Navigation - Major improvement could be done here. The hamburger menu icon could display a navigation side bar similar to the current HTML5 mobile app. Also the paddding, font size is too small (Xoom, HTC Desire) MDL-39715
  • Calendar - Use ajax to avoid reloading MDL-39818 MDL-38347
  • Add New Block - Samsung tab II & LG Optimus L7: Chrome and Stock browsers. Adding new block doesn't automatically added the block to the page. It requires tabbing the select option box to initiate the process. (And Xoom and HTC Desire) MDL-39776

Front Page

  • Reports - On Front page settings > reports > course participation, improve alignment/layout for the page. MDL-39798

Course Page

  • Adding activities/resources - Could be improved. Not working on Nexus 4 - 4.2 - Chrome. Selecting 'folder' do not redirect to the folder creation page. However the second time you click on it, the select box automatically trigger the exist choice and this time goes to the 'folder' creation page. Not working on HTC Desire at all (can't trigger select). Not working on Xoom at all - activity chooser locked up. MDL-39750 MDL-39816
  • Grading - Smaller screens have a really long scroll before you can start to move horizontally, then a big scroll back to the area you wanted to see MDL-39817

Activities/Resources

  • Assignment - Using advanced grading: add new criteria and edit the levels - the size of the input boxes for name and points are too wide. Then, add new level for the criteria, input text for the name is smaller than the point input text. The size of input boxes should be consistent and smaller. MDL-39748
  • Forum - ipod touch/iphone 4s (potrait view): on discussion page, user name is overlapping with profile picture MDL-39746
  • SCORM - <480px screens don't have enough space to display SCORM at present. Semi Working on <768px screens. Totally broken again on <980px and <1200px screens. Doesn't reflow along with the rest of the page. It needs to in order to allow for rotation of the screen. MDL-39736 MDL-39737
  • Folders/Files - Mobile friendly. Works well.
  • Lesson - At the end of lesson page, add a space between "Return to lesson" and "View grades" MDL-39773
  • Chat - Some bugs to fix but it is usable. On an iphone users can currently choose between tiny text or lots of scrolling MDL-39770 MDL-39705 MDL-39704
  • Wiki - Fix alignment for required field (red *) on creating new wiki page MDL-39779
  • URL - Embedded URLs display at a fixed width that is small on a desktop and too large on a small screen. Embedded URLs do not load on an iphone 3gs. MDL-39766 MDL-39771

Major Projects

Several projects are under way to attempt to resolve many of these issues at once. They are...

Full Screen Popups

Popups such as the file picker and the message notification popup function poorly on a small screen. Refactoring them could significantly improve the experience throughout Moodle.

  • MDL-39851 - Full screen popup for mobile (filepicker./activitychooser)
  • MDL-39852 - Adjust file picker / activity chooser forms to full screen popup.

Relative Scaling

Text sizing in Moodle is currently often done with hard coded pixel sizes. This makes scaling for different devices difficult. Switching Moodle to using relative scaling based around the html concepts of "em" and "rem" should allow us to make better use of the available screen real estate throughout Moodle.

  • MDL-39843 - Use REM on bootstrapbase to make font-size cascade and scalable

Blocks

Where and how the blocks should be displayed on small screens is the subject of debate. See MDL-39715.

Navigation

Further information is needed about how the navigation tree can be optimized and when it should be displayed in full or at all.