Мой первый сайт полностью на коде

Всем доброго времени суток. Несколько дней назад я закончил свой первый сайт, сверстанный мною на коде и посаженый на CMS Wordpress. Здесь я хочу рассказать о том как я выполнял проект, с какими трудностями столкнулся и как решил их.

Начнем издалека. ТЗ: лендинг для аудиторской организации + страница с отчетами, на которую можно будет без проблем добавлять еще отчеты из админки. Основные цвета: синий и оранжевый. Все остальное по классике: история компании, услуги, отзывы, контакты. Чуть позже было решено добавить возможность оставить заявку.

Первым делом я взялся за создание прототипа и сделал два варианта. Один максимально строгий и второй с некоторым (довольно большим) креативом. Заказчику понравился строгий вариант, но некоторые блоки из креативного варианта ему тоже зашли, что в итоге привело к решению создания некоторого рода смеси двух прототипов.

Следующим этапом была отрисовка дизайна и подбор общего стиля сайта. При обсуждении заказчик рассказал, что основным цветом их компании является синий, а акцентным - оранжевый, дизайн должен быть минималистичным, шрифт предпочтительно использовать с засечками. Основными клиентами являются мужчины и женщины 35-60 лет, пришедшие по сарафанному радио. Из этого был сделан вывод, что с дизайном лучше не мудрить, а главное для потенциальных пользователей сайта - удобство.

Цвета были мне предоставлены и после небольших изменений для лучшего сочетания я начал работу над дизайном.

Первые макеты были довольно шаблонными, также выяснилось, что заказчик не хочет, чтобы на сайте были какие либо фото, взятые из интернета. Ему больше нравится что то графическое, но референсов того, то ему нравится у него нет.

Я прислушался к мнению заказчика и начал пытаться нарисовать что то в темных тонах, с упором на графические изображения (3 макет). При обсуждении, выяснилось, что это не совсем то, что нужно и в попытках поиска примера вместе с заказчиком я все таки нашел что то подходящее под его описание чего то графического (фоновое изображение на предпоследнем блоке в последних двух макетах).

Видя наконец довольно целую картинку перед собой я решил нарисовать два макета, один в светлом стиле, другой в темном. В этих макетах я позволил себе отойти от одного синего цвета в сторону градиентов, что в итоге оказалось хорошей идеей, так как очень понравилось заказчику.

И наконец, последний макет был одобрен, я занялся мелкими доработками, и на выходе получилось что то такое.

После утверждения этого макета, пришло время приступать к верстке. В качестве CMS был выбран wordpress.

Основными проблемами при верстке у меня выступала кроссбраузерность, я долго ломал голову над тем, как сделать так, чтобы все элементы отображались одинокого на всех устройствах. За несколько дней я прочитал больше документации про поведение CSS параметров в разных браузерах, чем за все время до этого, но в иоге мне удалось решить все возникшие проблемы.

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

На всех устройствах все работало как надо, кроме 11 серии айфонов (для меня, в каком то смысле, это было шоком)

Проблема решилась изменение height на auto, а не на max-content.

Потом я столкнулся с тем, что если на формах нет капчи, то на почту постоянно будет приходить спам, даже если сайт никак не продвигается. Поэтому я добавил капчу к формам.

В завершение хочу сказать, что на самом деле создать сайт оказалось не так легко как я думал, но при этом я понял, что мне приносит удовольствие поиск решение проблем. И чем сложнее были проблемы, тем приятнее было их решать.

За этот проект я получил 45000 рублей. Я не стал расписывать здесь большую часть работы, а рассказал о самых основных этапах. Создание этого сайта заняло у меня 1,5 месяца, что мне кажется довольно большим сроком и я, вероятно, мог бы управится и быстрее, но так как дедлайн был назначен на 31 августа, я не слишком торопился.

Спасибо всем, кто прочитал.

Ссылка на сайт: