Що таке адаптивний дизайн

Вітаю читачів блогу SEOB >

Але ви, мабуть, знаєте, що «мобільність» буває дуже різною – BlackBerry, iPhone, iPad, netbook, а вам необхідно, щоб сайт відображався коректно в кожному пристрої. Що ж робити? Не будеш для кожного мобільного пристрою створювати свій сайт. Вихід є, точніше, їх дещо, і тому пропоную розглянути кожен із них.

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

Можливості адаптивного та мобільного дизайну

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

Цей приклад я взяв із одного зі своїх сайтів, на якому встановлено плагін WordPress Mobile Pack. Плагін – одне з можливих рішень щодо переведення сайту на мобільне відображення. Сайт можна перемикати як вручну, так і автоматично. Що це означає?

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

Роздільна здатність екрану

Сьогодні (і ви це чудово знаєте) є великебезліч дозволів екранів та орієнтації дисплеїв. Основні орієнтації – книжкова чи альбомна, буває портретна. Але це не все — мобільні пристрої легко змінюють орієнтацію сторінки при повороті пристрою від альбомної до книжкової.

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

Динамічні зображення на сайті

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

Адаптивний макет сайту

Означає, що стиль завантажиться і працюватиме, якщо він:

виводиться повністю на екран (не для друку тощо);
якщо максимальна ширина екрана – 480 px.

Ширину екрану можна встановлювати будь-яку.

Спрощуємо відображення контенту на сайті

Тому вихід тут один – прибирати неголовні блоки та елементи. Так, якщо на сайті для ПК ви можете сміливо поставити банер розміром 980×60 px, то для планшетної або мобільної версії його потрібно прибрати. А при розмірі екрану 320 px він взагалі спотворить весь екран, тому такий великий банер можна замінити текстовим посиланням, та й так далі.

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

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

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

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

Приклади різних дозволів із адаптивним дизайном

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

Екран 1366х768 px:

Екран 1024х768 px:

Екран до 640 px:

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

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

Визначення пристрою плагіном WP Mobile Detect

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

p align="justify"> Плагін WP Mobile Detect робить багато корисних речей - він і виконує php-функції, щоб визначити, який пристрій запитує сайт, яка операційна система при цьому працюватиме, він і дозволяє працювати з сайтом за допомогою шорткодів.

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

Які шорткоди можна використовувати із цим плагіном

Додавання кастомних полів

Застосуванням цих довільних полів можна отримати максимальну користь від плагіна WP-Mobile Detect та його шорткодів. Як видно зі скріншоту, налаштувань у плагіна досить багато. Додаємо до нової групи поле «Short Title»:

Натискаєте «Додати нову групу полів» та вписуєте заголовок «Adaptive Content». Тепер можна додати групу правил, щоб нові поля з'явилися на сторінці в режимі редагування.

Додаємо два поля:

Short Title (short_title) Text — поле для заголовків, форматування встановлюєте в режимі No formatting нижче у налаштуваннях, що випадають.
Short Excerpt (short_excerpt) Textarea - поле для описів, форматування встановлюєте в Convert new lines into tags там же.

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

Ще одна приваблива функція – плагін може додавати різні аддони:

Щоправда, багато з них – платні, але є і безкоштовні, які можуть стати вам у пригоді. Нагадаю: аддон – це доповнення у сенсі цього терміна. Стосовно плагіна Advanced Custom Fields аддони - це розширення для плагіна, передбачені його основними функціями. Тобто простою вставкою шорткоду ви можете реалізувати багато додаткових функцій.

Єдиний, але досить значний недолік (на мою думку) це те, що всі ці поля потрібно прописувати вручну. І, якщо у вас вже готовий сайт, то можете уявити, скільки роботи вам належить, щоб адаптувати його якщо не до всіх, то хоча б до основних мобільних девайсів, що існують на сьогоднішній день.