Разработка мобильного адаптивного интерфейса 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  // 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 HIG минимум).

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

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

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

Критическая функция для 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; }
}

Адаптация сложных элементов

Тестирование

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

Сроки

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