FAQ і кращі практики з реалізації адаптивного веб-дизайну


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

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

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

Чому я повинен переходити на адаптивний дизайн?

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

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

  • Ви економите час і гроші, оскільки Вам не треба підтримувати декілька сайтів окремо для екранів комп’ютера і для екранів мобільних телефонів.
  • Завдяки адаптивному дизайну підвищиться пошукова оптимізація сайту (SEO), оскільки у кожної сторінки буде той самий URL. Вам не треба буде турбуватися про те, що деякі посилання вестимуть на мобільну версію сайту, а інші – на десктопну.
  • У звітах Google Analytics показники сайту будуть вищими, оскільки результати запитів з мобільних телефонів і з ПК синхронізуються.
  • Те саме стосується статистики поширення в соцсетях (лайки у фейсбуці, твіти тощо), оскільки у мобільної і десктопної версій сайтів буде однаковий URL.
  • Сайти з адаптивним дизайном набагато легше підтримувати, оскільки вони не вимагають серверних компонентів. Треба модифікувати базові CSS-стилі сторінки для зміни зовнішнього вигляду (чи положення на сторінці) залежно від конкретного пристрою.

Що треба знати перед початком роботи з адаптивним дизайном?

Адаптивний дизайн використовує чистий HTML і CSS. Ви задаєте правила у CSS, які міняють стиль залежно від розміру екрана пристрою користувача.

Наприклад, Ви можете написати правило, за яким при розмірі екрана менше 320px не показуватиметься бічна панель, або при розмірі екрана понад 1920px (широкоекранний монітор) розмір шрифту основного тексту буде збільшений до 15px.

Як можна дізнатися, чи був використаний адаптивний дизайн для окремо взятого сайту?

Все просто. Відкрийте цей сайт у будь-якому браузері і змініть розмір. Якщо вид веб-сторінки міняється, то це означає, що був використаний адаптивний дизайн.

Якщо я перейду на адаптивний дизайн, чи буде мій сайт відображатися у ранніх версіях браузера?

У більшості випадків – буде. В адаптивному дизайні використовуються медіазапити CSS3 і HTML5 (для поліпшеної семантики), які не підтримуються в старіших версіях IE. Проте можна знайти вихід, використовуючи рішення JavaScript-respond.js та інші засоби модернізації, які адаптують CSS3 і HTML5 під старіші версії, в тому числі IE6.

Чи не заважає адаптивний дизайн відображенню рекламних блоків, наприклад, в Google AdSense?

Якщо на Вашому сайті є рекламні оголошення, то Вам треба уважно підходити до вибору їх форматів, тому що широкі блоки (наприклад, банери розміром 728×60 px) можуть не поміщатися на екрані телефону розміром 320px. Ми вважаємо за краще використати стандартні прямокутні блоки (наприклад, 300×250), оскільки вони легко підлаштовуються як під екрани мобільних пристроїв, так і під монітори ПК.

Є тисячі різних мобільних пристроїв. Які дозволи екрана повинен підтримувати сайт з адаптивним дизайном?

Ми б порадили задати як мінімум наступні параметри дозволів для медіазапитів в CSS3: 320px (iPhone, ландшафтний режим), 480px (iPhone, портретний режим), 600px (планшети Android), 768px (iPad і планшети Galaxy Tab) і 1024px (ландшафтний режим iPad і робочий стіл ПК).


Як мені почати працювати з адаптивним веб-дизайном? Чи є які-небудь докладні туторіали?

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

Чи є якісь недоліки у використанні адаптивного дизайну?

  • Зайві кілобайти на веб-сторінці, оскільки треба буде завантажувати CSS стилі й файли JavaScript, які в інших випадках не потрібні.
  • Зображення. В адаптивному веб-дизайні складно добитися розміщення зображень у високому розділенні на мобільній версії сайту (якщо тільки Ви не використовуєте обхідні серверні рішення на кшталт Adaptive Images чи Sencha).
  • Щоб додати адаптивність до наявного сайту, доведеться попрацювати. Іноді простіше заново створити сайт, ніж переробити його під адаптивний дизайн.

Якщо Вас зацікавила ця тема, то Ви можете дізнатися про неї більше в нашому матеріалі, де вона розбирається детальніше.

Переклад статті “Best Practices of Responsive Web Design”

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *