Иллюстрации: Артём Морозов

Современные сайты часто ухитряются удивительным образом совместить в себе информационную насыщенность и минималистичное оформление. Это, с одной стороны, — следствие технического прогресса, который не обходит стороной и интернет, а с другой — просто адаптация современного веб-дизайна к современным интернет-пользователям. Уже давно прошли те времена, когда пользователи искали сайты с максимальным количеством текстовой информации. Сегодня от больших текстовых конструкций они бегут как чёрт от ладана.

Одним из самых верных и крутых союзников веб-дизайнера стали слайдеры. Кому-то может показаться, что слайдер — просто необязательное украшательство. Но при толковом подходе со стороны веб-разработчика, слайдер может и в самом деле сослужить очень хорошую службу вашему ресурсу. А теперь — поподробнее.

Что такое слайдер?

Слайдер — это блок, как правило, фиксированной ширины, в котором по щелчку либо по прошествии времени меняется содержание. Проще говоря, примитивный слайдер выглядит так:

Простейший слайдер

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

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

  1. SlideDeck: Один из самых функциональных слайдеров, буквально — комбайн, позволяющий воплотить самые сокровенные фантазии в невообразимых комбинациях. Минус, вполне ожидаемый, — платная основа.

    SlideDeck

  2. NivoSlider: Достаточно хорошо известный слайдер c набором разнообразных переходов между слайдами. jQuery-версия распространяется бесплатно. Минус — работает только с изображениями.

    NivoSlider

  3. Supersized: Еще один довольно популярный слайдер изображений. Особенность — создание полноэкранных слайдшоу, позволяет масштабировать изображения по размеру экрана.

    Supersized

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

Устройство слайдера

Слайдер обыкновенный обычно состоит из:

  1. Экрана слайдера
  2. Стрелок «вперед» / «назад»
  3. Маркеров, обозначающих текущий слайд и общее количество слайдов
Устройство слайдера

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

Классический слайдер производит смену слайда периодически через заданный интервал времени.

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

  1. Миниатюры других слайдов
  2. Таймер (показывает время до смены слайда)
  3. Паузу при наведении

Расширять функции слайдера можно сколько угодно! А порой не лишним будет, наоборот, от каких-то функций отказаться. Например, автоматическая смена слайдов часто не нужна.

Преимущества использования слайдера

Едва ли не основной причиной, почему стоит использовать слайдер на вашем сайте, является поведение современного интернет-пользователя. Его на самом деле отпугивают веб-сайты, где на него вываливаются простыни текста или описаний. Он стремится получить максимум полезной информации за минимум времени. И если сайт не удовлетворяет эту потребность посетителя, он попросту уйдёт на другой ресурс. То есть, пользователь предпочитает видеть на вашем сайте (по крайней мере, на его стартовой странице) минимум текста.

С другой стороны, многие компании просто не могут обойтись 2-3 строчками в описании своей компании. Например, не так давно мы уже писали о сайте юридической фирмы А2К. Эта компания работает одновременно в очень многих сферах — и с физическими лицами, и с юридическими, и с нерезидентами. Всё это — отдельные направления деятельности, и все они важны, и о каждом нужно что-то написать.

Кроме того, любой SEO-специалист подтвердит, что на главной странице текст необходим, причем текст, включающий в себя основные ключевые слова. Это важно для последующего продвижения сайтов.

В общем, выходит, что пользователи хотят видеть вот такой сайт:

Идеальный сайт для пользователей

А владельцы сайта и SEO-оптимизаторы предпочли бы увидеть что-то в духе:

Идеальный сайт для SEO

Налицо конфликт интересов.

В случае с сайтом А2К мы прекраснейшим образом разрешили этот конфликт благодаря использованию слайдера! Мы разнесли информацию о компании по разным вкладкам слайдера, и это позволило нам вместить все эти экраны в один блок:

Слайдер на сайте A2K

Благодаря этому, нам удалось:

  1. Уместить всю ключевую информацию о компании в один экран.
  2. Соблюсти правила SEO-оптимизации.
  3. Удовлетворить пожелание клиентов видеть на заглавной странице все эти данные.

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

Подключив немного выдумки, можно на основе слайдера даже создать небольшой сайт.

Например, на этом принципе основан презентационный сайт компании Panama Grand Prix:

Слайдер в обличии сайта Слайдер в обличии сайта

Эффекты в слайдере

На этом хорошие новости не заканчиваются!

С развитием CSS3 в руки к веб-дизайнерам попал целый чемоданчик с фокусами. Теперь слайдер может не только брать на себя роль мини-презентации. Он может при этом ещё и выглядеть чертовски круто! Во-первых, свойства анимации позволяют всячески оживлять появление каждого нового слайда. Во-вторых, добавив в слайд многоплановость, мы можем сделать его ещё более зрелищным.

Слайдер на сайте Humaan Слайдер на сайте креативного агентства Humaan
Слайдер на сайте Tympanus Слайдер с эффектом параллакса с сайта Tympanus.net

Ну а в-третьих, что немаловажно, магия CSS3 и HTML5 позволяет создать собственный слайдер без использования java-script! Ну, почти :)

Важная мелочь

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

Эта мелочь имеет на самом деле очень большое значение. Ведь добиться компактного вида можно было и без всяких анимаций. Щелкай себе на кнопку «следующий», а слайды будут себе меняться. Но нет. Слайдеры обязательно содержали в себе анимацию, динамику. И эта динамика играет в современном дизайне очень важную роль, которая, я уверен, будет со временем только расти.