Дизайн — статьи о сайтах
Заказчик видеоролика часто открывает сайт студии с телефона: по ссылке из мессенджера, в дороге или между встречами. Если шапку занимает тяжёлый фоновый ролик, плеер не запускается, а кнопка «Заказать» мелкая, человек просто закроет страницу. Для видеопродакшна это особенно важно: главный продукт здесь само видео, и оно должно открываться сразу.
Что ломается на телефоне в первую очередь
- Плееры на Flash. Мобильные устройства Apple его не поддерживают, на многих Android он тоже не работает. Вместо шоурила посетитель увидит пустой прямоугольник.
- Видео на фоне шапки. Автозапуск на мобильных браузерах часто блокируется, а файл при этом может скачиваться и расходовать трафик.
- Портфолио с подсказками при наведении. На сенсорном экране курсора нет, поэтому название проекта и описание задачи остаются скрытыми.
- Страница с десятком встроенных плееров. Каждый из них подгружает свои скрипты, и страница открывается медленно.
- Длинная форма заявки. Заполнять восемь полей на экране телефона неудобно.
Как показать ролики: плеер, превью и вес страницы
Сначала проверьте, что сайт начинается с метатега viewport: <meta name='viewport' content='width=device-width, initial-scale=1'>. Без него телефон покажет уменьшенную версию для компьютера.
Ролики лучше размещать через HTML5-плеер или встраиваемый плеер видеохостинга. Чтобы он подстраивался под ширину экрана, оберните его в контейнер с соотношением 16:9. Для этого задайте контейнеру position: relative и padding-bottom: 56.25%, а плееру внутри — абсолютное позиционирование и ширину с высотой 100%.
Если видео лежит на вашем сервере, подготовьте файл в формате MP4 (H.264), при желании добавьте WebM. Обязательно задайте кадр-заставку атрибутом poster и добавьте controls. Атрибут preload='none' не даст браузеру скачивать ролик, пока человек не нажал «воспроизвести».
На странице портфолио не вставляйте все плееры сразу. Покажите картинки-превью, а настоящий плеер подгружайте после нажатия. Страница откроется быстрее, а посетитель всё равно сможет посмотреть любой ролик.
Видео на фоне шапки: оставить или заменить
Фоновый ролик хорошо смотрится на большом мониторе, но на телефоне он чаще мешает. Он отвлекает от текста, расходует мобильный трафик и не всегда запускается. Для узких экранов лучше показывать статичный кадр из ролика. Проще всего подключать видеоисточник скриптом только при достаточной ширине окна. Если оставить тег video в разметке, а скрыть его стилями, браузер всё равно может начать загрузку файла.
Условный пример: страница «Корпоративное видео» на экране 360 пикселей
Это учебный набросок, а не описание реального проекта. Вот как могут идти блоки сверху вниз:
- Заголовок и одна фраза о задаче: например, «Снимаем презентационные и обучающие ролики для компаний».
- Кадр-заставка шоурила на всю ширину экрана с крупной кнопкой воспроизведения. Рядом указана длительность ролика.
- Две кнопки: «Позвонить» со ссылкой
tel:и «Рассчитать проект». - Этапы работы короткими пунктами: бриф, сценарий, съёмка, монтаж, правки.
- Карточки работ по одной в колонку. Под каждой подписаны название, задача и хронометраж обычным текстом, без подсказок при наведении.
- Форма из трёх полей: имя, телефон или почта, описание задачи. Ссылку на материалы можно приложить в последнем поле.
Кнопки связи и форма заявки для одной руки
Телефон в шапке должен быть ссылкой, чтобы набор начинался одним нажатием. Кнопки и пункты меню делайте не меньше примерно 44 пикселей по высоте, а между соседними оставляйте зазор, чтобы не промахиваться пальцем. В форме задайте поля с правильными типами: type='tel' открывает цифровую клавиатуру, type='email' — клавиатуру с символом @. Подпись к полю должна оставаться видимой, а не исчезать при вводе.
Бюджет, сроки и формат ролика лучше уточнять после первого контакта. Первая заявка должна быть простой, иначе её не отправят.
Проверочный список перед запуском
- В коде есть метатег viewport, а страница не прокручивается вбок.
- Нигде не используется Flash.
- Шоурил запускается с iPhone и с Android-смартфона, в вертикальном и горизонтальном положении.
- У каждого ролика есть кадр-заставка, а плеер подгружается по нажатию.
- На телефоне нет автозапуска фонового видео, вместо него показана картинка.
- Информация из подсказок при наведении доступна и на сенсорном экране.
- Номер телефона нажимается, а кнопки достаточно крупные.
- Форма заявки короткая, а поля подбирают нужную клавиатуру.
- Страница открывается на реальном телефоне через мобильный интернет, а не только по Wi‑Fi в офисе.
Последний пункт проверьте лично: откройте сайт на своём телефоне, отключите Wi‑Fi и попробуйте найти шоурил и оставить заявку. Ваши ощущения подскажут, что исправлять в первую очередь.
