Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

Ця посада в жодному разі не претендує на об'єктивність, але тут є деякі здорові думки з приводу необхідності веб-слайдерів на сучасних веб-сайтах.

Чому слайдери – це відстій?

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Чому? Давайте я розповім:

1. Швидкість

Слайдери додають сайту вагу. Здебільшого це jQuery та код слайдера. Також більшість слайдерів завантажують багато зображень або іншої інформації, яка відображається всередині слайдера або на початковій сторінці під час завантаження. Так що, якщо у вас слайдер розміром 1000 на 600 px, і у вас буде крутитися 4 зображення, при завантаженні сторінки ви завантажуватимете 4 величезні зображення.

Краще це був якийсь важливий контент, інакше ви просто витрачаєте цінний час перед завантаженням вашої сторінки. Що відбувається, коли сторінка довго завантажується? Люди йдуть, не подивившись нічоготим більше ваш крутий слайдер.

Так що, якщо вам обов'язково потрібний слайдер, звертайте увагу на швидкість завантаження сайту.

2. Слайдери не підходять для дії

Коли я чую від клієнтів, що вони хочуть слайдера, вони зазвичай хочуть його з неправильної причини. Слайдери, на мою думку, цінні лише для демонстрації, з них немає користі для спонукання до дії.

Подумайте про те, як ви використовуєте Інтернет. Ви завантажуєте сторінку, дивіться, як слайдер прокручує одне зображення за іншим і чекаєте, щоб натиснути на те, що сподобалося найбільше? Думаю ні. Більшість із нас хоче швидко та негайно потрапити туди, куди потрібно.

Зі слайдера ви або повинні чекати, щоб подивитися, що буде далі, а потім перейти по потрібному URL, або переходити по слайдеру за допомогою керування і потім клацнути по потрібному URL. Це вимагає більше зусиль, і не думаю, що багато хто так робитиме.

3. Слайдери не для мобільних пристроїв

Ми приділяємо таку увагу заточенню наших сайтів під мобільних відвідувачів, але ми залишаємось прив'язаними до слайдерів. Чому? Слайдер уповільнить завантаження мобільних сайтів (тільки уявіть собі швидкість завантаження з 3G або ще гірше) і ще менш зручний для використання на телефоні.

Хороший слайдер, наприклад FlexSlider, підтримує проведення пальцем, але це ще не логічно для людини з телефоном. Прокручування - це так просто, чому не дати людям можливість просто прокрутити сторінку, щоб подивитися на важливий контент?

4. відволікання уваги

Я навіть не починатиму говорити про всі відволікаючі фактори, які я бачу в слайдерах. Ви бачили їх у комерційних темах. Великі тіні. Божевільні блоки, які закривають сторінку під час прокручування. Я просто плачу, коли це пишу.

Чому ми досі використовуємо слайдери?

Ну, тут є кілька причин:

  • Тому що це простий вихід із дизайнерської кризи.
  • Клієнти просять...
  • Ух ти, воно рухається!

Якщо вам дійсно потрібний слайдер

Чому слайдери – це відстій?

Якщо вам необхідно використовувати слайдер, використовуйте його для демонстрації, та краще НЕ на головній сторінці.

Чому?

Тому що вам потрібно, щоб головна сторінка вантажилася швидко. Реально швидко. Це подобається Google. Це подобається людям.

Згадане вище посилання на статтю про продуктивність слайдерів показує, що найкращий за продуктивністю слайдер може завантажуватися за пів секунди, але найповільніший завантажується майже за 5 секунд.

Відповідні приклади для використання слайдерів:

  • Відображення фотографій продуктів – багато зображень тієї самої речі.
  • Відображення галереї зображень для портфоліо. Та сама суть. Багато зображень у тій же концепції.
  • Демонстрація, демонстрація. Де перегляд слайдера кінцева мета, а не шлях до досягнення кінцевої мети.

Помітили закономірність? Кожен слайд повинен показувати щось, що є частиною загальної теми слайдера. Не потрібно на головній сторінці робити слайдер, де перше зображення буде банером події, наступний буде про послуги, а третій буде формою контактів. Це занадто. Дайте цим пунктам нерухомість, на яку вони заслуговують, не засовуйте їх у маленький блок, який крутиться.

Будь ласка, будь ласка, зробіть мені ласку: якщо ви наполягаєте на використанні слайдера, використовуйте тільки прості ефекти. І постарайтеся зробити навігацію за допомогою іконок та перегортання, щоб спростити переміщення. Говорити повинні зображення або вміст слайдера, а не скажені ефекти або надто оформлені блоки.

Слайдер на зображенні в самому верху цієї статті - гарний приклад хорошого слайдера. Я використовую швидкий скрипт, у слайдера є навігація через мініатюри та навігація за допомогою стрілок. І він відображає фото того самого місця, так що тема одна. Якщо вам потрібний слайдер, робіть його таким.

Також, якщо ви включаєте в слайдер заклик до дії, я рекомендую робити тільки один і робити його видимим на кожному слайді. У такому разі зображення слайдера все ще використовуються для демонстрації, але заклик до дії однаковий – користувачеві не потрібно шукати потрібний слайд, щоб перейти на наступний крок. Чим би не був ваш заклик до дії — формою, кліком, чи будь-чим, не робіть їх різними на кожному слайді. Якщо вам потрібні різні заклики до дії на кожному слайді, ще раз подумайте про доречність слайдера.

І ніколи, ніколи не робіть слайдер єдиним вмістом сторінки. Люди (та Google) люблять слова. Дайте їм слова та текст опису. Лише одного слайдера недостатньо.

Так що так...

Ви можете погодитись або не погодитися зі мною з приводу правильного використання слайдерів. Але я так багато побачив, що для того, щоб мене переконати, будуть потрібні дуже серйозні аргументи. У вас є такі? Напишіть коментарі.

Джерело: Кrogsgard.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 28

Дмитро:

Мабуть, у автора хронічні проблеми зі швидкістю в інтернеті.

Журавльов Андрій:

Ось конкретно про значення слайдера у мене тема сайту готель на годину. Клієнту кров із носа необхідно бачити що він знімає? за що платить гроші це Що? для нього найголовніше. Номери всі різні спеціально на будь-який смак. .І вихід тільки один швидкий слайдер швидкий мотор швидкий хостинг оптимізація і все це треба в одному флаконі .І біс слайдера ну ні як ну ні за які пряники…

Keks Editor:

Автор абсолютно правий, що стосується швидкості завантаження та кризи дизайнерства. Слайдер це як хв 2 -3 скрипта і 8 - 10 фото/зображень., тобто. більше 10 додаткових файлів для завантаження. Але проблему швидкості можна вирішити, якщо робити слайдери за допомогою CSS3 (transition properties). Залишається дочекатися, коли всі браузери це підтримуватимуть

Mihail Chumachkin:

На мене, так автору головне плюнути в колодязь, може відгукнеться.

Я вже роблю слайдери для нових браузерів без скриптів, наприклад http://w2buy.ru/ на CSS3

10 Фото -? Від 3 до 5 зазвичай.

Максимум треба завантажити 2 скрипти (один з них дефакто jQuery). Утиснути можна все в 1 файл.

Keks Editor:

На мою думку, слайдер без навігації — це найгірший варіант. І що користувачеві з ним робити? Найбільш зручний з погляду користувача - навігація табами. У такому випадку кількість картинок множиться на 2. Ось вам і буде 8 (як у прикладі на початку статті), якщо картинок 5, відповідно 10. Зайвий скрипт і 8-10 картинок - це теж істотно. Адже браузер більше 2 фалів одночасно не завантажує, правильно? (Тому у вашому прикладі можна зліпити кнопки соціальних мереж і логотипа в CSS спрайт) На робочому столі це може не так помітно користувачам (але не гугулу). А ось на мобільних пристроях це суттєво.

Крім того, часто дивлячись на слайдери в самому видимому місці сайту (як знову ж таки у вашому прикладі) виникає питання — а навіщо?

Слайдери вигадали щоб на одному місці можна було показати більше інформації. Їм додавали ефектів і зробили їх красивими. Так і забули про їхню початкову роль, і часто використовують просто «для краси». A viewport не гумовий :)

Mihail Chumachkin:

Насправді елементи керування можна створити за допомогою CSS3 (без картинок), що не призведе до збільшення обсягу картинок. Розмір картинок навігації мінімальний на відміну картинок в слайдері.

Я не зрозумів про навігацію у слайдері табами, поясніть.

Завантаження картинок слайдера можна організувати у різний спосіб. Від упаковки в один файл до завантаження в міру роботи. Потоків завантаження у сучасних браузерах більше 2. В останніх версіях у середньому 6.

Насправді слайдер робить свою роботу. Він показує на тому самому місці набагато більше інформації ніж статичний елемент сторінки.

Anima:

якщо ви під табами маєте на увазі превьюшки, то зараз не обов'язково кидати їх окремими картинками, подивіться на той же флекс-слайдер.

найбільш зручний? чим це? я люблю звичайну пагінацію. є ще кнопки «попередній»/«наступний». Їх можна стилізувати простим ЦС-ом, без використання зображень.

alex-j:

Мені здається, що ви просто читати не вмієте. 3-5 фото це зазвичай у вас. Ви дивіться лише зі своєї дзвіниці. Як без скриптів ви робите, якщо завантажуєте максимум два. Це теж скрипти або ви думаєте, 2 це не показник.

Mihail Chumachkin:

Скрипти потрібні лише для IE8-IE-9 браузерів. IE-10 вже добре розуміє CSS3 анімацію.
Ви про упаковку скриптів чули чи просто тут вигаляєтесь?
Чи може ви свої роботи покажете?

Anima:

Мені здається, ви сильно відстали від життя. 2-3 скрипти? Скрипт jQuery в облік взагалі можна не брати, оскільки він підключається у будь-якому випадку (не бачила сайтів абсолютно без скриптів). У результаті підключається один-єдиний скрипт слайдера, в залежності від функціоналу може бути досить легким.

8-10 картинок? Зазвичай 3 або 5. слайдери з 10 картинками зустрічаються дуже рідко. Щодо ваги — хто вам заважає оптимізувати картинки для слайдера? Маю зображення для слайдера важить до 100 кб. Це смішні цифри з огляду на сучасні швидкості інтернету. Повірте мені, картинка або свічення, що чіпляється на фоні, важить більше, ніж усі картинки слайдера разом узяті, але ніхто не обурюється, навіщо їх використовувати. Це так красиво? Красиво! Тому на швидкість завантаження сайту ми забиваємо. Ось і слайдер у багатьох випадках теж досить красиво, а якщо дизайнер з мізками, то ще й інформативно (іноді завдяки слайдеру бачиш інформацію, про існування якої на сайті навіть не здогадуєшся, адже не всі сайти складаються всього з 5-6 сторінок).

Швидкість завантаження сайту? Вибачте, будь ласка, ви в якому столітті живете? Не влаштовує швидкість – змініть провайдера, нині це не проблема. Я щось дуже сумніваюся, що люди, які щодня відвідують той же ютюб сильно страждають при завантаженні сайту зі слайдером. Навіть смішно стає.

Єдиний вагомий аргумент у статті – це мобільні пристрої. Мабуть це єдиний випадок, коли використовувати слайдер не доцільно. Решта суто суб'єктивно. Мені, наприклад, подобається красивий слайдер на головній з красивими ефектами. Набагато більше дратує реклама, розкидана скрізь, де тільки можна

Ігор:

З одного боку, автор переконує нас у тому, що слайдери «відстій», а з іншого — що їх треба використовувати за його (автора) умовами. І так, якщо у вас діалап і повільно вантажаться сайти - це Ваша проблема)

Костянтин:

У користувачів проблеми немає, вони без проблем піде до конкурентів з більш швидким сайтом, що не містить неюзабельних шматків самі знаєте чого (і я зі своїм мобільним Інтернетом буду одним з перших), а ось власники сайту відсотків 10-20 прибутку не дорахуються.

Владислав Безенсон:

Імхо, стаття — маячня

Dmitriy Ko:

У чомусь автор може бути й правий.

Наприклад. Я хочу показати користувачеві ланцюжок пов'язаних подій, спонукаючи його до дії на моєму сайті. Для цього роблю слайди –4 шт. Показую проблему, запитую, показую, як проблему можна вирішити, використовуючи мій сайт. 4 послідовні картинки з текстом дають уявлення про мій сервіс.

Нижче я докладніше показую інструменти, за допомогою яких можна вирішити завдання користувача. Інструменти виглядають у вигляді блоків іконок із текстом.

Між слайдером та блоками є місце для слогану. Такою комбінацією можна, на мою думку, ефективно розповісти користувачеві про корисність сайту.

Але, можуть бути такі мінуси:

-оптимізовані статичні картинки+текст завантажаться швидше

-у багатьох користувачів пробігти очима по 4-м картинкам з текстом може вийти швидше, ніж якщо я виокремлю той самий час на показ 4-х слайдерів, наприклад 2-3-4 секунди

-якщо текст незрозумілий, а слайдер вже змінився, потрібно знайти елементи керування та переглянути назад. Тут уже потрібно і їхній вид проектувати для 100% зручності. Після такого повернення відновлення перегляду ідея послідовно пов'язати сенс слайдів провалюється.

- Вказаний мінус в мобільних пристроях (як варіант, вирішується заміною блоку зі слайдами на блок зі звичайним текстом і картинками)

Слайдер заощаджує місце? Але може витратити час користувача, що часто важливіше.

syler_man:

Повністю підтримую автора. Оскільки слайдери в сучасному веб-дизайні, це поганий тон. Їх застосування не раціонально у 80% випадків.

Cat Martyn:

«Іх застосування» може і має бути раціональним. Просто відштовхуватись треба від специфіки ресурсу, який ви розробляєте. Природно, що не варто бездумно ліпити слайдер на кожен проект, що розробляється. Але є ресурси, в які слайдери добре вписуються. Mihail Chumachkin у своєму коментарі нагорі навів наочний приклад.

Sar Hov:

я взагалі думаю слайдери не потрібні, мені на приклад дратують слайдери

sAlex:

Так, подивіться сюди: (три слайдери в топі тижневих продажів для WP: https://1.envato.market/c/1308195/523002/4415?u=https://codecanyon.net/popular_item/ru_category?category=wordpress&ref =sAlex) і сюди (2 слайдери в топі всіх продажів для WP: https://1.envato.market/c/1308195/523002/4415?u=https://codecanyon.net/category/wordpress?utf8=% E2%9C%93&sort_by=sales_count&ref=sAlex&categories=wordpress )

Респект авторам, які вчасно зробили якісний «Відстій» і отримують по $4000 на тиждень;) Як девелопер для заходу скажу, що там про швидкість думають після картинки. Я до того, що стаття-оригінал із Америки

Марійка:

прохолодно

Mihail Lomonosov:

Слайдер – це зображення, це візуальний вплив на користувача. Медійний контент лише збільшуватиметься. Крім цього, у слайдерах можуть використовуватися не лише зображення, а й відео.
Також потрібно враховувати, що мобільний інтернет диктує свої правила для розмірів сайтів.
Слайдер - це розвиток тих медійних банерів і не болє, просто ув'язнений більш красиво і респектабельно.
Також конверсія по слайдерах вища.

Використання функціоналу залежить від завдань сайту.
Мало того, є секрет, що йде в розріз із принципами юзабіліті.
Секрет простий, але працює ефективно.
Принцип наступний - не намагатися зробити користувачеві максимально зручну навігацію та розташування контенту (знову ж таки, йдеться не про всі сайти)
Цим грішать брендові та новинні сайти.

Ось кілька «незручностей», які змушені терпіти користувачі, котрі «присіли» на ресурс. Часто це соцмережі
1. Відсутність якорів за текстом.

2. Порожній підвал

3. Сторінка підтвердження переходу за зовнішнім посиланням.

Що дає:

1. Збільшення часу перебування на сторінці x на сайті. Важливо для інформаційних сайтів, які розміщують рекламу на показах. Також вартість розміщення зростає.

2. Підвищення конвертації переходу по рекламі або брендингу (користувачі змушені скролінгом прокручувати сторінки)

3. Кількість переглянутих сторінок. Так на сторінці переходу на зовнішнє посилання, розміщена реклама буде переглядатися частіше, отже конверсія або брендинг.

4. Використання кодів оформлення коментарів. а не панель форматування. Користувач поки що пише або копі-пастит коди в комент, також збільшує його перебування на сторінці.

Антонов Ігор:

1. Швидкість. Можна спробувати застосувати аякс, робити попереднє кешування графіки. Методи оптимізації тут є. А взагалі, на всіх не догодиш. Скаржитися тут на швидкість - це все одно що робити сайт з підтримкою IE6, що на мій погляд не має сенсу. Потрібно орієнтуватися на більшість. Якщо користувач все ще на дайл-апі, то сам дурень.

2. Дія. Слайдер – це не лише статична картинка. Повно прикладів комбінацій тексту (з посиланнями) + картинка або відеоролик. У сучасних слайдерпх гнучко налаштовується навігація по них - можна в один клік перейти на потрібний.

3. Моб. пристрої. Ніщо не заважає розпізнати пристрій відтворення у користувача і для таких задіяти спеціальний CSS або шаблон верстки, або взагалі без слайдера. Вирішення тут можна придумати, якщо потрібно рівняння на мобільних користувачів. Але ж це окрема пісня.

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

Вважаю, що автор сильно принизив роль і значення компонента, що обговорюється. Можливо, йому траплялися невдалі реалізації та застосування (я те саме не люблю, коли якась картинка закриває підлогу екрану).

Олена:

Підкажіть новачкові, що робити, якщо весь сайт присвячений художній творчості, тобто. насправді це суцільне розглядання картинок (і замовник хоче мати слайдери)

WPcafe.org:

Бажання замовника – понад усе. До художньої творчості якраз чудово підходять слайдери! Ось, наприклад, чудова безкоштовна тема з дуже крутим слайдером: http://themes.wpbusinessbundle.com/digifoto/

Анна:

Панове професіонали!
Допоможіть початківцю адміну сайту з вибором слайдера.
Потрібен стильний контент-слайдер для демонстрації 4-7 фото картин (сайт присвячений творчості) з можливістю переходу на сторінку з зображенням. На головній сторінці шапки вже є слайдер, передбачений платною темою WP. Можливо, варто продублювати його на всі сторінки, щоб не навантажувати сайт, але як?де і що треба дописати?дякую!

Сережка:

Норм статті. Одна порада: не пиши слово "інтернет" з великої літери і все буде заебись.

WPcafe.org:

Ок, Серьожко!

Дмитро Чирков:

Мені здається, що якщо головна сторінка для чогось і потрібна, то це для передачі ваги. Тобто якщо кудись і вставляти слайдер, то тільки на головну, і хай там бовтається.
А ось на другі сторінки, де є реальна інформація, його справді ставити не треба.

ostap.javabit.ru:

1 У плані конверсії слайдер, звичайно, де це не те що потрібно. Але щодо захоплення уваги, це непогана річ. 2 Як уже зазначали практично не буває сайтів без підключених яваскрипт бібліотек 3 тут швидше не криза дизайнера, а криза контент менеджера, не здатного виділити важливе, і простий картинки, що ліпить на відмазку. Грамотно складайте тз, гвалтуйте клієнта щоб він сформулював те, що вам потрібно і буде вам щастя

Додати коментар або відгук