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

вступ

Після запуску понад 100 мобільних сайтів за останні три роки, включаючи такі великі проекти, як Ozon, «Ельдорадо», «Леруа Мерлен», «Фінам» і багато інших, я все ще часто бачу у разрабочиков і керівників нерозуміння адаптації - як стратегічне, так і практичне. Щоб заощадити час, визначте за допомогою цієї схеми, в якій групі ви перебуваєте, і перейдіть відразу до розділів « технології »Або« помилки дизайнерів ». Або просто продовжуйте читати.

правильний підхід

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

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

Час минав, все більше компаній адаптували свій сайт для мобільних користувачів. У 2014 році навіть Apple впровадили адаптивну верстку.

Через якийсь час в портфоліо студії Лебедєва почали з'являтися роботи для клієнтів, яким, судячи з його заявою, «нікуди гроші дівати», - для « російського стандарту »і не тільки . Загалом, якщо є попит - буде і пропозиція. А буквально нещодавно Лебедєв зізнався , Що мобільні сайти все-таки потрібні.

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

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

Сайт пенсійного фонду з щомісячною відвідуваністю 300 тисяч користувачів

До чого вся ця передісторія? Три висновки:

• Потрібно звертати менше уваги на висловлювання окремих особистостей з приводу глобальних тенденцій. Щоб бачити майбутнє, краще стежте за такими глобальними гравцями, як Google, а ще краще - читайте блог Chromium .
• Тепер як мінімум кожен третій відвідувач сайту - користувач мобільного пристрою. Привід замислитися.
• Якщо ви не знаєте, як зробити зручний мобільний UX, - це не означає, що не потрібно робити мобільний сайт. Знайдіть хороші приклади і дотримуйтеся їх.

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

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

Пошукова видача

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

лояльність

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

конверсія

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

Отже, ви згодні з тим, що коректна робота і відображення сайту на смарфтонах важливі, але з певністю цією хотів недостатньо. З цього моменту вам потрібно інакше дивитися на будь-який веб-проект - думати спочатку про мобільних юзерів, а потім вже про десктопних. Такий підхід називається mobile first. Детальніше про цей підхід ви можете прочитати в блозі Люка Врублевський або в його книзі Mobile First .

Після знайомства з підходом люди поділяються на три групи:

1. Повністю згодні з підходом.
2. Бачать в ньому сенс, але вважають його технічно неможливим.
3. Не бачать в ньому сенсу.

Першої та другої групи раджу відразу перейти до розділу « технології », Вибравши відповідний варіант для свого проекту.

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

Застосовуючи mobile first, ви вирішуєте задачу адаптації на всі 100%. Важливо використовувати його на кожному кроці: плануєте email-розсилку - спочатку проектуємо шаблон для смартфонів, потрібен Лендінгем - спершу створюємо прототип для маленького екрану, є ідея редизайну головної сторінки - малюємо її для екрану смартфона і тільки потім для робочого столу. Поступово це перетвориться в корисну звичку, якої можна і потрібно заражати інших.

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

технології

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

• адаптивний дизайн;
• динамічний показ;
• різні URL.

адаптивний

звичайний

Назва говорить сама за себе. Це чистий адаптивний дизайн, який змінює відображення на різних екранах за допомогою CSS Media Queries . HTML на всіх пристроях єдиний, а за відображення елементів відповідають CSS-стилі. Додатково можливо використовувати JavaScript, який може міняти відображення і поведінку сторінки в залежності від пристрою. Підхід mobile first має на увазі використання саме цієї технології: ви проектуєте, верстаєте спочатку для мобільних, а потім додаєте стилі для десктопів.

Як реалізувати: погодьтеся з підходом mobile first, прочитайте книгу Responsive Web Design і починайте процес створення нового сайту (або редизайну) з ширини екрану айфона (320 пікселів). Коли у вас буде готова верстка для цієї ширини, додайте Media Query для наступної ширини екрану (припустимо, 768 пікселів) і так далі, поки не будете удовлеворени результатом. Кому-то вистачає двох брейкпоинтов: для смартфонів і десктопів, хтось хоче передбачити та планшети аж до різного відображення в вертикальному і горизонтальному положенні. Якщо ви використовуєте JavaScript, то ці файли також буде завантажено для всіх користувачів, а вже всередині JavaScript можливо виконувати різні функції залежно від пристрою.

динамічний JS

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

Цей підхід ми в eski.mobi використовуємо при адаптації сайтів. Ми вибрали саме його, оскільки він дозволяє отримати контроль над DOM сайту ще до рендеринга в браузері. Завдяки цьому підходу ви можете повністю міняти відображення деськтопной версії сайту на мобільному пристрої при збереженні оригінального HTML. Більш докладно всі переваги підходу динамічного JS описані тут .

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

динамічний показ

плагін

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

Як реалізувати: якщо у вас WordPress, то ви просто встановлюєте WPtouch, Mobile Pack або Mobile Edition . Спробуйте кожен, щоб знайти найзручніший і підходящий варіант. Для інших CMS є інші плагіни, але суть зводиться до того, щоб максимально полегшити процес «мобілізації», зробивши мінімум зусиль. Мобільний сайт буде відкриватися на субдомені (m.site.ru) або без редиректу - все залежить від налаштувань.

різні URL

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

окрема CMS

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

Як реалізувати: створіть піддомен m.site.ru і розмістіть там систему управління для мобільного сайту. Врахуйте, що це сайт тільки для мобільних пристроїв, тому всі стилі і контент повинні бути оптимізовані саме для смартфонів. Коли сайт буде готовий, включите визначення мобільних пристроїв і перенаправлення на інший домен. ось готове рішення для цього завдання: просто скачайте версію в потрібному мовою програмування і вставте в шаблон основного сайту відразу після <head>. Замініть останній рядок редиректу на адресу вашого мобільного сайту.

API

Це оболонка, яка отримує контент основного сайту по API і відображає мобільну версію в зовсім іншому дизайні. Цей метод використовують такі великі проекти, як Facebook, Twitter і «ВКонтакте», і все, кому потрібен повний контроль над мобільною версією при збереженні єдиного контенту. Це найскладніший спосіб реалізації та підтримки, і його використовують тільки ті, хто точно розуміє, що хоче отримати в результаті.

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

конструктор

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

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

Правильний вибір

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

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

1. Вивчіть портфоліо мобільних сайтів (бажано не менше десяти). Саме сайтів, а не односторінкових Лендінзі. Обов'язково відвідайте всі сайти з портфоліо. Якщо якийсь із сайтів недоступний - ймовірно, підрядник вводить вас в оману і перебільшує свої заслуги.
2. Зверніть увагу на швидкість роботи і дизайн сайтів з портфоліо. Чи багато там практичних помилок?
3. Попросіть підрядника розповісти про способи адаптації, які йому відомі. Запитайте, чому він використовує той чи інший спосіб, які може привести аргументи «за» і «проти».
4. Зафіксуйте в договорі терміни створення мобільного сайту і передбачте штрафні санкції в разі прострочення. При цьому намагайтеся завжди швидко надавати зворотний зв'язок, якщо вона потрібна виконавцю для продовження роботи.
5. Обговоріть формат і умови подальшої технічної підтримки. Початок роботи з мобільного аудиторією - відповідальний і, ймовірно, новий для вас крок. Важливо, щоб підтримка надавалася вчасно і не вносила хаос у ваші усталені процеси. Однак успіх впровадження і розвитку мобільної версії буде залежати і від того, наскільки добре ви засвоїли підхід mobile first.

особливості адаптації

зображення

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

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

Єдине рішення, яке є сумісним з будь-яким сервером з підтримкою PHP, - це скрипт Adaptive Images. Скрипт (PHP і JS) на льоту визначає розмір екрану пристрою і віддає картинку відповідного розміру. Основна перевага цього рішення - універсальність: не потрібно змінювати поточну структуру проекту, не потрібно допрацьовувати CMS або HTML.

Як реалізувати: докладніше про налаштування краще прочитати на сайті автора або встановити плагін для WordPress.

таблиці

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

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

Як реалізувати: додайте батьківського блоку, який містить таблицю, ці CSS-властивості:

• Для горизонтального скролла: overflow-x: auto;
• Для плавної прокрутки: -webkit-overflow-scrolling: touch;

Іконка Web App

Неочевидна функція будь-якого сайту - можливість додати закладку у вигляді іконки на робочий стіл. Ця можливість існувала з часів першого iPhone, але не набула великого поширення. Принцип роботи простий: натискаєте «Додати», вибираєте «Робочий стіл», і готово - посилання на сторінку, яку ви зберегли, тепер красується прямо на головному екрані користувача і доступна буквально в один клік.

Як реалізувати: намалюйте іконку та експорту PNG-файл розміром 180 * 180 пікселів без заокруглень. На сайті додайте цей тег - <link rel = "apple-touch-icon" href = "іконка.png">. Якщо бажаєте вказати різні розміри для iPad і iPhone, дотримуйтесь інструкції Apple.

Банер Web App

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

У свіжій Версії Chrome команда Google реалізувала нативную можливість запропонувати користувачеві встановити іконку. Однак для сайту критична наявність протоколу HTTPS, до того ж банер з'явиться тільки в тому випадку, якщо користувач відвідував ваш сайт не менше, ніж двічі, за два різних дні протягом двох тижнів.

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

геолокація

Пуш-повідомлення

новина вже застаріла, але так, пуш-повідомлення тепер є в браузері. З мобільних платформ на момент написання цієї статті повна підтримка є тільки у Google Chrome на Android. Такі повідомлення також працюють на десктопних версіях Google Chrome і Safari OS X. Принцип роботи такий же, як у пушей в мобільних додатках. Заходячи на сайт, користувач бачить спливаюче вікно із запитом на дозвіл відправки повідомлень. Якщо запит буде підтверджений, власник сайту зможе відправляти необмежену кількість повідомлень, навіть якщо сайт і браузер у користувача закритий. Уявіть можливі сценарії використання різних механік.

медіа:

• Відправляти всім передплатникам повідомлення про вихід нової важливої ​​статті.
• Включити повідомлення тільки тим, хто підписаний на певну тематику.

Ecommerce:

• Користувач відвідав розділ «Взуття» і покинув сайт. Через годину або через день можна його підбадьорити повідомленням: «Вас цікавила взуття - у нас є для вас пропозиція».
• Користувач наповнив «Кошик», але не оформив замовлення: «Ви забули оформити замовлення. Зробіть це прямо зараз ».
• Через два дні замовлення все ще не оформлений? Запропонуйте користувачеві купон на знижку: «Ми даруємо вам 500 рублів, оформіть замовлення протягом години».
• Можна надсилати користувачу поновлення по статусу замовлення: прийнятий, упакований, переданий кур'єру, в дорозі і так далі.

Як реалізувати: все не так просто. Начебто все процеси і вимоги описані, але на практиці складно буде самостійно зібрати все в єдиний механізм. Сервіси, які спрощують реалізацію, - Roost , Send Pulse , One Signal . В ідеалі важливо, щоб сайт був з HTTPS, однак вищезгадані сервіси допомагають обійти цю вимогу, відправляючи повідомлення від імені свого поддомена.

масштабування

Спірний момент, однак він вимагає уваги. У мобільних браузерах можна заборонити масштабування сайту одним тегом - <meta name = "viewport" content = "width = device-width, user-scalable = no" />.

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

плавні прокручування

При створенні областей прокрутки в мобільній версії за допомогою CSS-властивості overflow: scroll може виникнути неприємний нюанс - відсутність інерції.

Як реалізувати: проблема вирішується додаванням цієї властивості -
-webkit-overflow-scrolling: touch ;.

тестування

Коли заходить мова про тестування мобільного UX, то деякі губляться, не уявляючи, як зібрати парк реальних пристроїв. Це зайве, коли існують сервіси типу BrowserStack - в ньому більше 700 емуляторів десктопних браузерів, а також версії для iOS, Android і Windows Phone.

Можна також використовувати безкоштовні інструменти на кшталт Genymotion для емуляції Android, iPhone simulator в рамках пакету Xcode або просто режим мобільного розробника в Google Chrome. Головне - не забувати про етап тестування, який допомагає виявити неочевидні баги, властиві певним платформам.

помилки дизайнерів

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

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

Час PDA- і WAP-версій закінчилося, просто майте на увазі. Адаптивний дизайн може нашкодити, якщо використовувати його неграмотно. Помістити всі елементи в один ряд по вертикалі - це не адаптація для смартфонів.

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

У важливому тексті розмір букв повинен бути не менше 16 пунктів.

Робіть межстрочное відстань достатнім для комфортного читання.

Не забувайте про відступи: контент не повинен бути «приклеєний» до країв екрану.

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

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

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

Вимкніть функцію автокорректіровкі, виправлення і введення з великої літери для полів з паролями, іменами та адресами. Вона може працювати некоректно і ускладнювати введення інформації. Для відключення додайте ці теги - <input autocomplete = "off" autocorrect = "off" autocapitalize = "off" spellcheck = "false" />.

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

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