Мобільна версія вайта: що перевірити до заливу

Людина, яка натиснула на оголошення, найчастіше відкриває сайт на телефоні. І правила Google, і правила Meta вимагають, щоб сайт нормально працював: у Google — «у поширених браузерах і на пристроях», у Meta — щоб він був «доступний» і «нормально працював». Тому мобільна версія — частина базової перевірки сайту, а не додаткова опція.

Що саме ламається на телефоні

1. Немає тега viewport

Без <meta name="viewport"> телефон відмальовує сторінку так, ніби ширина екрана близько 980 пікселів, а потім зменшує її. Текст виходить дрібним, кнопки — крихітними. Цей тег потрібен на кожній сторінці сайту.

2. Меню не згортається

Горизонтальне меню із семи пунктів на екрані телефона не вміщується. Потрібне «бургер»-меню, що розкриває список за натисканням. Стежте, щоб воно працювало на всіх сторінках, а не лише на головній.

3. Сітка не перебудовується

Три картки в ряд на десктопі мають ставати однією колонкою на телефоні. Якщо колонки лишаються поруч, вони виступають за край екрана.

4. Дрібний шрифт

Текст, який доводиться збільшувати двома пальцями, дратує відвідувача й сигналізує про непродуманий сайт. Основний текст має читатися без зуму.

5. Горизонтальна прокрутка

Якщо сторінка ширша за екран, її доводиться рухати вбік. Часта причина — елементи з фіксованою шириною більшою за екран: широкі таблиці, зображення без обмеження ширини, блоки із заданим width у пікселях.

Як перевірити за п'ять хвилин

1. Відкрийте сайт з реального телефона, а не лише зменшене вікно браузера на комп'ютері.
2. Пройдіть меню на кількох сторінках: головна, контакти, політика.
3. Прокрутіть сторінку зверху вниз і перевірте, чи немає руху вбік.
4. Відправте форму й переконайтеся, що кнопка натискається пальцем, а повідомлення про успіх видно.
5. Відкрийте сайт за повільного з'єднання й перевірте, що сторінка не «стрибає» під час завантаження.

Як це влаштовано у WhiteCraft

Сайти WhiteCraft — статичний HTML+CSS. Перед завантаженням health score перевіряє не шаблон, а готовий зібраний сайт:

• чи є тег viewport на кожній сторінці;
• чи є в навігації «бургер» або інший перемикач меню;
• чи перебудовуються картки й сітки під вузький екран;
• чи немає надто дрібних розмірів шрифту;
• чи немає блоків із фіксованою шириною більшою за екран телефона.

Якщо щось знайдено, у звіті з'явиться попередження з поясненням. Докладніше — на сторінці можливостей.

Чого це не замінює: перегляд на реальному пристрої. Автоматична перевірка ловить типові помилки, але не може оцінити зручність так, як людина.

Чеклист

• Тег viewport на кожній сторінці
• Меню згортається й працює на всіх сторінках
• Картки стають однією колонкою на вузькому екрані
• Основний текст читається без зуму
• Немає горизонтальної прокрутки
• Форма відправляється з телефона, повідомлення про успіх видно
• Сайт перевірено на реальному телефоні

Повний список перед запуском — у чеклисті вайта, а причини відмов, пов'язані з тим, що сайт «не працює», — у статті чому вайт не проходить модерацію.