Поради щодо оптимізації мобільного веб-дизайну

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

№1: Використання декількох зображень в поєднанні з медіа-запитами

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

Цей підхід яскраво помітний у великій кількості медіа-запитів під популярні розміри пристроїв (320 пікселів, 480 пікселів, 768 пікселів). Хоча повинен переважати підхід mobile-first (верстка спочатку під мобільні пристрої), а медіа-запити писати під десктопні версії.

Тому, наступного разу, коли будете працювати над дизайном, спробуйте використовувати підхід mobile-first:

Створюйте медіа-запити під десктопні версії
Уникайте використання пікселів для контрольних точок. Замість цього спробуйте працювати з em і відсотками (відносними одиницями) якомога частіше, щоб сайт підлаштовувався під рівні масштабування
Не забудьте налаштувати медіа-запити для адаптації під retina-пристрої (тобто з мінімальним дозволом: 192dpi)

№2: Оптимізація зображень

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

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

№3: Максимально використовуйте SVG

Масштабована векторна графіка (SVG) – відмінний інструмент для додавання графіки на сайт. Цей інструмент особливо корисний для простої графіки, наприклад, логотипів, іконок, інфографіки та подібного.

Перевага SVG графіки полягає в тому, що вона масштабована і легко адаптується під різні розміри екрану. Крім того нею легко маніпулювати за допомогою CSS.

№4: Використовуйте правильні шрифти

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

З точки зору дизайнера вибір правильних шрифтів означає:

Не використовуйте дрібний шрифт. Ви ж не хочете, щоб користувачам доводилося збільшувати кожен рядок, щоб прочитати написане
Уникайте шрифтів, в яких використовується маленький інтервал між буквами
Якщо ви використовуєте медіа-запити для тексту, використовуйте одиниці em для розмірів шрифту замість пікселів
Використовуйте шрифти sans serif, оскільки вони краще масштабуються в більшості дозволів

№5: Текст як частина користувацького інтерфейсу

Шрифт, який ви використовуєте, це не єдина проблема зручності і читання. Оскільки мобільний веб-дизайн передбачає широке розмаїття екранів, потрібно враховувати текст як частину загального UI (користувальницького інтерфейсу), щоб забезпечити максимальну читабельність. Це означає:

Використання медіа-запитів для підтримки допустимого рівня символів в рядку (не забудьте використовувати em замість пікселів). Загальна кількість допустимих символів дорівнює 40-70
Використовуйте значення CSS3 vw, vh і vhmin (всі вони є відносними одиницями виміру), щоб зберегти розмір шрифту в межах розміру контейнера на різних розмірах екранах

№6: Використовуйте контрастні кольори

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

Щоб підібрати оптимальне поєднання кольорів, ви можете використовувати прості онлайн-інструменти, наприклад, як Paletton, Color Contrast Checker, Color Wheel і подібні.

№7: Дизайн мобільних меню

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

№8: Використовуйте де це можливо стилі CSS3 замість зображень

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

№9: Тестуйте свої проекти на сумісність з мобільними пристроями

Одна з найбільших проблем з мобільним дизайном виникає через велику кількість різних розмірів екранів і роздільних здатностей, які потрібно враховувати. Хоча є певний пул лідерів ринку, практично кожен місяць з’являються нові пристрої. І, можливо, ваша цільова аудиторія заходить на сайт саме з цих пристроїв.

Дуже важко протестувати свій сайт на всіх можливих пристроях, але це обов’язково потрібно зробити для максимально широкого кола. Проаналізуйте джерела трафіку на свій сайт, і в першу чергу протестуйте ті девайси, з яких заходить найбільше користувачів. У мережі є маса програм для цих цілей, як платних, так і безкоштовних. Почати ж можна з безкоштовних інструментів в браузерах: Chrome Developer Tools (в Google Chrome) або доповнення Firebug (в браузері Firefox).

Короткий висновок

Хоча ці поради, безумовно, позитивно вплинуть на ваш сайт, вам потрібно пам’ятати, що мобільна оптимізація – це практично безперервний процес.

Завжди з’являються нові пристрої, змінюються тенденції веб-дизайну, оновлюються ОС, і все це може викликати проблеми з вашими проектами. Майте і це на увазі.

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