Потреба в годину – це не адаптивний дизайн, а адаптивна продуктивність
Останнім часом адаптивний дизайн демонструє кілька проблем із продуктивністю. Іронія полягає в тому, що адаптивний дизайн досить добре працює на останніх моделях смартфонів, але нічого більше того ж.
Ви можете бути збиті з пантелику, оскільки більшість користувачів Інтернету мають смартфони високого класу. Однак значна частина населення все ще використовує мобільні пристрої з невеликим розміром екрана, які працюють на старій версії Android або iOS і, можливо, просто на телефоні з невеликою функціональністю. Як наслідок, адаптивний дизайн не обслуговує ширшу аудиторію, як це має бути.
Багато в чому пов'язане з цією проблемою давнє переконання, що адаптивний дизайн підходить для мобільних пристроїв із будь-яким розміром екрана. Оскільки продуктивність падає, а незадоволення зростає, необхідно вийти за межі адаптивного дизайну. Натомість слід зосередитися на забезпеченні оперативної роботи. Цей пост приблизно те саме.
Отже, головне питання: що робити?
Відмовтеся від концепції дизайну, орієнтованої на робочий стіл
Значний внесок у цю постійну проблему полягає в тому, що досі увага зосереджена на підході до дизайну, який орієнтований на робочий стіл. Основна увага приділяється розробці веб-сайту для настільного комп’ютера, а потім розробці для інших пристроїв, таких як смартфони та планшети. Для будь-якої відсутньої функціональності розробники щедро використовують прокладки та полізаповнення. Звичайно, існують величезні бібліотеки, які забезпечують швидкий розвиток. Однак це не вирішує проблему несумісності браузера. Чи виправдано братися за концепцію дизайну, яка не дає бажаних результатів?
Це не дуже складно реалізувати мобільний підхід дизайну, в якому мета полягатиме в тому, щоб запропонувати мобільному користувачеві лише бажану інформацію на його або її екрані замість усіх речей, які вбивають пристрій. Люк Врублевскі вперше запропонував цей підхід до дизайну в 2011 році, і з того часу багато експертів галузі високо оцінили його проривний підхід до дизайну.
Більше даних, навіть якщо це займає частки секунди, може значно вплинути на загальний час завантаження. Однак це також правда, що веб-сайти стають важчими графічним вмістом, і все більше людей використовують свої мобільні пристрої для доступу до нього. Коли користувач вводить URL-адресу веб-сайту на мобільному телефоні з екраном низької роздільної здатності, його метою завжди є доступ до вмісту веб-сайту, але те, що він відчуває, є кошмаром. Це через складність навігації між нескінченною непотрібною рекламою. Видаліть такі елементи вмісту, яких можна уникнути, щоб надати користувачеві доступ до основного вмісту. Це збільшить відвідуваність сайту, оскільки, окрім користувачів смартфонів високого класу, багато хто відвідуватиме ваш веб-сайт через мобільні пристрої з низькою роздільною здатністю. Надання лише текстової версії має сенс, якщо мобільний телефон має обмежені можливості, але знову ж таки, ви можете сказати, що взаємодія з користувачем скомпрометована. Так воно і є, але це все одно краще, ніж не отримувати жодного контенту. Принаймні в такому випадку користувачі отримають доступ до основної інформації про ваш сайт. Чи є сенс розробляти веб-сайт таким чином, щоб це зменшувало його потенційне охоплення?
Ви напевно погодитеся з тим, що нескінченне очікування лише для того, щоб перевірити веб-сайт, нікого не хвилює. Згідно з деякими опитуваннями Akamai і Gomez.com, приблизно 50% веб-користувачів сподіваються, що веб-сайт завантажиться протягом 2 секунд або навіть менше. Є більше шансів покинути сайт, якщо веб-сайт не завантажується у веб-переглядачі лише за 3 секунди! Крім того, більшість сучасних веб-сайтів електронної комерції мають велику кількість кнопок для обміну інформацією в соціальних мережах, як-от Facebook, Google Plus, Twitter, LinkedIn тощо. Чи знаєте ви, що ці кнопки додають більше 500 КБ до вашого адаптивного сайту та впливають на його продуктивність? Лише одна кнопка "подобається" у Facebook вимагає стисненого коду розміром 270 КБ! Це також вимагає кількох запитів HTTP. Натомість
Ефективність веб-сайту безпосередньо впливає на ефективність бізнесу, а веб-сайт із повільним реагуванням ніколи не приносить нічого хорошого для бізнесу. Вірте чи ні, більшість користувачів мобільних пристроїв не зацікавлені в дослідженні чи читанні довгих статей. Більшість із них використовують свої мобільні пристрої для легкого доступу до Facebook, WhatsApp, Twitter, а також для того, щоб насолодитися онлайн-шоппінгом. Більше того, мобільний телефон більше не тренд, це майбутнє.
Згідно зі статистичними даними Comscore за минулий рік, кількість користувачів лише мобільного Інтернету в США різко зросла, а кількість користувачів лише настільного комп’ютера скоротилася до 10,6 відсотка.
Потрібно ще щось сказати, щоб переконати?
Забезпечте плавну деградацію
За останні кілька років ви, можливо, зустріли нове модне слово у світі адаптивного дизайну, і це «витончена деградація». Так, витончена деградація передбачає, що навіть якщо функція не працює успішно, вона повинна вийти з ладу таким чином, щоб це сприяло прийнятній зручності використання. Це означає створення дизайну веб-сайту для настільного комп’ютера, а потім поступовий перехід до планшетів, смартфонів і мобільних телефонів. Ефективність адаптивного дизайну, в якому веб-сайт витончено погіршується, неодмінно буде високою, оскільки досвід користувача тут завжди на найвищому рівні. Веб-сайт залишатиметься функціональним, незважаючи на будь-які недоліки, а відвідувач, безсумнівно, буде вражений загальною якістю.
Тепер у вас може виникнути це запитання, що такого захоплюючого в витонченій деградації. Відповідь проста. Це тому, що він робить ваш вміст видимим і читабельним незалежно від браузера, що є надзвичайним досягненням! На щастя, якщо ви використовуєте CSS3, витончена деградація стає легкою роботою, оскільки більшість властивостей CSS3 деградують автоматично, тобто закруглені кути стають квадратними, текст обертається замість одного рядка, градієнти стають рівними кольорами та багато іншого.
Наведемо приклад витонченої деградації. Припустімо, ви розробили адаптивний веб-сайт із функціями JavaScript, і ці функції не підтримуються вашим браузером або можуть бути вимкнені на стороні вашого клієнта. Отже, що ви можете зробити, щоб отримати вміст? Що ж, у такому випадку витончена деградація дозволяє вашому браузеру відображати вміст у тегу «noscript».
Це можна краще зрозуміти за допомогою наведеного нижче кодування:
<noscript>
<h1>Dear John, you have encountered a problem!</h1>
<p>Your browser lacks support for JavaScript or is temporarily disabled.
Visit our <a href="/support/browsers/">browser support</a> for help.</p>
</noscript>Є ще один приклад витонченої деградації, яким я хотів би поділитися, і це використання HTML5 YouTube для відтворення відео. Припустимо, ваш браузер не підтримує HTML5, відео буде відображатися за допомогою Flash, і якщо навіть Flash не встановлений, ви отримаєте повідомлення про встановлення його на мобільний пристрій. У будь-якому випадку ви зможете переглянути відео. Однак один недолік цього витонченого погіршення полягає в тому, що хоча продуктивність хороша, вам доведеться піти на компроміс із певними елементами дизайну, якщо ви використовуєте застарілі браузери. Я вважаю, що попереднє визначення основних візуальних елементів вашого веб-сайту може допомогти.
Немає необхідності зберігати невикористані бібліотеки
Одна з найкращих практик — не зберігати бібліотеки, які не використовуються. Так, це правда, що відстеження використаних і невикористаних бібліотек займає дуже багато часу, але це дійсно варте. Іноді ви могли помітити, що використовуєте лише одну функціональність після включення бібліотеки. Іноді їх може бути навіть два-три. Найчастіший інструмент, який я використовую для створення адаптивного дизайну – jQuery. Насправді існує багато бібліотек jQuery, які допомагають розробникам створювати адаптивні веб-сайти. Включення кількох бібліотек, таких як бібліотеки JavaScript, лише тому, що вам сподобалися деякі віджети, значно збільшить час завантаження вашої сторінки. Однак буде добре проаналізувати, які бібліотеки використовуються та в якому обсязі.
Перевірте наявність функцій
Ви можете перевірити, чи підтримує ваш пристрій певну функцію, перш ніж активувати її. Наприклад, буває, що хоча ви встановили останню версію Google Chrome на свій застарілий телефон Android, він все ще не відображає ваш веб-сайт. Іноді під час спроби завантажити такий веб-сайт веб-переглядач виходить з ладу настільки сильно, що весь мобільний пристрій перестає відповідати. Вам потрібно перезавантажити пристрій, і це останнє, чого ви бажали, чи не так? Багато користувачів певних веб-додатків уже страждають через цю проблему.
Відсутність функцій на пристроях, але розробка веб-сайтів або програм призвела до деяких помітних проблем, як-от миттєвий збій програм Google Hangout на пристроях Android у всьому світі, незалежно від типу браузера. Це незважаючи на те, що програма була легкою. Ви можете заперечити, що користувачі користувалися старішою версією смартфонів Android, але це також правда, що такі пристрої все ще доступні в будь-якому мобільному магазині як абсолютно нові. Багато користувачів мобільних пристроїв також стикаються з проблемою продуктивності YouTube і Twitter. Навіть оновлення служби Google Android System Webview через Google Play зависає на багатьох смартфонах, перетворюючись на свого роду кошмар для користувачів.
Оптимізуйте зображення
Включення візуально привабливих великих зображень завжди спокусливо для дизайнерів. Проблема виникає, коли вони не стискають ці зображення перед завантаженням у CMS. Особливо це стосується кількох веб-сайтів електронної комерції в Інтернеті. Згідно з нещодавнім дослідженням Radware, сторінки стають більшими, і приблизно 45 відсотків із 100 найкращих роздрібних сайтів не використовують стиснення зображень. Це робить такі сайти більш громіздкими, і, як наслідок, час завантаження збільшується, але як дизайнер ви можете уникнути цієї проблеми.
Зробіть зображення меншого розміру за допомогою відповідного інструменту оптимізації зображення. Насправді таких інструментів в Інтернеті не бракує. Деякі з відомих, якими ви можете скористатися, є Dynamic Drive, Smush it і Riot. Якщо ви професіонал у Photoshop, ви також можете оптимізувати розмір зображення самостійно. Використовуйте інтелектуальну техніку стиснення та видаліть із нього будь-які зайві метадані. Перетворення графіки в PNG, насичених кольором зображень у JPEG і анімованих у GIF також допомагає.
Пристосований до екстремальних випадків
Коли ви починаєте дизайн, ви, мабуть, помітили, що у вас виникає спокуса створити сторінки, які легші. Принаймні, це дає вам змогу щось показати своїм зацікавленим сторонам. Це може здатися гарним на перший погляд, але якщо ви зосередите свої зусилля на найскладніших сценаріях, на початку ви отримаєте хороший результат.
Наприклад, веб-сторінка з деякими статтями, блогами та прес-релізами. Він також повинен мати назву. А тепер, що станеться, якщо область заголовка, яку ви думали показати «Поради щодо адаптивного веб-дизайну», має відображати назву «10 основних порад і методів для успішного адаптивного дизайну веб-сайту»? Тепер це крайній випадок.
Подібні зусилля, спрямовані на оптимізацію продуктивності адаптивного веб-сайту, здаються непомітними. Однак ці зусилля приносять хороші результати завдяки щасливим і задоволеним користувачам. Ви можете скористатися різними інструментами, такими як інструменти Pingdom, які дозволять вам легко відстежувати час завантаження вашого адаптивного веб-сайту. Не пропускайте важливий аспект тестування, щоб переконатися, що ваш адаптивний веб-сайт працює належним чином. Перевірте його на якомога більшій кількості реальних пристроїв.
Ви також можете скористатися такими ресурсами, як Screenfly, який дає змогу перевірити ваш веб-сайт на різних роздільних здатностях екрана. Ви можете стверджувати, що всі ці стратегії потребують значної кількості часу, але знову ж таки, потрібно добре попітніти, щоб отримати переваги. У наш час створення адаптивного веб-сайту з адаптивною продуктивністю є важливим, навіть більше, оскільки Google оцінює сайти на основі їх продуктивності. Якщо ви дизайнер або розробник, не обмежуйтеся жодною з наведених вище найкращих практик. Вам слід шукати більше рішень і докласти зусиль, щоб створити веб-сайт із швидкою реакцією.