п’ятниця , Серпень 18 2017

Головні новини
Ви тут: Головна / css / Оптимізація сайту для планшетів

Оптимізація сайту для планшетів



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

Прискорення набору тексту за допомогою додавання спецсимволов

Можна міняти додаткові символи віртуальної клавіатури на необхідні в кожному конкретному випадку. Наприклад при наборі звичайного тексту бачимо знаки пунктуації:800125ba240c7acd69286ee7930c23fc
А при введенні адреси електронної пошти міняємо символи на необхідні: Стандартна клавіатура:
b391efc857a7a23f6236f495105e2567

<input type="text">

URL-параметри:

<input type="url">

Email-символи:

<input type="email">

Цифрова клавіатура:

<input type="text" pattern="[09]*">

Відключення автокоррекции і початкових заголовних букв
bed00e3c5b7877e6d1264a9afa1b211f
Заповнення форм на віртуальній клавіатурі планшета має свої особливості. Зокрема при логіні на багато сайтів необхідно вводити свій email, і система намагається виправити його відповідно до свого знання словника, а також почати рядок з великої літери. Щоб цього не траплялося, використовуємо простий HTML-код у формі:

<input type="text" autocapitalize="off" autocorrect="off">

Правильне розташування блоків

Логіка взаємодії користувача з сайтом на планшеті відрізняється від десктопного. При проектуванні інтерфейсу це необхідно враховувати, роблячи акцент на найважливіших елементах. Ось один приклад, де була змінена форма пошуку на сайті інтернет-магазину. Занадто дрібно: Добре:
ac4443da9f156af755166c6ce2da9e17

ded8a2325e5bff042bb687c03a495a97

Зміна типографіки

Цілком очевидна річ: сайт потрібно зробити добре читаним на конкретному пристрої. Для планшетної версії необхідно збільшити текст. Також можна запропонувати користувачу самому міняти розмір тексту. Нижче приклад, зліва – до оптимізації, справа – після:
09113b9d8cb03a7f9a4f4749ac9a471d

Зміна розмірів кнопок

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

Мінімізація набору тексту

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

Тач-каруселі

Якщо на сайті використовується карусель зображень, вона повинна управлятися тачем:
79c246d1019a91252ee1bb641407b00f

Відключення a:hover

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

Проектування для альбомної і портретної орієнтації екрана

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

Використання камери

Планшети відкривають нам нові можливості: наприклад при заповненні профілю можна пропонувати користувачу зробити фото для аватара камерою планшета:

<input type="file" accept="image/*" capture="camera">

Приховування адресного рядка

При використанні планшета на рахунку кожен піксель, тому можна приховати адресний рядок (в Safari) для збільшення корисної площі екрану:

<meta  name="apple-mobile-web-app-capable" content="yes" />


Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers