Керівництво по створенню мобільних сайтів

1. Мобільні сайти: від «найбільшою дурниці на світі» до «глобальної зміни сценарію»
2. Чи є сенс затівати адаптацію сайту?
3. Пошукова видача
4. лояльність
5. конверсія
6. Підхід Mobile first
7. технології
8. адаптивний спосіб
9. динамічний JS
10. динамічний показ
11. різні URL
12. окрема CMS
13. API
14. Правильний вибір
15. особливості адаптації
16. таблиці
17. Web App іконка
18. Web App банер
19. геолокація
20. Push-повідомлення
21. медіа
22. масштабування
23. Плавне прокручування
24. тестування
25. помилки дизайнерів

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

Мобільні сайти: від «найбільшою дурниці на світі» до «глобальної зміни сценарію»

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

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

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

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

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

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

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

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

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

2. Мобільні користувачі - це тепер, як мінімум, кожен третій відвідувач сайту. Привід замислитися.

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

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

Чи є сенс затівати адаптацію сайту?

Якщо все навколо роблять - чи потрібно вам це робити?

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

1. Пошукова видача.
2. Лояльність.
3. Конверсія.

Розглянемо кожну докладніше.

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

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

лояльність

Цей параметр неможливо виміряти без ретельного дослідження, хоча в Google спробували (результати дослідження - на зображенні зверху).

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

конверсія

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

Підхід Mobile first

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

• Чи плануєте email розсилку - спочатку проектуємо шаблон для смартфонів;
• Потрібен Лендінгем - спершу створюємо прототип для маленького екрану;
• Є ідея редизайну головної сторінки - малюємо для екрану смартфона, а потім для робочого столу.

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

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

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

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

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

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

технології

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

Є три глобальних способу в технологіях створення мобільного UX:

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

Спосіб Зберігається єдиний URL? Зберігається єдиний HTML?

адаптивний дизайн

Адаптивний або чуйний веб-дизайн (responsive web design) має на увазі віддачу сервером єдиного HTML-коду всіх пристроїв, а адаптивний CSS використовується для зміни вигляду сторінки в залежності від екрану вже на самому пристрої. Цей спосіб рекомендує Google

✔ ✔

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

Система визначає браузер і в залежності від юзер-агента віддає HTML для відповідного пристрою: смартфон або декстопов. URL при цьому не змінюється

✔ ✘

різні URL

Аналогічно динамічному показу відбувається визначення юзер-агента на рівні сервера (системи управління), але потім спрацьовує переадресація на потрібну сторінку за іншою адресою (субдомен m.site.ru або під-розділ site.ru/mobile/)

✘ ✘

адаптивний спосіб

звичайний адаптуюся

Назва говорить сама за себе. Це чистий адаптивний дизайн, який змінює відображення на різних екранах за допомогою CSS media queries .

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

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

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

динамічний JS

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

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

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

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

плагін

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

Як реалізувати: якщо у вас Wordpress, встановіть WP touch або Mobile Pack або Mobile Edition . Спробуйте кожен, щоб знайти найзручніший і підходящий варіант.

Для інших CMS є інші плагіни, але суть зводиться до того, щоб максимально полегшити процес мобілізації, зробивши мінімум зусиль. Мобільний сайт буде відкриватися на субдомені (m.site.ru) або без редиректу, все залежить від налаштувань.

різні URL

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

окрема CMS

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

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

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

API

Це оболонка, яка отримує контент основного сайту по API і відображає в зовсім іншому дизайні мобільну версію. Такий метод використовує великі проекти - «Фейсбук», «Твіттер», «ВКонтакте» і все, кому потрібен повний контроль над мобільною версією зі збереженням єдиного контенту.

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

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

конструктор

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

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

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

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

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

Якщо ви плануєте редизайн або створюєте новий сайт, використовуйте адаптивний дизайн.

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

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

1. Вивчіть портфоліо мобільних сайтів (бажано не менше 10). Саме сайтів, а не односторінкових Лендінзі. Обов'язково відвідайте всі сайти з портфоліо. Якщо якийсь із сайтів недоступний, ймовірно підрядник вводить вас в оману і перебільшує свої заслуги. Зверніть увагу на швидкість роботи і дизайн сайтів з портфоліо. Чи багато там практичних помилок? (Дивіться нижче розділ про помилки дизайну .)

2. Попросіть підрядника розповісти про способи адаптації, які йому відомі. Чому він використовує той чи інший спосіб, аргументи «за і проти».

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

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

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

зображення

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

Рішення Плюси Мінуси

Нічого не робити, залишити оригінальні desktop зображення на смартфоні.

• Ніякої зайвої роботи
• Підтримка retina дисплеїв

• Повільніше завантаження на мобільних

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

• Швидше завантаження на мобільних

• зайва робота

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

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

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

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

таблиці

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

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

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

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

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

Web App іконка

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

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

Web App банер

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

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

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

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

геолокація

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

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

Як реалізувати: вивчаємо API нативной геолокації або готові рішення від Google Maps и « Яндекс.Карт ».

Push-повідомлення

новина вже застаріла , Але так, push тепер є в браузері. З мобільних платформ на момент написання цієї статті повна підтримка є тільки у Google Chrome на Android.

Повідомлення також працюють на декстопов-версіях Google Chrome і Safari OSX. Принцип роботи такий же, як в мобільних додатках. При заході на сайт користувач бачить спливаюче вікно з питанням «Дозвольте відправляти вам повідомлення».

Після підтвердження, власник сайту може відправляти «пуші», що спливають на робочому столі, навіть якщо сайт і браузер закриті!

Уявіть можливі сценарії використання різних механік:

медіа

• Відправляти всім передплатникам повідомлення про вихід нової важливої ​​статті;

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

E-commerce

• Юзер відвідав розділ «Взуття» і покинув сайт. Через годину або день нагадуємо йому: «Вас цікавила взуття. У нас є цікава пропозиція! »;

• Юзер наповнив кошик, але не оформив замовлення - «Ви забули оформити замовлення. Зробіть це прямо зараз! »;

• Все ще не оформив замовлення через два дні? Запропонуйте йому купон на знижку - «Ми даруємо вам 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 екранах зображення вашого сайту не виглядають розмито.

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

Дякую за увагу! Якщо є питання - пишіть.

Джерело картинки на тізері: duoh.com