Мобільна версія або адаптивна верстка. Адаптив чи мобільна версія. Чому все-таки використовують адаптивний дизайн

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

Якщо необхідно перевірити мобільну версію сайту онлайн на комп'ютері, то на допомогу приходять емулятори мобільних пристроїв. Найточніші з них – це засоби для розробників мобільних операційних систем, найпопулярнішими з яких є Android Studio та Apple Xcode. У цих наборах є найповніші емулятори різних пристроївта перевірка мобільної версії сайту буде найбільш точно наближена до реального мобільного пристрою. Однак, щоб встановити засоби для розробників на звичайний комп'ютер, знадобиться дуже багато часу, досвіду та знань із володіння програмним забезпеченням.

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

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

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

Другим за складністю варіантом, що дозволяє перевірити мобільну версію сайту через комп'ютер, є встановлення спеціального браузера. Наприклад, Opera Mobile Classic Emulator. Його версії існують для Windows, Mac та Linux. На жаль, ця технологія заснована на старому движку Presto, використаному до 12 версії браузера Opera, і не покаже реально, як відображається сайт у сучасному мобільному браузері. З 2013 року браузер Operaпрацює на програмному движку Blink, тому перевірку мобільного сайту краще провести на сучасному браузері. Це може бути як Opera так і Chrome, що працюють на однаковому движку Blink на основі WebKit, що використовується в Apple Safari.

Необхідно включити у вказаних браузерах спеціальний режимрозробника (F12 в Chrome або Ctrl+Shift+i в Opera) і перейти в режим мобільного пристрою:

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

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

Вітаю, мої шановні читачі блогу. На зв'язку Галіулін Руслан. Сьогодні будемо говорити про мобільні версії сайтів, які повинен мати кожен сайт або блог, щоб просунутися в ТОП пошукових систем. У статті дам коди стилів та готові приклади верстки сторінок, які можете завантажити до себе на комп'ютер.

Якщо Ваш сайт досі не мобільний, рекомендую скористатися моїми порадами або звернутися до професіоналів. http://www.Mobile-version.ruякі зроблять все за стандартами пошукових систем. За цим посиланням можна і перевірити свій сайт на мобільність.

У 2013 році Google почав тиск на вебмайстрів ( https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html), переконуючи в необхідності створення полегшених модифікацій сайтів, а з 2015 року мобільність стала одним із аспектів ранжування ( https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html). Не відстає і Яндекс, який створив спеціальний алгоритм «Владивосток», що враховує придатність для перегляду з телефонів.

Mobile Friendly сьогодні – це не просто турбота про відвідувачів, а неодмінна умова просування.

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

Є три підходи:

Окрема адреса та макет – розміщується на піддомені виду m.site.ru. Перенаправлення відбувається за допомогою серверного редиректа за користувачем.
Адаптивний дизайн - url і html залишаються тими ж, що і в настільному форматі, але CSS медіа-запитами віддаються правила для різних екранів.
RESS - респонсивний дизайн, адреса залишається незмінною, але сервер посилає набори стилів залежно від того, який тип обладнання запитує сторінку.

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

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

Подальші дії вимагатимуть упевнених базових знань html та css або вміння швидко гуглити незрозумілі речі.

Інформація для новачків: у CSS слова перед фігурними дужками означають конкретні шматки html файлу, відображення яких вони відповідають. Пишуться частіше з точкою або ґратами - #місце (властивість: значення;).

Крок 1. Знімаємо обмеження.

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

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

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

img (

Max-width: 100%;

Height: auto;

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

table (

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Обтікання – задаються властивістю float. Встановлення цього параметра дозволить блокам переміщатися залежно від параметрів вікна, підлаштовуючись під елементи зі стійкою позицією або батьківських контейнерів. Стандартні div-елементи за промовчанням перекладаються кожен на новий рядок. Наприклад, розмістивши в контейнері 1000 px div-блоки по 200 px, можна побачити таку картину.

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

Крок 2. Планування реорганізації контенту.

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

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

Крок 3. Зручність.

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

Область контенту: для телефонів зазвичай задають ширину основного блоку в CSS до 100% залежно від доступного простору. Це означає, що текст, модулі, реклама, вміст сайдбарів видаватимуться на малих пристроях в один стовпчик.

Сенсори: пальці не такі точні, як мишка, залиште їм достатньо місця. Простір навколо посилань та інших активних елементів повинен становити щонайменше 28 x 28 пікселів.

Допомагайте своїм відвідувачам визначити активний простір – відступи, виділення, зміна кольору та інші речі, які можна задати для торкань, прописуйте псевдоклас hover для посилань та кнопок.

Реалізація Media Queries із прикладами

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

Media queries - логічні висловлювання, звернення до них має на увазі відповідь з параметром true або false. Якщо результат запиту true, тобто, користувач-агент або розміри пристрою відповідають заданому типу носія, автоматично застосовуються правила стилю, зазначені всередині media-блока.

Медіа запити можна призначати за параметрами:

ширина та висота вікна браузера;
ширина та висота пристрою;
орієнтація – ландшафтний або портретний режим;
розширення екрану.

Актуальний список аргументів доступний у офіційної специфікації.

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

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

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

Для виправлення забираємо фіксовані рамки, прописавши в стилі шаблону:

@media only screen and (max-width: 1000px) (

Nav ( width: 100%; )

Тепер якщо ширина екрана користувача становить менше 1000 px, то width меню дорівнюватиме 100% його розміру. Основна версія шаблону виглядає, як раніше. Заміна властивості прибрала нижню смугу прокручування під час стиснення екрана.

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

Дописуємо в той самий медіаквері:

Block (width: 35%;)

Як дізнатись оптимальні розміри для блоків свого сайту? Вважати вручну або взяти за основу будь-яку готову сітку - fluid grid. Можна орієнтуватися на наявні стандарти: у двоколоночних макетах при ширині вікна 980-1050px обгортка приймається за 95%, контент – 60% і на сайдбарі залишають 30%. Простір, що залишився, йде на формування бордюрів і margin для акуратності.

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

Переходимо до завдання відображення на екранах з меншою роздільною здатністю:

@media only screen and (max-width: 600px) (

Block (

Float: none;

Width: 85%;

Margin: 1em auto;

Якщо екран менше 600 px, то наші блоки повинні стати в одну колонку - прибираємо обтікання, задаємо нові відступи, центруємо і міняємо ширину. Найчастіше ставиться 100%, але якщо це з якихось причин незручно, встановлюємо свій розмір.

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

Продемонструємо можливості на прикладі зміни кольорів та відображень.

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

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

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

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

Мобільна версія сайту: як зробити і на що звернути увагу

Медіаквері розуміють усі сучасні браузериале це не спрацює в IE 8 і нижче. Проблема вирішується зверненням до старих IE у вигляді умовних коментарів. Їх потрібно прописувати в коді шаблону, а не CSS.

Сам скрипт доступний на гітхабі. https://github.com/scottjehl/Respond), додає в старі IE підтримку мінімальних та максимальних габаритів та медіаквері.

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

Код прописується в html, додатково CSS встановлюється блокове відображення створених елементів:

header, nav, section, article, aside, footer (display:block;)

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

If ($(document).width() > 980) (

$.getScript("шлях до скрипту");

Ще один момент – як мобільний браузерайфона повинен обробляти контент, що віддається, дозволено його збільшення. Для цього в head прописується ініціальна шкала:

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

Якщо сайт перевертається на локальному сервері, Коректність можна визначити в ami.responsivedesign.is. Власникам денвера для правильного відображення потрібно змінити кодування на utf-8, відредагувавши серверний файл httpd.conf.

Сервіс продемонструє, як виглядає проект на різних пристроях.

Додатково шаблон тестується https://developers.google.com/speed/pagespeed/insights/або у спецформі https://www.google.com/webmasters/tools/mobile-friendly, а також у вебмайстернях.

В Яндексі це виглядає детально, а Google просто повідомить, що проблем немає.

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

Нижче натиснувши на одну з кнопок ви зможете завантажити 2 приклади сторінки згортаної в даному уроці і вже просто працювати з готовими сторінками та копіювати код.

З повагою Галіулін Руслан.

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

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

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

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

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

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

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

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

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

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

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

Статистика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аналітика

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

КРИТЕРІЇ ІДЕАЛЬНОСТІ

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

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

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

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

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

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

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

ПЕРЕВІРКА мобільності

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

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

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

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

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

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

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

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

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

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

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

Google Search Console

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

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

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

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

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

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

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

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

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

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

responsinator.com

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

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

iloveadaptive.com

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

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

quirktools.com

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

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

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

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

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

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

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

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

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

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

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

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

Переваги

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

Недоліки

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

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

В закладки

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

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

Важко однозначно відповісти на питання, яка технологія адаптації під смартфони та планшети ефективніша з погляду 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="alternate", налаштуйте індексацію та генерацію XML-карти.

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

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

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

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

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

У «Яндекса» у цьому плані все чітко – він окремо індексує контент мобільних та десктопних сторінок. Для цього достатньо встановити атрибут rel="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-фахівцям