Частини мобільна версія. Що вибрати: мобільна версія vs адаптивний дизайн? Як відбувається розробка мобільної версії в нашій веб-студією

Сергій Лукошкін

26.03.2015 | | 0 коментарів

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

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

Чому мобільна версія сайту або адаптивний дизайн важливі для бізнесу?

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

Як зробити сайт дружнім для мобільних пристроїв?

Для вирішення цієї проблеми існує два підходи:

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

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

А так вона виглядає на екрані смартфона

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

5 головних причин, щоб зробити бізнес-сайт з адаптивним дизайном

Мобільний пошук. За статистикою (на момент написання цієї статті) більше 50% покупців шукають товари та послуги в інтернеті з мобільних пристроїв. І ця цифра дуже швидко збільшується. А зовсім недавно Google повідомив, що сайти, які не мають мобільної версії, будуть дуже низько ранжуватися в результатах пошуку з мобільних пристроїв. Тому, якщо у вас немає мобільної версії сайту, не дивуйтеся, що вас буде важко знайти в пошуку зі смартфона.
Зручність для користувачів. Знову за тією ж статистикою більше 40% користувачів заявили, що підуть на інший сайт, якщо у поточного немає мобільної версії. І знову ж таки, їх частка впевнено зростає. Для бізнесу це означає, що увагою покупця заволодіє той постачальник, чий сайт зручний на будь-якому пристрої.
Прямий контакт. Смартфон дозволяє користувачеві відразу зробити дзвінок за вказаною на сайті номером телефону (якщо на сайті реалізована функція click-to-call). Таким чином, ви стаєте набагато ближче до потенційного покупця.
Нові можливості просування. Сьогодні широке поширення набуває мобільна реклама, але якщо у вас немає мобільного сайту, то її ефективність буде катастрофічно низькою. Навпаки, сайти, дружні для мобільних пристроїв, отримують ще один потужний канал просування.
Конкурентна перевага. І останнє. Перевірте, чи є у ваших конкурентів мобільні версії сайтів. Якщо немає, то у вас є відмінна можливість створити потужну конкурентну перевагу і отримати тих клієнтів, які залишають застарілі сайти ваших противників.

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

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

Близько 25% трафіку інтернету доводиться на мобільні операційні системи, цей показник зростає з кожним днем. Поряд зі зростанням користувачів інтернетом за допомогою мобільного пристрою виникає питання, адаптувати чи сайт під мобільний трафік, які методи існують і чи варто це витрачених сил? Розберемося!

Навіщо сайту мобільна версія?

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

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

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

Необхідні функції в мобільній версії сайту

сумісність. Сайт повинен коректно відображатися на більшості популярних дозволах екранів (480x320, 1280x720 і т.д). На таких сайтів краще використовувати xHTML, JavaScript краще обійти стороною.
юзабіліті. Навігація - запорука успіху, а хороша навігація - прямий шлях до перемоги, постарайтеся зробити все чудово, постійно просите друзів або на різних форумах оцінити версію, запропоновані виправлення користувачами враховуйте при подальшій розробці;
оптимізація контенту. Цей пункт особливо відноситься до картинок: вони повинні бути легкими в кілобайтах і в габаритах;
Дизайн. Найважливіша складова. Нинішня тенденція дизайну для мобільних - максимальна легкість і простота у використанні.

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

Дослідження різних інтернет порталів дозволяють оцінити доцільність створення мобільної версії для наступних тематик:

Соціальні мережі та подібні сервіси;
Засоби масової інформації;
Інтернет магазини;
Довідкові портали.

Щоб точно знати, чи потрібна вашому сайту мобільна версія, проаналізуйте трафік вашого ресурсу за останній рік через будь-яку систему аналітики, і якщо частка мобільного трафіку складає 18 і більше відсотків, задумайтеся про швидке створення мобільної версії.

Ви все ще роздумуєте? Пропонуємо вдуматися в цю невелику статистику:

Мобільні телефони використовуються більш 87% населення, решта 13% - діти у віці до 5 років;
Зростання мобільної комерції до 2020 року за даними різних організацій виросте в більш ніж 99 раз.

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

В закладки

Дмитро Мрачковський, оптимізатор з «Ашманов і партнери», розповів, як вибрати між адаптивен і мобільним сайтом та з якими неочевидними проблемами доведеться зіткнутися.

Переваги адаптивних і мобільних сайтів

Важко однозначно відповісти на питання, яка технологія адаптації під смартфони та планшети ефективніше з точки зору SEO. Навіть серед великих гравців я не помітив переваги на користь якогось рішення. «М. Відео», DNS, Wildberries, Aviasales використовують адаптивну верстку, а Lamoda, «220 Вольт», «Юлмарт», «Яндекс.Маркет» - мобільні сайти. Але давайте розберемо, які переваги отримують перші і другі.

Адаптивна верстка сайту «М. Відео» і мобільний версія сайту «220 Вольт»

Адаптивна верстка допомагає обійтися без розробки окремої мобільної версії. У цього є плюси:

Нам не потрібна окрема структура сторінок для відображення на мобільних пристроях. Досить відкоригувати десктопну версію сайту за допомогою CSS.
Для деськтопной і мобільного версій використовується єдиний URL-адресу. Тому контент сайту не дублюється, сторінки не конкурують між собою, а робота по просуванню впливає на ранжування в десктопном і мобільному пошуках.

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

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

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

Проблеми з адаптивною версткою

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

Помилкова інтерпретація адаптивен

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

Всі елементи контенту завантажуються двічі: тексти, зображення, заголовки H1 і H6, хлібні крихти, супутні і рекомендовані товари і так далі. А пошукові системи дуже не люблять дублі.
Невикористані частини контенту ховаються за допомогою CSS. Думка пошуковиків по цій проблемі неоднозначно. Google заявляла, що ігнорує зміст прихованих блоків, а «Яндекс» - що враховує контент сторінки цілком. Більшість SEO-фахівців сходиться на думці, що така схема створює ризик потрапляння під санкції.
Код дублюється, і сайт завантажується повільніше.

Подібна реалізація - неправильний підхід до технології RESS.

Приховування непотрібних елементів

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

Неправильне використання JavaScript

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

Чому все-таки використовують адаптивний дизайн

Вибір адаптивен зазвичай обумовлений двома основними плюсами: розробкою тільки однієї версії сайту і відсутністю проблем з декількома URL-адресами.

Також це зручне рішення для просування на кілька регіонів. Ми спрямовуємо всі зусилля на один домен і отримуємо результат в десктопном і мобільному пошуках. Для цього потрібно прив'язати до сайту цікавлять регіони в «Яндекс.Довіднику».

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

Можна піти іншим шляхом - використовувати геоподдомени, щоб підвищити текстову релевантність сторінок. В цьому випадку піддоменів начебто spb.site.ru, samara.site.ru, kazan.site.ru привласнюють регіони через «Яндекс.Вебмайстер» і потім прописують заголовки і мета-теги з вказівкою топоніма. Ще один плюс - для геоподдоменов легко налаштувати окрему аналітику, щоб відстежувати результати по регіонах. Такий спосіб просування практикує MediaMarkt.

Проблеми з мобільними версіями сайтів

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

Подвійна робота по просуванню

Мобільний сайт оптимізується і просувається окремо від основного, і на це потрібно більше ресурсів, ніж у випадку з адаптивен. Почати оптимізацію потрібно з того, щоб мобільна версія коректно індексувалася і не конкурувала з деськтопной. Для цього зв'яжіть їх у «Яндекс.Вебмастере» і Search Console, пропишіть коректні атрибути rel \u003d "alternate", налаштуйте індексацію і генерацію XML-карти.

Хаос через абсолютних посилань в контенті

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

Якщо у деськтопной версії визначається user agent, користувачеві відкриється мобільна версія сторінки.
В інших випадках користувач побачить десктопну сторінку, і робота по створенню мобільної версії буде марною.

При цьому внутрішній контрольний вагу сайту може порушитися. Щоб проблема не виникла, використовуйте в контенті відносні посилання. Тобто у атрибута href вказуйте / page / замість https://site.ru/page/.

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

У «Яндекса» в цьому плані все чітко - він окремо індексує контент мобільних і десктопних сторінок. Для цього досить встановити атрибут rel \u003d "alternate" з основною версією на мобільний і ще можна налаштувати 301-редіректи з деськтопной версії на мобільний, з огляду на user agent пристрою.

Неясність вимог mobile-first індексу

Щоб підготуватися до переходу на mobile-first індекс, логічно вибрати мобільну версію сайту в якості канонічної сторінки. Правда, в рекомендаціях щодо mobile-first є свої неясності. Наприклад, в керівництві Google сказано, що контент мобільного і деськтопной версій повинен бути аналогічним, але ступінь «аналогичности» не розкриває.

А що, якщо для ранжирування в десктопном пошуку потрібний певний блок контенту, який в мобільній версії буде зайвим, але пріоритет буде віддаватися саме мобільної версії?

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

Витяг з доповіді Google про впровадження mobile-first індексу

Бездумне використання турбостраніц

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

Зниження ефекту від зовнішніх посилань

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

Особливості просування в регіонах

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

У першому випадку ми просуваємо основний домен і мобільний піддомен m.site.ru. Кожному з них потрібно задати регіони через «Яндекс.Довідник». Проблема в тому, що іноді самостійно прив'язати мобільну версію сайту до філії неможливо. Доведеться звернутися в техпідтримку, але і це не гарантує результат. Створити окрему організацію під мобільну версію сайту можна. Тому, якщо філій багато, прив'язка може затягнутися надовго.

Варіант з використанням піддоменів начебто m.spb.site.ru або spb.m.site.ru ми взагалі виключаємо. Хоча «Холодільнік.ру», наприклад, його використовує. Але в цьому випадку потрібно налаштовувати адресацію між усіма регіонами мобільних і десктопних версій, підтримувати їх в актуальному стані, відстежувати зміни і моніторити сервіси для веб-майстрів. Це величезна робота, яка навряд чи окупиться.

Відправка на перевірку «мобілопрігодності»

Якщо не відправити на перевірку «мобілопрігодності» оптимізовану версію сайту в «Яндекс.Вебмастере», він може не з'явитися в мобільній видачі. Проблема стосується і адаптивен. Таке трапляється не завжди, але рекомендую стежити за повідомленнями в «вебмайстрів».

Фрагмент спілкування з техподдержкой «Яндекса» про присвоєння регіону мобільної версії сайту

Чому ж використовують мобільні версії

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

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

Який варіант вибрати

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

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

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

Витяг з керівництва Google про індексування сайтів, які використовують RESS

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

Дякую SEO-фахівців

Про мобільності говорять всі, кому не лінь: від невеликих маркетингових агентств до гігантів типу Яндекса і Гугла.

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

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

Навіщо? Навіщо? Навіщо?

Можна по-різному мусолити тему необхідності адаптації сайту під мобільні пристрої.

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

Давайте зупинимося докладніше на кожній. При цьому, як правило, коротко і по справі. Воду залишаємо за воротами.

Зручність для користувачів

У 2016 році аналітики з StatCounter першими помітили, що частка мобільного трафіку перевищила частку робочого столу: 51,3% проти 48,7.

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

У Росії картина приблизно така ж: частка смартфонів вище, ніж частка комп'ютерів і інших пристроїв. Про це говорить дослідження компанії GfK Rus:

Статистика

З кожним роком відрив росте все сильніше - наприклад, в 2018 році зростання склало 20%. Причому, аналітики говорять, що це ще не межа.

Такий розклад точно повинен змусити Вас замислитися: як же Ваш сайт виглядає на екрані смартфонів.

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

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

Його користувачі не будуть довго шукати потрібний розділ і розбиратися в інтерфейсі - в сусідній вкладці завжди відкритий зручний сайт конкурента.

Уподобання пошукових систем

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

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

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

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

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

А значить і поведінкові характеристики погіршаться. Як наслідок - Ви на останніх незаселених сторінках Яндекса і Гугла по.

Ми Вас ще не переконали? Тоді перевірте самі потрібна мобільна версія Вам, а точніше з яких пристроїв відвідувачі заходять на Ваш сайт.

Зробити це можна в Google Analytics в звіті "Аудиторія -\u003e Мобільні пристрої -\u003e Огляд". Якщо у Вас, тоді перейдіть в "Звіти -\u003e Технології -\u003e Пристрої".

Аналітика

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

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

види мобільних версій

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

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

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

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

У спрощеному варіанті виглядає так: для комп'ютерів відкриваємо всі пункти меню і будуємо товари в три стовпці.

Для планшетів показуємо тільки кошик, а товари розміщуємо в два стовпчики; у смартфонів - ховаємо все в кнопку меню, товари маємо по одному на кожен рядок.

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

Головний плюс такої адаптивності сайту в тому, що і мобільна, і десктопна версії - це один і той же сайт.

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

Це може бути додавання статті, зміна сортування, новий колір кнопок. Інші плюси адаптивен:

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

Мінуси адаптивної верстки також є. Хоча щодо інших варіантів вони досить непомітні. Але все ж, як уже сказав, вони є:

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

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

Його використовують багато движки, конструктори і втім ми у себе на деяких.

2. Окрема мобільна версія

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

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

Найчастіше саме мобільна версія починається на засланні з букви m (в перекладі як "мобільна").

Окрема мобільна версія

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

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

Всі кнопки і перемикачі можна зробити величезними, щоб на них напевно потрапити пальцем.

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

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

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

Різні адреси сайту у мобільників і робочого столу. Це може створити неприємності при SEO - пошуковики бачать два різних сайту з однаковим вмістом.
І знижують позиції за дублювання. Щоб обійти проблему, доведеться підключати додаткові ресурси;
Незручно сидіти з планшета - на ньому елементи розпливаються по всьому екрану.
А для деськтопной версії екран планшета виявиться недостатньо великим. Виходить, що відвідувач потрапляє в глухий кут;
Обходиться дорожче. Хоч у мобільній версії і обмежений функціонал, але все одно, вважайте, що це новий сайт, який потрібно створювати з нуля.
Тому на розробку мобільної версії сайту закладайте бюджет заздалегідь;
Додатковий час на управління. Сайтів-то два, підтримувати роботу і стежити за актуальністю потрібно і там, і тут.

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

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

Сайт інтернет-магазину

3. Динамічний показ (RESS)

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

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

Головний недолік RESS - це довго і дорого. Розробити динамічний показ - все одно, що з нуля створити кілька різних сайтів.

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

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

Ще є таке поняття, як гумова верстка. Деякі вважають, що це варіант мобільного сайту, але це не так.

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

КРИТЕРІЇ ідеально

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

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

Тому в незалежності від того, який підхід Ви вибрали, потрібно дотримуватися певних правил сайту для мобільних пристроїв. Ось найважливіші з них:

Великий темний текст на світлому тлі. Всі тексти краще оформляти за класикою - чорний шрифт на білій підкладці.
Короткі форми. Залишити заявку, записатися на прийом, оформити покупку - щоб споживач не збирався вводити, потрібно запитувати мінімум даних, яких достатньо для першого контакту.
Довгі форми відлякують в принципі, що вже говорити про мобільних відвідувачів.
Великі клікабельні елементи. Відвідувач не повинен цілитися і ловити кнопки і перемикачі. Всі інтерактивні елементи краще робити великими - спробуйте самі на них потикати.
Apple і Microsoft радять прагнути до розмірів 44 на 44 пікселів. Мінімальний поріг - 24х24, але це в крайньому випадку.
Швидкість завантаження сайтів. Тут конкретних стандартів немає, але завжди потрібно прагнути до ідеалу.
Є така загальна закономірність - кожна секунда, яка йде на завантаження сторінки, пропорційно знижує конверсію в продажу.
Перевірити мобільну версію сайту на швидкість завантаження можна в спеціальних сервісах, про них трохи нижче.
Заданий тип форми. При складанні технічного завдання обов'язково вкажіть, що при заповненні телефону повинна виводитися тільки цифрова клавіатура.
Те ж саме для паролів, електронної пошти та інших полів. Якщо розробляєте сайт самі, то не полінуйтеся поставити кожній формі відповідний тип.
Клікабельні контакти. Як і у випадку з формами, у контактних даних теж є спеціальний тип посилання.
Натискаємо на телефон - відкривається набір номера, на пошту - поштова програма. Користувачі обов'язково будуть по звичці тикати по контактам.
Інформація в один стовпець. Ніяких горизонтальних скролів і фотографій в декілька стовпців на одному екрані.
Навіть у крутих флагманів для цього недостатньо великий екран. Текст в одну колонку зручніше читати, а на великих фотографіях можна буде розгледіти всі деталі.

Лайфхак. Якщо Вам просто необхідна повна інформація про клієнта (для доставки, наприклад), то розбийте процес заповнення заявки на кілька кроків.

У першому кроці запросите ім'я і номер, а адреса і реквізити - в наступних. Навіть якщо користувач полінується і не заповнить форму до кінця, у Вас залишаться контакти, щоб дотиснути.

форма захоплення

Перевірка мобільних

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

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

Попросіть добровольця зробити замовлення - нехай він пройде повний шлях покупця. Тільки не заважайте і не виправляйте його.

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

Будь-які труднощі і замішання Ваш піддослідний повинен коментувати вголос.

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

Технічна перевірка

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

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

Google Search Console - офіційний сервіс від Гугла. Він покаже, як виглядає сайт на середньостатистичному екрані смартфона і дасть рекомендації щодо поліпшення.

Пам'ятайте, ми говорили про алгоритм Mobile-first Index? Сервіс якраз заснований на його роботі, тому не нехтуйте цим пунктом.

Google Search Console

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

Тільки потім можна використовувати сервіс, перейшовши в "Інструменти -\u003e Перевірка мобільних сторінок". Штука теж корисна - з рекомендаціями та коментарями.

Яндекс Вебмайстер

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

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

Перевірка від пошуку Bing

візуальна перевірка

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

Щоб встежити за всіма, використовуйте сервіси для відображення сайту на різних екранах. Ось деякі з них:

responsinator.com - показує відразу всі популярні пристрої на одній сторінці. Всього в сервісі їх десять: Pixel 2 (і в цілому Андроїд), Айфони і Айпад.

responsinator.com

iloveadaptive.com - можна вибрати, які платформи відобразити відразу, не перемішуючи різні пристрої.

З додаткових булочок: в правому верхньому куті є базові показники швидкості завантаження сторінки.

iloveadaptive.com

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

Зверху - зручна лінійка з розміром екрану в пікселях і додаткові функції для повороту і скролінгу.

quirktools.com

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

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

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

До речі. Дізнатися точно, з яким розміром екрану до Вас заходять відвідувачі можна в тій же метриці. Статистика знаходиться в "Стандартні звіти -\u003e Технології -\u003e Дозволи дисплея".

Коротко про головне

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

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

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

Зараз адаптація сайту під смартфони - функція за замовчуванням. Наш Вам експертна рада - відкиньте сумніви, і вперед за справу.

Це додаткова спрощена версія сайту, розташована як правило на піддомені з приставкою «m» (наприклад, m.сайт).

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

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

переваги

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

недоліки

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