Як зробити мобільну версію сайту

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

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

URL мобільної версії. Мобільна версія сайту може знаходитися як на піддомені (url виду https://m.site.ua), так і в спеціально відведеному розділі (url виду https://site.ua/m/). Для всіх інших сторінок мобільного сайту url можна залишити таким же, як і в основній версії.

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

Три способи зробити мобільну версію сайту:

• створити мобільний сайт на піддомені;
• створити додаток для популярних мобільних операційних систем (iOS, Android, Windows Phone);
• використовувати адаптивну верстку на сайті.

Детально порівнюємо адаптивну верстку та окрему мобільну версію сайту тут.

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

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

Мобільна верстка сайту

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

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

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

PHP-скрипт може використовуватися для визначення браузера та ширини екрана користувача на основному сайті. Приклад такого коду доступний на detectmobilebrowsers.com.

Адаптивна верстка

Основні способи застосування адаптивної верстки:

Використання CSS3 Media Queries (стилі відразу вказують всі дані для різних варіантів роздільної здатності екрана). Для прикладу:

@media screen and (max-width: 980px) {
div.example {width: 768px;}
}

На сайті визначається роздільна здатність екрана користувача та підвантажується відповідний CSS-файл із стилями відповідно до цього:

<link rel="stylesheet" href="nubex.css" media="screen" />
<link rel="stylesheet" href="nubexMobile.css" media="handheld" />

У цьому випадку параметр «screen» стосується звичайних комп’ютерів, а «handheld» — мобільних пристроїв.

Ще одна можливість:

<link rel= "stylesheet" href= "nubexMobile.css" media= "only screen and (max-device width:480px)"/>

Файл nubexMobile.css підвантажується для пристроїв шириною менше 480 пікселів.

Таким чином, ви можете вибрати відповідний тип підтримки мобільних пристроїв залежно від типу вашого сайту. Коли ви робите версію для мобільних пристроїв, може бути корисним сервіс від Google, PageSpeed Insights, який вказує на зроблені помилки та недоліки.

Як перевірити мобільну версію сайту

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

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

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

Перевірка якості мобільної верстки за допомогою Google Chrome

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

Ви переходите на сторінку в режим перемикання пристрою, де ви можете вибрати популярний мобільний пристрій, тип мережі (2G, 3G, 4G і т.д.), а також вибрати точні параметри дисплея. Це дозволяє імітувати роботу веб-сайту на певних мобільних пристроях. Доступні пристрої включають різноманітні версії iPad, iPad Mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy та багато інших відомих пристроїв.

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

Чому використання мобільної версії сайту краще?

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

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

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

Bohdan Prytulyak( CEO )

Засновник та керівник веб студії PBB Design з 2005 року