Создание сайта для подмосковной компании, которая приезжает на склады и меняет цельнолитые шины погрузчиков прямо на площадке: одностраничный сайт, где клиент сам считает стоимость выезда и скачивает расчёт в PDF. Сделал его Евгений Росляков. Сайты он пишет с 2016 года, живёт и работает в Москве, с заказчиками из других мест общается удалённо. Оформлен как самозанятый, перед стартом подписывает договор, а для юридических лиц готовит закрывающие документы.
Услуга редкая. Многие даже не знают, что шины можно сменить у себя на складе, и не представляют, сколько это стоит. Ищут её в неудобный момент: погрузчик встал, отгрузка тормозится.
Решение принимает завсклад или механик, а платит бухгалтерия. Первый открывает сайт с телефона, стоя посреди склада. Вторая спрашивает про договор, ЭДО и реквизиты. Сайт должен был ответить обоим.
Задача: сделать Landing Page, на которой человек считает цену ещё до звонка диспетчеру и тут же заказывает выезд. С моей стороны: структура страницы, дизайн, вёрстка, программирование калькулятора и запуск.
Оформление рабочее: крупные цифры, понятные кнопки, ни одной картинки ради картинки. Человек приходит не любоваться, а решить проблему, пока простаивает техника.
Страница построена вокруг трёх вопросов: сколько стоит, когда приедут, как оформить для бухгалтерии.
Калькулятор. В него добавляется несколько строк с разными шинами, диаметром от 8 до 15″, и выбирается, кто снимает колёса: бригада или сотрудники заказчика. Расстояние считается по дороге от базы, а не по прямой. Адрес вводят строкой или ставят метку на карте. На карте видна зона в 50 км, которая входит в базовый выезд. Итог раскладывается по статьям, его можно скачать в PDF и переслать руководителю.
Над шапкой горит живая строка «Свободна выездная группа». Телефон и кнопка «Заказать выезд» закреплены, на телефоне они лежат внизу экрана, и механику не приходится искать их по странице.
Сайт написан вручную на HTML5, CSS3 и JavaScript, без конструктора и готовых виджетов. Правила расчёта у компании свои, коробочный калькулятор их бы не потянул. Анимацию появления блоков делает GSAP, остальное обходится без библиотек.
Мобильные сайты для такой аудитории я проектировал от узкого экрана: сначала телефон, потом широкий монитор. Поля калькулятора крупные, числа вводятся с цифровой клавиатуры, кнопки рассчитаны на палец в перчатке.
Для бухгалтерии отдельный блок: образец договора, работа через ЭДО, реквизиты для счёта.
Механик сразу видит, что бригада приедет на его склад и справится с его шинами. Руководитель получает PDF с расчётом и согласует его сам, никому ничего не пересказывая по телефону. Бухгалтерия находит договор, ЭДО и реквизиты без звонка. Диспетчеру остаётся подтвердить время.
Это изменило первый разговор. Раньше он начинался с «а сколько у вас стоит?», теперь человек звонит уже с цифрой и спрашивает про день и час. Сайт берёт на себя вопросы, на которые диспетчер отвечал по несколько раз за смену.
Технически: HTML страницы вместе с калькулятором весит 12 КБ в сжатом виде. Калькулятор одинаково работает на телефоне и на компьютере.
Есть честное ограничение. Калькулятор считает предварительную стоимость, окончательную сумму подтверждает диспетчер после уточнения объекта: бывает, что погрузчик стоит в таком месте, где нужна особая техника. Тарифы лежат в одном блоке настроек в коде. Поменять цены быстро, но пока это правка файла, а не админка. Следующим шагом я вынесу тарифы в таблицу, которую компания сможет править сама.
Нужна страница с расчётом цены для выездной услуги, которая нормально открывается с телефона на объекте? Расскажите в сообщении через freelance.ru, как вы сейчас считаете стоимость, и я скажу, какие поля нужны калькулятору.
