1. Описание.

Alekseev-Center.RU – сайт спортивно-оздоровительного комплекса. Был создан с учетом требований заказчика. А именно, размер логотипа, цветовая гамма, размер логотипа (в первом экране) – были определены заказчиком. В скором времени после создания сайта заказчик решил переделать сайт, наняв других специалистов. Но а мы посмотрим, что получилось у нас...

2. Функционал.

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

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

Так выглядит «первый» экран этого одностраничного сайта:

Alekseev-Center.RU

Мы использовали следующие технологии и функционал:

  • history.pushstate – это позволяет менять адресную строку браузера, чтобы пользователь, переходя по пунктам меню, мог поделиться ссылкой с другими. При этом, переходя по данной ссылке, новый пользователь попадал бы именно к нужному пункту меню. Например перейдите по ссылке:
    http://dev.inverser.pro/alx/#menu5
    также это позволило создать псевдо-многостраничный сайт. Когда пользователь нажимает по пунктам меню, то у него появляется возможность возвращаться назад и переходить вперед по истории браузера. Для примера, Вы можете перейти на сайт (ссылка выше) нажать на «Меню», затем нажать один пункт меню, другой, после чего в Вашем браузере (если он поддерживает эту технологию), появится возможность нажать кнопку «назад» или «вперед».
    Детальнее об этом можно увидеть в видео ниже.
  • HTTPS-соединение. Мы использовали TLS сертификат проверки подлинности доменного имени для того, чтобы поисковые системы более лояльно относились к сайту. Также данная технология дает зеленую подсветку в адресной строке браузера, информируя пользователя, что соединение идет по защищенному каналу и данные перехватить не удастся (если это захотят сделать злоумышленники). Также это дает преимущество при покупке трафика.
  • Изображения подгружаются только после полной загрузки страницы. Это сделано для ускорения загрузки страниц. Т.е. данный сайт будет работать даже на низкоскоростном интернет-соединении.
  • Мы НЕ использовали CMS, что дало возможность сократить время отклика сайта до минимума (50~60 с), а также облегчить сайт до минимума.
  • Эффекты при прокручивании страницы. При прокручивании, Вы можете заметить, как появляется кнопка «Вверх» на верхней полосе, а также исчезает с красивым эффектом большая галочка после «первого» экрана.
    Также счетчик обратного отсчета оставшихся курсов активируется, когда к нему долистали страницу.
  • Использование технологий, позволяющих отображать сайт корректно как для всех современных интернет-обозревателей, так и для уже устаревших и давно не поддерживаемых их же разработчиками браузеров. Это касается как ПК-браузеров, так и планшетно-мобильных.
  • Использование flex-стилей – это не только удобно для создателя сайта, но и красиво для пользователя.
  • Изначально мы создали разметку такой, чтобы затем её можно было легко адаптировать для различных разрешений экранов (мобильных и планшетов).
  • SVG-изображение логотипа, встроенное в CSS файл сайта.
  • Оригинальные эффекты анимации и эффекты при наведении указателя мыши на объект.
  • Исходный код сайта чист, не имеет JS или CSS кода вне соответствующих файлов.
  • Все изображения максимально адаптированы для WEB.
  • Карта внизу сайта подключается через Google Map API, что позволило стилизовать её под внешний вид сайта, а также настроить так, чтобы сайт в целом можно было удобно и понятно использовать.
  • Страница может быть прочитана даже людьми с плохим зрением. Для этого мы сделали соответствующий функционал и вывели кнопку переключения вида сайта на верхнюю панель.
  • Сайт проходит проверку на https://validator.w3.org

3. Видео представление.

4. Снимки и стиль.

Alekseev-Center.RU

Alekseev-Center.RU

Alekseev-Center.RU

Alekseev-Center.RU

Alekseev-Center.RU

Alekseev-Center.RU

Вид сайта на мобильном:

Alekseev-Center.RU

Alekseev-Center.RU

Alekseev-Center.RU


Добавить отзыв

Отзывов пока нет