Как не испортить сайт слайдером?

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

Как правило, самые большие неприятности видны на главных страницах, и это не удивительно. Большинство ссылок ведут на главную страницу сайта, поэтому она должна выглядеть безупречно. Дело в том, что у 75% пользователей первое впечатление о бизнесе складывается на основе дизайна главной страницы.

Вот несколько ошибок при работе с слайдами, которые можно видеть на разных сайтах:

·         Медленная презентация

Слайдер может существенно повлиять на скорость загрузки веб-сайтов, а это, безусловно, важно в создании профессионального бизнеса и работе с большой аудиторией. Как это работает? Все слайды, карусели и другие визуальные эффекты построены на базе скрпипта jQuery. Таким образом, скрипт загружает все изображения одновременно. Вы не можете видеть никакой разницы, используя небольшие размеры изображения, но когда у вас есть полноэкранный слайдер, страница будет загружаться гораздо медленнее, в результате огромный процент ваших посетителей просто покинет сайт прежде, чем дождется полной загрузки.

·         Отсутствие SEO или плохой переход

Медленная скорость загрузки - только одна сторона проблемы, поскольку это может привести к серьезным исходам для поисковой оптимизации. На самом деле медленная скорость приводит к скачкам, которые приводят к низким рейтингам в поисковых системах и плохому переходу. К тому же содержание всех изображений без текстов не попадает в статистику поисковых систем. Если использовалось несколько тегов H1 в заголовках слайдов - это тоже плохо для индексации в поисковых системах.

·         Плохое качество на мобильных устройствах

Следует отметить, что слайдеры «не дружат» с мобильными устройствами. Только представьте, как слайды будут показаны на смартфонах и планшетах со связью 3G, если проблемы возникают на первом экране устройства с хорошим подключением к интернету. К тому же из-за небольших размеров они будут неэффективны, поскольку пользователи просто не смогут увидеть, что там изображено.

·         Потеря концентрации

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

***

Какой же выход?

Есть много альтернатив слайдерам, которые не будут влиять на рейтинги скорости загрузки и SEO страницы. Итак, давайте рассмотрим их и почему они лучше.

Макеты Hero

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

Изображения Hero на самом деле помогают вам показать реальное содержание, которое будет высоко оцениваться поисковыми системами.

·         Статичность

Как вы уже знаете большинство проблем, связанных со слайдерами, происходит от времени медленной загрузки. Изображения Hero статичны, поэтому они просто не имеют такой проблемы. Не потребуется jQuery скриптов или длинных строк кода CSS. Таким образом, легче синхронизировать содержимое сайта. В дополнение к этому статическое изображение является более информативным и делает интернет-ресурс более легким для посетителей, позволяет им сосредоточиться на содержании, независимо от типа экрана – настольный компьютер или смартфон.

·         Последовательность

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

·         Лучшее SEO

Довольно часто слайды включают в себя несколько тегов H1. С точки зрения кодирования HTML, нет ничего плохого в виде содержания внутри этого тега, но когда дело доходит до SEO, все немного иначе. Заголовки H1 рассматриваются в Google в качестве ключевого слова рассылки спама и это противоположно тому, что вам нужно. Таким образом, настоятельно рекомендуется использовать только один H1 тег на странице. Изображения Hero построены на том же правиле, поэтому поисковые системы будут ранжировать их должным образом, что приводит к увеличению трафика.

·         Гибкая настройка

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

Призыв к действию

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

Посмотрите на squareup сайт. Все выглядит четким и структурированным.

Формы регистрации

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

Zoho сделал простую полноэкранную домашнюю страницу с короткой формой регистрации. В результате пользователи получают возможность сосредоточиться на предлагаемой услуге намного легче.

Видео

Вы можете сказать, что видео похожи на слайдеры и нет никакого смысла в их использования. Что ж, это утверждение абсолютно неверное, так как видео конвертируется гораздо лучше, чем слайдеры. На самом деле, 70 из 100 результатов поиска включают в себя видео. До 85% пользователям нравится покупать товары после быстрого просмотра видео. Слайдеры просто не дают такую ​​информацию, как видео, которые дают четкое представление о продукте с демонстрацией и описанием всех функций.

Subhub фактически объединил две идеи на своем сайте. Он предлагает нажать на кнопку и видео дает пользователям четкое представление о том, какие услуги компания предоставляет.

***

Слайдеры полностью бесполезны?

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

Сделай это просто

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

Creativeblog разработал свой слайдер довольно интересно. Они сделали его маленьким и наполненным продуктами со скидкой. Таким образом посетители видят все горячие предложения прямо вверху.

Переместить вниз

Перемещение слайдеров вниз от верхней части сайта. Они должны работать в качестве подсказки для пользователей, которые ищут возможность получения дополнительной информации и лучше поместить их в середине или в нижней части страницы.

Вот это крутое решение от wpmudev. Слайдер оснащен только тремя деталями с изображениями в мультипликационном стиле и характеристиками.

Автопрокрутка

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

Как видите, builtbybuffalo предлагает точно такой же вид слайдеров. Пользователи не отвлекаются на движущиеся слайды и могут изменить их всякий раз, когда им нужно.

***

Когда нужно использовать Слайдеры?

Есть еще несколько случаев, когда слайдеры имеют важное значение и могут сделать ваш сайт более удобным и информативным. Бывают такие ситуации, когда слайдеры работают на благо проекта и довольно трудно найти им альтернативу.

Интернет-магазины

Когда вам нужно, продемонстрировать товары различных размеров. Например, вы продаете какую-то обувь, платья, рубашки или что-то другое, и вы должны показать, как они выглядят сзади, сверху и т.д. Для этого вам необходимо будет в среднем около 3-5 изображений продукта. Теперь представьте себе, как это будет выглядеть на сайте, если не прятать их внутри слайдера.

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

Портфолио

Онлайн-портфолио имеют решающее значение для дизайнеров, фотографов и разработчиков-фрилансеров. Здесь слайдеры могут также пригодиться. Они позволяют работодателям перемещаться между работами с помощью нажатия одной кнопки и смотреть работы в высоком разрешении. Тем не менее по-прежнему не рекомендуется интегрировать автопрокрутку в слайдер.

Посмотрите на онлайн-портфолио от thebeastisback. Благодаря встроенному слайдеру посетители могут просмотреть все работы, нажав на соответствующую кнопку навигации.

Просмотр предложения

Это исключение, когда слайдеры могут быть использованы в разделе заголовка. Он может работать в качестве инструмента для показа лучших предложений от вашей компании. Тем не менее, существует несколько строгих правил о том, как использовать его правильно. Прежде всего, необходимо ограничить количество слайдов до 2 или 3. Это число основано на исследовании от yorkwebteam, которая говорит, что первые 3 слайда получают максимальную конверсию. Далее вам необходимо исключить автоматическое вращение и добавить кнопку навигации. Что касается содержания, необходимо включить предложение с продающим заголовком, изображение продукта, несколько основных функций.

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

***

Как избежать основных проблем со слайдером?

Итак, если вы просто не можете отказаться от идеи слайдера, вот несколько советов о том, как сделать его работу более плавной и не влиять на SEO.

Оптимизация скорости загрузки

Чтобы сделать слайдер загрузку быстрее, вам нужно сделать его настолько легким, насколько это возможно. Это может быть сделано через какой-то простой сценарий. Если вы знакомы с jQuery, вы должны удалить все лишние строки кода, которые не будут использоваться в вашем проекте.

Кроме того, рекомендуется использовать минимизированную версию библиотеки Jquery, которая в два раза легче, чем обычная версия. Использование jQuery с CDN также может быть отличным способом, чтобы сделать загрузку сайта быстрее. Например, вы можете использовать библиотеку из code.jquery.com.

SEO

Попробуйте интегрировать глубокую связь со слайдером. Таким образом URL-адреса будут изменены автоматически как отбор слайдов. Параметр Alt для изображений и ключевые фразы являются также обязательными для заполнения. Как вариант, можно использовать какой-то премиум плагин, например, mightyslider, который создан в соответствии с рекомендациями SEO.

Улучшенная производительность на мобильных устройствах

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

Лучший Фокус

Как уже было сказано выше, лучше ограничить количество слайдов до 2-3 и исключить функцию автоматической прокрутки. Таким образом, пользователи смогут перейти к следующему слайду, когда им нужно. Таким образом, они смогут сосредоточиться на конкретном продукте и принять правильное решение.

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