9 Важливих правил для адаптивних галерей зображень
Відео: Адаптивна верстка # 2 | адаптивні зображення
Адаптивний дизайн є найважливішою і необхідною частиною веб-розробки. Однак однією з найбільших проблем чуйного веб-дизайну останнім часом стали зображення. Багато сперечаються про кращий спосіб відображення зображень на адаптивному сайті. І потім, як щодо фотогалерей?
Фотогалереї відрізняються більшою складністю, ніж поодинокі зображення. До того ж існує безліч змінних і інших чинників, які необхідно враховувати при реалізації адаптивної галереї зображень на вашому сайті. Давайте поглянемо на деякі корисні поради по створенню чуйною фотогалереї правильним чином.
1) Слайд-шоу: сховайте навігацію, коли це можливо
Ви можете не мати елементи навігації на планшеті або мобільному пристрої, а на столі, і це гарна ідея, щоб приховати ці деталі, поки вони не потрібні. Такі елементи як стрілки вперед і назад або навігаційні точки повинен бути встановлені на дисплеї і відображатися лише під час ковзання мишкою по галереї. Це дозволить уникнути відволікаючих чинників, а також допоможе конфліктів між контентом і елементами навігації. В цьому випадку весь досвід здасться менш безладним.
2) Уникайте вертикальних зображень
Якщо ви реалізуєте галерею, яка представляє собою сітку зображень, вам необхідно орієнтуватися на горизонтальні знімки або квадратні, якщо це можливо. Такий вибір значно полегшує їх перегляд на маленькому екрані. Вертикальні зображення будуть добре виглядати на смартфоні в вертикальному режимі, але широкоформатний перегляд на горизонтально орієнтованим девайсе робить зображення складними для перегляду. Горизонтальний варіант - це найкращий вибір, але ви так само можете зупинитися і на квадратній формі, якщо він неможливий з якоїсь причини. Всі картинки можуть бути встановлені відповідно до галузі перегляду, але вертикальні зображення на горизонтальному екрані виглядають дуже маленькими. У цьому випадку ваші фотографії не будуть так пильно розглядатися, як якщо б вони були квадратними або горизонтальними. Це, в свою чергу, величезний недолік, особливо якщо ваш сайт є портфоліо.
3) Використовуйте жести на таблетках і смартфонах
Відео: Masonry - створення адаптивних плиток (jquery, masonry, imagesloaded, imagefill, bootstrap, vh)
Люди люблять використовувати жести на сенсорних екранах. Вони відчувають себе більш впевнено, коли прокрутити зображення, тому досвід буде більш захоплюючим. Намагатися виявити крихітні стрілки або навігаційні точки на мобільному пристрої - це занадто утомливо. Набагато більш природно, просто взяти палець і провести їм по зображенню вгору, вниз, вліво або вправо.
4) Уникайте лайтбокси: вимкніть їх на мобільних пристроях
Якщо у вас є зображення продуктів, такі як обладнання або інші товари, які слід розглядати більш детально (тканини, дорогоцінні камені і т.д.), в цьому випадку лайтбокс з великими зображеннями має сенс. Але навіть тоді, він повинен використовуватися тільки на робочому столі. Коли ви переглядаєте зображення на таблетках або екранах мобільних пристроїв, лайтбокси повинні бути відключені. Вони можуть викликати цілий ряд проблем для користувацького досвіду. Якщо щось трапиться, і лайтбокс матиме неправильний розмір, то користувач не зможе отримати доступ до кнопки виходу, або ж зображення можуть не відображатися належним чином.
Відео: Верстка адаптивної CSS галереї з елементами різної висоти
5) Використовуючи навігаційні елементи, робіть їх непомітними
Якщо у вас є змінна галерея зображень зі значною кількістю слайдів, то навігація має сенс. Ви ж не хочете змушувати користувачів чекати, поки прокрутити все зображення. Так вони зможуть легко прокрутити галерею з їх власною швидкістю, увійти, отримати те, що хочуть і вийти. При використанні цих елементів, переконайтеся, щоб заховати їх у місцях, де вони виходять за рамки.
Вони не повинні мати навігаційних точок, які переходять на текст або інші посилання. Крім того, уникайте надмірно складних елементів управління. Вони займають багато місця, відволікають користувачів від контенту і створюють безладний вид. Так що не перестарайтеся!
6) Не змішуйте зображення і відео
Змішування різних медіа файлів зазвичай добре, але змішування відео там, де їх не чекають, може викликати проблеми. Ви не хочете, щоб користувач випадково відтворив відео, що грає звуки, які можуть почути все. Відокремлюйте відео від зображень, щоб користувачі знали чого їм очікувати. Нікому не подобаються такі несподіванки.
7) Переконайтеся, що зображення не виходять за рамки їх максимальної ширини
Це важливо, тому що ви можете уникнути пиксельного масштабування зображень, які занадто малі для простору. Зображення повинні бути досить великими, щоб заповнити 100% екрану мобільного пристрою (в більшості випадків), але для робочого столу розміри не повинні перевищувати максимальної ширини.
8) Масштабування зображень
Якщо у вас є масштабування зображення, переконайтеся, що вони масштабуються вниз, а не вгору. Найкраще, щоб встановити точні розміри для ваших зображень. Дуже часто, процентне відношення застосовується для однієї з величин, в той час як розмір інший встановлений на «авто». Наприклад, якщо ви хочете зображення збільшувалася в браузері на 50% по ширині, то встановіть ширину зображення на 50%, а висоту на «авто».
Відео: Галерея для WordPress | Плагін FancyBox for WordPress
9) Не використовуйте підписів до картинки
Підписи зображень або будь-який інший супровідний текст може викликати купу проблем для вас і ваших користувачів. Перша проблема полягає в тому, що дуже важко пристосуватися до тексту на мобільному пристрої. На смартфонах ви маєте обмежений простір, і спроба додати текст може привести до відчуття тісноти й безладності у користувача. Інша проблема полягає в тому, що ви обмежені в розмірах тексту, який ви можете використовувати. До того ж ви повинні враховувати розриви слів, і як кілька рядків тексту будуть виглядати в кінцевому підсумку разом із зображенням. Якщо текст використовується в якості накладення, ви також повинні подбати про місця, де він падає на зображення. Світлий текст поверх світлої області зображення зробить текст нечитабельним. Контраст є ключовим, а кожне зображення індивідуальним.
висновок
У підсумку, коли справа доходить до будь-якого аспекту веб-дизайну, в першу чергу потрібно подбати про хорошу роботу сайту, думаючи про користувачів. Якщо ніхто не зможе використовувати ваш сайт, то вони не повернуться. Дотримуючись цих нескладних правил адаптивних фотогалерей, створюйте сайти, де користувачам не доведеться стикатися з загальними проблемами при перегляді зображень.
