Сайт гостиницы 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.
Адаптивность
Сайт гостиницы City Inn прекрасно отображается на смартфонах, планшетах, ноутбуках и компьютерах. Чтобы добиться такого результата, нам пришлось постараться и решить парочку нетривиальных задач.
Например, мы столкнулись с проблемой некорректного отображения изображений в мобильном браузере 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 и настроили все поля админки на нескольких языках. Теперь переключаться между языками можно с помощью кнопок, поэтому контент-менеджер может заполнять сайт на украинском и английском языке всего в несколько кликов:
Результат
История о разработке сайта львовской гостиницы на Laravel + vue.js подошла к концу. Это не первый опыт сайтостроения в сфере гостеприимства, но не менее увлекательный: со своими вызовами и нестандартными решениями. В этом проекте мы миновали станцию «Дизайн» и принялись за реализацию интерактивного интерфейса и удобной кастомизированной админки по готовым макетам клиента. В результате сайт отеля получился шустрым, мультиязычным и адаптивным, причём мобильная версия нисколько не уступает десктопной в плане анимационных эффектов.
