1. Частка мобільних користувачів неухильно зростає
2. Варіанти дружніх до мобільних пристроїв сайтів
3. Особливості оптимізації сайту під мобільні пристрої
4. Оптимізація CSS і настройка медіазапросов
5. Налаштування області перегляду
6. Оптимізація використовуваних плагінів
7. додаткові рекомендації
8. висновок

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

Частка мобільних користувачів неухильно зростає

Уже кілька років поспіль в своєму щорічному дослідження аудиторії Рунета Яндекс відзначає істотний приріст користувачів, що виходять в інтернет з мобільних пристроїв. Статистичні дані підтверджують ще одну тенденцію, що намітилася - в ряді тематик частка користувачів, які заходять на сайт з різних мобільних пристроїв, вже перевищує частку користувачів ПК. Це прекрасно ілюструють сайти соціальних мереж. Наприклад, станом на жовтень 2014 року мобільна аудиторія Facebook зрівнялася із загальною щодня активною аудиторією сервісу.

Зростає і відсоток покупок, що здійснюються з мобільних пристроїв. за статистикою Google 39% користувачів смартфонів здійснювали покупки за допомогою мобільних пристроїв, 55% користувачів, які шукають на смартфонах інформацію про товари або послуги, планують здійснити покупку протягом однієї години, 83% в той же день. У 47% випадків такий пошук конвертувався в наступну покупку з ПК, в 82% в покупку в офлайн-магазині, в 17% в покупку за допомогою смартфона.

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

Варіанти дружніх до мобільних пристроїв сайтів

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

• Мобільна версія сайту (у деяких сайтів так само є WAP-версія) - це винесені на окремі URL () або навіть окремий піддомен (m.domain.ru/page_1) сторінки сайту. Найчастіше це урізана версія основного сайту з обмеженим функціоналом. Останнім часом мобільні версії втрачають свою актуальність через вдосконалення CSS і ряду недоліків при розборі user-agent-ів на серверах. Додаткове незручність для користувача - необхідність запам'ятовувати кілька URL сайту.
• Мобільний додаток сайту - спеціальний додаток, розроблене під певну мобільну платформу (iOS, Android, Windows Phone). Привабливо найбільш тісною інтеграцією з платформою, що дозволяє реалізувати звичний для користувачів інтерфейс, також відрізняється високою швидкодією. Виправданий варіант, якщо проект більше розрахований на офлайнову роботу і на мобільних користувачів. Основний недолік - необхідність скачування програми, в іншому випадку користувач бачить повну версію сайту в маленькому масштабі. Тому, навіть якщо у вас є мобільний додаток, цього не достатньо, в будь-якому випадку необхідно робити якісну мобільну версію ресурсу.
• Сайти з адаптивним дизайном - автоматично адаптується під параметри того пристрою, з якого здійснюється вхід. Істотний плюс - один URL для всіх пристроїв, що позбавляє розробників від редиректів, а користувачів від необхідності запам'ятовувати адресу мобільної версії сайту. Найбільш популярний останнім часом варіант, так як дозволяє працювати над одним сайтом для всіх типів пристроїв і дає суттєву економію на трудовитрати при внесенні змін до сайт і його подальшу оптимізацію.

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

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

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

Оптимізація CSS і настройка медіазапросов

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

Відбувається це, тому що верстальники, отримуючи макет, за замовчуванням прописують значення ширини або висоти різних елементів в абсолютних величинах (в пікселях) для найпоширеніших дозволів звичайних ПК, наприклад:

.container {width: 210px; height: 200px;}

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

.container {width: 21,75%; height: 20,408%;}

Це дозволить елементам сторінки підлаштовуватися під зміни масштабу всієї сторінки.

Налаштування області перегляду

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

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

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

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Атрибут "initial-scale = 1" вказує браузеру користувача співвідношення пікселів CSS і пристрої (рівне 1: 1 незалежно від орієнтації дисплея) для коректного відображення в альбомної орієнтації.

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

Багато мобільні пристрої і браузери не підтримують або підтримують не всі версії сучасних полігонів, тому рекомендується переглянути необхідність наявності на сторінці плагінів Flash, Silverlight або Java. Багато елементів HTML5 на даний момент дозволяють знайти заміну всім плагинам без втрати якості відображення контенту.

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

додаткові рекомендації

Крім основних моментів, перерахованих вище, існує маса додаткових налаштувань, які зроблять ваш сайт зручним у використанні з мобільних платформ:

• Правильно підходите до вибору контрольних точок при завданні процентних величин елементів макета, на цю тему можна почитати гуру адаптивного веб-дизайну - Ітана Маркотт.

Приклад оптимізації тексту під смартфон і ПК

• По можливості максимально оптимізуйте JavaScript.
• Використовуйте зрозумілу навігацію по сайту у верхній частині сторінок. Особливо це актуально для сайтів з гнучким дизайном. Пам'ятайте, що при «серфінгу» з мобільної платформи користувачеві повинно бути так само зручно користуватися сайтом, як і з ПК. Ясна меню і зручна навігація дозволять не загубитися на сторінках ресурсу. Хороший варіант верстки Лендінзі з адаптивним дизайном - http://www.theverge.com/a/virtual-reality .

Приклад навігації по сайту з адаптивним дизайном на екрані ПК і смартфона

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

висновок

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