Перейти к содержанию

Основы

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

Надежная основа

Надежная основа - это базовое требование для создания отличных PWA. Чтобы реализовать эту основу, необходимо проектировать и кодировать с учетом ограничений веба, используя несколько принципов:

  • Используйте мобильные возможности как фокусирующее ограничение. Убедитесь, что каждый вид дизайна фокусируется только на важном контенте и взаимодействии.
  • В процессе проектирования делайте акцент на контенте и основной функциональности.
  • При необходимости постепенно улучшайте их. Начните с создания основного содержания и функциональности компонента с помощью самых простых и доступных инструментов. Сделайте его доступным. Затем протестируйте расширенные возможности, которые вы хотели бы использовать, и доработайте компонент с их помощью.
  • Предлагайте быстрый и качественный пользовательский опыт, ориентированный на показатели веб-производительности, получайте реальные показатели пользователей и повышайте производительность для всех пользователей, независимо от их сетевого подключения, типа ввода, мощности CPU или GPU.

Доступность - ключевой фактор успешного PWA. Следуйте этим рекомендациям, чтобы убедиться, что ваше приложение доступно для всех и везде.

Следуя этим принципам и используя современные паттерны и веб-функции, вы сможете создавать отличные и быстрые приложения с действительно внутренним дизайном. Дизайн, основанный на ограничениях, а не на пикселях, позволяет каждому пользователю получить доступ к контенту и основной функциональности в том виде, который наилучшим образом подходит для его конкретного контекста просмотра.

Отзывчивый веб-дизайн

Начиная со статьи Итана Маркотта Responsive Web Design, опубликованной в 2010 г. на сайте A List Apart, дизайнерам и разработчикам рекомендуется создавать гибкие пользовательские интерфейсы, работающие на разных размерах экранов и устройствах.

Однако с некоторых пор это понятие сократилось до размеров мобильных, планшетных и настольных компьютеров, а на ширину экранов в значительной степени повлияли размеры экранов iOS. С помощью современного CSS и повторного фокусирования на первоначальном замысле отзывчивого дизайна мы можем вернуть "сплюснутость" в "сплюснутые" сайты.

Отзывчивый веб-дизайн включает в себя три технических компонента:

  • Жидкие сетки
  • гибкие медиа
  • Медиа-запросы

Итан приходит к выводу, что этих технических требований недостаточно; для продвижения вперед также необходимо иное мышление.

Миф о мобильном пользователе

На заре развития отзывчивого дизайна делались предположения о том, что сайты легче проектировать. Например, маленькие сайты предназначались для телефонов и имели ширину 320px, средние - для планшетов и имели ширину 1024px, а все, что больше, предназначалось для настольных компьютеров. Маленькие экраны имели сенсорные возможности, а большие - нет. Пользователи телефонов спешат и отвлекаются и поэтому нуждаются в "легком" опыте.

Все это неправда, это мифы о мобильных устройствах, которые основаны на предположении, что потребности пользователя принципиально отличаются только в зависимости от размера экрана или типа устройства. Это не выдерживает критики.

Возьмем, к примеру, социальную сеть PWA, которую сегодня можно установить как на мобильный, так и на настольный компьютер. На настольном компьютере многие пользователи во время работы могут держать узкое окно с лентой в одной стороне экрана, и предполагать, что они находятся на мобильном устройстве из-за доступной ширины, было бы неверно.

Мир PWA, выходящий за пределы вкладки браузера, даже добавляет новые проблемы в мир отзывчивого дизайна, такие как мини-режим и работа со складными устройствами.

Мини-режим

При установке PWA на настольное устройство окно может стать очень маленьким: меньше, чем окно браузера, меньше, чем область просмотра мобильного устройства. Это нечто новое в Интернете: мы можем поддерживать мини-режим, окно которого может быть размером 200x100 CSS-пикселей.

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

На настольных компьютерах PWA может отображаться в окне меньшего размера, чем самое маленькое окно, которое вы когда-либо проектировали для браузера. Это добавляет новую точку разрыва для вашего отзывчивого веб-дизайна: мини-режим.

Складные и гибридные устройства

Складные и гибридные устройства также широко распространены в наши дни:

  • Маленькие телефоны-ракушки.
  • Складные устройства, которые можно использовать как телефоны или планшеты.
  • Ноутбуки, трансформирующиеся в планшеты.
  • Планшеты, которые могут работать как ноутбуки с клавиатурой и трекпадом.
  • Телефоны, которые можно превратить в настольные компьютеры с помощью концентратора.

Хотя эта проблема существует для каждого веб-сайта, в случае с Progressive Web App вы контролируете и отвечаете за окно, когда приложение установлено. Поэтому ваш дизайн должен реагировать и предлагать наилучшие возможности в любом контексте.

Передача навигации приложения между устройствами становится обычным делом, поэтому PWA-приложение может отображаться на смарт-часах после получения уведомления, навигация может быть перенесена на телефон, а затем на ноутбук. Поддержка всех режимов и устройств - это ключ к тому, чтобы избежать разочарования пользователей.

Все сначала

Но с чего же начать? С мобильных устройств, с контента, с офлайна? Что выбрать при проектировании с учетом гибкости веба? Ответ - да, всё сначала. Термин mobile first получил множество толкований с тех пор, как Люк Вроблевски впервые ввел его в 2009 г.: от эмуляции специфических для конкретной платформы паттернов UI и UX в вебе до создания мобильных приложений перед созданием веб-приложений и просто использования медиазапросов min-width и на этом все. Однако его первоначальный смысл заключается в следующем: мобильность заставляет вас сосредоточиться. Как сказал Люк:

Мобильные устройства требуют от команд разработчиков программного обеспечения сосредоточиться только на самых важных данных и действиях в приложении. На экране размером 320 на 480 пикселей просто нет места для лишних, ненужных элементов. Приходится расставлять приоритеты. Поэтому, когда команда разрабатывает Mobile First, в результате получается приложение, сфокусированное на ключевых задачах, которые пользователи хотят решить, без обходных путей и засорения интерфейса, которыми изобилуют современные сайты для настольных компьютеров. Это хорошо для пользователей и полезно для бизнеса.

— Luke Wroblewski

Сосредоточьте каждый вид вашего сайта только на основных задачах, которые пользователь хочет на нем выполнить, и не добавляйте в него лишнего только потому, что у него больше экранной площади.

На второй принцип намекает Responsive Web Design: "градиент различных впечатлений". Единый, одинаковый, пиксельно идеальный опыт для каждого отдельного пользователя не должен быть целью вашей работы - это практически невозможно.

Существует бесчисленное множество комбинаций размеров экранов, возможностей, устройств и контекстов, в которых может работать пользователь, и вы, как дизайнер, не можете контролировать, каким будет конечное сочетание.

Вместо того чтобы думать о своем веб-опыте как о чем-то неизменном, подумайте о нем как о наборе рекомендаций, которые будут использоваться устройством пользователя для создания наилучшего опыта для его текущего контекста. Для этого необходимо использовать прогрессивное улучшение.

Прогрессивное улучшение

Прогрессивное улучшение - это паттерн, позволяющий писать код, который работает везде, начиная со стандартных HTML, CSS и JavaScript и добавляя поверх них слои возможностей с соответствующими отступлениями, когда API недоступно.

Как вы улучшаете возможности? Обнаружение возможностей - это паттерн, в котором вы выполняете тест на поддержку и реагируете на результаты этого теста. Для этого существует несколько встроенных в веб-платформу инструментов и практик.

Используя @supports, можно проверить поддержку браузером функции CSS и применить правила на основе полученных результатов. Это относится как к свойствам, так и к значениям CSS; если свойство поддерживается, а значение - нет, то проверка будет неудачной, как и в случае с неподдерживаемым свойством. JavaScript-код может получить доступ к этому через CSSSupportsRule.

Большинство новых функций веб-платформы привязаны к существующим объектам, поэтому определение стиля объекта 'feature' хорошо работает в JavaScript, как и другие подобные поиски, например, проверка свойств или методов элементов.

Чтобы поставлять современный JavaScript, можно использовать паттерн модуль/номодуль для предоставления более надежных функций с меньшей полезной нагрузкой для более современных браузеров и возможностью отката для старых браузеров. При этом гарантируется, что новые базовые возможности JavaScript, такие как обещания, классы, стрелочные функции, а также const и let будут доступны для браузеров, поддерживающих ES-модули.

Вы даже можете комбинировать несколько форм обнаружения возможностей для создания расширенного базового уровня. Команда BBC News назвала этот метод "срезанием горчицы" (Cutting the Mustard). Он позволяет предоставлять базовый опыт всем желающим и начинать улучшать его только после достижения определенной планки обнаружения возможностей.

Буква P в слове PWA означает Progressive, что подчеркивает идею постепенного добавления функций и возможностей, и использование Feature Detection является ключевым для достижения этой цели.

Избегайте обнаружения устройств

Необходимо напрямую тестировать поддержку функций, а не делать предположения о поддержке на основе строки User-Agent.

Строки User-agent никогда не были по-настоящему надежными. Для того чтобы "угадать", необходимо обладать практически идеальными знаниями обо всех существующих браузерах, операционных системах и устройствах. Но даже в этом случае они подвержены подделке пользователей, например, перенаправление сайтов настольных систем на мобильные браузеры часто осуществляется просто подменой строки user-agent настольного компьютера.

Более того, браузеры работают над замораживанием своих строк User-Agent, причем строки user-agent для определения функций специально указываются в качестве причины для устаревания, что делает их еще более ненадежными для идентификации пользователя и устройства, чем раньше.

Сказав, что обнаружение устройств - плохая практика, важно также пояснить, что все еще существуют ситуации, когда у нас нет другого решения, например, обнаружение iOS-устройств для предложения конкретных инструкций по работе с платформой. Относитесь к этим практикам как к хакам и будьте внимательны, перепроверяйте и обновляйте эти хаки на каждой новой версии браузера на этих платформах.

Контент превыше всего

Еще один принцип проектирования для Web: начинайте с своего контента. Например, биржевой тикер с графиком цен акций в реальном времени - это, по сути, таблица акций с их ценами за определенное время, возможно, со ссылкой на обновление сайта.

Затем эта таблица может быть дополнена JavaScript и fetch-запросами для обновления значений в таблице по таймеру или сокетами для обеспечения push-обновлений в реальном времени. Его можно еще раз расширить, чтобы представить результаты на графике, возможно, с помощью CSS, возможно, с помощью SVG, возможно, с помощью Canvas. Но ядро начинается с контента.

Внутренний дизайн

  • Мобильность как ограничитель пользовательского опыта.
  • Акцент на содержание и основную функциональность в процессе проектирования.
  • Постепенное расширение функциональности, если она доступна.

В совокупности эти принципы дают нам нечто новое: внутренний дизайн. В своем докладе Designing Intrinsic Layouts Джен Симмонс рассказывает об использовании современных инструментов CSS, таких как Grid, Flexbox, flow layout и writing modes, для проектирования и создания пользовательских интерфейсов. С помощью этих инструментов, по ее словам:

Вы можете сделать так, чтобы макет действительно соответствовал содержимому, которое у нас есть, и дизайну, который мы хотим сделать.

— Jen Simmons

Новый CSS позволяет дизайнерам восстановить контроль над макетом, но при этом сделать это в соответствии с новейшими принципами веб-дизайна. Вместо того чтобы создавать фиксированные формы, основанные на фиксированных размерах экрана, вы определяете правила верстки на основе контента, используя свойства, присущие этому контенту, такие как размер, размер текста и доступное пространство. Они позволяют реализовать дизайн в процессе его взаимодействия с содержимым, не контролируя размещение каждого пикселя.

Внутренние макеты позволяют перевести разговор о контроле в Интернете на новый уровень и дать ему определение. Контроль в Интернете - это не диктовка устройств, размеров экрана, цветов, шрифтов, макетов и возможностей для каждого посетителя вашего сайта. Контроль в Интернете - это написание правил, по которым браузер будет собирать ваш опыт, создавая его уникальным образом для каждого пользователя в вашем прогрессивном веб-приложении.

Веб-производительность

Последняя, но не менее важная основа PWA - это веб-производительность. Отличный опыт для пользователей - обязательное условие, которое приведет к увеличению конверсии во всех возможных случаях.

Оценка веб-эффективности включает в себя несколько этапов:

  • Понять, какие существуют ключевые метрики, ориентированные на пользователя.
  • Установить цели для каждой метрики.
  • Измерить наш PWA.
  • Улучшить показатели путем применения методик и лучших практик в коде или на сервере.
  • Измерить еще раз.
  • Улучшать опыт каждого пользователя в реальном времени, основываясь на его контексте.

Сегодня показатели веб-производительности измеряют не только скорость появления контента на экране, но и интерактивность сайта и восприятие его пользователями.

Web Vitals

В последнее десятилетие мы имеем дело с различными метриками для оценки успешности работы в Интернете. Сегодня набор рекомендуемых метрик сгруппирован в рамках проекта Web Vitals. Web Vitals фокусирует метрики в трех ключевых областях, влияющих на производительность и восприятие веб-сайтов:

  • Загрузка
  • интерактивность
  • Визуальная стабильность

Набор метрик от Core Web Vitals, показывающий результаты работы сайта.

С помощью Core Web Vitals вы можете с первого взгляда определить, насколько хороша или плоха ваша PWA с точки зрения веб-производительности и пользовательского опыта.

Основы PWA

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

Ресурсы

Источник — Foundations

Комментарии