От лендинга до интернет-магазина: что в России делают на Drupal

3 June

От лендинга до интернет-магазина: что в России делают на Drupal

Drupal входит в пятёрку самых популярных CMS с открытым исходным кодом в России. Хотя на первое место с большим отрывом вышла CMS Wordpress, для владельцев бизнеса предпочтительнее остаётся Drupal — и чем бизнес крупнее, тем более предпочтительной эта CMS должна быть.

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

ADCI Solutions занимается разработкой веб-сайтов уже 13 лет, а разработка и поддержка сайтов на Drupal — одно из наших направлений. Мы верим в эту CMS, и нам захотелось найти 10 отечественных Drupal-сайтов, которые бы доказывали, что на платформе можно создавать сайты для разных отраслей и разной сложности, будь то лендинг или интернет-магазин.

Параметры оценки

Основным источником сайтов стал каталог Рейтинга Рунета. В первую очередь сайты оценивались по скорости загрузки с десктопа и мобильного устройства и по пристойному внешнему виду.
Так из почти 4,5 тысяч сайтов удалось выбрать 10.

Мы знаем, что будущее за сайтами, которые открываются на телефонах быстрее чем за 3 секунды, но даже у популярных новостных ресурсов с этим не всё хорошо. Поэтому в случае некоторых сайтов мы пошли на компромисс. Для замера скорости загрузки использовались сервисы loading.express и PageSpeed Insights.

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

Вопрос о SEO в Drupal достоин отдельной статьи. Пока ограничимся общими словами о том, что Drupal-сайты не появляются с хорошим SEO сами по себе; качественная поисковая оптимизация зависит от того,
знает ли разработчик правильные модули и то, как их настраивать.

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

  • User — управление учетными записями пользователей.
  • Node — управление основным контентом страниц сайта.
  • Field и Field UI — управление полями.
  • Menu UI — управления меню.
  • Views и Views UI — создание списков, таблиц и блоков из существующего контента.
  • Taxonomy — упорядочивание контента по категориям.
  • Media — управление созданием, настройкой и отображением элементов медиа.
  • Responsive image — подстраивает размер изображения под разные экраны.
  • BigPipe — ускоряет загрузку страниц сайта.
  • Internal Dynamic Page Cache — кэширует страницы для пользователей.

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

Мы также считаем важным оценить:

  • простоту совершения целевого действия,
  • акценты на CTA-элементах,
  • среднее время на сайте.

Омский портал «Культура»

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

Скорость загрузки сайта на десктопе по PageSpeed Insights: 38/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 3/10.

Среднее время пребывания пользователя на сайте по данным alexa.com: 1 мин. 57 сек.

Сайт ставит перед собой цель привлекать внимание пользователей к событиям и культурным учреждениям города. Навигация привычная и простая. В слайдере на главной странице — 5 событий с CTA-кнопкой «Узнать подробнее», по мнению администраторов сайта заслуживающих максимального внимания. Ниже — блоки со статьями и новостями.
В разделе «Афиша» — рубрикатор и календарь. В «Местах» — исторические справки о музеях, театрах и т. д. В «Экскурсиях» — ознакомительная информация о всех экскурсионных маршрутах, длительности и стоимости.

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

От лендинга до интернет-магазина: что в России делают на Drupal

Здесь и далее мы кратко расскажем, на каких Drupal-модулях построены функциональные возможности сайта и решение отдельных задач вроде сбора метрик и интеграции с соцсетями. Модульная архитектура Drupal — то, что выделяет CMS и стоит в основе его универсальности.

На каких модулях можно построить сайт с такой же функциональностью:

Архитектурно-этнографический музей Вологодской области

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

Скорость загрузки сайта на десктопе по PageSpeed Insights: 90/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 9/10

Среднее продолжительность пребывания пользователя на сайте: 3 мин. 49 сек.

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

От лендинга до интернет-магазина: что в России делают на Drupal

На каких модулях можно построить сайт с такой же функциональностью:

Магазин «Винилотека»

Интернет-магазин российского представительства концерна звукозаписи Warner Music, что сулит надёжность, хороший сервис и своевременное пополнение каталога свежими релизами.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 78/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: нет данных.

Среднее время пользователя на сайте по данным alexa.com: 4 мин. 54 сек.

Очевидных задач у сайта две: продавать аудио и видеоносители и заботиться об их доставке покупателю. Плюс, что разработчики сайта учли разные сценарии поиска: по исполнителю, альбому, жанру, алфавиту или с помощью более тонких настроек. Ведь запросы могут отличаться от потребителя к потребителю и от момента к моменту: кто-то хочет найти новинку в хип-хопе, а кто-то хочет наверняка узнать, есть ли в магазине бокс-сеты с альбомами Led Zeppelin.

От лендинга до интернет-магазина: что в России делают на Drupal

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

От лендинга до интернет-магазина: что в России делают на Drupal

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

На каких модулях можно построить сайт с такой же функциональностью:

  • Каталог с сопутствующими ему фильтрацией и сортировкой: Taxonomy.
  • Оформление карточки товара, интеграции с платёжной системой, оформление доставки, управление заказами и корзиной: Commerce.
  • SEO: Metatag, Real-time SEO, Pathauto, Redirect, SEO Checklist.
  • Автоматическое построение карты сайта: XML Sitemap.

Сеть детских клиник «До 16-ти»

Сайт для сети омских детских клиник, над которым компания ADCI Solutions работает с 2016 года.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 87/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 7/10.

Среднее продолжительность пребывания пользователя на сайте по данным alexa.com: 3 мин. 49 сек.

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

От лендинга до интернет-магазина: что в России делают на Drupal

Подробнее о работе над сайтом читайте в нашей статье на vc.ru.

На каких модулях можно построить сайт с такой же функциональностью:

  • Оплаты услуг: Commerce и Commerce NoCart.
  • Подключение платёжного шлюза Сбербанка: Commerce RBS payment. Лично нам удалось получить актуальную версию модуля в ходе долгой переписки с техподдержкой банка.
  • Опросы: Poll.
  • Голосование (в нашем случае возможность поставить лайк одному из докторов): Fivestar.
  • Создание контактной формы: Webform.
  • Создания формы оплаты годового медобслуживания и формы пополнения баланса карты: Entityform.
  • Слайдер: Slick Carousel.
  • Создание и кастомизация стандартных админских страниц (управление контентом, управление пользователями): Administration Views.

Турфирма 7 СОВ

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

Скорость загрузки сайта на десктопе по PageSpeed Insights: 88/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 7/10.

Среднее время пребывания пользователя на сайте по данным alexa.com: 14 мин. 48 сек.

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

От лендинга до интернет-магазина: что в России делают на Drupal

Для тех, кто не уверен и ищет поддержки при выборе, введена функция «Запросить тур»: пять шагов, поддержка в виде уточняющих вопросов, и в финале пользователя просят оставить данные для связи.

От лендинга до интернет-магазина: что в России делают на Drupal

На каких модулях можно построить сайт с такой же функциональностью:

  • Фильтрация контента по таксономии и группировка результатов поиска по заданным параметрам: Views.
  • Оформление заказа: Commerce.
От лендинга до интернет-магазина: что в России делают на Drupal

Швейная компания Valentina. dresses

Valentina. dresses — новосибирская компания с почти 20-летней историей, занимающаяся пошивом и оптовой продажей женской одежды по всей России.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 76/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 5/10.

Среднее время пребывания пользователя на сайте по данным alexa.com: 8 мин. 55 сек.

Все разделы и функциональность, решающая задачу поиска, выбора и покупки одежды, собрана в шапке.

От лендинга до интернет-магазина: что в России делают на Drupal

Карточка товара полна полезных параметров, максимально покрывающих требования потребителей к одежде.

От лендинга до интернет-магазина: что в России делают на Drupal

На каких модулях можно построить сайт с такой же функциональностью:

  • Оформление карточки товара, интеграции с платёжной системой, оформление доставки, управление заказами и корзиной: Commerce.
  • Каталог: Taxonomy.

Строительный холдинг «Атомстройкомплекс»

Сайт крупнейшего на Урале строительного холдинга, объединяющего
12 заводов по производству материалов, проектный институт и организации-подрядчики.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 67/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 6/10.

Среднее время пребывания пользователя на сайте по данным alexa.com:
4 мин. 42 сек.

Задача сайта — помогать искать коммерческую и жилую недвижимость. Информации для этого на карточке объекта в избытке: от диапазона цен
и метража на превью карточки объекта до вида из окна — внутри карточки. Но становится привычным такой сценарий поиска, какой предлагает турфирма 7 СОВ: попав на сайт, пользователь сразу же видит необходимую функциональность. Если брать отрасль недвижимости, то хороший пример подаёт сайт
ДомКлик.

От лендинга до интернет-магазина: что в России делают на Drupal

На каких модулях можно построить сайт с такой же функциональностью:

  • Карточка объекта: Views.
  • Возможность отмечать точки на карте: Geolocation Views для Google Maps и Yandex Maps для Яндекс.Карт.
  • Контактная форма и форма заказа звонка: Webform.
  • Страница с опросами: Poll.

Кинопортал «Фильм.ру»

Один из самых популярных русскоязычных сайтов о кино, объединяющий его любителей, дающий возможность бесплатно смотреть фильмы из подборки сайта ivi.ru, читать рецензии, следить за новостями, знакомиться и общаться на почве общего интереса.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 86/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 5/10.

Среднее время пребывания пользователя на сайте по данным alexa.com:
1 мин. 25 сек.

Если вам понадобится пример веб-портала в классическом виде, то ссылайтесь на film.ru. Налицо стремление организовать комьюнити по конкретному интересу. Интерактивная составляющая решается за счёт общения в комментариях, агрегируемых в разделе «Мнения». Сам сайт не замкнут на себя и интегрирован с тематическими приложениями: ivi.ru и мобильным приложением Хочу в кино, Тиндером для киноманов, созданным film.ru вместе с российским филиалом журнала о кино Empire. Но с точки зрения особенных возможностей Drupal это вполне обычный контентный сайт.

На каких модулях можно построить сайт с такой же функциональностью:

Сайт, видимо, имеет интеграцию с приложением «Хочу в кино», потому что информацию по API приложения нигде найти не удалось. В контексте API считаем важным сказать, что Drupal включает в себя фреймворк Symfony, на котором реализованы основные концепции, спрятанные в ядре Drupal. Symfony позволяет быстро разрабатывать интеграции со сторонними API и выносить это в отдельные модули, что облегчает менеджмент зависимостей и не усложняет по экспоненте дальнейшую разработку.

От лендинга до интернет-магазина: что в России делают на Drupal

Конференция Ruby Russia 2019

Промо-страница прошлогоднего съезда Ruby-разработчиков.

Скорость загрузки сайта на десктопе по PageSpeed Insights: 92/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 7/10.

Среднее время пребывания пользователя на сайте по данным alexa.com: нет информации.

Сайт не преследует никаких целей, кроме как проинформировать о конференции, авторитетных спикерах и расписании. Это пример того,
как можно использовать Drupal в качестве основы для последующего заполнения контентом при создании простого сайта. Всё остальное делается JavaScript и CSS, и никаких особых модулей тут не используется. Drupal нужен был для быстрого старта, и вряд ли на сайт было потрачено больше 2-3 недель и привлечено для его разработки больше пары-тройки разработчиков.

От лендинга до интернет-магазина: что в России делают на Drupal

Торговый центр SILA VOLI

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

Скорость загрузки сайта на десктопе по PageSpeed Insights: 78/100.

Скорость загрузки сайта на мобильном устройстве по loading.express: 6/10.

Среднее время пребывания пользователя на сайте по данным alexa.com: 0 мин. 43 сек.

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

От лендинга до интернет-магазина: что в России делают на Drupal

Каталог магазинов и точек питания, скидочные предложения и календарь событий для красоты убраны в боковое меню (почему-то подписанное латиницей), и там же — если пользователь вообще пойдёт дальше предложений на главной странице — можно найти приглашения для сотрудничества ивент-мейкерам, арендаторам и рекламодателям. Чтобы судить, насколько хорошо сайт решает проблемы по их привлечению, нам не хватает доступа к метрикам, но сам факт того, что такая аудитория тоже предполагается, имеет место.

Общие рекомендации для сайтов

Мы показали вам несколько Drupal-сайтов, которые привлекли наше внимание скоростью загрузки, внешним видом и принадлежностью к разным отраслям. Но не стоит забывать, что время от времени нужно выявлять на сайте проблемы с помощью аудита.

В рамках статьи Как проводить аудит сайта мы составили чек-лист из параметров, на соответствие которым нужно проверять свой сайт. Каких-то из них мы уже коснулись в статье, о других хотим коротко упомянуть здесь:

  • Проставлены заголовки страниц, текстовые заголовки (H1-H6), оформлен нижний колонтитул и структурирован контент. Это помогает пользователю в навигации по странице.
  • Контент содержит заголовки, картинки, поддерживающие суть текста, и пробелы.
  • Есть хлебные крошки (навигационные цепочки) и ссылки в колонтитулах.
  • Дизайн соответствует бренду компании.
  • Сайт адаптивный: с ним просто работать как на стационарных ПК, так и на планшетах, телефонах и т. д.
  • Все визуальные элементы дизайна выполнены в одном стиле и сочетаются друг с другом.
  • Контент структурирован согласно обратной пирамиде Якоба Нильсена: главную информация — впереди, важные детали — за ней и дополнительная информация — в конце.
  • Никаких грамматических ошибок!
  • Никакого контента, отвлекающего посетителя сайта от CTA.
  • Используются метатеги Title, Description и Image.
  • Нет битых ссылок.
  • Страница не содержит ссылок на внешние ресурсы в самом начале, чтобы пользователи не уходили с сайта слишком рано.
  • В любом случае внешние ссылки лучше настроить так, чтобы они открывались в соседней вкладке, а внутренние — на той же.
  • Нижний колонтитул и основной текст не перегружены лишними ссылками.
  • Правильно настроены файлы, которые дают поисковым системам доступ к вашему сайту и позволяют им его индексировать: .htaccess, robots.txt, sitemap.xml.
  • Указаны ссылки на ваши аккаунты в соцсетях и мессенджеры.

Заключение

В США и Европе Drupal как платформа уже состоялась. Посмотрите на список сайтов, сделанных на Drupal, и вы увидите очень много знакомых имён и названий брендов: Илон Маск, Бруно Марс, Grammy, Warner Music Group, Tesla, Оксфорда, Кембриджа и другие.

В России популярность Drupal растёт. В данной статье мы хотели продемонстрировать, что эта CMS подойдёт для создания сайта с нуля и решения любых задач.

Если вы нашли в статье сайт для бизнеса, чем-то похожего на ваш, то, может быть, и вам нужен сайт на Drupal? Мы имеем статус первого в России премиум-партнёра ассоциации Drupal и знаем возможности этой платформы слишком хорошо. Пишите — поговорим об этом подробнее: hello@adcillc.com.

Подписывайтесь на наш блог в Яндекс Дзене, чтобы не пропустить новых статей, и следите за нами ВКонтакте, на Medium и в инстаграме.