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

1. Адаптація сайту і контенту для користувачів мобільних пристроїв вкрай важливо!
2. Що таке адаптивний дизайн і з чим його їдять
3. Переваги адаптивного дизайну
4. переваги:
5. Responsive Web Design
6. Переваги Responsive Design:
7. підсумок

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

Адаптація сайту і контенту для користувачів мобільних пристроїв вкрай важливо!

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

1. Адаптивний дизайн;
2. Окрема мобільна версія сайту;
3. Responsive Web Design.

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

Що таке адаптивний дизайн і з чим його їдять

Такий спосіб верстки дозволяє створити ресурс, який буде підлаштовуватися під конкретний дозвіл екрана. На пристроях з різним екраном користувач побачить одну і ту ж сторінку, але відображатися вона буде по різному! Реалізують адаптивну верстку за допомогою CSS3 Media Queries.

Переваги адаптивного дизайну

• зручна технологія. Сайт з адаптивною версткою автоматично визначає дозвіл екрана і підлаштовується під нього. Це не вимагає писати код з нуля - поправляє CSS, HTML. Фреймворки дозволяють це робити досить легко, для досвідченого верстальника;
• єдині зміни. Поміняли текст або фотографію? Вона зміниться однаково для будь-яких відвідувачів з будь-яких пристроїв. Не потрібно витрачати час для синхронізації (дублювання) змін, як у випадку, наприклад, з окремою, мобільною версією сайту.
• єдина адреса. В цьому випадку не потрібні редіректи, піддомени і тп, а користувачеві немає потреби запам'ятовувати два урла одного ресурсу. До того ж, єдину адресу краще впливає на просування сайту.

Недоліки адаптивного дизайну сайту

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

Окрема, мобільна версія сайту

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

переваги:

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

Недоліки мобільної версії сайту:

• різні адреси. URL версій розрізняється незначно, наприклад m.youbank.ru і youbank.ru. Кому-то це не завадить, а хтось буде дратуватися. Для розробників можуть виникнути проблеми з роботами. Необхідно користуватися метатегами rel = «alternative» і rel = «canonical». В іншому випадку контент буде продубльований. Клікнувши в пошуковій видачі, юзера спочатку направлять на головний сайт, потім на мобільну версію. Якщо така з якоїсь причини відсутній - з'явиться повідомлення про помилку;
• обмежень в функціоналі. Мобільний сайт позбавляється від частини контенту і функцій. Іноді версії мають різні набори вмісту. Це погано позначається на загальній картині використання ресурсу.
• погано для SEO. Хоча про це завжди сперечаються, але наша думка редакції таке, що просувати потрібно один ресурс, а не два, якими за фактом є основна і мобільна версія сайту, особливо, якщо на них здебільшого однаковий користувальницький контент.

Мобільні версії сайту користуються популярністю і в цілому виправдовую витрати, особливо у великого проекту. Прикладами можуть служити Avito і Amazon, які використовують мобільні версії своїх ресурсів.

Responsive Web Design

Цікавим фактом є використання Гуглом Responsive Design + Server Side. Хоча загальноприйнятим вважається факт підтримки гігантом адаптивної верстки. При перегляді коду на різних пристроях видно різницю в HTML. Технологія звела верстку ресурсу до рівня створення сторінок. В цьому випадку не потрібна верстка і програмування.

Переваги Responsive Design:

• дозволяє використовувати перевагу як мобільної версії, так і адаптивного дизайну. Результат залежить від реалізації;
• мінімум трафіку. Видалення JavaScript знижує навантаження на процесор, оперативну пам'ять і кеш мобільності;
• використання таргетування. Якщо на пристрої варто Android буде запропоновано завантажити додатків від Гугл, якщо iOS - від Apple. Метод дозволяє робити верстку під різні пристрої.

Недоліки Responsive Design:

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

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

підсумок

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

Удачі вам в сайтобудування!