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

Влітку 2015 року вперше за допомогою мобільних пристроїв було здійснено пошук Google за допомогою мобільного, ніж на робочому столі – і ви’буду краще вірити їм’я з тих пір тільки пішов вгору!


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

Contents

Щоб ваш веб-сайт був зручним для мобільних пристроїв, ви’Вам потрібно буде:

  1. Виберіть тему чи шаблон для мобільних пристроїв
  2. Скріпіть вміст
  3. Зробіть зображення та CSS максимально світлими
  4. Уникайте спалаху
  5. Змінення розміру та розміщення кнопки
  6. Розмістіть свої посилання
  7. Використовуйте великий і читабельний шрифт
  8. Усуньте спливаючі вікна
  9. Регулярно тестуйте

Але по-перше, що насправді означає мобільний для мобільних пристроїв?

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

Є кілька способів цього досягти:

  • Чуйний дизайн – твій сайт’s дизайн пристосовується для адаптації до розміру екрана, будь то’просто змінивши розмір вкладки на робочому столі або переглядаючи мобільний телефон або планшет.
  • Динамічне обслуговування – відвідувачам демонструється інша, спеціально розроблена версія сайту, залежно від пристрою, який вони використовують’перегляд з.
  • Мобільний додаток – в деяких випадках найвище сенс мати повністю окремий додаток для вашої мобільної аудиторії (хоча, якщо це так, ви також повинні переконатися, що ваш веб-сайт нульовий для тих, хто цього не робить’не хочете завантажити його).

Чуйний дизайн – це найменший мінімум, до якого слід прагнути, і це’s, що рекомендує Google. Це сказав, ми думаємо’s все-таки варто додатково редагувати ваш автоматично створений мобільний сайт – адже ви хочете націлитись на фантастичну мобільну роботу користувачів, а не на ‘прийнятний’ один.

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

Ось деякі інші статті, які вам можуть сподобатися:

Як створити веб-сайт – Якщо ви’почнете розробляти (або переробляти!) ваш веб-сайт, ознайомтесь із цією статтею, щоб ознайомитися з покроковим посібником та ключовими моментами, які слід врахувати..

Як створити веб-сайт – Хейвен’Ви ще не запустили свій сайт? Не хвилюйтесь, цей посібник проведе вас через весь процес!

5 кращих будівельників веб-сайтів для SEO – Будь-який розробник веб-сайтів із сильним оптимізацією веб-сайтів із зручністю для мобільних пристроїв викладений прямо у свої шаблони. Ось п’ять найкращих.

1

Виберіть тему чи шаблон для мобільних телефонів

Гаразд, так це перший крок, і це’s великий: виберіть мобільну чуйну тему чи шаблон!
Оскільки, так важливо мати мобільний дизайн – це важливо’s щось, що майже кожен топ-розробник веб-сайтів висвітлював у всіх своїх шаблонах. Наприклад:

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

Wix – всі шаблони реагують на мобільні пристрої, але завжди переконайтеся, що ви переглядаєте їх у мобільному вікні. Оскільки сайти Wix настільки налаштовані, іноді великі зміни не роблять’t перекладати так безшовно, і ти’Треба буде зробити певну настройку.

Якщо ви’перебудовуючи сайт за допомогою системи CMS, наприклад WordPress, переконайтеся, що тема, з якої ви вирішили створити свій сайт, відповідає мобільним пристроям – або якщо ви’Ви вже створили сайт, перейдіть на той, який є!

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

Довідка! Що робити, якщо я’м на невідповідну тему, і я можу’t перемкнути його?

Якщо ваш веб-сайт був створений за допомогою старої, невідповідальної теми чи шаблону, і ви’не можете переключити його, спробуйте додати цей рядок коду на кожну сторінку’s тег:

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

2

Скріпіть вміст

ви’Ви вибрали чудову чуйну тему чи шаблон, тож тепер вам’все готово, правда? Неправильно!

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

Тепер, це’час переглянути автоматизований мобільний вигляд вашого веб-сайту та зняти його назад:

Переганяйте свою пропозицію

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

Погляньте на цей приклад з Trainline:

Приклад зручності для мобільних поїздів

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

Уникайте великих фрагментів тексту

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

Скоротіть форми

Заповнення довгих форм – це справа у кращі часи, але на мобільному? На ходу? Забудь це! Довгі форми втратять читачів швидше, ніж ви можете сказати ‘це обов’язкове поле’. Переконайтеся, що кожна форма вам’Повторне відображення на мобільному пристрої – це лише запит інформації’s абсолютно важливо.

Верхній наконечник! Автокорекція Пески – це надійний спосіб перетворити заповнення форми у велику трату часу. Збережіть читачів від стресу, вимкнувши його. Якщо у вас є доступ до коду форми, переконайтеся, що поле автовиправлення встановлено autocorrect = вимкнено. 3

Зробіть зображення та CSS максимально світлими

Зробити ваш веб-сайт максимально легким – це завжди гарна ідея – але що це саме означає? Що ж, кожен елемент вашого веб-сайту має віртуальний ‘вага’ – чи то’s відео чи зображення, яке має розмір файлу, або код, який потрібно завантажувати щоразу, коли веб-сайт натискається.

Google чітко зрозумів, що швидкість веб-сайту є вирішальним фактором ранжування, тобто повільним (a.k.a. ‘важкий’) веб-сайти програють конкуренцію на сторінках результатів пошуку (SERP).

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

Отже, що ви можете з цим зробити?

Стисніть свої зображення

Коли ти’повторно завантажуйте будь-яке зображення на ваш сайт – мобільну або настільну версію – це’s Життєво важливо, щоб ви стискали свої зображення за допомогою безкоштовного онлайн-інструменту, такого як kraken.io. Це значно зменшує розмір файлу ваших зображень без шкоди для якості зображення.

Розмістіть свої відео з третьою стороною

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

Wistia – популярна платформа для цього, але YouTube також працює – ви’Я просто хочу переконатися в цьому’повторне вимкнення автоматичної гри, щоб відео не пов’язане між собою’t грати за вашими. Для цього просто:

  • Перейдіть на свою сторінку WordPress або допис
  • Знайдіть вбудований код і натисніть на ‘текст’ вкладка
  • Знайдіть частину, яка пише src =”youtubeurlhere”
  • Додайте ?автовідтворення = 0&rel = 0 після youtubeurlhere
  • Код тепер повинен читати src =”youtubeurlhere? autoplay = 0&rel = 0 ″
  • Удар ‘Оновлення’ і ти’З тобою добре піти

Верхній наконечник! Якщо вам’не думаю, що ваш вміст надто добре знизиться на YouTube (деякі відео не так’не майте сенсу без контексту повної сторінки), переконайтеся, що ви встановили видимість ‘не внесені до списку’. Таким чином, ніхто не натикатиметься на нього ніде, окрім вашого веб-сайту. 4

Уникайте спалаху

Flash часто використовується для створення анімації, але, як правило, це не так’t підтримується мобільними пристроями, тому їх краще уникати взагалі.

5

Змінення розміру та розміщення кнопки

Практично кожен веб-сайт використовує кнопки для посилання на інші розділи чи форми. Але a ‘добре’ кнопка може швидко стати ‘поганий’ кнопка на мобільному, якщо вона’s в неправильному місці, або неправильний розмір.

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

Ось’s, де вам слід націлитись на розміщення CTA на мобільному сайті:

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

Тож тепер ти’Ви знайшли ваші кнопки в потрібному місці’S час зробити їх потрібного розміру. Це взагалі означає вас’Потрібно буде їх трохи збільшити – це’s набагато важче натискати точно пальцем, ніж мишею.

6

Розмістіть свої посилання

Якщо говорити про те, як важко клацати точно великим пальцем, а не мишкою, це добре приводить нас до наступної точки: подивіться на ваші посилання!

Більш конкретно, ви’Хочу перевірити, чи є гіперпосилання на вашому мобільному сайті:

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

7

Використовуйте великий і читабельний шрифт

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

Перевірте також читабельність вашого шрифту. Це’s одне – спробувати більш експериментальний шрифт на робочому столі, але цей рух навряд чи окупиться на мобільному. Це сказало, ти’Я хочу зберегти шрифти як ‘на марку’ якомога більше на всіх платформах.

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

8

Усуньте спливаючі вікна

При обережному використанні спливаючі вікна можуть справді добре працювати на настільній версії сайту. Ви, можливо, помітили їх’Щось ми використовуємо на досить багатьох сторінках у WBE.

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

9

Регулярно тестуйте

Найкращий спосіб дізнатися, наскільки мобільним є ваш мобільний сайт – це протестувати його! ви’Я хочу це зробити трьома різними способами:

Запускайте URL-адреси через Google’s мобільний інструмент

У Google є безкоштовний інструмент тестування для мобільних пристроїв, який кожен може використовувати для перевірки наскільки зручним для мобільних пристроїв є будь-яка вказана URL-адреса – чи це’s домашню сторінку (як показано нижче) або сторінку на вашому сайті.

Тест Google для мобільних пристроїв

Спробуйте різні розміри пристрою зі свого робочого столу

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

Щоб швидко перевірити зовнішній вигляд чого-небудь на мобільному, ви також можете клацнути правою кнопкою миші на веб-сторінці, вибрати ‘Огляньте’, а потім натисніть на значок двох екранів, який з’явиться на панелі інструментів вгорі:

Перегляд мобільної версії з робочого столу

Як зробити свій веб-сайт зручним для мобільних пристроїв: Підсумок

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

Як зробити свій веб-сайт зручним для мобільних пристроїв:

  1. Виберіть тему чи шаблон для мобільних пристроїв
  2. Скріпіть вміст
  3. Зробіть зображення та CSS максимально світлими
  4. Уникайте спалаху
  5. Змінення розміру та розміщення кнопки
  6. Розмістіть свої посилання
  7. Використовуйте великий і читабельний шрифт
  8. Усуньте спливаючі вікна
  9. Регулярно тестуйте

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me