Основы¶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мини-режим¶

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

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

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

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

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

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

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

Все сначала¶

Но с чего же начать? С мобильных устройств, с контента, с офлайна? Что выбрать при проектировании с учетом гибкости веба? Ответ — да, всё сначала. Термин 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). Он позволяет предоставлять базовый опыт всем желающим и начинать улучшать его только после достижения определенной планки обнаружения возможностей.

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

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

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

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

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

Еще один принцип проектирования для 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 вы можете с первого взгляда определить, насколько хороша или плоха ваша PWA с точки зрения веб-производительности и пользовательского опыта.

Основы PWA¶

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

Ресурсы¶

• Изучаем отзывчивый веб-дизайн
• Новый отзывчивый: веб-дизайн в мире, управляемом компонентами
• Прогрессивное улучшение
• Десять современных макетов в одной строке CSS
• Web Vitals
• Разговор о проектировании внутренних макетов

Источник — Foundations

Комментарии