10 правил оптимізації сайту під мобільні пристрої

1. 1. Проаналізуйте цільову аудиторію
2. 2. Адаптує шаблон для перегляду на мобільних пристроях
3. Мобільна версія
4. динамічний показ
5. адаптивний дизайн
6. 3. Спростіть дизайн
7. 4. Попрацюйте над поліпшенням юзабіліті
8. 5. Пришвидшіть завантаження сторінок
9. 6. Використовуйте соціальні кнопки
10. 7. Оптимізувати контент
11. 8. Не обмежуйте доступ до контенту
12. 9. Залишайтеся в тренді
13. 10. Не забувайте аналізувати сайт на мобілопрігодность

У квітні 2015 року відбувся оновлення пошукового алгоритму Google під неофіційною назвою «Mobilegeddon», а в лютому 2016 Яндекс оголосив про роботу схожого алгоритму під назвою «Владивосток». Їх суть схожа - в мобільному пошуку перевага віддається тим сайтам, які адаптовані для перегляду на мобільних пристроях. Це означає, що ігнорувати мобільний адаптацію більше не можна.

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

Далі ми розповімо про основні правила оптимізації сайтів під мобільні пристрої.

1. Проаналізуйте цільову аудиторію

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

• демографія (стать і вік);
• географія (з яких регіонів найбільше переходів);
• пристрою (які пристрої найбільш популярні серед ваших відвідувачів - десктопи, мобільні телефони або планшети);
• операційна система (Android, iOS, Windows Phone, Windows 7 і т. д.);
• поведінку на сайті (глибина перегляду, час на сайті, відмови і т. п.).

Знаючи профіль цільової аудиторії, ви зможете адаптувати дизайн і контент під потреби відвідувачів.

2. Адаптує шаблон для перегляду на мобільних пристроях

Є 3 принципово різних підходи до мобільного адаптації - всі вони описані в документації Google для розробників. Кожен з них має свої переваги і недоліки.

Мобільна версія

У цьому випадку буде 2 сайта: десктопний і мобільний. Версія для мобільних розміщується на новому домені (типу m.site.ru).

переваги:

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

недоліки:

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

Мобільну версію на окремому домені має магазин trial-sport.ru

динамічний показ

В цьому випадку дизайн адаптований для конкретних дозволів екранів. Лінії сітки і розташування елементів мають фіксовані розміри для різних пристроїв.

переваги:

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

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

Сайт decathlon.ru використовує один URL з різним набором HTML-коду

адаптивний дизайн

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

переваги:

• коректне відображення на всіх пристроях;
• немає необхідності окремо вносити зміни в мобільну версію.

недоліки:

• складність розробки, особливо для вже існуючих проектів;
• можуть виникнути проблеми з адаптацією блоків на сайтах зі складним дизайном.

Сайт компанії Восток-Сервіс використовує адаптивний дизайн, який підлаштовується під будь-які екрани пристроїв

Крім зазначених способів адаптації можна використовувати плагіни для популярних CMS. Наприклад, для WordPress є WPtouch і WP Mobile Edition. Це дешеве рішення, але коректність роботи сайтів залишає бажати кращого. І якщо для блогів це вихід, то для складних проектів таке рішення є неприйнятним.

3. Спростіть дизайн

Дизайн адаптований версії сайту повинен бути простим і лаконічним. Сьогодні популярний так званий "плоский дизайн", для якого властиві мінімалізм, що спрощує використання. Експресія досягається за рахунок гри кольорів, а не градієнтів, тіней, текстур і складних інтерактивних форм і елементів.

Приклад мінімалізму в дизайні

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

4. Попрацюйте над поліпшенням юзабіліті

При розробці навігації, перш за все, думайте про користувача і його зручність. Будь-яка сторінка повинна бути доступна в пару кроків - без складних фільтрів і списків. Для здійснення дзвінка в одне натискання правильно прописуйте формат номера з кодом країни і міста +7 495 .... Передбачте авторизацію в один клік через соцмережі. Одним словом - намагайтеся мінімізувати будь-які дії відвідувачів до мети.

Замість курсора мишки на смартфоні використовується палець, так що всі елементи повинні бути достатнього розміру. Людина не повинна збільшувати зображення, щоб клікнути по якому-небудь елементу. Не використовуйте шрифти із зарубками, завитками, курсив. Оптимальний розмір шрифту - 16 пікселів, висота рядка - 1,2 em.

5. Пришвидшіть завантаження сторінок

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

Перевірити швидкість завантаження сторінок і побачити можливі проблеми можна за допомогою сервісу PageSpeed ​​Insights по цієї засланні.

6. Використовуйте соціальні кнопки

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

7. Оптимізувати контент

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

Дотримуйтесь таких правил:

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

8. Не обмежуйте доступ до контенту

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

9. Залишайтеся в тренді

Відстежуйте актуальні тренди в сфері дизайну і юзабіліті і вносите оперативно зміни, щоб не залишитися «позаду паровоза». Наприклад, сьогодні актуальні такі тренди:

• модульний дизайн (контент групується в блоки, які шикуються в одну стрічку або кілька стрічок в залежності від розміру екрана);
• плоский дизайн (тіні, півтіні, обсяг - це все залишилося в минулому);
• підхід mobile first (раніше сайти робили для ПК, а потім в силу необхідності адаптували для мобільних - сьогодні все навпаки).

10. Не забувайте аналізувати сайт на мобілопрігодность

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

Для перевірки мобілопрігодності в Яндексі додайте сайт в Яндекс.Вебмайстер , А потім перейдіть в розділ «Інструменти» / «Перевірка мобільних сторінок» і введіть адресу сайту. Якщо є помилки, теж їх виправляємо.

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

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