Адаптація LMS під мобільні: PWA, жести, офлайн

Більше 60% студентів онлайн-курсів навчаються зі смартфона хоча б частину часу. Стандартні проблеми: дрібні кнопки (менше 44 пікселів), повільне завантаження відео, втрата прогресу при перемиканні. За статистикою Google, 53% мобільних сесій залишають сторінку, якщо вона завантажується довше 3 секунд. LMS з поганим мобільним UX втрачає до 70% користувачів. Ми розробляємо мобільні інтерфейси, які утримують студента: навігація, відео, завдання — все працює на 375px. У нашій практиці був проект, де після впровадження мобільної версії залученість студентів зросла на 40%. Це не просто «щоб не ламалося», а переосмислення взаємодії.

Чому Mobile First — ключ до мобільного адаптивного інтерфейсу LMS

Mobile First — проектування від найменшого екрану вгору. На 375px пріоритет: поточний урок, прогрес, наступний крок. Все другорядне — в додаткових екранах. Так ми гарантуємо, що ключові функції завжди під рукою. Порівняйте з підходом Desktop First:

Які жести та Touch взаємодії критичні для LMS?

Навігація на мобільному будується на жестах. Ключові:

• 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">{/* контент */}</div>;
}

Всі жести мають бути налаштовані так, щоб не блокувати вертикальне прокручування — це часта помилка, яка погіршує user experience.

Навігація: Bottom Tab Bar vs бічне меню

На десктопі — бічне меню з повним деревом курсу. На мобільному — нижня панель навігації (Bottom Tab Bar) з 4–5 іконками. Bottom Tab Bar кращий за бічне меню на мобільному в 2 рази за швидкістю доступу до розділів (згідно з User Experience studies).

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 // iOS notch support 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 Human Interface Guidelines).

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

  // Автофулскрін при повороті на iOS
  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 // Важно для iOS: не відкривати системний плеєр
        controls
        preload="metadata"
      />
    </div>
  );
}

Як тестувати мобільний інтерфейс LMS?

Ми тестуємо на реальних пристроях: iPhone SE (375px), Android mid-range (360px), iPad (768px). Використовуємо BrowserStack або фізичні пристрої. Проводимо Lighthouse Mobile аудит: Performance > 75, не допускаємо layout shift на мобільному. Додатково перевіряємо роботу жестів та офлайн-режиму. Наш досвід — 5 років у розробці LMS, більше 50 проектів. Гарантуємо, що інтерфейс буде однаково зручним на всіх пристроях.

Офлайн-режим за допомогою PWA та Service Worker

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

// service-worker.js — кешування відео та матеріалів
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).

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

/* Мінімум 44×44px для всіх інтерактивних елементів */
.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;
  }
}

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

Процес адаптації інтерфейсу LMS

1. Аналітика та прототипування — визначаємо критичні сценарії на мобільному.
2. Проектування навігації та жестів — обираємо патерни (Bottom Tab Bar, swipe тощо).
3. Розробка компонентів — Bottom Tab Bar, Video Player, офлайн-кеш.
4. Інтеграція PWA — Service Worker, маніфест, іконки.
5. Тестування на реальних пристроях — перевірка жестів, офлайн, продуктивності.
6. Документація та передача доступів — опис архітектури та інструкції.
7. Підтримка після запуску — моніторинг та виправлення.

Що ви отримуєте після адаптації?

• Повністю адаптований інтерфейс під мобільні пристрої (375px+).
• PWA з офлайн-доступом до уроків.
• Документація з архітектури та інструкції з розгортання.
• Доступ до вихідного коду та репозиторію.
• Навчання команди підтримці.
• Гарантія (досвід 5 років, 50+ проектів).

Строки

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