От автора: интернет на протяжении своей двадцатисемилетней истории постоянно развивался и изменялся. За это время сам принцип показа и стилизации контента прошел через несколько фаз, последней из которых стал адаптивный веб – один сайт, адаптирующийся под множество браузеров и экранов устройств. Количество устройств, которые относятся к интернету вещей (IoT), становится все больше. К таким устройствам можно отнести мини компьютер Raspberry Pi, умные часы, личных помощников, работающих при помощи голосовых команд и т.д. В таких условиях потенциал адаптивного веб-дизайна будет подвергаться испытаниям.
Интернет вещей подводит нас к тому, что все больше устройств из реального мира могут пытаться загружать контент из сети. Если мы не хотим допустить еще одного крупного разделения, как это уже было на ранних этапах борьбы мобильного и проводного трафика, нам необходимо убедиться, что интернет остается доступным и пригодным к нормальной работе на таких устройствах. Один дизайн для интернета вещей, а другой для мобильных устройств и настольных компьютеров – это последнее, чтобы мы хотели бы видеть.
Какие устройства из интернета вещей могут показывать контент?
Множество разработчиков не до конца осознают то потенциально огромное число устройств, которые в будущем смогут показывать контент людям.
Вычислительные устройства с маленькими экранам
У устройств типа Raspberry Pi с небольшими экранами от 2.4’’ и выше есть Wi-Fi, ethernet соединение и даже 3G/4G, что закладывает большой потенциал для показа контента. Контент может быть в форме веб-страниц из интернета, в форме локальных веб-страниц с руководством к использованию, страниц настройки устройства на основе веб-технологий, а также в форме локальной страницы с панелью стилей.
Умные часы
Умные часы могут иметь куда меньшие дисплеи с совершенно другими цветовыми диапазонами и разрешениями. Apple Watch еще не обзавелись своим браузером, в то время как у Android есть браузер для Android Wear от компании Appfour. Есть вероятность, что со временем будет появляться все больше браузеров для умных часов (если кто-то придумает, как создать удобный для работы дизайн приложения!). По крайней мере, если интернет станет по-настоящему адаптивным и вседоступным, мы должны быть готовы к такому развитию событий. Что будет, если в недалеком будущем кто-то будет читать электронную почту на своих часах и кликнет по ссылке? Простой веб-браузер на мощных умных часах не такая уже и несбыточная мечта.
Голосовые ассистенты
Еще один новый тренд в вычислениях – умный голосовой ассистент, как Siri у Apple, 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 и т.д. замкнутся сами на себе и не будут делить одну общую экосистему интернета.
Автор: Patrick Catanzariti
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
