Від автора: інтернет протягом своєї двадцатисемилетней історії постійно розвивався і змінювався. За цей час сам принцип показу і стилізації контенту пройшов через кілька фаз, останньою з яких став адаптивний веб – один сайт, адаптується під безліч браузерів і екранів пристроїв. Кількість пристроїв, які відносяться до інтернету речей (IoT), стає все більше. До таких пристроїв можна віднести міні-комп’ютер Raspberry Pi, розумні годинник, особистих помічників, які працюють за допомогою голосових команд і т. д. В таких умовах потенціал адаптивного веб-дизайну буде піддаватися випробуванням.
Інтернет речей підводить нас до того, що все більше пристроїв з реального світу можуть намагатися завантажувати контент з мережі. Якщо ми не хочемо допустити ще одного великого поділу, як це вже було на ранніх етапах боротьби мобільного та проводового трафіку, нам необхідно переконатися, що інтернет залишається доступним і придатним до нормальної роботи на таких пристроях. Один дизайн для інтернету речей, а інший для настільних комп’ютерів і мобільних пристроїв – це останнє, щоб ми хотіли б бачити.
Які пристрої з інтернету речей можуть відображати контент?
Безліч розробників не до кінця усвідомлюють те потенційно величезна кількість пристроїв, які в майбутньому зможуть показувати контент людям.
Обчислювальні пристрої з маленькими екранами
У пристроїв типу Raspberry Pi з невеликими екранами від 2.4″ і вище є Wi-Fi, ethernet з’єднання і навіть 3G/4G, що закладає великий потенціал для показу вмісту. Контент може бути у формі веб-сторінок з інтернету, у формі локальних веб-сторінок з керівництвом до використання, сторінок налаштування пристрою на основі веб-технологій, а також у формі локальної сторінки з панеллю стилів.
Розумні годинник
Розумні годинник можуть мати значно менші дисплеї з абсолютно іншими колірними діапазонами та дозволами. Apple Watch ще не обзавелися своїм браузером, в той час як Android є браузер для Android Wear від компанії Appfour. Є ймовірність, що з часом буде з’являтися все більше браузерів для розумних годин (якщо хтось придумає, як створити зручний для роботи дизайн програми!). Принаймні, якщо інтернет стане по-справжньому адаптивним і вседоступним, ми повинні бути готові до такого розвитку подій. Що буде, якщо в недалекому майбутньому хтось буде читати електронну пошту на своїх годинниках і клацне по посиланню? Простий веб-браузер на потужних розумних годинах не така вже й нездійсненна мрія.
Голосові асистенти
Ще один новий тренд в обчисленнях – розумний голосової асистент, як у Apple Siri, Alexa від Amazon Echo, Google Now і Microsoft Cortana. Такі помічники будуть включати і вимикати світло в будинку, ставити будильники, налаштовувати температуру води і т. д. Ці сервіси також будуть відповідати на голосові команди і питання за допомогою даних, які вони отримують з різних джерел в інтернеті. Зазвичай цей процес включає в себе порівняння баз даних двох компаній з інформацією, яку асистент може отримати про людину за допомогою самого ж сервісу.
З часом штучний інтелект і машинне навчання будуть покращені, і такі асистенти зможуть буквально перекопувати весь інтернет і зачитувати інформацію у відповідь.
Щоб таке майбутнє настало, інтернет повинен бути доступним для роботів, які будуть зачитувати інформацію, а не просто відображати її. В принципі, веб-сторінки повинні бути структуровані для розпізнання скрін рідерами, однак на сьогоднішній день доступною розмітці часто не приділяється багато уваги. Поява сервісів особистих асистентів з штучним інтелектом має це виправити.
Абсолютно нові дисплеї
Коли мова заходить про інтернет речей, комп’ютерні дисплеї повинні володіти рядом нових фантастичних можливостей. Подумайте про розумних дзеркалах, вікнах, приладових панелях автомобілів. Всі ці розумні речі непомітно будуть з’являтися на протязі всього нашого життя, але як на них буде відображатися інтернет? Виникає цілий ряд нових дизайнерських рішень. Щоб відображати контент на дзеркалі/вікні, потрібен більший контраст кольорів. Чи буде у дзеркал і вікон обмежений діапазон кольорів, які розробникам доведеться враховувати? Це буде абсолютно новий чудовий світ.
Підготовка CSS та розмітки до майбутніх змін
Я вважаю, що веб-розробникам потрібно буде приділити підвищену увагу окремим ключовим областях, якщо ми хочемо підготувати інтернет до нових технологій.
По-справжньому адаптивний CSS
Сторінок потрібно буде адаптуватися і залишатися читаються на дуже маленьких дисплеях. З точки зору CSS основна задача – визначення вкрай маленьких дозволів екранів. Буде CSS підхід схожий на мобільний сайт? Або ж нам доведеться створювати нові правила і стандарти для відображення тексту більш великим шрифтом? Може, нові стандарти стилізації меню на крихітних дисплеях? Час розставить все на свої місця, але, швидше за все, кілька розробників виступлять першопрохідцями в цій області. Буде цікаво подивитися, що ж нам запропонує спільнота розробників.
Тег picture
Тег picture дозволяє вказати декілька зображень, які будуть відображатися в залежності від дозволу і типу пристрою. Кінцева версія цієї специфікації буде відігравати вирішальну роль у забезпеченні гладкою роботи інтернету при завантаженні сторінок на малопотужних пристроях зі слабким з’єднанням або на пристроях з малим дозволом, які можуть не потягнути великі зображення.
Не можна повністю покладатися на JavaScript
Малопотужним пристроїв і особистих асистентів, які будуть зчитувати контент зі сторінки, необов’язково вдаватися до JS або обробляти вміст точно так само, як смартфони і планшети. У пристроїв інтернету речей можуть виникнути проблеми з доступом до контенту, якщо останній відображається на вашому сайті за допомогою JS без будь-яких фолбэков. Як і раніше, потрібно прагнути до того, щоб сайт працював взагалі без JS!
WAI-ARIA та інші техніки доступності
Техніки, які зараз використовуються для полегшення роботи людям з обмеженими можливостями, також забезпечать доступність контенту для штучного інтелекту, особистих асистентів та інших голосових технологій. Застосування WAI-ARIA та інших технік по доступності з самого старту проекту сьогодні призведе до того, що в майбутньому вам потрібно буде вносити менше правок. Ці техніки вкрай корисні для людей з обмеженими можливостями, до того ж це гарна практика.
Колірні і дизайнерські рішення
Дисплеї на дзеркалах і вікнах повинні володіти більшою контрастністю в кольорах вашого дизайну, щоб все було розбірливо на тлі ванною, неба та інших місць…
Екран розумних дзеркал може відображати контент у режимі високої контрастності, що є на сучасних операційних системах. Режим інвертує кольори екрана і підвищує контрастність. Щоб показувати таку ж картинку, розумні дзеркала можуть перейняти схожу технологію. Якщо ваш дизайн спроектований під такий режим і сильно контрастує з квітами теми, то проблем виникнути не повинно.
Складність DOM
Домашні ПК і розумні годинник добре справляються зі складними структурами DOM з безліччю вкладених елементів і CSS переходами, проте, по всій видимості, для переносних пристроїв і пристроїв інтернету речей це буде великою проблемою. Підтримка зрозумілою і чистої структури елементів DOM зараз як ніколи важливо для нових пристроїв з точки зору продуктивності.
Перевірка стане ще складніше
Сайти вже досить складно тестувати на роботу на смартфонах, планшетах, смарт тв і настільних операційних системах. У міру розвитку інтернету речей та інших технологій (віртуальна і доповнена реальність на підході!) стане набагато складніше тестувати сайт на всіх пристроях. Прийняття нових веб-стандартів, стандартів доступності та ідеї, про які ми говорили вище, повинні зробити веб-дизайн як можна доступніше.
У наступному десятилітті від веб-розробників будуть вимагати певний рівень навичок передбачення. Розробникам доведеться представляти, як веб-дизайн буде працювати і відображатися на пристроях, не маючи можливості протестувати свої напрацювання на них. Тут їм трохи допоможуть емулятори і автоматизовані тести.
Всюдисущі API
Адаптивний інтернет буде неєдиний джерелом інформації для інтернету речей. У адаптивного веба буде компаньйон, не поступається їй за важливістю – всюдисущий API, про нього я вже раніше говорив. Дана технологія буде представляти собою серверний еквівалент мережі, який дозволить швидко переміщатися за даними і адаптувати новітні технології в тих областях, під які браузер просто не розрахований. Всюдисуще API надає доступ до функціоналу і даними додатків і сервісів на безплатформенной основі. Недолік таких API разом з адаптивним дизайном, який не може так швидко підлаштовуватися під нові пристрої, буде приводити до великих розділень інтернету з кожним виходом нових технологій.
Обидві технології зав’язані один на одному. Наш адаптивний дизайн повинен бути заповнений контентом з таких API, і вже потім цей контент може бути адаптований під ряд технологій. На пристроях, де немає браузера, повинні бути додатки, які отримують контент з всюдисущих API. Якщо пристрій має доступ до браузера, цей же контент повинен бути доступний через адаптивний дизайн.
Висновок
Описані в статті front-end практики по розробці не потрібно адаптувати під інтернет речей і інші нові технології. Тим не менш, я вважаю, що якщо не робити цього зовсім, інтернет стане сегментованим. У мережу будуть виходити тільки з настільних ПК і іноді з мобільних пристроїв. Щось схоже трапилося з потенціалом адаптивного веб-дизайну, коли почали з’являтися спеціальні мобільні додатки. Якщо інтернет не адаптувати зовсім, ми можемо стати свідками того, як носяться додатки, додатки інтернету речей, програми для асистента Alexa і т. д. замкнуться самі на себе і не будуть ділити одну загальну екосистему інтернету.
