 Hello, everyone, and welcome to this Moodle Academy webinar. Make the most of the Moodle mobile app. I'm Mary Kuch, education manager here at Moodle HQ, and I'm going to be monitoring the chat and relaying any questions to Juan Lever, our head of mobile solutions at Moodle HQ. It's quite a short presentation, so there will be plenty of time for questions at the end, and I'm now going to pass over to Juan to start the presentation. Over to you, Juan. All right, so today, well, Mary already introduced me, but I think that a lot of people in the chat already know me because I've been checking all the different participants' names, and I think that there are a lot of people from the community in these webinars today, so, yeah, I'm very glad to see you around. So, yeah, so today I'm going to basically summarize in five main sections or tips a few things that you can do to improve the user's overall experience with the mobile application. So first, in the first section, I'm going to talk about how you can reduce the onboarding friction, and you might be wondering what's onboarding friction. So when I say onboarding friction, I mean that for sometimes, for users, it is very difficult to just reach your Moodle site using the mobile application, and the simple reason for that is that there is a main barrier that is the site URL or the site address that nowadays most of the people are used to use apps, specific apps for specific purposes. So opening a browser, typing a URL is something that is not very common. So we try to improve this aspect in the mobile app to just make this journey easier for the final users of the mobile application. So the second thing is that you should try to make your users feel like at home, feel comfortable when they are using the mobile application that they feel that they're using your tool for your system, for your institution. The third one is to simplify the user interface. When you're using a mobile device or when you're using a mobile application, you don't expect to see so many options. You just to be focused on the tasks that you want to do, that is accessing a course, reading materials, doing a quiz, taking a survey, so doing very specific tasks in a very driven way so you are not lost in the way. This is also related to the fourth point that is make your courses mobile friendly, that of course we can have a very simple interface in the mobile app with a few options to just go to the course, to my notifications, or my messages. But the most important aspect is that your courses has to be designed in a way that are mobile friendly. When I say mobile friendly, I mean that they look okay in a small device. They look okay in a device that the user is just holding while he's in the living room coach, or when he's traveling in the commuting or whatever. And finally, the fifth point is about supporting your students and teachers so they can help if they are lost in this journey of using the mobile application. Okay, so I will start with the very first one. And as Maes said, we will have time for questions at the end of the meeting. Before starting with the first point, I will guess to clarify that some of the features that they're going to talk about are only available if you have a pro premium plan for the mobile application. You know that the Moodle mobile application is free. Students don't have to pay for anything. But there are things that cost money to Moodle, like the hosting of the push notification system. So your users can receive push notifications. And this is why we designed the Pro and Premium Plan. And the Pro and Premium Plan also comes with certain exclusive features, like QR code logging or tools to design or to apply your custom branding into the mobile app as well. One thing to consider is that the Premium Plan is totally free if you are hosted by a Moodle certified partner or if you are hosted in Moodle Cloud. So now let's go with the first point that is reducing the onboarding friction. I already explained this before, but in the mobile app, the first thing that you see when you open it after installing it is this screen where you are asked to put your side URL. A lot of normal users, they don't know what a site address or a site URL are. So this is why we implemented what we call this feature that is called the site finder, that basically it allows you to publish your site in a listing with your name. So when people type your institution name, organization name, they can easily find you by name. In this example, we are using the All Learn Moodle site. And as you can see, you can even customize the icon of your site, this favorite icon. So you can provide your branding, your logo as part of the site results in the search. So yeah, this is the best way to reduce the onboarding friction because your users, they will just find you by name. As is explained in the slide, this is only available for pro or premium sites. Another feature that could help to reduce this onboarding friction is the QR login. I don't know if you are using WhatsApp web or WhatsApp desktop, but this is very similar in your Moodle user profile. If this feature is activated in your site, you have a section that will help you to display a QR code that you can scan with a mobile application and then it will automatically lock in into your Moodle site. So your users, your students, they won't have to type a site URL. They don't have to put their credential, their username or password. They just need to scan this QR code. So these were the main two things that you can do to reduce this onboarding. So how can you make your users feel at home? Well, we have this branding tool that is also available for premium plans that will help you to very easily customize the look and feel of the mobile application. And this is very important to notice. The mobile application is a different user interface for your Moodle site, but it's not a webpage. It's not going to grab your custom theme from your site, say that you have developed your custom theme or you have configured a lot of stylus CSS in your Boost app or Boost theme. This is not going to work in the mobile app because it's a different tool. It's a different front end build using a different technology. So if you want to provide a seamless experience with a similar branding, that the one that you have in your Moodle site, you can use these two that will allow you to change the colors, the main colors of the mobile application. And it will also allow you to add your custom CSS in case you want to apply further customizations. You can also add custom menu items. You can do this for free. There is a limit of, I think, two or three custom items. So in this example, what I did was to add a new option in the mobile app with the, with a map or access information or the typical where we are information. What I did was just to create a site page in Moodle and then using this setting that are also available in your Moodle site, you can just include this menu item information. It is very similar to the custom menu items feature that is available in the boost theme in Moodle. And it will allow you to add custom pages in your Moodle application as well. You can also customize the streams. You can also do the same that you do for the Moodle LMS that you can change it. If you don't have teachers and you have educators, for example, that's a very good example, you can just rename these in the mobile app as well. It won't automatically retrieve from the site all the changes you did for your custom strings because the mobile app, as I said, is a different system. So you will need to apply the same translations in the mobile app, but these are quite the site forward process. It won't take more than 10 minutes to do that. And as you can see in the screenshot, we are using the edukito. More things that you can do is, and this time, it's about simplifying the user interface because sometimes you don't want to provide the same options that are available in the Moodle site in the mobile application. You might want to keep it very simple. Say that your users are, for example, from primary education, like 10 years, 11 years, and you want to keep it, keep the app very simple so they can focus on just doing the courses and you want to remove everything else. So you can do this just changing some site settings in your Moodle site. You can do this also for free. There is a limit of settings that you can remove in the free plan, but you can just remove, for example, all the blocks. You don't want comments to be displayed in the mobile app. You can remove that. You don't want the users to be able to browse using tags. You can do that. You can disable complete modules. You can disable everything that is in the app. There are a lot of options there. So this will really help you to keep the app very simple because you can remove most of the menu items or options that are displayed among the mobile app. For example, a lot of institutions, they just remove the site home from the app because usually the site home is used to display information about the site or like a presentation with a video or something. Things that doesn't have available in the app that is mostly for students and you want your students to focus on doing the courses in the app. So you can remove it from the app, just changing this Moodle setting. How can you make your courses mobile friendly? I have, there is some documentation that is linked in the Moodle docs wiki that goes very into detail. So I'm going to try to be very quick because this is already documented in the Moodle docs. But for example, the most pieces is avoiding all content formats that are not, well, that doesn't work very well in mobile devices. For example, Scorn. Everybody knows that the Scorn is very old. It was designed in the 2000s. And it doesn't really work very well, especially if you have Scorn packages that were created like 15 years ago. You should be moving away from those type of content and migrating everything to H5P that works really well in mobile devices because they are responsive, because they implement a way to save all the interactions offline. There are a lot of benefits to use H5P. Avoid using PDF files that will open in a different app. And you can use a book model that works very well in the app because, for example, you can use swipe to move between pages. Also, text formatting should be adapted to small screens. You should avoid using a lot of nesting like, you know, section 3, 1, 2, 5, or like all these kinds of contracts. You should try to keep it very simple, very readable in the mobile application. Also, if you need to upload files to the system, don't use .exe or use PDF in that case. Avoid PDF if possible, but if you need to publish documents, don't use original formats because mobile apps, they don't really manage very well these kind of formats for editing. And you have a very good example in the digital literacy course that is available in the demo site that this one, this course was created by Mary as an example of a course, a mobile friendly course. And it's very nice to see. Regarding media, well, the most basic thing that you can do is try to reduce the size of the images that you are using, make them responsive, and also compress the videos. Imagine that you are connected to data, you're using your data plan, and you want to watch a video, it is going to consume a lot of your data. So you should try to avoid that. And for that, you can create like videos in mp4 format, low resolution, that still looks very well. Yeah, for example, you know that the mobile application can work offline, but if you are adding YouTube or Vimeo videos are not going to work offline, of course, because you need an internet connection. Well, as I said, everything is in the link in the presentation. If you go to Google and you search for create mobile friendly courses, mobile model, you will find a document and several presentations I made about these topics. And finally, don't forget that you need to support always your students and teachers. And when I say support is that you need to provide documentation, guidelines, help. And what I did is to put some example of institutions that created help documents. Just take a look and maybe you can do something very simple, like how to log in. And it could be just a very simple page with an screenshot so your users can read the instructions in the computer screen. They can follow them very easily and they can just use the mobile app, avoiding all these kind of problems that we were discussing before, such as the onboarding friction. Yeah, of course, it is very important to train your teachers to provide documentation about how can they make their courses ready for mobile devices. Just simple tools like you can use these tools to make your images smaller in size, but good in resolution. So everything is, as I said, documented in that page is linked in the presentation. And that's all. I think it was just 20 minutes and we have plenty time for questions. Thank you. And keep sharing your screen, Juan, because at the end I'll ask you just to move on and I can talk about academy for a moment, but we do have some questions. So I'm going to read them from the chat. So the first question from David and I realize Noel has answered this, so we have a question and an answer. Is the premium plan still available to nonprofits and NGOs? Noel is saying it is, you can create a free account in the apps portal and contact support to upgrade it. That's correct, yes? Yes, it is. There is a process and there are some rules to be able to apply for this, but yes, it is still available. Okay, Rod is saying he's trying to do some testing using the free plan, but the test user gets a message, site not found on the mobile, it's an Android, even though the created user QR code found the site and the username and password. Any advice appreciated to troubleshoot this problem? Site not found. So I think that sometimes it'll be a misconfiguration thing in the server or a firewall or proxy or that is blocking the access with the mobile application. In that case, the best thing that you can do is you can reach us in the Visa Mulo for mobile forum that we are very active there. And also if you're registering the apps portal, the link to the apps portal is apps.mulo.com. We have a support tab there and you can contact us for support. Of course, we try to provide support for everything, but there are millions of users sometimes that we are very slow. Yeah, okay. David is just making a comment. He says teachers should be warned not to show their QR code to the students. Indeed. Then we have from Kenneth. Kenneth is asking how to show content on the Moodle app dashboard directly and not just as menu items. And I realize Kenneth, I think you tried to upload a file, but I can't see the file in the chat. It's just going round for me. So how to show content on the Moodle app dashboard directly, not just as menu items. For instance, the calendar or some other block, because I only have the menu of coming events or the calendar, which I need to click on in order to see them. Yeah. Well, in the dashboard, while the mobile apps support blocks, so you can add an HTML text blog if you want to put some content there. But for some type of block, like the calendar one, we don't really display the full calendar in the dashboard because it will take all the screen available. In that case, we display a link so the calendar will open in a separate page. This is because to prove the user experience. Because if you imagine that you have a site with five blocks in the dashboard and you try to put all that information in the mobile application, it is not going to look very well. So in general, what we recommend is avoid displaying unnecessary information in the dashboard for users. But if you want to display custom information, you can always use the text HTML blog, put content, and the mobile application is going to display that content. But as I said, for certain blocks like the calendar or the new report block that we are supporting, it is going to open in a separate page. We are not going to display the full calendar. We are going to display a link and the link will open in a separate page in a new page in the app using the full screen so you can see the calendar there. Okay. Thank you. Now DuPont is asking, what about combining Moodle and PWA? I don't know what that is. I'm sorry. So it's just a suggestion. I will try to find the question in the chat. What about buying Moodle and PWA? It's a solution that you could try. Could you advise that if not why? PWA. Okay. Sorry. I wasn't... This is Web App. Thank you, Noel. Progressive Web App. This technology, Progressive Web App, is something that Moodle and LMS will need to support in order to display a mobile-friendly version on the browser. And you know that the Moodle app is huge. It's a 20-year piece of millions of lines of code. And I don't think that there are plans to implement a Progressive Web App approach in the future because it will be like a several years project. I can imagine that. Okay. Thank you. Now, the next one is Rashaq Haas says, we've been using the App at our college, and it is now showing Site Not Found. We are still using Moodle 3.7. Might that be the reason? Site Not Found? Well, as I mentioned before, it has reached us for support. Because sometimes what we've noticed is that lately for security, a lot of institutions are setting up firewalls or tools like CloudFair that by default block the mobile application. Sometimes what is happening is that you are not able to connect using the mobile application because there is something between the internet and your Moodle site that is blocking the request. And in order to check that, we need to take a look to your site, or you can check the Moodle mobile fact FAQ that is available in the Moodle docs, where we have a list of possible things that you should be checking. Thank you. We have two questions about notifications now. James is asking, can you advise about Moodle notifications in the app? And David says, are the default notification settings set to on for mobile, or does a teacher need to teach their students how to do this? Well, you can check that depends on the site configuration. Potentially, you can receive the same notifications in the app that the one that you receive in your email. So it's the same. Moodle generates notifications and the site administrator decides to which devices or systems you can send notifications. And then the student or the user, they can even say, I want to receive these or that or that. I would recommend you to check the Moodle documentation about this topic. There is something that is called the default notification settings, if I remember well. And it will allow you to indicate if you want to force your students to receive certain notifications always. For example, when there is a course completed, you can say this notification has to be sent always and the user is not going to be able to disable it. But for that, you need to, as a state administrator, you need to go to notifications, notification settings, and then you can configure all the type of notifications you want your users to receive and which ones are mandatory or not. Thank you. Kenneth is asking, to make life easier for users, is there any chance of getting notifications with a small orange number on the front of the Moodle app in the iPhone without actually opening the app? I think that's what the question is. I suppose that that's a feature in, I don't use iPhone. I'm not very familiar with notifications there, but I suppose that is a feature of iOS that you can set colors or avatars. But yeah, we have plans to improve the notifications for iOS. We already have plans for that. Because for Android, already, we are able to send the user avatar and to group notifications if you have a premium plan. So yeah, we have plans for that, but not in the short term, but it's something that we are aware that we can improve how our iPhone or iPad users are receiving notifications. Okay. We have a question from Tim, but I believe Noel has said thanks for your help here, Noel. Is the documentation available for customizing the CSS that the app uses? Noel has sent a link there to the Moodledev.io.io We also have from Juan Delio from Argentina. What is your recommendation for custom themes done in the web Moodle site and not working on the app? I mean, CSS customizations could they or could not be applied on the app? Would that be the same? The same code is not going to work because as I mentioned at the beginning of the presentation, there are different technologies. Moodle.io is using Bootstrap and the Moodle app is using a different framework. So we are not really compatible because Bootstrap is designed for web pages and we are using a framework that is for mobile devices. So if you want to customize your experience in the mobile app, you will need to create custom CSS for the mobile app. And I think that Noel already sent a link to how to customize the mobile application as well. Thank you. Now, I don't see any more questions. If you have a final question, please do ask your questions. Otherwise, I'm going to just mention a few things about academy before we end. So I'll just wait a moment to see if anyone has any other questions. And thanks for all of the existing questions, by the way. Okay, we are getting quite a few thank yous, which probably means we are no more questions. So if you could move the slide on, thank you. Well, there is a last question. One final final one. Go on. Is there any support either Bootstrap or font awesome icons in the app? Well, we are upgrading to form awesome six. What I'm not very sure, maybe Noel, that is in the chat, could confirm. If you include font awesome icons using the icons in elements, if they are going to be displayed in the app, that's not, I'm not really sure about that. And regarding Bootstrap, we know that a lot of people, they would like to see, to be able to use Bootstrap as well in the app. So for example, if they create some, I don't know, a tabs view using Bootstrap styles in or a table using Bootstrap styles, they would like to see that working on the mobile application. We're aware of that, but it will be a very difficult project for us, because it will mean translating all the Bootstrap classes to the equivalent in the framework we use. So we are not going to do anything about that until Mural is using the latest version of Bootstrap. I think it's six, maybe. And maybe Mural, MS434, they will upgrade to Bootstrap. And at that moment, we will evaluate which Bootstrap classes, the style or component are we going to support in the mobile app. But we are aware of the situation that a lot of teachers or content creators are using Bootstrap classes to enhance the look and feel of their content. Thank you. Nicolo, is it possible to provide a QR code to allow students to access not the site page, but the faculty page, for example, a page on which all the courses of a faculty are? Yeah, yeah, that will be possible. You can scan that QR code with the mobile app, and if the mobile app detects that it's a link that is not supported by the mobile application, it will ask you to or it will open the browser pointing to that link. But of course, you need to create the QR code using any online tool that will translate as a URL to a QR code. And another question from, oh, no, I think we've had that question. I think we have everything now. Yes. Yeah, and if you have more questions, there is the Mural Formal Mobile Forum at Mural.org. And we tried to be to participate in that forum. So you can open a discussion there as well. And if you come to the next Mural Mood Global that is in September in Barcelona, we will have like an stand where my complete team, because we are mostly based in Barcelona, we will be there and we will be open to just talk to you guys. That's great. And later in the year, Moodle Academy will be writing a course on the topics that are in this particular webinar, making the most of the Moodle Mobile app for your teachers and learners on your site. And on the subject of academy then, if you could move on to the next slide, Juan. As we come to the end of this webinar, I'd just like to remind you how to get involved with Moodle Academy to help us grow it. We're very grateful that you came today. Please suggest topic ideas for webinars in our Get Involved course. Quite a few of the webinars have been based on that. And if you yourself would like to present or you would like to help create courses, Get In Touch would be very pleased to have you. And extremely important and very close to my own heart, we have a special plugin on our site, which is also available on the Plugins databases of open source for everyone, which enables you to translate our courses directly online. And if you speak a language other than English and you'd like to translate any of our courses, please get involved with that by accessing the Translate Moodle Academy course and help us to have more of our courses in languages other than English. So help us spread the word. So come to Academy, complete our courses and get badges. We have programs, in fact, for which you can also purchase an optional certificate. And tell everyone about Moodle Academy so we can have more people coming to our next webinars and joining our courses. If any of you are educators or teachers and experienced in Moodle, why not explore the Moodle Educator Certification and become certified in your knowledge of how to teach with Moodle. The one final question, Raquel, it's content translation plugin, I think, in the Plugins database. So thank you very much, everyone. And thank you to Juan for presenting. And so we will end the webinar now.