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

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

Загальна інформація

Отже, для початку давайте розглянемо, що являє собою адаптивний дизайн. Так називається конфігурація, при якій на всі пристрої вирушає один і той же HTML-код але розміри елементів коригуються завдяки CSS. Різні пошукові роботи вміють розпізнавати такі сайти за умови, що сторінки і ресурси відкриті для сканування. Для того щоб вказувати браузерів на наявність такої можливості, використовується тег meta name="viewport". Що ж являє собою адаптація сайту під мобільні пристрої?

Розглянемо тег

Отже, необхідно подбати про те, щоб був тег meta name="viewport". Навіщо він? Саме в ньому знаходяться інструкції для браузера про те, як слід коригувати розміри і масштабувати сторінку з урахуванням ширини екрану пристрою, з якого проглядається сайт. Якщо не додати цей невеликий елемент, то за замовчуванням буде показана сторінка, розрахована на комп'ютери. Але при цьому мобільні браузери будуть намагатися оптимізувати зміст, що виразиться у збільшенні шрифтів, масштабованості змісту або відображенні частини вмісту, який залазить на екран. Приємно це? Ні, мобільна версія сайту в такому випадку викличе тільки негативне сприйняття. Адже шрифти будуть непропорційними, доведеться прокручувати сторінку і здійснювати ще низку дій, які, хоча і є другорядними, але все ж утомливі. Перевірити адаптацію сайту під мобільні пристрої можна за допомогою смартфона, планшета або спеціальних сервісів і програм. Звичайно, два перших варіанти більш кращі, але якщо потрібен ретельний аналіз з позиції різних пристроїв і економії часу, тоді підійдуть останні.

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

Використання такого підходу дозволяє: Користувачам ділитися контентом в тих випадках, коли у нього є одна адреса. Алгоритмів пошукових систем отримувати точні параметри сторінки, немає плутанини з різними версіями. Знизити ймовірність виникнення помилок. Скоротити час завантаження завдяки відсутності необхідності переіндексації. Економити ресурси. Крім того, адаптивну сторінку створити легше, ніж кілька варіантів чогось одного. Адаптація сайту під мобільні пристрої (самому це зробити цілком можливо) не є чимось складним, достатньо знати jаvascript і вміти працювати з каскадними таблицями стилів (CSS) і зображеннями. Існує безліч підходів до виконання поставленого завдання. В рамках статті буде розглянуто три найпопулярніших варіанти: Упор на jаvascript. Комбінування. Динамічне використання jаvascript. Давайте ж розглянемо їх більш докладно.

Адаптація з використанням jаvascript

В такому випадку використовується один контент. А за допомогою jаvascript змінюється форматування з механізмом роботи сторінки. Все в таких випадках залежить від платформи. Цей алгоритм схожий на медіа-запити каскадної таблиці стилів. Розглянемо невеликий приклад роботи на практиці. Отже, у нас є сторінка з HTML-кодом, у якому розміщений елемент

Комбінування

В даному випадку адаптація під сайту мобільні пристрої використовується завдяки поєднанню і можливостей jаvascript і функцій сервера. Як виглядає загальна схема? Користувач заходить на сайт з певного пристрою. jаvascript отримує інформацію про те, чим же він користувався, і передає її серверу. Там генерується необхідний код, який згодом і відправляється на пристрій. Причому інформація про це зберігається у файлах cookie-файли. І при подальшому відвідуванні сервер зчитує дані саме з них. Особливістю даного підходу є можливість використання різних варіантів коду HTML. Правда, для коректної роботи необхідно подбати про наявність заголовка Vary: User-agent. Мобільна версія сайту в такому випадку вимагає трохи більше праці.

Динамічний jаvascript і інші варіанти

У цьому випадку передбачається, що буде надано один і той же код з певним елементом, що вказує на зовнішній файл, вміст якого змінюється залежно від того, який агент використовується. Тобто перед нами буде динамічна сторінка. Як це реалізується? Багато хто використовує для цього все той же Vary: User-agent. А при роботі зі сторінками інформація до того ж буде оновлюватися в режимі реального часу, що, безумовно, дуже добре. Про теорії можна ще багато говорити. Як не згадати діви ( ), з допомогою яких можна буквально «жонглювати» зовнішнім виглядом сайту і про безліч інших різних речей. Але ж нас цікавить, як же це зробити!

Підготовка до реалізації

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

Гнучкий макет

Для того щоб у нас вийшла буквальна "цукерочка", необхідно використовувати тільки відносні одиниці вимірювання. На практиці всі шрифти підганяються під em, а розмір елементів вказується у відсотках. Хоча періодично можна (якщо дуже хочеться) використовувати і рх, але краще обійтися без них. Коли вказується ширина або висота, слід використовувати не певне фіксоване число начебто 10801260 або ж 768 а відсотковий показник. Як приклад – width: 90%. Можна зробити і 80% та 99%, і 100%. Все залежить від бажання майстра. Але як бути з текстом, який виводиться на певному елементі? На такий випадок є одна дуже хороша формула: ширина шрифту ділиться на цей же показник фонового компоненту, і ми отримуємо наш іскова результат. Часом буває і таке, що числа можуть бути дуже довгими. Наприклад, стандарт – це 1260. А заходять користувачі, у яких ширина екрану складає 780. При поділі у нас вийде дуже довге число. Обов'язково його округляти? Що ж, тут ситуація складна. Багато хто цього робити категорично не радять. Краще все ж дивитися по ситуації і оцінювати, наскільки важливою є точність. Можна, наприклад, встановити, щоб враховувалася тільки два, три, чотири або десять знаків після коми. Повірте, нескладна робота се є, ця адаптація сайту під мобільні пристрої. CSS, якщо містить записи без помилок, зможе відтворювати всі.

Гнучкість шрифту, зображень і медиазапроси

За умовчанням в браузерах розмір шрифту виставлений на показнику в 16 px. Але, як вже говорилося раніше, для нас такий підхід дуже небажаний. Що ж робити в такому випадку? Тоді потрібне значення ділимо базове. Розглянемо кілька прикладів: 16/16 = 1 em. 18/16 = 1125 em. Отриманий результат необхідно записати у font-size, додавши після двокрапки. Правда, якщо ці значення в подальшому будуть включені ще десь, слід враховувати, що буде відображатися саме введена нами величина. А зараз щодо зображень. Все можна вносити або в їх атрибути, або в каскадну таблицю стилів за допомогою max-width. Не забувайте, що розмір вказується у відсотках! І ще кілька слів про медиазапросах. Їх можна використовувати в тих випадках, коли необхідно поставити певні умови. Приміром, якщо ширина екрану менше 1260 пікселів, будуть застосовуватися правила, вкладені в медиазапрос. Що ж вони можуть робити? Якщо у нас є гарна фонова картинка, яка повинна відображатись повністю, а у користувача маленький екран, в таких випадках можна прописати, щоб вона прибирала. У деякому роді медиазапроси нагадують конструкцію if. Але їх особливістю є дуже велика індивідуальність. У них можна записати всі зміни, які необхідно проводити при роботі з браузерів певних розмірів.

Висновок

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