Вёрстка за 25 тысяч, которую пришлось выбросить
Где-то в 2015 году я решил, что хватит собирать сайты из бесплатных шаблонов, и заказал вёрстку у дизайнера. Отдал 25 тысяч рублей.
Получил файлы, открыл — и понял, что заплатил за мусор.
DOCTYPE был указан как HTML4. Не потому, что так было задумано, а потому, что шаблон явно тащили из чего-то очень старого. Багов хватало. Мобильная версия была просто кошмаром — её как будто не открывали ни разу.
Я написал исполнителю. Он исправил часть замечаний, а потом перестал отвечать. Деньги были уплачены полностью и вперёд.
Почему DOCTYPE — это не придирка
Мне тогда сказали примерно так: «какая разница, работает же». Разница есть.
DOCTYPE — первая строка страницы, и браузер читает её раньше всего остального. От неё зависит, в каком режиме он будет рисовать документ. Со старым или неправильным DOCTYPE браузер может уйти в режим совместимости, где размеры блоков считаются иначе, чем в современном. Дальше начинается весёлое: у верстальщика на его машине всё сошлось, у вас поехало, и никто не понимает почему.
Но главное даже не это. В 2015 году HTML5 был стандартом уже лет пять. Человек, который в 2015-м отдаёт заказчику страницу с DOCTYPE от HTML4, почти наверняка не писал её с нуля — он открыл старый шаблон и переставил в нём картинки. Это одна строчка, но она рассказывает про работу больше, чем всё остальное.
Вот на что я тогда не посмотрел, а посмотреть надо было за две минуты.
Чек-лист приёмки, которого у меня не было
Всё это делается до перевода последнего платежа, без специальных знаний и без программ.
1. Откройте на своём телефоне. Не в «мобильном режиме» браузера на компьютере, а на живом телефоне. Это разные вещи. Половина проблем видна сразу.
2. Подвигайте край окна браузера. Медленно тяните окно от широкого к узкому и смотрите, что происходит. Вёрстка должна перестраиваться плавно, а не рассыпаться на каком-то одном размере.
3. Проверьте горизонтальную прокрутку. На телефоне страница не должна ездить вбок. Если ездит — где-то торчит блок с жёсткой шириной. Это не мелочь, это признак, что адаптив прикручен наспех.
4. Загляните в исходный код. Ctrl+U в браузере. Смотрите на первые десять строк:
<!DOCTYPE html>— ровно так, коротко, без длинных ссылок;- есть строка с
viewport— без неё телефон вообще не поймёт, что сайт адаптивный; - кодировка
utf-8.
Три строки. Если их нет — дальше можно не смотреть.
5. Откройте консоль. F12, вкладка Console. Красных сообщений быть не должно. Они означают, что что-то не загрузилось или сломалось — и завтра это выстрелит.
6. Посмотрите вес картинок. Там же, вкладка Network, перезагрузить страницу. Если фотография на фоне весит 4 мегабайта — с мобильного интернета сайт будут закрывать, не дождавшись.
7. Прогоните через validator.w3.org. Бесплатно, за минуту. Идеальной чистоты не требуйте, её почти не бывает. Но незакрытые теги и дублирующиеся идентификаторы — повод для разговора.
Про деньги и договорённости
Технический чек-лист — половина дела. Вторая половина в том, что я отдал все деньги вперёд.
Что стоило обговорить письменно, хотя бы перепиской:
- Оплата частями. Часть при старте, остальное — после приёмки. Не «после сдачи файлов», а после того, как вы проверили по списку выше.
- Правки. Сколько итераций входит в цену и в какой срок. Иначе «исправлю» превращается в бесконечность.
- Что считается багом, а что новым пожеланием. Съехавшее меню на телефоне — баг, он бесплатный. «А давайте кнопку сделаем синей» — новое пожелание. Границу надо провести заранее, иначе спорить будете уже на эмоциях.
- Исходники. Все файлы, шрифты, картинки в исходном виде. У меня их не было, и доделывать пришлось по тому, что осталось.
Чем всё закончилось
Тем, что я сел учить вёрстку сам.
Не из принципа «сделаю лучше» — я тогда точно не сделал бы лучше. А из-за ощущения полной беспомощности: тебе отдают файлы, ты видишь, что что-то не так, но не можешь объяснить что, и любой ответ исполнителя приходится принимать на веру.
Через пять лет, в 2020-м, я всё-таки прошёл курс и получил сертификат верстальщика. С тех пор подрядчиков я не боюсь. Не потому, что верстаю лучше них, а потому, что теперь знаю, какие вопросы задавать и на что смотреть в первые две минуты.
25 тысяч рублей за этот урок. Дороговато, но чек-лист выше стоит примерно столько же — если вы им воспользуетесь до оплаты, а не после.
