11 обов'язкових фішок, що адаптують ваш сайт під мобільні пристрої

Ви втрачаєте клієнтів прямо зараз…

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

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

Почати…

1. Приховання меню навігації

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

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

Так, наприклад, виглядає спадне меню на нашому сайті:

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

Google використовував горизонтальну смугу прокрутки меню. Кожне посилання має розкривний список, який з'являється після клацання. Це виглядає так:

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

2. Зробити велику кнопку виклику

Звичайно, кнопка із закликом до дії повинна бути яскравою! Але ще важливіше зробити це зручним. Тому стежте за тим, щоб заклик до дії ( «Купити», «Доступ» і т.д.) був великим. Легше натискати.

Ось як може виглядати Мобільна привабливість:

Важливо! Великі кнопки покращують зручність і зручність у використанні.

Ще один важливий момент! Коли у вас є блоки з посиланням на текст або групові предмети, такі як блок «Стильні капелюхи» на сайті жіночого одягу, вам не потрібно вставляти «Детальніше» всередину кожного з них. Замість цього зробіть весь блок активним, щоб людина, клікнувши по будь-якому місцю в ньому, міг відразу відкрити потрібний матеріал.

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

3. Адаптація шрифту

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

Важливо! На кольоровий фон текст краще не ставити. Для гаджетів чорний текст більш придатний на світлому фоні.

Наприклад, Nike адаптувала текст для мобільних пристроїв таким чином:

4. Показати важливу інформацію

Вся інформація та пункти, які можуть зацікавити користувача:

• Контактні дані
• Ваше місцезнаходження
• ціна;
• заклик до дії.

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

Ось 2 приклади того, як ви можете розмістити цю інформацію:

5. Змінити порядок блоків

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

6. Чим ширшою є екран, тим більше контенту

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

Наприклад, подивіться, як змінюється кількість елементів залежно від горизонтального або вертикального читання на телефоні:

7. Використання довгих сувоїв

Оптимальним варіантом для галереї зображень або характеристик стануть довгі стрічки прокрутки. Такий варіант дуже зручний, оскільки не змушує відвідувача робити зайві рухи. Довга прокрутка також добре працює на планшеті та настільному комп'ютері. Ще одним хорошим варіантом є перевернутий "карусель" зі стрілками вліво/вправо.

Наприклад, Інтернет-магазин iStore використовує обидва:

8. Оптимізація користувацького досвіду для сенсорних екранів

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

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

• Красивих жінок;
• Прохолодний годинник;
• Машини
• Стильні навушники і т.д.

Уявіть собі, ви пішли на свою сторінку з ідеєю адаптувати свій сайт. І раптом ми побачили навушники, які вже давно хотіли. Я цілком впевнений, що ви забудете, чому ви прийшли і вирішите придивитися. Натисніть на картинку… А потім є якась напис. Ви, не замислюючись, клацніть по ньому, і ви відкриваєте наступну сторінку. Що ви думаєте там?

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

Подивіться, що їхня ідея виглядає наступним:

До речі, я купив за це, коли я добрався до них:)

9. Використання піктограм

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

Важливо! Такі значки повинні бути яскравими і тематичними (якщо пункт стосується перевірки швидкості, зробіть, наприклад, значок спідометра або секундоміра).

Ось кілька прикладів:

10. Адаптація відео

Багато хто забуває про це. Уявіть собі, якщо ви хочете подивитися фільм на мобільному телефоні, а відео відкрито тільки на підлозі екрану. Як це почуття?

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

Ваше відео завжди має бути розміром екрану. Просто так:

11. Не бійтеся довгих сувоїв

Покладіть всю важливу інформацію у верхній частині екрана? Врахуйте, що ви попросили клієнта знайти помаду в сумочці жінки.

Вам не доведеться накопичуватися на першій сторінці з купою даних. Інакше людина буде плутати і залишати. Краще прокручувати і розподіляти інформацію по блоках. Так відвідувач буде активніше взаємодіяти з вашою сторінкою.

І, нарешті,…

Пам'ятайте, 60% купують Інтернет-користувачі роблять покупки, не наближаючись до комп'ютера. Так що якщо ви не дбаєте (прямо зараз) про адаптацію вашої сторінки, ви втратите багато клієнтів.

Так, дуже важко вписатися вся важлива інформація на малому екрані. Але впевнений, що поради з цієї статті допоможуть вам впоратися ідеально.

Застосувати

Чи було це корисно? Ставте «Подобається»! Таким чином, я дізнаюся, що мені слід продовжувати ділитися секретами адаптації ресурсів для мобільних пристроїв.

Є ще 5 хвилин? Перевірте, чи допустили ви 7 критичних помилок, які руйнують ефективність ваших заголовків. Дізнайтесь зараз!