Мобильная версия действующего сайта на 152 страницы - вёрстка под телефон без смены дизайна

Сайт завода металлоконструкций работал не первый год и на телефоне разваливался. Заголовки вылезали за край, страницы ездили вбок, таблицы размеров не читались, номера телефонов были обычным текстом и не набирались нажатием. Заказчица хотела, чтобы на телефоне всё читалось, но дизайн просила не трогать - на компьютере сайт её устраивал.

Доступа к файлам по FTP не было, только админка, поэтому правки шли через свой канал к серверу. Отдельным пунктом стоял вес страниц, главная весила больше двух мегабайт, карточка товара почти полтора. Срок двое суток, по замеру там было работы часов на восемь-десять. Это был уже четвёртый заказ от этой заказчицы по тому же сайту, то есть устройство его я знал заранее.

Все правки собрал в один новый файл стилей и подключил его последним, чтобы он перебивал старые правила. Откат при этом это снятие одной строки. Копии всех затронутых кусков разметки и стилей снял до работы.

Корень поломанной типографики оказался не в кеглях. Браузер считал автоувеличение текста как сто сорок процентов, и правило в тридцать пикселей выезжало на экран сорока двумя. Длинное слово не переносилось, вылезало за край и тянуло страницу вширь. Снял автоувеличение, выставил кегли руками и разрешил переносить длинные слова.

Телефон и мессенджер лежали в системных настройках и подставлялись в шестидесяти пяти местах. Проставить ссылки руками означало бы, что при смене номера в админке ссылка останется старой. Поэтому написал сниппет - он берёт настройку, чистит до цифр, приводит номер к международному виду и отдаёт готовую ссылку. Заменил вызовы в пятидесяти объектах, ссылка при этом выглядит обычным текстом на любом экране.

Первый обход был слишком узким. По требованию владельца прошёл не четырнадцать страниц, а все сто пятьдесят две опубликованные, и там нашлось главное - в двадцати пяти кусках разметки из тридцати четырёх не было мета-тега viewport. Без него телефон рисует страницу как экран в 980 пикселей и ужимает целиком. Добавил его везде, кроме почтовых шаблонов. Под новым viewport вылезла старая вёрстка - жёсткие обёртки в 960 пикселей и меню, которое держало все подпункты раскрытыми, потому что раскрывались они по наведению, а наведения на телефоне нет.

Вес срезал двумя файлами. Подложка блока весила 1269 килобайт, я пересобрал её с той же прозрачностью в 17 килобайт. Заглушка под отложенные картинки, которая грузится на каждой странице, ушла с 253 килобайт до шести.

Замер снят одним и тем же скриптом до и после, на экране шириной 390. Ширина всех страниц стала 390 - раньше карточки давали 502, фотогалерея 542, страница гарантии 483. Обрезанных заголовков ноль, было восемь на фотогалерее и три на карточке серии. Ссылка для набора номера появилась на каждой странице, от четырёх до шести штук, раньше их не было нигде. Меню свернулось с 1706 пикселей до 248. Главная похудела с 2217 до 1266 килобайт, карточка товара с 1283 до 652. Работа принята в день сдачи.