Услуги

  • Сайты
  • Контент
  • Продвижение
  • Битрикс24
  • Приложения
Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Сайт гостиницы City Inn Lviv Smart

О проекте

Наш новый клиент City Inn Lviv Smart представляет собой современный отель с уймой удобств: бесплатной парковкой, конференц-залом, фитнес-центром и рестораном. Но без эффектного сайта. В связке с дизайнерами, работающими над проектом, мы разработали быстрый, функциональный сайт гостиницы с нестандартной анимацией и удобной системой управления.

Вёрстка, навигация и анимация

Если взглянуть на дизайн, то вы увидите, что сайт изобилует большим количеством изображений. Но юзая его, вы не заметите, что это как-то сказывается на скорости. Всё благодаря тому, что в разработке интерфейса мы использовали реактивный JavaScript-фреймворк Vue 3 с рядом дополнительных технологий:

  • Vuex — для управления состоянием всех компонентов сайта;
  • Vue Router — для создания маршрутов приложения;
  • Axios — для асинхронных запросов данных с серверной части сайта;
  • SwiperVue — для реализации сенсорных слайдеров на сайте:
Banner

Прелоадер

Чтобы уведомить о процессе загрузки сайта пользователей устройств с медленным интернетом, мы добавили прелоадер — индикатор выполнения, движущийся до тех пор, пока весь контент не будет полностью загружен для показа.

Главная страница

Первый экран

Яркая фотообложка на весь дисплей, логотип, бургер-меню, СТА-кнопка, языковой переключатель, ссылка на услуги и контакты компании — всё реализовано в полном соответствии с минималистичным и стильным дизайнерским макетом клиента.

Немного анимации от нашего фронтендера — и пользователь получает не только красивую картинку, но и приятный опыт взаимодействия с сайтом. А об этом мы расскажем более подробно.

Кастомный скроллбар

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

Banner

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

Функциональность

Изобилие изображений всегда сказывается на скорости загрузки страниц. Мы оптимизировали сайт со стороны сервера с помощью современного PHP-фреймворка Laravel, работающий по схеме MVC (Model – View – Controller). Эта система разделяет управление сайтом на 3 жизненно важные части:

  • Model (модель) отвечает за контакт системы с базой данных и формально описывает каждую сущность информационной системы. Именно модель обеспечивает контроллер необходимой информацией.
  • View (вид) — это внешний вид сайта.
  • Controller (контроллер) — инструмент, который обрабатывает запросы пользователей и формирует необходимый для них ответ или действие. Обычно контроллер собирает необходимую информацию, используя модели, а затем объединяет собранный набор данных с шаблоном вида. Всю эту конструкцию контроллер присылает пользователю, а тот, в свою очередь, видит страницу сайта.

Админка сайта

В качестве административной панели мы выбрали Laravel Nova, в которой можно легко и удобно управлять сайтом. Этот модуль позволяет создавать обработчики для контакта административной панели с моделями информационной системы, то есть предоставляет нашему клиенту удобные инструменты для создания, редактирования и удаления контента на сайте:

Для оптимизации работы сайта целесообразнее использовать формат изображений .webp. Именно поэтому мы установили и настроили модуль Nova Media Field, конвертирующий все изображения на сайте в нужный формат. Контент-менеджеры оценят, ведь данная технология делает процесс управления сайтом ещё более удобным и приятным.

Мультиязычность

Административная панель сайта получилась не только быстрой и удобной, но и мультиязычной. Для этого мы установили пакет Nova Translatable и настроили все поля админки на нескольких языках. Теперь переключаться между языками можно с помощью кнопок, поэтому контент-менеджер может заполнять сайт на украинском и английском языке всего в несколько кликов:

Результат

История о разработке сайта львовской гостиницы на Laravel + vue.js подошла к концу. Это не первый опыт сайтостроения в сфере гостеприимства, но не менее увлекательный: со своими вызовами и нестандартными решениями. В этом проекте мы миновали станцию «Дизайн» и принялись за реализацию интерактивного интерфейса и удобной кастомизированной админки по готовым макетам клиента. В результате сайт отеля получился шустрым, мультиязычным и адаптивным, причём мобильная версия нисколько не уступает десктопной в плане анимационных эффектов.

Комментарии

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии

Ищете профессиональную IT-команду для разработки стильного, удобного и эффективного сайта?

200 выполненных веб-проектов за 8 лет работы говорят сами за себя. Расскажите нам о своём бизнесе, и вы получите современный и технологичный сайт на зависть вашим конкурентам.

Над проектом работали

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x