Мобильный дизайн статистика фото

Мобільний дизайн сайту: рекомендації та приклади

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

Мобільний дизайн статистика фото
Ця діаграма, представлена журналом Device Magazine, показує збільшення використання браузером мобільних пристроїв.

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

Нижче наведено мій список мобільних веб-проектів і не потрібно:

1. Дозвіл екрану

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

2. Тримайте його просто

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

Мобільний дизайн Subaru фото

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

3. Варіанти

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

4. Навігація і посилання

Увімкніть тільки потрібні посилання і пропустіть кнопки. Якщо у вас багато посилань для навігації, звузите їх або викладіть в іншому форматі. Наприклад, Walmart & Amazon має безліч навігаційних і суб-навігації на своєму повному веб-сайті. Вони спростили його якомога більше, щоб користувач не загубився.

5. Введення тексту користувача

Утримуйте текстову запис користувача до мінімуму. При необхідності використовуйте прапорці і випадають меню. Чим коротше URL, тим краще. Пам’ятайте, що ці користувачі, швидше за все, не мають доступу до традиційної клавіатурі і миші. Деякі користувачі планшета підключають клавіатури, однак це дуже невеликий відсоток користувачів.

6. Спливаючі вікна

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

7. Спалах

Ще одна річ, про яку слід пам’ятати, – це той факт, що мобільні пристрої Apple не можуть переглядати анімацію або рух на основі Flash. Він відображається як значок і велике порожній простір. Багато флеш-ролики можна відтворити за допомогою HTML5 та Javascript, щоб забезпечити той же ефект, одночасно робіт. Якщо ви можете, спростите слайд-шоу і включіть тільки одне сильне зображення замість п’яти. Зображення різко вплинуть на час завантаження веб-сайту.

Підсумок

Ось і все, на сьогодні! Відтворіть всі рекомендації, які я навів вище, щоб безсумнівно зробити мобільний дизайн сайту ще краще. Слідкуйте за новинами! Можливо, скоро вийдуть ще рекомендації. Діліться своєю думкою в коментарях!

Leave a Reply

Your email address will not be published. Required fields are marked *