Поліпшення чуйного веб-дизайну за допомогою RESS

17

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

Окремий мобільний сайт

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

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

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

По-доброму вам будуть потрібні окремі ДО и для кожної версії сайту, наприклад, www.site.com і m.site.com інакше користувач може перейти не по тій ссилці, не призначеної для його пристрою. Якщо ви не будете уважні, пошуковики покарають вас через дублювання вмісту.

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

Все ж, окремі сайти залишаються досить привабливим варіантом для компаній, таких як Amazon і eBay, з тих пір, як вони запустили ці самі мобільні версії.

Чуйний веб-дизайн

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

ОВС (чутливий веб-дизайн) вирішує безліч проблем для різних уявлень. Ми маємо один сайт з набором свого контенту, який підлаштовується під нескінченна безліч розмірів екрану. Однак…

Розмір екрана не найточніший індикатор. Він нічого не може нам сказати про можливості пристрою, швидкості процесора, пропускної здатності мережі або про рівні підтримки HTML5. Користувач з великим монітором може використовувати дванадцятирічний комп’ютер з dial-up з’єднання.

На всіх пристроях відображається одна і та ж (в основному) сторінка з ресурсами. Можна обмежити завантаження зображень з допомогою фонових зображень в CSS через медіа запити, тег picture і атрибут rscset, але ці рішення не кроссбраузерны і не вирішують усіх проблем. Техніка адаптації зображень на стороні клієнта також може уповільнити рендеринг сторінок. Таку методику слід застосовувати точково. Наприклад, великі зображення можна завантажити на Retina екранах з великою щільністю пікселів, навіть якщо у користувача погане з’єднання.

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

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

Чуйний Веб-Дизайн + Серверні Компоненти (RESS)

RESS був запропонований Luke Wroblewski в 2011 році. Концепція використовує Чуйний Веб-Дизайн, але доповнює його функцією виявлення, яка служить для модифікації контенту, якщо буде потрібно. Наприклад, ви можете:

Завантажувати зменшені зображення під маленькі розміри екрану або при обмеженому з’єднанні.

Використовувати тільки HTML5 відео при швидкому з’єднанні і підтримки HTML5.

Уникати флеш-ігор та реклами на iOS і більшості Android пристроїв.

Перемикатися на чорно-білі зображення на читання електронних рідерах.

Знизити частоту Ajax запитів при повільному з’єднанні.

Видалити непотрібні CSS3 ефекти, якщо пристрій не підтримує анімацію.

Застосувати фолбэк до PNG зображень, якщо SVG не доступні.

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

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

Перший крок: зареєструвати обліковий запис Netbiscuit – є 30-ти денна безкоштовна версія для ознайомлення. Вставте Netbiscuit трек-код в шаблон вашого сайту, зачекайте трохи, і переглядайте аналітичні діаграми пристроїв і відвідувачів:

Поліпшення чуйного веб-дизайну за допомогою RESS

Поліпшення чуйного веб-дизайну за допомогою RESS

API визначення пристрою на стороні клієнта

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

Приклади. Оцінка пропускної здатності – шкала від 0 (дуже повільне) до 20 (зазвичай EDGE/HSPA) до 60 (3G) до 120+ (4G/wifi):

var bandwidthScore = dcs.get(‘bandwidth.score’); // integer

Визначаємо, чи має пристрій сенсорний екран:

var touchScreen = dcs.get(‘browser.cantouch’); // boolean

з високим ступенем щільності пікселів:

var pixelRatio = dcs.get(‘internal.browserpixelratio’); // real

Чи може пристрій дзвонити?

var canCall = dcs.get(‘browser.cantelmakecall’); // boolean

Підтримується SVG? Доступна SMIL анімація?

var svg = dcs.get(‘browser.css.cansvg’); // boolean
var svgSmil = dcs.get(‘browser.css.cansvgsmil’); // boolean

Визначаємо положення користувача:

var county = dcs.get(‘internal.countrycode’); // двох символьний рядок, наприклад, «US»

Пропонуємо сумісний формат відео HTML5:

var videoFormat = dcs.get(‘video.suggestvideoformat’); // об’єкт

Визначаємо браузер:

var safari = dcs.get(‘browser.model’); // рядків, наприклад «Firefox 38»

І остання версія:

var latest = dcs.get(‘browser.islatestrelease’); // boolean

API визначення пристрою на стороні сервера

Визначення пристрою найбільш корисно на стороні сервера в тому випадку, якщо є можливість змінити відповідь від сервера перед його відправкою. Код підходить під PHP, Java і .NET. PHP приклади… Підтримує пристрій H264 HTML5 відео, і досить гарне з’єднання?

video->canhh264 && $dcs->internal->bandwidthscore > 150) {
echo «;
}
?>

Підтримує пристрій Ajax і JavaScript краще, ніж iPhone 5 (пристрої зі значенням 100)?

browser->canajax && $dcs->hardware->performance->js > 100) {
echo «;
}
?>

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