Mobile Responsive LMS Interface Development

Building Mobile-Responsive LMS Interface

Over 60% of online course students study from smartphone at least part of the time. LMS interface not adapted for mobile loses this audience. Mobile interface for LMS is not just "don't break it" but rethinking navigation, interactions and content for small screen.

Approach: Mobile First

Development starts with mobile screen and scales up — not vice versa. This changes priorities: what matters on 375px width? Usually: current lesson, progress, next step. Everything else — in additional screens.

Navigation

Desktop: sidebar menu with full course tree. Mobile: bottom navigation bar (Bottom Tab Bar) with 4–5 icons — standard for mobile apps.

function MobileBottomNav() {
  return (
    <nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-200
                    flex items-center justify-around
                    safe-area-inset-bottom
                    md:hidden">
      <NavItem icon={<HomeIcon />} label="Courses" to="/" />
      <NavItem icon={<BookOpenIcon />} label="Lessons" to="/lessons" />
      <NavItem icon={<CheckSquareIcon />} label="Assignments" to="/assignments" />
      <NavItem icon={<UserIcon />} label="Profile" to="/profile" />
    </nav>
  );
}

Video Player on Mobile

Video takes 100% of screen width. On rotation — automatically fullscreen (or prompts). Control buttons enlarged to 44×44px (Apple HIG minimum).

function MobileVideoPlayer({ src, posterUrl }) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const handleOrientationChange = () => {
      if (screen.orientation?.angle === 90 || screen.orientation?.angle === 270) {
        videoRef.current?.webkitEnterFullscreen?.();
      }
    };
    window.addEventListener('orientationchange', handleOrientationChange);
    return () => window.removeEventListener('orientationchange', handleOrientationChange);
  }, []);

  return (
    <div className="relative w-full aspect-video bg-black">
      <video
        ref={videoRef}
        className="w-full h-full"
        src={src}
        poster={posterUrl}
        playsInline
        controls
        preload="metadata"
      />
    </div>
  );
}

Gestures and Touch Interactions

• Swipe left/right — switch between lessons (react-swipeable)
• Pull to refresh — update assignments list
• Long press — context menu (save lesson, copy link)
• Pinch to zoom — for images and diagrams

import { useSwipeable } from 'react-swipeable';

function LessonSwipeNavigator({ onNext, onPrev }) {
  const handlers = useSwipeable({
    onSwipedLeft: onNext,
    onSwipedRight: onPrev,
    trackMouse: false,
    delta: 50,
    preventScrollOnSwipe: false,
  });

  return <div {...handlers} className="touch-pan-y">{/* content */}</div>;
}

Offline Mode

Critical for LMS: student in metro without signal. Progressive Web App + Service Worker cache visited lessons:

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/lessons/')) {
    event.respondWith(
      caches.open('lessons-v1').then(cache =>
        cache.match(event.request).then(cached => {
          if (cached) return cached;
          return fetch(event.request).then(response => {
            cache.put(event.request, response.clone());
            return response;
          });
        })
      )
    );
  }
});

Video for offline — more complex (file sizes). Solution: "Download for offline" button downloads lesson to IndexedDB via file-system-access API or native storage (React Native).

Touch and Accessibility Sizes

.btn, a, button, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

@media (max-width: 768px) {
  .assignments-table { display: none; }
  .assignments-cards { display: flex; flex-direction: column; gap: 12px; }
}

Complex Element Adaptation

Testing

Must test on real devices: iPhone SE (375px), Android mid-range (360px), iPad (768px). BrowserStack or physical devices. Lighthouse Mobile audit: Performance > 75, no layout shift on mobile.

Timeline

Adapt existing LMS interface for mobile: navigation, video player, lesson and assignment lists — 7–10 days. PWA with offline caching of lessons — additional 3–5 days.