Сайт готелю City Inn Lviv Smart
Про проєкт
Наш новий клієнт City Inn Lviv Smart являє собою сучасний готель із безліччю зручностей: безкоштовним паркуванням, конференц-залом, фітнес-центром і рестораном. Але без ефектного сайту. У зв’язці з дизайнерами, які працюють над проєктом, ми розробили швидкий, функціональний сайт із нестандартною анімацією та зручною системою управління.
Верстка, навігація та анімація
Якщо поглянути на дизайн, то ви побачите, що сайт рясніє великою кількістю зображень. Та юзаючи його, ви не помітите, що це якось позначається на швидкості. Все завдяки тому, що в розробці інтерфейсу ми використали реактивний JavaScript-фреймворк Vue 3 з рядом додаткових технологій:
- Vuex — для управління станом всіх компонентів сайту;
- Vue Router — для створення маршрутів додатка;
- Axios — для асинхронних запитів даних із серверної частини сайту;
- SwiperVue — для реалізації сенсорних слайдерів на сайті:
Прелоадер
Щоб сповістити про процес завантаження сайту користувачів пристроїв з повільним інтернетом, ми додали прелоадер — індикатор виконання, що рухається доти, доки весь контент не буде повністю завантажений для показу.
Головна сторінка
Перший екран
Яскрава фотообкладинка на весь дисплей, логотип, бургер-меню, СТА-кнопка, мовний перемикач, посилання на послуги та контакти компанії — все реалізовано в повній відповідності до мінімалістичного та стильного дизайнерського макета клієнта.
Трохи анімації від нашого фронтендера — і користувач отримує не лише гарну картинку, а й приємний досвід взаємодії із сайтом. А про це ми розповімо докладніше.
Кастомний скролбар
При натисканні на бургер-меню, а також при подальшому вертикальному прогортанні сайту ви напевно оціните плавний скрол і м’яку появу випадного меню. Такий ефект став можливим завдяки JavaScript-плагіну Smooth scrollbar:
Футер із нестандартною картою
Карта з локацією готелю реалізована в повній відповідності до дизайну клієнта за допомогою картографічного сервісу Google Maps API:
Додаткові сторінки
Для переходів між сторінками ми використали хукі Vue Router і реалізували ефект появи / зникнення, обернувши елементи сайту у Vue-компонент transition:
На сторінці Smart Offer ми реалізували залипальні 3D картки, що обертаються:
Також на прохання клієнта ми додали можливість перемикання слайдів за кліком на картинку в прямому та зворотному напрямку:
Кросбраузерність
Розробляючи сучасні інтерактивні сайти, ми обов’язково враховуємо його сумісність із різними браузерами: Google Chrome, Mozilla, Safari та ін.
Для коректного відображення сайту в застарілих браузерах, які не підтримують стандарт ECMAScript 6+, ми встановили пакет Babel. Це технологія, яка автоматично переробляє код JavaScript, написаний на нових версіях ECMAScript, у код, який «розуміють» старі браузери.
Для кросбраузерності сайту ми також використали Autoprefixer — постпроцесор для оптимальної обробки актуальних префіксів CSS. Ця технологія рекомендована Google та використовується такими компаніями-гігантами як Twitter і Alibaba.
Адаптивність
Сайт чудово відображається на смартфонах, планшетах, ноутбуках і комп’ютерах. Щоб досягти такого результату, нам довелося постаратися та вирішити декілька нетривіальних завдань.
Наприклад, ми зіткнулися з проблемою некоректного відображення зображень у мобільному браузері Safari на iPhone iOS 14. Адже починаючи з 14 версії яблучні смартфони підтримують формат зображень WebP, а більш застарілі версії не розпізнають ці файли як картинки.
Для вирішення цієї проблеми ми додали до проєкту пакет Detect.js, який легко визначає будь-яку версію браузера. І якщо це Safari Mobile 14-ї та більш ранньої версії iOS — картинки сайту будуть автоматично підвантажуватися в форматі JPG або PNG.
Зазвичай мобільна анімація відрізняється від десктопної через відсутність у смартфонах курсору, а значить і ховеру — ефекту наведення. Однак наш клієнт не хотів позбавляти мобільну версію сайту інтерактивності та поставив завдання анімувати всі слайдери нестандартним чином: тап або свайп картинки праворуч — текст їде ліворуч, і навпаки. Попри суттєві відмінності слайдерів у мобільній і десктопній версіях, ми привели логіку їхньої роботи до єдиного вигляду, що було дуже непросто. Але ми впоралися!
Функціональність
Ряснота зображень завжди позначається на швидкості завантаження сторінок. Ми оптимізували сайт із боку сервера за допомогою сучасного PHP-фреймворку Laravel, який працює за схемою MVC (Model — View — Controller). Ця система розділяє керування сайтом на 3 життєво важливі частини:
- Model (модель) відповідає за контакт системи з базою даних і формально описує кожну сутність інформаційної системи. Саме модель забезпечує контролер необхідною інформацією.
- View (вид) — це зовнішній вигляд сайту.
- Controller (контролер) — інструмент, який обробляє запити користувачів і формує необхідну їм відповідь або дію. Зазвичай контролер збирає необхідну інформацію, використовуючи моделі, а потім об’єднує зібраний набір даних із шаблоном вигляду. Всю цю конструкцію контролер надсилає користувачу, а той своєю чергою бачить сторінку сайту.
Адмінка сайту
За адміністративну панель ми обрали Laravel Nova, в якій можна легко та зручно керувати сайтом. Цей модуль дозволяє створювати обробники для контакту адміністративної панелі з моделями інформаційної системи, тобто надає клієнту зручні інструменти для створення, редагування та видалення контенту на сайті:
Для оптимізації роботи сайту доцільніше використовувати формат зображень .webp. Саме тому ми встановили та налаштували модуль Nova Media Field, який конвертує всі зображення на сайті в потрібний формат. Контент-менеджери оцінять, адже дана технологія робить процес управління сайтом ще зручнішим і приємнішим.
Мультимовність
Адміністративна панель сайту вийшла не тільки швидкою та зручною, але й мультимовною. Для цього ми встановили пакет Nova Translatable та налаштували всі поля адмінки кількома мовами. Тепер перемикатися між мовами можна за допомогою кнопок, тому контент-менеджер може заповнювати сайт українською та англійською мовою лише в декілька кліків:
Результат
Історія про створення сайту львівського готелю добігла кінця. Це не перший досвід сайтобудування в сфері гостинності, але не менш захопливий: зі своїми викликами та нестандартними рішеннями. В цьому проєкті ми обминули станцію «Дизайн» і взялися за реалізацію інтерактивного інтерфейсу та зручної кастомізованої адмінки за готовими макетами клієнта. В результаті сайт готелю вийшов спритним, мультимовним і адаптивним, причому мобільна версія анітрохи не поступається десктопній у плані анімаційних ефектів.
