Реалізація коректної верстки сайту за дизайном клієнта
Швидкодія, багатофункціональність і мультимовність сьогодні є показником гарного та дорогого сайту. Такі продукти краще сприймаються пошуковими роботами та відвідувачами — чи то сайт-візитка, чи то промо-сайт або інтернет-магазин.
Останнім часом, займаючи левову частку загального мережевого контенту серед мільйонів найбільших сайтів, платформа WordPress впевнено набирає вагу в своєму сегменті на ринку та стає найбільш уподобаною CMS у реалізації якісних продуктів.
Саме тому, коли до нас звернувся новий клієнт зі своїм макетом дизайну та попросив здійснити його коректну верстку, ми й запропонували йому реалізацію на платформі WordPress.
Про клієнта
Swiss Organic Partners стоїть біля витоків створення торгової марки Alpinols — органічних медичних і косметичних продуктів із каннабіноїдів. Уся продукція Alpinols на 100% виготовлена у Швейцарії з використанням екстрактів конопель із сертифікованої органічної сировини. Зокрема, відмінною особливістю КБД є те, що він не буває психоактивним за своєю природою та не має побічних ефектів. Ще однією перевагою каннабідіолу можна сміливо назвати його лікувальні властивості та косметичний ефект.
Компанія прагне наголосити на своєму фармацевтичному ноу-хау та інноваційних підходах у виробництві продукції, призначеної для онкології, захворювань центральної нервової системи та косметології.
Завдання
У клієнта вже був готовий унікальний дизайн у біло-зелених тонах, який ідеально підходив для своїх цілей — розповісти потенційним клієнтам про екологічність і безпеку їхньої продукції:
Нашим завданням було якісно зверстати наявний дизайн, реалізувати мультимовність, інтегрувати оплату карткою та реалізувати таку механіку, за якої можна робити замовлення як з реєстрацією, так і без неї. Крім цього, слід було забезпечити функціональність і швидкодію відповіді сайту.
Реалізація проєкту
Реалізація на WordPress
Як уже було згадано вище, сайт виконаний у натуральній кольоровій гамі, яка найбільш близька до відчуття екологічності та природнього походження продуктів Alpinols. Ми мали здійснити верстку, яка б логічно вписувалася в загальну концепцію клієнта.
Платформа WordPress дозволяє реалізувати дизайн будь-якої складності.
WordPress — це найпопулярніша система управління контентом (Content Management System) у світі. Ця CMS лежить в основі більш ніж 43% всіх сайтів в інтернеті, і це число постійно зростає. WordPress використовує PHP і MySQL, вони підтримуються практично всіма хостинг-провайдерами. Проте спеціальні тарифні плани хостингу для WordPress можуть значно покращити показники швидкості, продуктивності та надійності будь-якого сайту.
Отже, на виході ми отримали продукт з головною сторінкою, яка логічно проводить клієнта від загальної інформації про компанію до кінцевих продуктів, які компанія реалізує як оптом, так і в роздріб. Вгорі на головній сторінці розміщено ознайомлювальне відео, що демонструє основну діяльність компанії: дбайливе вирощування та відповідальний збір сировини, з якої згодом і виробляється вся продукція компанії.
Крім цього був використаний модуль WooCommerce, що ідеально підходить для створення інтернет-магазинів, які використовують такі елементи, як категорії товарів, картки товарів, кошик.
Блоки
Сайт був поділений на наступні логічні блоки:
- Інформація про продукцію Alpinols для гуртового та роздрібного продажу;
- Інформація про Alpinols;
- Інформація про виробництво екстракту конопель для виробництва власного продукту;
- Медична інформація про лікарський канабіс;
- Блок «Про нас»;
- Блок «Для клієнта»;
- Блок «Контакти».
Завдяки такому поділу клієнт зможе легко орієнтуватися на сайті та не гаяти часу в пошуках інформації.
Технічна реалізація
Мультимовність
Мультимовний сайт — це вебресурс, адаптований для користувачів із різних країн. Наявність якісно перекладених версій сайту говорить про високий рівень і цілеспрямованість компанії, її турботу про користувачів, а також дозволяє розповісти про свої переваги, технології, товари та послуги ширшій аудиторії.
В нашому випадку, окрім німецької, сайт був реалізований такими мовами: англійською, французькою, італійською, іспанською.
Ця функція була впроваджена за допомогою плагіна перемикання мов Polylang.
Polylang — це інструмент із відкритим вихідним кодом, що дозволяє швидко створювати багатомовні вебсайти на WordPress. Його відмінність від плагінів з некоректним автоматичним перекладом полягає в тому, що він дозволяє завантажувати свій власний коректний переклад потрібною мовою. Як показує наша практика, це приваблює ширше коло потенційних клієнтів на сайт завдяки тому, що мови перемикаються між собою просто та швидко, і при цьому весь текст залишається коректним та читабельним будь-якою мовою.
Інтегрована оплата карткою при оформленні замовлення
Ця інтеграція була реалізована за допомогою системи Saferpay.
Saferpay — швейцарська платіжна система, що надає послуги в галузі інтернет-процесингу та забезпечує прийом платежів за банківськими картками Visa, MasterCard і Diners Club International. Платіжний сервіс підтримує технологію 3D Secure.
Основною перевагою для клієнта є можливість розраховуватись у місцевій валюті завдяки динамічній конвертації валют і відсутність проблем з PCI, оскільки дані картки не зберігаються в магазині.
Також для більшої зручності клієнтів було реалізовано механіку оформлення замовлення з реєстрацією та без реєстрації на сайті.
Розробка блогу відгуків
Для розробки даного блоку був використаний плагін Strong Testimonials.
Завдяки Strong Testimonials можна легко організувати довільний зв’язок із відвідувачами, які зможуть легко поділитися своїми враженнями про товар і послуги інтернет-магазину.
З особливостей можна виділити:
- створення будь-яких полів — інструмент нагадує конструктор;
- зрозумілий інтерфейс;
- легка інтеграція шорткодами в сторінки блогу;
- створення віджетів;
- швидке оновлення інструмента.
Швидкодія
Традиційно сайти, особливо інтернет-магазини, зроблені на платформі WordPress з модулем WooCommerce, стикаються з проблемою швидкості завантаження. Оскільки часто це пов’язано саме з підходом у розробці продукту, ми зуміли досягти швидкодії вебресурсу за допомогою правильної верстки та оптимального використання всіх доступних інструментів.
У нашому випадку ми змогли домогтися того, щоб на десктопних пристроях сайт знаходився в зеленій зоні, а на мобільних пристроях забезпечував жовту зону швидкодії.
Результати
Після завершення робіт із версткою сайту за дизайном замовника ми отримали наступний результат:
- інтуїтивно зрозумілу логіку сайту;
- швидкодія та раціональність організації всіх блоків;
- клієнти отримали можливість оплачувати своє замовлення карткою;
- здійснено можливість оформлювати замовлення без реєстрації на сайті;
- мультимовність значно розширила клієнтську базу «Swiss Organic Partners».
Компанія Webnauts допомагає у здійсненні проєктів за будь-яким дизайном. Наші фахівці допоможуть зверстати, покращити та оптимізувати сайт за бажанням замовника.
Комментарии