Мобильная адаптация: сайт остаётся тем же, но им можно пользоваться с телефона
Меняется раскладка шаблонов на узком экране, размер того, во что надо попасть пальцем, и вес того, что грузится первым. Тексты, картинки, структура, дизайн, адреса страниц и всё, что считает деньги, остаются как были — это условие работы, а не оговорка в конце договора.
- Правим шаблоны и стили: корзина, оплата, интеграции и кабинет не трогаются
- Адреса страниц прежние — накопленный поиском вес не обнуляется
- Копию снимаем до работ, проверяем на настоящих телефонах, а не в окне браузера
Откройте свой сайт с телефона и пройдите семь проверок
Единственная самопроверка на этом сайте, которую нельзя сделать за столом: возьмите телефон, откройте свой сайт и попробуйте им воспользоваться. Пять минут. Отмечайте то, что сошлось, — вердикт считается от непройденного.
Вердикт появится после первой отметки и считается от непройденного. Семь проверок — это не весь список, зато любая непройденная означает, что часть людей с телефона до вас не доходит, а реклама за них платится наравне с остальными.
Сходится 0 из 7
Почему проверка ручная, а не автоматическая. Автоматические проверки мобильной пригодности выдают оценку в баллах, и она бывает высокой у сайта, которым невозможно пользоваться: машина смотрит на разметку, а не на опыт. Эти семь пунктов проверяются пальцем и отвечают ровно на тот вопрос, который важен, — доходит ли человек с телефона до заявки.
Проход по сайту с телефона
Пришлите адрес — пройдём по вашему сайту с телефона и вернём списокПройдём основные страницы с настоящего телефона и пришлём письмом, что именно мешает: где ездит вбок, где не попасть пальцем, где перекрыта кнопка. С пометкой, что чинится раскладкой, а что требует менять содержание. Бесплатно, доступы для этого не нужны.
Шесть вещей, которые мы чиним
Список короткий и закрытый: всё, чего в нём нет, мы не трогаем. Работа идёт по шаблонам, а не по страницам — их всегда меньше, и починенная карточка товара чинится сразу для всего каталога.
Что становится в столбец, что прячется под кнопку «показать», что переезжает выше или ниже. Три колонки, которые на компьютере читаются рядом, на телефоне превращаются в длинную ленту, и порядок внутри неё важнее самой вёрстки: человек прокручивает и решает, дочитывать ли, за первые секунды.
Кнопки, ссылки, пункты меню, крестики закрытия. Палец толще курсора, а промах по ссылке — это возврат назад и потерянная нить. Отдельно разводим ссылки, стоящие вплотную: в списках товаров и в меню они чаще всего и слипаются.
Меню, которое открывается и закрывается; всплывающие окна, которые можно закрыть пальцем с первого раза; липкие полосы, не съедающие половину экрана. Самая дорогая поломка в этой группе — перекрытая кнопка отправки формы: человек дошёл до конца и не смог нажать.
Широкое содержимое либо перестраивается в карточки, либо прокручивается отдельно от страницы. Это то, из-за чего сайт ездит вбок, и то, что чаще всего оказывается самой нужной страницей: за ценой заходят в первую очередь, а читать её на телефоне бывает невозможно.
Картинки отдаются под размер телефона, а не под широкий монитор; то, что не видно сразу, подгружается позже. Мы чиним вес страницы, а не скорость всего сайта: медленная база, перегруженный хостинг и тяжёлые модули — это другая работа, и мы скажем, если дело в них.
Крупные поля, правильная клавиатура под каждое, видимая ошибка рядом с полем, нажимаемый номер телефона и ссылки в мессенджеры. Это конец пути, и именно здесь поломка стоит дороже всего: человек прочитал, поверил, дошёл — и не смог отправить.
Адаптив, отдельная мобильная версия и приложение
Три разные вещи, которые называют одним словом «мобильный сайт». От того, какую из них вы имеете в виду, зависит и цена, и последствия на годы вперёд.
Разводятся они по простому признаку: сколько у вас получается сайтов и сколько раз придётся обновлять каждую новость.
- Адаптив: один сайт, одни адреса раскладка меняется под ширину экрана, содержание остаётся тем же. Обновили страницу — обновилась везде. Это то, что делаем мы, и почти всегда правильный ответ: дешевле остальных и ничего не раздваивает
- Отдельная мобильная версия: второй сайт живёт на своём поддомене, со своим содержанием. Сегодня это скорее наследство: два сайта надо обновлять дважды, и через год они неизбежно расходятся — где-то старая цена, где-то пропавший раздел. Заводить новую мы не предлагаем
- Приложение: отдельный продукт значок на экране телефона, работа без сети, уведомления. Нужно тем, к кому возвращаются часто и по делу. Сайт оно не заменяет и раскладку не чинит — это соседнее направление и другая задача
Практическое следствие. Если сайт у вас один и на телефоне им пользоваться неудобно, нужен первый вариант — и это самый дешёвый из трёх. Второй вариант имеет смысл разве что как временная мера на очень старом сайте, который всё равно скоро менять. Третий решает другую задачу: он не про удобство чтения, а про то, чтобы к вам возвращались, не вспоминая адрес.
Отдельно про сайты на конструкторах. Там раскладка под телефон обычно уже есть — её делает сама платформа, — и починить её можно только тем, что позволяет панель настроек. Если с телефона сайт всё равно неудобен, вариант один: переезд на свою площадку, а это уже другая работа
Чего мы в этой работе не делаем
Список закрытый, и он важнее перечня работ. На чужом живом сайте главный риск не в том, что подрядчик чего-то не сделает, а в том, что он сделает лишнее: перепишет текст «заодно», поправит структуру «как лучше» и сломает то, что работало.
- Тексты. Ни одного слова, даже если формулировка кажется нам неудачной. Скажем об этом отдельно, но править не станем
- Структуру и порядок блоков. На узком экране порядок может меняться, но из страницы ничего не исчезает и ничего не добавляется
- Дизайн. Цвета, шрифты и стиль остаются вашими: адаптация — не повод перерисовать сайт под свой вкус
- Адреса страниц. Они остаются прежними, поэтому накопленный поиском вес никуда не девается
- Корзину, оплату, интеграции и личный кабинет. Их раскладку чиним, их логику — нет
- Платформу. Сайт остаётся там, где стоит: переезд — другая работа и другое решение
- Менять содержание и структуру — редизайн сайта: там сначала меряют, что работает, и меняют по частям
- Ускорить сайт целиком, а не только раскладку, — поддержка: база, хостинг, модули и кеширование
- Понять, где именно теряются люди, — аудит сайта, от 25 000 ₽: он смотрит путь до заявки, а не вёрстку
- Значок на экране телефона и работа без сети — приложение из сайта, от 40 000 ₽
Мы перечисляем это не из осторожности. На чужом сайте любая лишняя правка — это риск, за который платите вы: сломавшуюся корзину заметят покупатели, а не мы. Поэтому граница проводится до начала, и всё, что за ней, обсуждается отдельно и отдельно считается.
Как идёт работа
Четыре шага. Работа идёт на живом сайте, поэтому первый шаг — не правка, а копия, а последний — проверка на настоящих телефонах, а не в окне браузера, растянутом до размеров телефона.
-
01
Проходим сайт с телефона и записываем по шаблонам
Не по страницам, а по типам: главная, карточка, список, статья, форма, корзина. Одна и та же поломка на сотне страниц — это одна поломка в одном шаблоне. Заодно сразу видно, что чинится раскладкой, а что требует трогать содержание, — второе мы выписываем отдельно и в работу не берём.
-
02
Снимаем копию и заводим отдельную ветку правок
До первой строки изменений. На живом сайте это не формальность: откатиться нужно бывает не из-за ошибки, а из-за того, что заказчик посмотрел и передумал. Копия и отдельная ветка делают возврат вопросом минут, а не восстановлением из вчерашнего резервного копирования с потерей заказов за день.
-
03
Чиним шаблоны по одному, начиная с самых посещаемых
Порядок берём из вашего счётчика: сначала то, куда приходит больше всего людей с телефонов. Так первая же выкладка даёт эффект, даже если работа ещё не закончена. Если счётчика нет, начинаем с пути до заявки — главная, услуга или товар, форма: он есть у всех.
-
04
Проверяем на настоящих телефонах и выкладываем
Узкое окно браузера показывает раскладку и не показывает главного: как на это нажимается пальцем, что делает клавиатура, как ведёт себя липкая полоса при прокрутке. Проверяем на живых устройствах, включая старые и недорогие, — именно на них ломается то, чего не видно на новых.
Шаблонов всегда меньше, чем страницПоэтому мы и считаем работу по ним, а не по числу страниц сайта: каталог на тысячу товаров — это один шаблон карточки и один шаблон списка. На разборе мы в первую очередь считаем именно типы страниц, и обычно их оказывается заметно меньше, чем ожидает заказчик.
От чего считается объёмОт чего считается объём
Ступени в лестнице направления у этой работы нет, и назвать её честно нельзя ни одной цифрой: три сметы считают сайт с нуля, а здесь мы работаем в чужих шаблонах, состояние которых заранее неизвестно. Считается объём по четырём вещам, и все четыре видно на разборе.
-
Число разных шаблонов
Не число страниц, а число непохожих типов: главная, карточка, список, статья, форма, корзина. Каталог на тысячу товаров — это два шаблона, а сайт на двадцать страниц, каждая из которых свёрстана отдельно, — двадцать. Второй случай хуже и встречается чаще, чем кажется.
-
Состояние вёрстки
Сетка, собранная на современных средствах, перестраивается под узкий экран быстро. Вёрстка на жёстких ширинах правится дольше, а вёрстка таблицами — дольше всего, и там иногда выгоднее переписать блок заново, чем чинить. Это видно только изнутри, поэтому мы смотрим шаблоны, а не сайт снаружи.
-
На чём собран сайт
Свой код, коробочная система или закрытый конструктор. В первых двух случаях мы правим шаблоны и стили; в третьем возможности ограничены тем, что позволяет панель настроек, и честный ответ иногда звучит «починить нельзя». Чужие виджеты и модули — отдельная история: их вёрстку мы не контролируем и чиним обёрткой вокруг.
-
Входит ли скорость
Вес первого экрана — картинки под размер телефона, отложенная загрузка того, что не видно, — считается отдельной задачей внутри работы. А вот скорость сайта целиком (база, хостинг, тяжёлые модули) сюда не входит и чинится не здесь: это поддержка, и мы скажем, если дело в ней.
Срок называем оттуда жеОн зависит от тех же четырёх вещей и от одного обстоятельства, которое не считается заранее: что обнаружится внутри шаблонов. Поэтому до того, как мы их открыли, честный ответ — вилка, а не дата. Открываем мы их на бесплатном разборе, и после этого вилку называем сразу и больше не двигаем.
Что в чужом сайте починить нельзя
Четыре ограничения, которые мы называем до договора. Все они всплывают всё равно — вопрос только в том, на разборе или в середине работы, когда деньги уже потрачены, а ожидания сложились.
| Ограничение | Что это значит на практике | Есть ли обход |
|---|---|---|
| Закрытый конструктор | Шаблоны не открываются, править можно только то, что даёт панель настроек. Мобильная раскладка там уже есть, и менять её можно в рамках, заданных платформой | Только переезд на свою площадку, и это другая работа. Мы скажем об этом сразу, а не после первой недели |
| Чужие виджеты и модули | Чат, карта, календарь записи, форма стороннего сервиса. Их вёрстку делаем не мы, и меняться она может без предупреждения при обновлении | Частично: чиним обёрткой вокруг и отводим им место, где они не ломают страницу. Если виджет неисправим, предложим заменить |
| Вёрстка таблицами и жёсткими ширинами | Такое чинится, но медленно, и результат остаётся хрупким: следующая правка легко всё ломает | Иногда дешевле переписать блок заново, чем чинить. Мы называем оба варианта с объёмом и даём выбрать вам |
| Медленный сайт | Мы чиним вес первого экрана и картинки. Если тормозит база, хостинг или тяжёлый модуль, на телефоне это будет заметно по-прежнему | Да, но не здесь: это поддержка сайта, отдельная работа. Скажем на разборе, если увидим, что причина там |
И правило, которое из этого следует: оценку мы даём, открыв шаблоны, а не посмотрев на сайт снаружи. Снаружи видно симптомы, а стоимость определяется тем, как сайт устроен внутри, — два внешне одинаковых сайта могут отличаться по объёму работы в несколько раз.
Остаётся ваш сайт — с правками в вашем месте
Мы приходим в чужой проект и уходим из него, поэтому главное условие работы — чтобы после нас ничего не зависело от нас. Правки лежат там же, где лежит остальной код сайта, а не в нашем репозитории и не на нашем сервере. Продолжить их сможет ваш разработчик или любая другая студия, не разбираясь в наших договорённостях.
Список того, что чинить не стали, — самая честная часть отчёта. Там написано, что мы увидели и не трогали: где дело в содержании, а не в раскладке; где виджет не наш; где вёрстку выгоднее переписать, чем чинить. С причиной по каждому пункту. Это же список того, что придётся решать вам — рано или поздно.
- Правки в ваших файлах и в вашем репозитории, копия до работ сохранена
- Список шаблонов, которые чинили, и что именно изменено в каждом
- Список того, что чинить не стали, с причиной по каждому пункту
- Те же семь проверок — чтобы прогонять новые страницы и чужие правки без нас
- Доступы, которые вы нам выдали, отзываются одной кнопкой и в любой момент
Эта работа стоит с краю направления
Все остальные форматы делают сайт, эта — чинит существующий. Поэтому и в лестницу смет она не входит, и калькулятора для неё на родителе нет. Но всё общее про разработку там есть, и повторять его здесь не нужно.
Долей мобильного трафика числом мы здесь не называем: своего замера у студии нет, а чужие проценты пересказывать как свои нельзя. Зато у вас эта доля точно есть — в вашем счётчике, и посмотреть её стоит до разговора о деньгах. Разработка сайтов целиком
Когда мобильная адаптация вам не нужна
Четыре ситуации, в которых мы отговариваем. Три из них означают, что деньги уйдут на то, что скоро выбросят или что и так не работало. Четвёртая означает, что чинить просто нечего.
-
Если сайт не продаёт и на компьютере
Раскладка на телефоне этого не исправит: человек так же дочитает и так же не поймёт, зачем вы ему. Мы сделаем удобной страницу, с которой уходят, и число уходящих не изменится. Смотреть надо содержание — что обещано, чем доказано и в каком порядке это подано. Это редизайн, и мы скажем это до сметы, даже если вы пришли за адаптацией.
-
Если сайт всё равно скоро менять
Если ему много лет, вёрстка держится на честном слове, а через полгода планируется новый — адаптация окажется платой за то, что выбросят. Иногда всё же имеет смысл: когда «через полгода» означает «через два года», а реклама откручивается уже сейчас. Тогда мы чиним не весь сайт, а только путь до заявки — это заметно дешевле и мы так и предложим.
-
Если сайт на закрытом конструкторе
Шаблоны там не открываются, мобильную раскладку делает платформа, и поправить можно ровно то, что она позволяет. Если этого не хватает, честный ответ один — переезд на свою площадку, а это другая работа и другое решение. Брать деньги за адаптацию там, где чинить нечем, мы не станем.
-
Если к вам не приходят вообще
Бывает и так: адаптация выглядит понятной задачей, потому что её видно глазами, а настоящая причина в том, что на сайт никто не заходит ни с телефона, ни с компьютера. Тогда чинить раскладку — это улучшать то, чего никто не увидит. Посмотрим счётчик на бесплатном разборе и скажем, если дело в этом.
Первый случай мы называем чаще остальныхАдаптацию просят, когда видно, что с телефона неудобно, — это заметная и понятная беда. Но если на компьютере сайт тоже не приносит заявок, чинить надо не раскладку. Проверяется это за пять минут по счётчику: доходят ли люди до формы вообще, с любого устройства.
Когда вам это не нужноКому в соседнюю работу, а не сюда
Эта работа узкая намеренно, и половина обращений по ней заканчивается тем, что нужна другая. Ниже пять соседних работ и признак, по которому выбирают между ними.
Если не уверены, что именно у вас сломано, начните с семи проверок выше: они отвечают на это за пять минут и без нас. А нижние границы всех направлений собраны на странице цен
Мобильная адаптация: что стоит знать до заказа
Почему работа считается по шаблонам, а не по страницам
Страниц у сайта может быть тысяча, а непохожих типов — пять: главная, список, карточка, статья, форма. Всё, что человек видит на тысяче страниц каталога, нарисовано двумя шаблонами, и поломка в карточке — это одна поломка, а не тысяча. Поэтому первое, что мы делаем на разборе, — считаем типы, и обычно их оказывается заметно меньше, чем ожидает заказчик.
Из этого следует и то, как считается цена. Она зависит не от размера сайта, а от числа непохожих шаблонов и от того, как они свёрстаны внутри. Сайт на двадцать страниц, где каждая свёрстана отдельно и по-своему, дороже каталога на тысячу товаров с двумя аккуратными шаблонами — и это не парадокс, а прямое следствие устройства.
Поэтому же мы не называем цену на странице. Три сметы направления считают сайт, сделанный с нуля; здесь мы работаем внутри чужих шаблонов, состояние которых снаружи не видно. Два внешне одинаковых сайта могут отличаться по объёму работы в несколько раз, и любая опубликованная цифра была бы неверной для половины читателей. Мы открываем шаблоны на бесплатном разборе и называем вилку после этого — а названную уже не двигаем.
Что чинится раскладкой, а что нет
Раскладкой чинится всё, что мешает физически: страница, которая ездит вбок; текст, который надо увеличивать; кнопки, в которые не попасть пальцем; меню, которое не закрывается; таблица, которая не помещается; форма, у которой кнопка спрятана под липкой полосой; номер телефона, который не нажимается. Это конкретные поломки с конкретными причинами, и все они живут в шаблонах и стилях.
Раскладкой не чинится то, что относится к содержанию: непонятное обещание, отсутствие доказательств, неверный порядок блоков, цена, которой нет на сайте. Человек с телефона уходит с такой страницы ровно так же, как с компьютера, — просто немного раньше. Если мы видим на разборе, что дело в этом, мы говорим прямо и отправляем в редизайн, вместо того чтобы продать переделку раскладки под чужую задачу.
Отдельная история — скорость. Вес первого экрана мы чиним: картинки отдаются под размер телефона, то, что не видно сразу, подгружается позже. А медленная база, перегруженный хостинг и тяжёлые модули остаются медленными, и на телефоне это видно сильнее, чем на компьютере. Это работа другой службы — поддержки, — и мы скажем, если причина там.
Что происходит с сайтом во время работы
Он продолжает работать. Правки идут в отдельной ветке, копия снимается до первой строки изменений, выкладка делается частями — начиная с тех шаблонов, куда приходит больше всего людей с телефонов. Это не перестраховка: откатиться чаще приходится не из-за ошибки, а из-за того, что заказчик посмотрел и передумал, — и в этот момент важно, чтобы возврат был вопросом минут.
Адреса страниц при этом не меняются. Это существенно: переезд адресов означает риск потерять накопленный поиском вес, и ради раскладки такой риск брать незачем. По той же причине мы не трогаем ни текстов, ни структуры, ни дизайна — на чужом живом сайте главная опасность не в том, что подрядчик чего-то не сделает, а в том, что он сделает лишнее.
Проверяем на настоящих телефонах, включая недорогие и не самые новые. Узкое окно браузера показывает раскладку и не показывает главного: как это нажимается пальцем, что делает клавиатура при вводе, как ведёт себя липкая полоса при прокрутке. Половина находок появляется именно на живом устройстве, и ровно поэтому список из семи проверок выше предлагается пройти вам самим — с телефона, а не за столом.
Вопросы про мобильную адаптацию
Шесть вопросов именно про эту работу. Общее про разработку — сроки, гарантии, состав работ — на странице направления
Остался вопрос?
Написать в Telegram, отвечаем за 30 минутПотому что любая опубликованная цифра была бы неверной для половины читателей. Мы работаем внутри чужих шаблонов, и их состояние снаружи не видно: два внешне одинаковых сайта отличаются по объёму работы в несколько раз. Считается она от числа непохожих шаблонов, от того, как они свёрстаны, на чём стоит сайт и входит ли в работу вес первого экрана. Всё это видно за полчаса, когда мы открываем шаблоны, — и сразу после этого мы называем вилку и больше её не двигаем. Ступени в лестнице направления у этой работы нет: три сметы считают сайт с нуля, а здесь сайт уже есть.
Считается от того же — числа шаблонов и состояния вёрстки, — плюс от одного обстоятельства, которое заранее не считается вовсе: что обнаружится внутри. Поэтому до того, как мы открыли шаблоны, честный ответ звучит «вилка, а не дата». Одно можно сказать сразу: работа выкладывается частями, начиная с самых посещаемых с телефона страниц, так что первый заметный результат появляется задолго до окончания. Если у вас идёт реклама, мы начинаем с пути до заявки — это самый дешёвый способ перестать терять людей прямо сейчас.
Риск есть всегда, когда трогают живой сайт, и убирается он порядком работы, а не обещаниями. До первой правки снимается копия, изменения идут в отдельной ветке, выкладка делается частями и проверяется на настоящих телефонах. Откатиться можно в любой момент и это занимает минуты. Второй слой защиты — граница: мы не трогаем корзину, оплату, интеграции и личный кабинет, а правим шаблоны и стили. Большинство громких поломок на чужих сайтах случается не от кривых рук, а от того, что подрядчик полез дальше, чем договаривались.
Для разбора — нет, достаточно адреса сайта: проход с телефона и список находок делаются снаружи и бесплатно. Для оценки нужен доступ к шаблонам: без них можно увидеть симптомы, но не объём работы. Для самой работы нужен доступ туда, где живут шаблоны и стили, — в систему управления или в репозиторий. Доступ выдаёте вы и отзываете одной кнопкой в любой момент; заводить учётную запись на нас не требуется. Правки остаются в ваших файлах, а не в нашем месте.
Почти всегда адаптация. Отдельная версия — это второй сайт со своим содержанием: обновлять придётся оба, и через год они разойдутся, где-то останется старая цена, где-то пропавший раздел. Плюс два адреса на одну страницу создают вопросы там, где их можно не создавать. Отдельная версия имеет смысл разве что как временная мера на очень старом сайте, который всё равно скоро менять. А приложение со значком на экране — вообще другая задача: оно не про удобство чтения, а про возвращение, и живёт в соседнем направлении
Тогда чинить почти нечего, и мы скажем это сразу, а не после первой недели. На закрытой платформе шаблоны не открываются: мобильная раскладка там делается самой платформой, а поправить можно то, что позволяет панель настроек. Иногда этого хватает — и тогда работа сводится к нескольким часам настройки, а не к проекту. Если не хватает, честный ответ один: переезд на свою площадку, и это другая работа с другим решением. Брать деньги за адаптацию там, где чинить нечем, мы не станем.
Пришлите адрес — пройдём по сайту с телефона
- Пройдём основные страницы с настоящего телефона и пришлём список того, что мешает
- Пометим, что чинится раскладкой, а что требует менять содержание, — это разные работы
- Назовём объём и вилку срока после того, как посмотрим шаблоны. Доступы для списка не нужны
Заявка принята
Пройдём по сайту с телефона и вернёмся со списком в течение рабочего дня. Если срочно — напишите в Telegram.
Или напишите сразу:
Telegram · отвечаем лично за 30 минут