1. Навіщо адаптувати сайт для мобільних пристроїв
2. Способи адаптації сайту для мобільних пристроїв
3. 1. Мобільна версія сайту
4. 2. Динамічна верстка сторінок
5. 3. Сайт з адаптивним дизайном
6. Плюси і мінуси підходів
7. Корисні посилання
8. Адаптація сайту під мобільні пристрої
9. зручності
10. Телефонні номери
11. Великі клікабельні області
12. форми
13. перевертання пристрою
14. Вписування фотографій в екран
15. розкіш
16. адаптивні зображення
17. Іконки для домашнього екрану
18. фундамент піраміди
19. Як виміряти швидкість завантаження?
20. Як прискорити завантаження в браузері?
21. Профілювання в браузері
22. Посилання на повну версію
23. Семантика і доступність

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

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

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

1. Завдяки мобільному інтерфейсу, люди швидше досягають своїх цілей, значить, у вашого сайту збільшується конверсія.
2. Пошукові системи віддають перевагу сайтам, адаптованим для мобільних пристроїв. Детальніше про це читайте в статті « SEO для мобільних пристроїв і комп'ютерів: різні результати і стратегії ».

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

Також для цієї мети можна скористатися статистикою, отриманою з Яндекс.Метрики.

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

Існує кілька способів адаптації сайту для мобільних пристроїв.

1. Мобільна версія сайту

Розглянемо приклад. Припустимо, ми відправляємо запит з настільного комп'ютера. Разом із запитом браузер відправляє User Agent - інформацію про браузер і пристрої, з якого йде запит. Сервер аналізує User Agent і повертає клієнту повну версію сайту.

Для того щоб вказати браузеру на мобільну версію сайту, потрібно скористатися тегом link, вказавши в ньому її адресу. Таким чином, коли ми заходимо на сайт з мобільного пристрою, сервер бачить User Agent і переадресує нас на мобільну версію 301-м перенаправленням.

2. Динамічна верстка сторінок

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

3. Сайт з адаптивним дизайном

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

Плюси і мінуси підходів

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

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

Для сайтів з адаптивним дизайном характерні інші особливості:

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

Корисні посилання

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

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

Адаптація сайту під мобільні пристрої

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

Після використання даного тега текст може не поміститися в екран по ширині, в результаті чого з'явиться горизонтальний скрол-бар. Щоб цього уникнути, потрібно замінити властивість width на властивість max-width.

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

В даному прикладі ми вказали розмір шрифту в 72px для звичайної версії і в 36px для вікон, ширина яких менше або дорівнює 400px.

У такого підходу є свій мінус - доведеться прописувати такі правила для кожного елемента сторінки. Є інший спосіб - поставити 10-піксельну точку відліку для кореневого елемента. Потрібно розуміти, що 10px в даному випадку - це саме точка відліку, а не остаточний розмір шрифту на сторінці. А для всіх елементів при цьому задається розмір шрифту у відносних одиницях Rem, прив'язаних до кореневого елементу. Тепер, коли нам потрібно поміняти масштаб виходячи з ширини браузера, ми просто змінюємо розмір кореневого елемента - дуже зручно.

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

Дана формула говорить про те, що мінімальний розмір шрифту дорівнює 12px + 2,5 одиниці ширини вікна браузера. Рекомендується задавати розмір шрифту не менше 12px. Якщо текст досить довгий, для мобільних пристроїв, краще вказати хоча б 15px.

зручності

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

Телефонні номери

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

Не забудьте, що після цього потрібно буде вручну зробити телефон посиланням. Текст посилання при цьому може бути будь-яким, але краще вказувати номер телефону. Також важливо пам'ятати, що за номерами формату 8 800 користувачі не зможуть зателефонувати з-за кордону.

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

Великі клікабельні області

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

форми

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

цифрова клавіатура

Поштова клавіатура - додає @ і точку

телефонна клавіатура

перевертання пристрою

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

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

Вписування фотографій в екран

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

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

Встановлюємо max-width в 100%. Картинка влізла, але деформувалася по ширині.

Встановлюємо властивість object-fit в cover. Картинка вписалась і буде коректно відображатися на будь-якому екрані.

розкіш

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

адаптивні зображення

Екрани сучасних пристроїв відрізняються різною щільністю пікселів. Маються на увазі екрани Retina. Адаптивні зображення дозволяють віддавати найбільш підходящі картинки, в залежності від щільності пікселів екрану. Це велика окрема тема, про яку є два відмінних доповіді.

Іконки для домашнього екрану

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

Хороша новина - іконки можна генерувати автоматично. Для цього існують спеціальні сервіси. наприклад, www.favicon-generator.org .

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

фундамент піраміди

При всьому вищесказаному, не варто забувати про фундамент інтернету.

Як виміряти швидкість завантаження?

• Для вимірювання швидкості завантаження можна скористатися безкоштовним сервісом www.webpagetest.org . У нього багато опцій, і він малює непогані графіки.
• У Google є хороший інструмент, що дає поради безпосередньо для Вашої сторінки: https://developers.google.com/speed/pagespeed/insights/ .

Як прискорити завантаження в браузері?

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

• В першу чергу, необхідно скоротити кількість і обсяг HTTP-запитів. Для цього можна зробити наступні кроки:
  • Використовувати CSS-спрайт. Безліч картинок оформляється в одну велику, яка відправляється в браузер і вже там нарізається.
  • Використовувати вбудовані в CSS картинки, щоб не витрачати на них окремий запит (data: URL).
  • Збирати один мініфіцірованний CSS- і JS-файл.
• Підключати JS-файл в кінець сторінки, щоб не блокувати отрисовку.
• Стискати зображення за допомогою таких інструментів, як ImageOptim або ImageAlpha.
• Використовувати адаптивні зображення.
• Використовувати CDN-сервера, які зберігають популярні бібліотеки.
• Використовувати піддомени. У браузера існує обмеження на паралельне скачування ресурсів з одного домену. Використання піддоменів може збільшити кількість паралельних запитів.
• Використовувати стиснення - gzip, zopfli, brotli, sdch.
• Використовувати браузерні кеш - Expires, Cache-Control, Last-Modified, ETag.

Детальніше про прискорення завантаження читайте в статті « Як прискорити роботу мобільної версії вашого сайту ».

Профілювання в браузері

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

Посилання на повну версію

У мобільній версії обов'язково має бути посилання на повну версію сайту.

У випадку з мобільною версією додається параметр, що відкриває нову версію перезавантаженням сторінки: m.example.com → example.com?v=desktop.

У випадку з динамічної версткою використовується аналогічне рішення, але в межах одного домену: example.com → example.com?v=desktop.

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

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

Семантика і доступність

Зрозуміло, завжди потрібно пам'ятати про семантику і доступності.

Джерело (відео): Мобільні штучки - Артем Курбатов.