Розробка мобільного адаптивного інтерфейсу LMS

Розробка мобільного адаптивного інтерфейсу LMS

Більше 60% студентів онлайн-курсів навчаються зі смартфона принаймні частину часу. Інтерфейс LMS, не адаптований для мобільних, втрачає цю аудиторію. Мобільний інтерфейс для LMS — це не просто «щоб не ламалось», а переосмислення навігації, взаємодій та контенту для малого екрану.

Підхід: Mobile First

Розробка починається з мобільного екрану та масштабується вверх — не навпаки. Це змінює пріоритети: що важливо бачити на 375px ширини? Зазвичай: поточний урок, прогрес, наступний крок. Все інше — в додаткових екранах.

Навігація

На десктопі: бокова панель з повним деревом курсу. На мобільному: нижня панель навігації (Bottom Tab Bar) з 4–5 іконками — стандарт для мобільних додатків.

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="Курси" to="/" />
      <NavItem icon={<BookOpenIcon />} label="Уроки" to="/lessons" />
      <NavItem icon={<CheckSquareIcon />} label="Завдання" to="/assignments" />
      <NavItem icon={<UserIcon />} label="Профіль" to="/profile" />
    </nav>
  );
}

Відеоплеєр на мобільному

Відео займає 100% ширини екрана. При повороту — автоматично уходит у fullscreen (або пропонує). Кнопки управління збільшені до 44×44px (Apple HIG мінімум).

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>
  );
}

Жести та Touch взаємодії

• Swipe left/right — переключення між уроками (react-swipeable)
• Pull to refresh — оновлення списку завдань
• Long press — контекстне меню (зберегти урок, скопіювати посилання)
• Pinch to zoom — для зображень та діаграм

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>;
}

Офлайн-режим

Критична функція для LMS: студент у метро без сигналу. Progressive Web App + Service Worker кэшируют переглянуті уроки:

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;
          });
        })
      )
    );
  }
});

Відео для офлайн — складніша задача (розміри файлів). Рішення: кнопка «Завантажити для офлайн» завантажує урок в IndexedDB через file-system-access API або в нативне сховище (React Native).

Розміри касань та доступність

.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; }
}

Адаптація складних елементів

Тестування

Обов'язково тестування на реальних пристроях: iPhone SE (375px), Android середньої лінійки (360px), iPad (768px). BrowserStack або фізичні пристрої. Lighthouse Mobile аудит: Performance > 75, не допускаємо layout shift на мобільному.

Часові межи

Адаптація існуючого LMS інтерфейсу під мобільні: навігація, відеоплеєр, список уроків та завдань — 7–10 днів. PWA з офлайн кэшуванням уроків — додатково 3–5 днів.