Mobile‌ ‌First‌ ‌Design‌ ‌при‌ ‌створенні‌ ‌сайтів:‌ ‌що‌ він означає і ‌чому‌ ‌є настільки актуальним

Напевно, багато хто пам'ятає свій перший кнопковий мобільний телефон: після кожного входу в браузер доводилось із хвилюванням перевіряти залишок коштів на рахунку. Спочатку мобільний інтернет був дорогим, незручним у використанні та вкрай обмеженим у можливостях. Сьогодні більше ніж 50% усього інтернет-трафіку припадає на сеанси зі смартфонів. Крім того, за допомогою мобільних пристроїв здійснюється все більше купівель – за прогнозами, на кінець 2021 року частка мобільної комерції становитиме близько 73% від усіх роздрібних продажів у e-commerce.

Такі тенденції вимагають приділяти все більше уваги мобільній версії сайту – вона має справляти максимально позитивне враження на користувача. Оптимізація сайту для різних типів пристроїв уже давно стала одним із обов'язкових пунктів у технічному завданні на розробку. А сьогодні все частіше можна почути про підхід Mobile First. У цій статті ми розповімо, чим він відрізняється від звичного процесу створення сайтів, а також про основні принципи, переваги та підводні камені методу.

Що таке Mobile First?

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

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

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

При порівнянні підходів “спочатку десктоп” і “спочатку мобільні” часто згадуються дві методології, які допомагають краще зрозуміти їхню основну логіку:

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

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

У чому різниця між адаптивним, чутливим дизайном та Mobile First?

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

Адаптивний веб-дизайн (AWD)

Під час проектування веб-сайту в адаптивному дизайні розробляється кілька статичних макетів для різних типів пристроїв. Шаблони містять структуру розміщення елементів залежно від ширини дисплею. Зазвичай макети створюють для кількох стандартних величин ширини, наприклад: 320 px, 480 px, 768 px, 960 px, 1200 px, 1600px. Скрипти визначають розміри екрана користувача та завантажують відповідний шаблон на підставі цих контрольних точок.

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

Чутливий дизайн (Responsive Web Design, RWD)

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

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

Mobile First Design

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

Плюси та мінуси Mobile First

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

Переваги

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

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

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

Швидке завантаження сторінок

Одна-дві секунди – стільки часу більшість людей готові чекати на так зване «перше відтворення контенту» (First contentful paint, FCP). Навіть якщо користувача зацікавив опис сторінки в пошуковій видачі, існує ризик, що він залишить сайт, який довго

Згідно з нашим дослідженням якщо завантаження триває більше ніж 3 секунди, ймовірність відмови збільшується на 32%, а при очікуванні понад 5 секунд – на 90%, –

Деніел Ан, глобальний менеджер по продуктах Google

 

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

• розміщення тільки найважливішого контенту;

• використання зображень без втрати якості, але меншого розміру;

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

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

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

Пріоритет у ранжуванні пошуковими системами

Google визначив вектор проектування веб-сайтів у бік mobile-friendly ще у 2010 році. Тоді компанія оголосила, що підходитиме до своїх продуктів із позиції “мобільні пристрої у першу чергу”. А через шість років було запущено алгоритм Mobile First Index, який аналізує сайти на предмет зручності використання на мобільних пристроях. Очікується, що невдовзі цей пошуковий принцип буде застосовуватися при ранжуванні сторінок усіх сайтів.

Чи це означає, що тільки сайти, розроблені за принципом Mobile First, можуть претендувати на топові позиції у видачі? Самі Google не наполягають на обов'язковому застосуванні цього підходу. Правильно реалізований адаптивний або чутливий дизайн теж задовольнить індексування із пріоритетом мобільного контенту. Однак "правильно" тут – ключове слово. Це означає, що необхідно проводити діагностику адаптивної версії сайту щодо відповідності алгоритму Mobile First Index. Для цього є кілька способів. Серед найшвидших – сервіси Mobile-Friendly Test і Search Console від Google. Наприклад, головну сторінку нашого блогу Mobile-Friendly Test визначив як оптимізовану для мобільних пристроїв.

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

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

Недоліки

Тривалість і вартість розробки

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

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

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

Обмеженість візуального оформлення

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

Зрозуміти, чи варто ганятися за креативами, допоможе аналіз конкурентів та вивчення вашої цільової аудиторії. Наприклад, сайт Instagram залишився на рівні Mobile Only – його десктопна версія практично така сама, як і для мобільних телефонів. Чи це влаштовує користувачів? Судячи з популярності сервісу, цілком. Instagram намагається не відставати від інших популярних соціальних мереж і додає нові функції, але в плані дизайну на десктопі залишається незмінним уже багато років.

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

Акцент на контенті

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

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

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

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

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

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

Інтерфейс новинних, розважальних та навчальних ресурсів має містити свої обов'язкові тригери. Наприклад, для блогу такими елементами можуть бути кнопки реєстрації, підписки, оцінки статті, форма відправлення коментарів, рекомендовані тематичні матеріали... Вдалий приклад такої реалізації – сайт AdMe.ru. У верхній частині сторінки тут розміщений рядок із іконками меню, авторизації та підписки (яка зникає під час скролу), а нижче – кнопки основних дій зі статтею: оцінка, коментар, збереження до вибраного, шерінг. Крім того, під кожним фото і в кінці статті є кнопки соцмереж, які дозволяють миттєво поділитися контентом. Ну і нарешті – в самому кінці сторінки відвідувачам пропонують до прочитання інші захоплюючі матеріали, які напевно затримають їх на сайті.

Візуальна ієрархія контенту

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

На практиці у більшості випадків це має такий вигляд:

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

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

Існують також детальніші схеми ергономіки мобільних пристроїв, побудовані на "правилі великого пальця". Цей підхід базується на дослідженнях того, як користувачі тримають смартфон у руці та керують ним. Як з'ясувалося, 75% людей торкаються дисплея лише одним великим пальцем. Так дослідники сегментували зони екрану мобільних телефонів за легкістю взаємодії з ним пальцями. Спочатку в статті 2016 року було запропоновано таку мапу зручності керування:

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

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

Простота навігації

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

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

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

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

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

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

User-friendly інтерфейс

Турбота про зручність користувача під час серфінгу на сайті – ще один обов'язковий атрибут концепції Mobile First. Забезпечивши добре опрацьований UX, можна розраховувати на повторні відвідування клієнта у майбутньому. У статті ми вже навели чимало статистичних даних, і ось іще один важливий факт: 48% респондентів вважають простоту використання мобільного сайту його найважливішою якістю.

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

Адаптація контенту до ширини області перегляду

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

Правильна типографіка

Щоб користувач не напружував зір під час перегляду сторінки, текст має бути достатнього розміру і водночас не займати пів екрана. Для мобільних версій сайтів рекомендується застосовувати шрифт не менший ніж 12 px, а як основний вибрати 14-16 px. Крім того, використання більше ніж трьох шрифтів на сторінці може сповільнювати її завантаження, а це вже суперечить основам Mobile-First.

Орієнтація на сенсорне керування

При використанні десктопного ПК або ноутбука у користувача є миша з точним курсором, а у користувачів смартфонів – тільки їхні пальці (за рідкісним винятком використання стилуса). Це означає, що треба унеможливити натискання неправильного посилання або кнопки. Для цього дотримуйтеся таких рекомендацій: мінімальний розмір клікабельних елементів – 26 px, оптимальний – 40-44 px, а відступи навколо них – не менші ніж 10 px.

Виключення невідтворюваного контенту

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

Оптимізація віджетів

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

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

Мінімум дій користувача

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

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

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

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

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

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

Щоб налаштувати коректне відображення листа на мобільному, в редакторі доступні три варіанти рішення.

Меню “Адаптивність” у вкладці “Оформлення”

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

• розмір тексту для різних складових листів (хедер, футер, інфообласть та ін.);
• розмір та вирівнювання шрифту для заголовків рівнів H1-H3;
• розмір тексту в кнопках та їхнє розтягування в ширину;
• відступи навколо листа.

Меню “Структури” та “Блоки” у вкладці “Контент”

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

Структури мають такі варіації налаштувань показу на телефонах:

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

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

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

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

Редактор коду

Підходить для досвідчених спеціалістів, знайомих із HTML. Якщо вбудованих у редактор листів функцій вам недостатньо, скористайтеся власними медіазапитами для створення адаптивного макета. Для цього натисніть на панелі інструментів іконку "Редактор коду" та перейдіть до вкладки CSS. Уривок коду, що відповідає за адаптивність, починається з @media only screen and (max-width: 600px) {. Пропишіть тут потрібні стилі оформлення, щоб налаштувати зовнішній вигляд або приховування елементів для мобільної версії листа.

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

Для чого приділяти таку увагу адаптації до мобільних пристроїв?

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

• “У нас хороша десктопна версія, і це головне. Людям все одно зручніше переглядати наш сайт на великому екрані”.

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

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

• "Наш мобільний додаток дуже зручний, зберігає важливі для користувача дані та звільняє його від зайвих дій на сайті".

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

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

• “Соцмережі – ефективне джерело продажів для нас. Ми обходимось без веб-сайту, оскільки це дорого, і нас влаштовують нинішні показники прибутку”.

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

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

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

А як ви вважаєте: “спочатку мобільний” – це недовготривалий тренд або велика перспектива на майбутнє, до якої варто придивитися вже зараз? Чи витіснять мобільні телефони десктоп найближчим часом? Чекаємо на вашу думку в коментарях!