Як покращити адаптивну версію сайту

Як покращити чуйну версію вашого сайту? - 9 порад 

1. Визначте пріоритетні типи контенту. 

Чуйність (вірніше, сітка, на якій зазвичай заснований чуйний дизайн) має ефект "стиснення" контенту за замовчуванням на низьких дозволах. 

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

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

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

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

2. Не показуйте все, що видно на настільних комп'ютерах 

Ця порада безпосередньо випливає з попереднього. 

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

Чи означає це, що користувач смартфона повинен бачити таку саму інформацію, як і відвідувач сайту з настільного комп'ютера? 

Абсолютно ні. 

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

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

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

3. Надайте користувачам зображення відповідного розміру 

Говорячи про те, як покращити чуйну версію веб-сайту, не можна забувати про графік. 

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

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

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

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

Все це для того, щоб переконатися, що цей вид (і графіка в ньому) просто оптимальний. 

4.Зробіть адреси електронної пошти та контактні номери доступними для перегляду 

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

Є певні елементи сайту, до яких варто ставитись відповідним чином на мобільних сайтах. 

Йдеться, наприклад, про адреси електронної пошти. Помістивши відповідне посилання на таку адресу, ми можемо вибрати його пальцем. Відкриється поштовий клієнт, який можна використовувати для надсилання повідомлень. 

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

Ці зміни здаються незначними, але повірте мені - це оцінили користувачі. 

5. Зменшіть вагу графіки 

І знову ми на мить занурюємося у графіку. 

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

Однак ніщо не заважає нам використовувати так званий стиск для зображень. 

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

В результаті зображення завантажуються швидше, а сервер "з'їдає" менше ресурсів. 

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

З цього приводу я можу порекомендувати вам один із наших текстів: як оптимізувати графіку на сайті? 

6. Переконайтеся, що поля у формах мають правильні типи 

На комп'ютерах ми не помічаємо цієї проблеми. Той факт, що форма має два поля "Ім'я" та "Номер телефону", не має для нас жодного значення. За допомогою однієї клавіатури ми можемо однаково легко заповнити обидва поля. 

На клітинах все вже по-іншому. 

Якщо поле в HTML позначено типом "число", то при виборі такого поля мобільний браузер за замовчуванням запускає цифрову клавіатуру. 

З іншого боку, якщо поле позначене як "текстове поле" або "текст", буде відображатися клавіатура за промовчанням. 

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

Тому не забувайте помічати потрібні поля потрібними типами. 

Ось текст, який може здатися вам цікавим: Форми на веб-сайтах – як їх ефективно оформити? 

7. Налаштуйте розмір шрифту та висоту рядків.

Один з очевидних у контексті того, як покращити чуйну версію веб-сайту. 

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

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

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

Те саме стосується і висоті лінії. Текст не можна просто "стиснути". Між окремими рядками має бути правильна відстань, щоб текст "дихав" і легко читався. 

8. Розгляньте можливість додавання пошукової системи 

Через свій дизайн чуйні веб-сайти часто не так інтуїтивно зрозумілі у використанні, як їхні настільні аналоги. 

Це особливо актуально для більш складних сайтів з великою кількістю контенту всередині. 

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

Якщо у вас багато контенту в блозі, розміщення форми пошуку на самому верху має бути економічно ефективним кроком. 

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

Деякий час тому ми також опублікували відповідний текст на цю тему в нашому блозі: пошукова система на сайті - як вона має працювати та виглядати? 

9. Налаштуйте розмір кнопок 

Як кажуть, останнє, але не менш важливе. 

У контексті того, як покращити чуйну версію веб-сайту, про кнопки не можна забувати. 

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

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

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

Як покращити чуйну версію веб-сайту? - резюме 

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

Сам факт використання так званої "сітки" при будівництві ділянки не допоможе. 

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

Сподіваюся, що наведені вище поради будуть вам корисні.