Популярность CMS Drupal в России растёт. Компания ADCI Solutions выбрала 10 сайтов, которые доказывают на себе: с этой платформой можно сделать много интересного и под любые задачи. Среди примеров — портал для киноманов, магазин для меломанов, сайт для ценителей русской аутентичной культуры и многое другое.

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

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

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

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

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

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

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

Вопрос о поисковой оптимизации в 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 — то, что выделяет CMS и стоит в основе его универсальности.

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

• Слайдер: Slick Carousel.
• Календарь: Calendar, Fullcalendar View.
• Привязка событий к календарю: Views.
• Яндекс.Метрика: Yandex.Metrics.
• Управление размером текста: Text Resize.
• Исправление ошибок за разработчиком и приведение HTML-кода к соответствию стандартам (в том числе стандартам accessibility): HTML Purifier, Style Switcher.
• Другие модули, которые помогут сделать сайт по стандартам Accessibility: Contributed modules for extending accessibility in Drupal 8.

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

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

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

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

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

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

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

  • Слайдер: Slick Carousel, Flex Slider, SlidesJS.
  • Блок со ссылками на соцсети: Social Media Links Block and Field.
  • Фотогалерея: Colorbox.
  • Добавление и воспроизведение аудио: AudioField.
  • Добавление и воспроизведение видео: YouTube Field.

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

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

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

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

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

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

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

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

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

  • Каталог с сопутствующими ему фильтрацией и сортировкой: 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-элементы для достижения этих целей, подчеркнутые фирменными цветами клиники, собраны на первом экране главной страницы.

  

  Подробнее о работе над сайтом читайте в нашей статье на 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.

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

    

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

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

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

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

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

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

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

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

    

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

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

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

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

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

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

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

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

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

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

    Карточка объекта: 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 это вполне обычный контентный сайт.

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

    • Меню, в котором переиспользуется контент сайта: Megamenu, Simple Mega Menu.

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

    

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

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

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

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

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

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

    

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

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

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

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

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

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

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

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

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

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

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

    Заключение

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

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

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

    Источник: https://vc.ru/u/443770-adci-solutions/126904-ot-lendinga-do-internet-mag...