HS-PORTAL — строительная компания

Адрес: hs-portal.ru

Дизайн

Главная страница

Внешний вид сайт — несколько не привычен обывателю.
Мы отошли от более классического формата в сторону абсолютного минимализма; в случае hs-portal — контент полностью формирует дизайн.
Далеко не все могут позволить себе подобный метод, поскольку это не совсем типичный сайт для компании. Здесь — практическая каждая страница представляет из себя элемент портфолио.
Снимков о проделанной работе много и большинство сделаны профессионально, больше походя на тематические «обои» для рабочего стола вашего ПК, нежели на простой фото-отчет.
Введение любых дополнительных элементов, даже с благими намерениями — было бы упущением.

Скрин-лист главной страницы на различных устройствах
КЛИК ДЛЯ УВЕЛИЧЕНИЯ

Внутренняя страница

Основная визуальная разница с главной страницей — это отсутствие видео-фона в «шапке».
Однако внутренние страницы имеют даже более сложное наполнение нежели главная и в гораздо большей степени «напичканы» скрытым функционалом, о котором пойдет речь в соответствующем разделе.
Большая часть контента — представляет из себя подробнейший разбор различных производственных схем, рассмотренных на примере уже осуществленной работы.

Скрин-лист внутренней страницы на различных устройствах
КЛИК ДЛЯ УВЕЛИЧЕНИЯ

Функционал

Это первый сайт, где мы полноценно реализовали touch-функции, поддерживающие не только условный «клик», но и возможность перетягивать пальцем различные элементы по типу слайдеров.

Сам сайт базируется на CMS WordPress, но исключительно ради возможности администрировать ресурс через административную панель. Все описанные ниже разработки — были созданы нами с нуля.

Добавление в избранное

Блок присутствует практически на всех изображениях.
Позволяет по нажатию на всплывающий символ «плюс» — добавить ту или иную картинку в подборку.

Кнопка «добавить»

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

Кнопки «скопировать» и «отправить»

Формирование клиентской базы

Обратная связь позволяет задать целый ряд вопросов заказчику, однако каждое обращение посетителя — будет заноситься в CSV файл по соответствующим категориям интересов. Это позволит сформировать или пополнить клиентскую базу посредством сайта и в будущем выполнять эффективные рекламные рассылки.

Отправка информации в файл

«Подгрузка» новой страницы

Функция реализована в разделе «опыт», представляющим из себя новостную ленту. В процессе чтения той или иной статьи — вы будете прокручивать страницу вниз. Дойдя до «подвала» вы увидите начало следующей страницы, с соответствующим индикатором загрузке.

Скрипт прекрасно совместим с WordPress, а именно с разделом «записи».
Его не нужно обновлять и дорабатывать при создании новой статьи. Обновления — будут вноситься в листинг автоматически.

Процесс раскрытия следующей страницы

Видео-галерея

На сайте так же присутствуют 2 галереи.
Не обладающая какими нибудь техническими особенностями фотохроника.
И страница для видеозаписей, реализованная в более креативном ключе.

По умолчанию мы имеем закрепленное видео в шапке, которое будет уменьшаться при прокручивании страницы вниз.
Это позволит продолжать просмотр, во время ознакомления со всей лентой.

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

Схема работы видео-скрипта

Рекламная замена H заголовков

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

Лучшим решением служит крупный заголовок, полностью повторяющий основной призыв объявления. Однако как в целях SEO, так и для более лаконичного вида всей страницы — порой невозможно выбрать между посетителем естественным и «покупным». Каждому выгодно показать свое.

Мы решили эту проблему, создав систему ссылочных приписок; их добавление в url — изменит любое содержимое страницы.
Но альтернативную версию увидит только перешедший по особенной ссылке. Ни обычный посетитель ни робот поисковой системы — не встретят никаких конфликтов, в случае последнего — это не полноценная страница с другим содержимым, а значит мы не получим непонятных копий или неправильных версий в поиске.

Более того — скрипт прекрасно совместим с UTM метками.

Схема замены содержимого

Мультиязычность

Введение опции выбора языков — не является для нас чем то новым. Это уже полностью отработанный процесс, не вызывающий казусов в поиске и в целом оптимально влияющий на органическое продвижение.
Мы в том числе — можем совместить модули перевода, альтернативных адресов страниц, и SEO надстроек — не вызвав при этом конфликтов.
Причем как в рамках движка, так и на отдельных страницах, заставляя это работать как единую систему.

Работа с GTM

Google Tag Manager — это система, позволяющая как упростить, так и сконцентрировать в себе все прочие подключения к другим сайтам.
Наша работа заключалась в создании ряда конверсий, отправляющего через GTM успешные действия в Google Ads, Яндекс Директ, Facebook, Mail ru и еще пару малоизвестных рекламных агрегаторов.

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

Web Architect