How to Make Your Moodle Course Mobile-Friendly in 2026 (Complete Guide)
Walk into any lecture hall or training room and look around. Most people have a phone within arm's reach, and many are using it to check their course. Yet most Moodle courses are still designed on a 27-inch monitor by instructors who never check how their content renders on a 6-inch screen. The result: pinch-to-zoom PDFs, broken table layouts, videos that won't play, and frustrated learners.
This guide shows you how to design Moodle courses that work on small screens, load quickly on cellular networks, and stay usable offline.
Four mobile realities that should shape how you design
- Students scan, not scroll. If a course section opens with a wall of text, mobile users leave before the second paragraph. Front-load essential information.
- Thumbs, not cursors. Touch targets need to be at least 44x44 pixels. Tiny hyperlinks in paragraphs are nearly impossible to tap accurately.
- Bandwidth varies wildly. A student on campus Wi-Fi and the same student on a bus are having completely different experiences. A 45 MB PowerPoint is a real barrier on cellular.
- Sessions are short. Mobile learners interact in bursts between other activities. Courses built around long uninterrupted desktop sessions don't translate.
Critical App Limitations (Read Before You Design)
Before building your course, there are Moodle App constraints that will significantly affect your decisions. These are easy to miss and frustrating to discover after launch.
- Your custom desktop theme does not apply in the app. Any design elements that depend on your Moodle theme disappear for app users.
- LTI (External Tool) activities open in the device browser, not within the app. This breaks the seamless experience students expect.
- Quiz offline mode is disabled by default. Teachers must explicitly enable it in quiz settings. It requires Moodle 4.3.1+ with sequential navigation.
- Complex HTML, custom CSS, and JavaScript in Labels or Pages may not render correctly. The app strips certain scripts and styles for security.
- Activities with conditional access rules cannot be downloaded for offline use.
Stick to core activities -- assignments, quizzes, forums, pages, books, H5P -- and test every piece of content on the app before publishing. If an activity requires a desktop browser, label it clearly.
Course Structure: Do This, Not That
1. Section Length
Do this: Keep each section to 5-7 activities. Use descriptive section titles that tell students exactly what they'll accomplish.
Not that: Don't create sections with 15-20 activities. On mobile, students see one scrollable list -- a section with 20 items requires extensive scrolling and students lose context about where they are.
2. Section Summaries
Do this: Write 2-3 sentence summaries. State the learning objective and what students will do -- e.g., "This week you'll analyse two supply chain case studies. Complete the reading, submit your analysis (400 words), and respond to one peer."
Not that: Don't paste entire module guides into section summaries. On mobile, long summaries push all activities below the fold.
3. Activity Names
Do this: Use action-oriented names that include the activity type and relevant details:
- "Read: Chapter 4 - Market Segmentation (PDF, 2.1 MB)"
- "Quiz: Marketing Mix Concepts (15 min, 10 questions)"
- "Submit: Case Study Analysis (400 words, due Friday)"
Not that: Don't use vague names like "Week 3 Materials" or "Assignment 2." Mobile users scanning a list need to understand immediately what each item requires.
4. Navigation
Do this: Use "One section per page" course format. This loads a single section at a time, reducing page weight and scroll length.
Not that: Don't use "Show all sections on one page" for courses with more than 4 sections. On mobile, this creates a page thousands of pixels long that takes several seconds to load.
Course Format Comparison
When you create a Moodle course, the format you choose determines how students navigate it on mobile. A format that loads one section at a time keeps pages light and scroll lengths short. A format that shows everything at once creates a page that can run thousands of pixels long on a phone. The table below shows which formats work well and which to approach with caution.
| Format | Mobile Experience | Best for |
|---|---|---|
| Topics (one section per page) | Yes Excellent | Most courses |
| Weekly (one section per page) | Yes Excellent | Semester-length courses |
| Collapsed Topics | Yes Good | Courses with many short sections |
| Tiles | Yes Good | Visual learners, shorter courses |
| Grid | Fair | Image-heavy courses |
| Single Activity | Yes Excellent | Focused single-activity courses |
To change your course format: Course Settings -> Course Format -> Course Layout -> Show one section per page.
Content Design: Making Every Element Mobile-Friendly
1. Text
- Keep paragraphs to 3-4 sentences maximum
- Use H2/H3 headers every 200-300 words
- Front-load the most important information in the first sentence
- Use bullet lists for 3 or more items
- Don't write centred text for body content -- the shifting left edge is harder to read on narrow screens
2. Tables
Do this:
- Limit tables to 2-3 columns maximum
- Use the first column for labels and the second for values
- For comparison data with many attributes, use a stacked format (one item per section) instead of a wide table
- If a wider table is unavoidable, add a note: "Tip: rotate your phone to landscape view for the best experience"
Not that:
- Don't create tables with 5+ columns -- they will require horizontal scrolling and most users won't realise they can scroll
- Don't use tables for layout purposes -- use Moodle's built-in Page editor formatting instead
3. Images
Do this:
- Compress to under 200 KB using WebP format
- Use images at least 800px wide so they scale down crisply on high-DPI screens
- Place images between text blocks, not beside them -- side-by-side layouts break on narrow screens
- Add descriptive alt text for accessibility and for cases where images don't load on slow connections
Not that:
- Don't upload uncompressed camera photos -- 5 MB images take 10+ seconds on cellular
- Don't use images with embedded text (slide screenshots, small-font infographics) -- the text becomes unreadable when scaled down
- Don't use image maps or click-on-image interactions -- small targets are genuinely frustrating on touch screens
4. Videos
Do this:
- Host on a streaming platform (YouTube, Vimeo, or your institution's service) -- these adjust quality automatically based on connection speed
- Keep videos under 6 minutes -- completion rates drop sharply for longer segments
- Add captions to every video -- most mobile video is watched without sound, particularly in libraries, on public transport, and in shared spaces
- Use the Moodle "URL" activity type to link to streaming videos
Not that:
- Don't upload MP4 files directly to Moodle -- Moodle serves the full file without adaptive bitrate, meaning students on slower connections wait for the entire file before playback starts
- Don't create 60-minute lecture recordings -- break them into 5-6 minute segments organised as a sequence of activities
- Don't use WMV, AVI, or Flash-based players -- these don't work on mobile devices
5. H5P Mobile Compatibility
| H5P content type | Mobile experience | Notes |
|---|---|---|
| Interactive Video | Yes Excellent | Prompt landscape orientation |
| Multiple Choice | Yes Excellent | Touch-friendly by default |
| True/False | Yes Excellent | Large tap targets |
| Flashcards | Yes Excellent | Swipe interaction feels native |
| Dialog Cards | Yes Excellent | Tap-to-flip works naturally |
| Accordion | Yes Excellent | Tap-to-expand is a natural mobile pattern |
| Summary | Yes Excellent | Simple list interaction |
| Course Presentation | Yes Good | Keep slides simple |
| Fill in the Blanks | Yes Good | Keyboard covers part of the view |
| Branching Scenario | Yes Good | Keep text blocks short |
| Column | Yes Good | Stacks content vertically |
| Image Juxtaposition | Yes Good | Swipe slider works with touch |
| Drag and Drop | Fair | Enlarge targets to 60x60px minimum |
| Timeline | Fair | Horizontal scrolling confuses users |
| Essay | Fair | Long-form typing on mobile is slow |
| Mark the Words | Fair | Tapping individual words requires precision |
| Image Hotspots | No Poor | Targets too small on phone screens |
Key H5P tips: Space Interactive Video checkpoints 2-3 minutes apart. Use Course Presentation instead of PowerPoint uploads. Avoid nesting H5P activities more than one level deep.
File Format Choices
1. Documents
| Format | Mobile compatibility | Recommendation |
|---|---|---|
| Yes Excellent | Best default for readings | |
| HTML (Moodle Page) | Yes Excellent | Best for short-to-medium content |
| EPUB | Yes Excellent | Best for long-form reading |
| DOCX | Good | Convert to PDF instead |
| PPTX | Fair | Convert to PDF or H5P Course Presentation |
2. Media
| Format | Mobile compatibility | Notes |
|---|---|---|
| MP4 (H.264) | Yes Excellent | Universal video format |
| MP3 | Yes Excellent | Universal audio format |
| WebP | Yes Excellent | Best image format for mobile |
| PNG | Yes Excellent | Screenshots and diagrams |
| JPEG | Yes Excellent | Photographs |
| WebM | Good (Android) / Fair (iOS) | Not universally supported on iOS |
| OGG | Poor (iOS) | Use MP3 instead |
Note: MP4 is the best video format for compatibility, but uploading MP4 files directly to Moodle is not recommended. Instead, host your MP4 videos on a streaming platform (like YouTube or Vimeo) and embed them. This ensures adaptive streaming, faster load times, and a better mobile experience.
3. File Size Limits
| Type | Target |
|---|---|
| Under 5 MB (aim for 1-2 MB) | |
| Images | Under 200 KB |
| Audio | Under 10 MB (128 kbps MP3) |
| Video | Streaming links only -- never direct upload |
| SCORM | Under 50 MB total |
Offline Access
Two important defaults to know before designing for offline use:
- Quiz offline mode is disabled by default -- teachers must explicitly enable it in each quiz's settings
- Activities with conditional access rules cannot be downloaded for offline use -- students must be online to access anything unlocked by availability conditions
Works offline: Pages, Books, file resources (PDFs, documents), H5P content, assignment descriptions, previously loaded forum posts, and quizzes when the teacher has enabled offline mode.
Requires a connection: Forum posting, external URLs, LTI activities, video streaming, and live grade updates.
Design tips for offline-ready courses
- Group offline-friendly activities in a dedicated section called "Offline Study Materials"
- Tell students upfront: "This course requires approximately 150 MB for full offline access. Download while on Wi-Fi."
- Use Moodle Page resources instead of external links -- Pages cache locally, external URLs don't
- Convert key readings to Moodle Book format -- a 30-page Book weighs ~200 KB vs. ~8 MB as a PDF with images
Push Notifications
Push notifications are one of the most underused tools for keeping mobile learners on track. Students who receive timely deadline reminders are significantly more likely to complete activities before due dates.
| Notification | Default | Recommendation |
|---|---|---|
| Assignment due reminders | Off | Yes Enable -- 24 hrs and 2 hrs before deadline |
| Forum reply notifications | On | Yes Keep enabled |
| Grade posted | Off | Yes Enable -- students want immediate feedback |
| Course announcements | On | Yes Keep enabled |
| Quiz open/close reminders | Off | Yes Enable |
| Message from instructor | On | Yes Keep enabled |
- Configure at: Site Administration -> Messaging -> Notification Settings -- enable the "Mobile" output column for each type.
- Avoid notification fatigue: Spread deadlines across the week rather than clustering on Fridays. Limit course announcements to 2-3 per week, daily announcements train students to ignore them.
Note: The free Moodle App plan limits offline course downloads to 2 courses per device. The Premium plan provides unlimited offline courses and push notification devices. Check your plan before assuming notifications are configured correctly.
Testing Your Course on Mobile
Test as a student, not as an admin. Admins see a privileged view that learners never experience; content may appear accessible to you that students can't reach, and navigation may behave differently. Always use a dedicated student account and a teacher account to catch real usability issues around permissions, navigation, and content accessibility.
Before publishing, work through this checklist on a real device:
- Install the Moodle App on both iPhone and Android
- Enrol a test account with the student role and open every activity
- Attempt every quiz on your phone -- verify question text is readable, options are tappable, and submission works
- Download the course for offline access, disconnect from Wi-Fi and cellular, and navigate the course
- Reconnect and verify sync -- quiz attempts, completion marks, and assignment drafts
- Simulate a slow connection and note any activities taking more than 5 seconds to load
- Check landscape orientation -- tables, images, and H5P activities
If something breaks during testing, here's what typically causes it:
| Issue | Cause | Fix |
|---|---|---|
| Text overflows screen edge | Fixed-width HTML elements | Remove width attributes, use percentage widths |
| Images appear tiny | Missing responsive CSS | Upload through Moodle editor (auto-adds responsive classes) |
| Tables require horizontal scroll | Too many columns | Reduce to 2-3 columns or convert to a list |
| Video won't play | Direct file upload or unsupported format | Use streaming URL activity |
| Quiz question text cut off | Long question text in matching questions | Shorten stems, use one concept per question |
| H5P activity loads blank | JavaScript blocked by app WebView | Update H5P content type to latest version |
| Push notifications not arriving | Free plan limits reached | Upgrade Moodle App plan |
The design decisions in this guide cost nothing to implement and most can be applied to an existing course in a single day. The instructors who get mobile right aren't doing anything technically complex -- they're making deliberate choices about structure, format, and file size that pay off every time a student opens their phone.
How MooDIY Supports Mobile Learning
Designing mobile-first courses is your job. Giving your students the best possible mobile experience to access them is ours. Every MooDIY hosting plan comes with two mobile options -- one included free, one for organisations that want their own branded app.
MooDIY Premium App -- Free with Every Plan
Every MooDIY plan includes the Premium Moodle App at no additional cost. This is a meaningful difference from the standard free Moodle App, which caps offline course downloads at 2 courses per device and limits push notification devices.
With the MooDIY Premium App, your students get:
- Unlimited offline courses: no cap on how many courses students can download for offline access
- Push notifications: assignment reminders, grade updates, forum replies, and announcements delivered to every device
- Biometric and QR code login: fast, secure access without typing a URL or password every time
- Available on both Android and iOS: consistent experience across all devices
There's no setup fee and no additional cost. The MooDIY Premium App is free for any Moodle site -- whether you're hosted with MooDIY or not.
Custom Branded App -- Your Organisation's Own App on the App Stores
For organisations that want students to download an app under their own name -- not "Moodle" -- MooDIY offers a Custom Branded App. Your app is listed on Google Play and the Apple App Store under your organisation's name, with your logo, icon, and colour theme applied throughout.
The difference this makes is practical, not cosmetic. With the Custom Branded App, the site is pre-configured. Students find your app by searching your organisation's name, download it, and log in immediately.
Ready to give your students a better mobile experience?
Related reading: Moodle App Freemium Model, Moodle App Alternatives, MooDIY Cloud vs MoodleCloud