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

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

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

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

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

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

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

Використання подібного підходу дозволяє:

1. Користувачам ділитися контентом в тих випадках, коли у нього є одна адреса.
2. Алгоритмам пошукових систем отримувати точні параметри сторінки, немає плутанини з різними версіями.
3. Знизити ймовірність виникнення помилок.
4. Скоротити час завантаження завдяки відсутності необхідності переиндексации.
5. Економити ресурси.

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

1. Упор на JavaScript.
2. Комбінування.
3. Динамічне використання JavaScript.

Давайте ж розглянемо їх більш детально.

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

В такому випадку використовується один контент. А за допомогою JavaScript змінюється форматування з механізмом роботи сторінки. Все в таких випадках залежить від платформи. Цей алгоритм схожий на медіа-запити каскадної таблиці стилів. Розглянемо невеликий приклад роботи на практиці. Отже, у нас є сторінка з HTML-кодом, в якому розміщений елемент <script>. При його запиті будуть передавати одні й ті ж самі дані. Але от коли справа дійде до обробки, на це значний вплив нададуть характеристики пристрою. І як результат - буде змінюватися форматування сторінки. Як приклад можна навести ситуацію із зображенням, яке буде оптимізовано з метою перегляду саме на смартфонах і планшетах, а не на комп'ютерах. Важливою перевагою такого варіанту є те, що комп'ютером реалізація розпізнається автоматично. До того ж не потрібно обзаводитися спеціальним заголовком, оскільки немає динамічного показу контенту.

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

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

Динамічний JavaScript і одного варіанти

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

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

Слід зазначити, що існує два підходи при виконанні такого завдання, як створення адаптивного сайту:

1. Ручний.
2. Автоматичний.

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

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

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

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

За замовчуванням в браузерах розмір шрифту виставленийна показнику в 16 px. Але, як вже зазначалось, для нас такий підхід дуже небажаний. Що ж робити в такому випадку? Тоді потрібне значення ділимо базове. Розглянемо кілька прикладів:

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

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

А зараз щодо зображень. Все можна вносити або в їх атрибути, або в каскадну таблицю стилів за допомогою max-width. Не забувайте, що розмір вказується в процентах! І ще кілька слів про медіазапросах. Їх можна використовувати в тих випадках, коли необхідно поставити певні умови. Наприклад, якщо ширина екрана менше 1260 пікселів, будуть застосовуватися правила, вкладені в медіазапрос. Що ж вони можуть робити? Якщо у нас є гарна фонова картинка, яку Ви хочете повністю, а у користувача маленький екран, в таких випадках можна прописати, щоб вона забиралася. У деякому роді медіазапроси нагадують конструкцію if. Але їх особливістю є дуже велика ... індивідуальність. У них можна записати всі зміни, які необхідно проводити при роботі з браузерів певних розмірів.

висновок

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