Будет ли сайт удобным на телефоне: проверка и правки
Да, вёрстка подстраивается под экран: колонки складываются в одну, меню сворачивается, текст переносится. Сборка приезжает пригодной для телефона, а не уменьшенной копией десктопа. Чего не гарантирует ни один билдер, так это что она хорошо выглядит с вашим содержимым, и вот это стоит проверить руками.
Разница принципиальная. Каркас адаптивен по умолчанию, а ломают его длинные заголовки, широкие таблицы и тяжёлые фотографии. Все три приходят от вас, и все три чинятся правками.
Что значит «удобно на телефоне»?
Это не одно свойство, а пять разных, и они ломаются независимо друг от друга.
Страница помещается в ширину без щипков пальцами. Текст читается без увеличения. Кнопки достаточно крупные и разнесены, чтобы палец попадал в нужную. Ничего не уезжает вбок при прокрутке. И страница открывается за разумное время на мобильном интернете, а не только на офисном вайфае.
Проект легко проходит первые четыре пункта и проваливает пятый, и это самый частый исход для красивой сборки с большой фотографией в шапке. Считайте это чек-листом из пяти пунктов, потому что чинятся они по-разному.
Стоит помнить, в каких условиях страницу увидят. Человек держит телефон одной рукой, часто на ходу, часто на плохой связи и почти всегда в спешке. Это и есть настоящая проверка, а не аккуратный просмотр в тихом кабинете с большого монитора.
Что ломается чаще всего?
Четыре вещи, и они повторяются почти в каждом проекте.
| Симптом | Обычная причина | Что просить в чате |
|---|---|---|
| Страница уезжает вбок | Широкая таблица или картинка фиксированной ширины | «Пусть таблица прокручивается внутри своей области» |
| Заголовок выглядит сломанным | Текст написан под ширину ноутбука | Сократить заголовок или уменьшить его размер на телефоне |
| Кнопки трудно нажать | Мелкие цели, стоящие вплотную | «Сделай кнопки крупнее и разнеси их» |
| Страница долго открывается | Фотография в полном разрешении в шапке | Уменьшить и сжать файл до загрузки |
Последняя строка это не про вёрстку, и именно она стоит вам посетителей. Снимок прямо с камеры может весить больше, чем всё остальное на странице вместе взятое, и никакая правка не исправит уже загруженный файл: его нужно заменить.
Первая строка коварнее всех. На широком экране горизонтальной прокрутки не видно вообще, а на телефоне вся страница едет вбок и ощущается сломанной. Виновником обычно оказывается один элемент, который отказывается сжиматься.
Как проверить это правильно?
На настоящем телефоне, на опубликованном адресе и на мобильном интернете. Каждое из трёх условий делает свою работу.
| Что проверяем | Как | Почему короткий путь врёт |
|---|---|---|
| Вёрстку | Открыть имя-проекта.zugo.run со своего телефона |
Узкое окно браузера это не телефон, шрифты рисуются иначе |
| Скорость | Загрузить опубликованный адрес без вайфая | Быстрый интернет прячет вес картинок |
| Кнопки | Пользоваться одной рукой, только большим пальцем | Курсор точнее пальца в разы |
| Читаемость | Держать телефон на вытянутой руке | Текст, читаемый вплотную к монитору, на деле мелкий |
| Формы | Реально отправить одну | Клавиатура закрывает поля, и это видно только на устройстве |
Проверять надо именно опубликованный адрес, а не превью в окне разработки: это другая среда, другой ввод и другой размер экрана. Посетитель получает опубликованную страницу, значит, судить нужно по ней.
Два человека, два телефона и по пять минут дают больше, чем любой эмулятор. Попросите их выполнить то единственное действие, ради которого страница существует, и смотрите, где палец замирает.
Что проверяет сама платформа, а что нет?
Каждая сборка перед выдачей запускается в песочнице. Та, что не открылась, помечается неудачной и не приезжает к вам как результат.
Эта проверка отвечает на вопрос «страница отрисовалась». Она не открывает её на телефоне, не смотрит на неё глазами и не судит, разъехался ли заголовок на четыре строки. Визуальный разбор остаётся человеческой работой.
Поэтому порядок такой: получили сборку, открыли на телефоне, назвали проблему одним предложением, отправили правку, посмотрели снова. Механика правок разобрана в статье как редактировать проект после генерации.
Сколько стоит починить?
Почти всегда одна правка, потому что это изменение внутри вашей сборки, а не смена тарифа или платформы.
| Действие | Кредитов |
|---|---|
| Сборка сайта, приложения или игры | 6 |
| Одна правка | 3 |
| Платформа, первые три страницы | 12 |
| Каждая следующая страница | 3 |
| Сборка в режиме Hi-Fi | 12 |
| Правка в режиме Hi-Fi | 6 |
При такой цене круг мобильных исправлений можно делать спокойно, не вымучивая идеальную формулировку. Pro стоит $25 в месяц и даёт 200 кредитов, это 66 правок, если тратить только на них, поэтому бюджет редко становится ограничением при доводке.
Про Free скажем честно: он даёт 5 кредитов, а сборка стоит 6, так что бесплатный тариф позволяет осмотреться, но не собрать проект с нуля. Business стоит $99 в месяц.
Как формулировать мобильную правку?
Так же, как вы увидели проблему. Опишите экран, место и поведение: «на телефоне таблица с ценами уходит за правый край, сделай так, чтобы она прокручивалась внутри своего блока».
Фраза «сделай адаптивно» работает плохо, потому что каркас уже адаптивен, а не работает конкретный элемент. Общая просьба заставляет генерацию трогать всю страницу, и вместо одной правки вы получаете новые расхождения.
Меняйте по одной вещи за сообщение и смотрите результат на телефоне после каждой. Так вы всегда знаете, какая правка помогла, а какая сдвинула что-то ещё.
Полезно называть и порядок важности. «На узком экране цена и кнопка должны быть видны без прокрутки, остальное можно ниже» это решение, которое генерация исполнит буквально, в отличие от просьбы сделать красиво.
Что зависит от вас, а не от билдера?
Три вещи, и все они содержательные.
Первое: длина текстов. Заголовок в семь слов на ноутбуке занимает строку, на телефоне четыре. Никакая вёрстка этого не лечит, лечит сокращение до сути.
Второе: вес изображений. Фотографию нужно уменьшить до того размера, в котором её реально показывают, и сжать перед загрузкой. Это делается один раз и даёт больше, чем все остальные мобильные правки вместе.
Третье: сама структура страницы. На телефоне человек видит один экран за раз, поэтому главное действие должно стоять в первом из них. Порядок блоков это ваше решение, и оно важнее любых настроек отступов. Полный разбор цен на действия собран в статье сколько стоит сайт или приложение нейросетью.
Работают ли на телефоне игры?
Да, они открываются в мобильном браузере, но у них своя поломка. Игра, собранная под клавиатуру, на телефоне остаётся вообще без управления, если вы не попросили сенсорное.
Поэтому назовите его прямо в промпте: что делает касание, что делает свайп, где расположены кнопки. И проверьте игру пальцем, а не чтением описания.
Вторая особенность это форма экрана. Игровое поле, разложенное под широкое окно, в вертикальном телефоне обрезает счёт или уводит героя за границу. Просьба о вертикальной раскладке это обычная правка. Что вообще получается собрать в играх, разобрано в статье может ли ИИ собрать игру.
Где границы?
Три, и их стоит назвать прямо.
Это не нативное приложение. Опубликованный проект живёт в мобильном браузере по адресу вида имя-проекта.zugo.run, поверх которого подключается свой домен. Его можно добавить на домашний экран, но листинг в App Store или Google Play это отдельная работа.
Проверка перед выдачей про запуск, а не про красоту. Она подтверждает, что страница открылась, и не предупредит, что заголовок сломался на узком экране.
Глубокая оптимизация это инженерная задача. Дашборд с живыми данными или насыщенная 2D-игра на старом телефоне упираются в производительность, и там советы по вёрстке не помогают. На таком уровне Zugo не заменяет команду разработки, зато код проекта ваш и выгружается в GitHub.
С чего начать?
Соберите одну страницу, опубликуйте её и откройте на своём телефоне до того, как добавите что-то ещё. Базовое впечатление важнее списка правок: половина проблем видна в первые десять секунд.
Дальше действуйте по кругу: увидели, назвали одним предложением, отправили правку, посмотрели снова. Начать можно на zugo.dev.