Адаптація сайту під мобільні пристрої

  1. Зміст: Якщо ще 5 років тому питання про створення мобільної версії сайту для фірми або організації...
  2. Мобільна версія сайту і спеціалізований додаток
  3. Використання медіа-запитів CSS
  4. Адаптація за допомогою мови Javascript
  5. Динамічно довантажувати версія розмітки
  6. Особливості мобільного адаптації сайту

Зміст:

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

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

Технології минулого, такі як наприклад WAP, могли забезпечувати нормальну роботу тільки сильно урізаних версій корпоративних ресурсів і практично не залишали можливостей для реалізації гідного дизайну, а також будь-якої функціональності, тому користувачі мобільних пристроїв не дуже активно відвідували їх. Підвищення відвідуваності, до речі, стало одним з найбільш вагомих факторів на користь розробки мобільних версій сайтів. Якщо в 2015 році частка відвідувачів веб-ресурсів, що заходили з мобільного пристрою (смартфона або планшета) в середньому становила 35-40%, то до кінця 2016 року його вже впевнене підійшла до позначки 55% і продовжує зростати.

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

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

Способи оптимізації веб-сторінки під мобільні пристрої

У загальному випадку можна виділити три основні напрями розробки, завдяки яким сайт можна адаптувати до різних платформ і розмірами дисплея:

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

Кожен з перерахованих способів має свої переваги і недоліки, тому розглянемо їх докладніше.

Мобільна версія сайту і спеціалізований додаток

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

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

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

  • складність і дорожнеча розробки. Фактично мова йде про створення нового сайту з відповідними витратами на дизайн та програмування;
  • відрізняється URL мобільного сайту - як правило, мобільна версія має приставку m. до існуючого адресою (наприклад, m.facebook.com) і вимагає редиректу для мобільних пристроїв;
  • необхідність подвійної роботи і подвійного контролю за контентом сайтів. Мобільна версія повинна оновлюватися одночасно з деськтопной, мати аналогічне наповнення і вимагає від контент-менеджера таких же трудовитрат.

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

У другому випадку мова йде про створення повноцінного додатка-оболонки, розробленої під конкретну платформу пристрою (Android, iOS, Windows Phone) або крос-платформенне рішення. Воно використовує один і той же програмний інтерфейс і засоби роботи з базою даних (прикладний програмний інтерфейс, Application Programming Interface, API), що і основний сайт, проте його дизайн органічніше виглядає, а й функціонал краще пристосований для екранів смартфонів і планшетів. Плюсом такого рішення є всі переваги окремої мобільної версії і єдина точка управління контентом. Вміст оновлюється один раз в одному місці, а потім використовується різними оболонками.

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

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

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

Використання медіа-запитів CSS

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

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

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

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

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

Адаптація за допомогою мови Javascript

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

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

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

Динамічно довантажувати версія розмітки

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

При цьому в CMS повинен бути встановлений відповідний плагін, який буде керувати цим процесом. На ринку присутня достатня кількість подібних плагінів під всі основні CMS. Вони відрізняються вартістю, кількістю налаштувань і дозволяють розміщувати мобільні шаблони як на окремому URL-адресу з префіксом m., Так і довантажувати розмітку без редиректу. До переваг даного підходу варто віднести:

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

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

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

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

Як вже було сказано, сайт повинен забезпечувати зростання продажів - прямих або непрямих. Досягається це кількісним і якісним методами:

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

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

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

Адаптація сайту для мобільних пристроїв є продуктом спільної творчості дизайнерів, SEO-фахівців і безпосередньо розробників. Сьогодні дизайнери відповідають не тільки за самобутній, впізнаваний і привабливий дизайн сайту на різних екранах і пристроях. У сферу їх відповідальності входить також забезпечення зручності використання адаптивної версії при збереженні повної функціональності і контенту веб-ресурсу. Взаємодія сайту і користувача мобільного пристрою істотно відрізняється від маніпуляцій людини за настільним комп'ютером.

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

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

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

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

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

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

Повернення до списку