Прогрессивные веб-приложения

Прогрессивные веб-приложения | Блог | Сергей Иоффе

Прогрессивные веб-приложения или PWA (Progressive Web Applications) – это веб-приложения и сайты,  которые используют HTML+CSS+JavaScript и обладают расширенными возможностями интеграции в ОС. Прогрессивные веб-приложения используют элементы дизайна ОС, что делает их использование более удобным. Дизайн прогрессивных веб-приложений обладает усовершенствованным юзабилити и показателями конверсий. Прогрессивные веб-приложения функционируют примерно так: пользователь открывает веб-ссылку в браузере смартфона, c загрузкой веб-страницы пользователь получает мобильное app. Работать с таким app удобнее, потому что не нужно использовать магазин мобильных приложений и ждать пока установится приложение. Функция «Add to home screen» позволяет добавить приложение на рабочий стол. Прогрессивные веб-приложения, в основном, создаются для пользователей мобильных устройств и продолжают идею AMP, но также обладают достаточной адаптивностью и для работы с десктопами, планшетами и т.п.

Основные характеристики прогрессивных веб-приложений:
Адаптивность – прогрессивные веб-приложения одинаково функционируют на всех основный устройствах: десктоп, лаптоп, смартфоны, планшеты, телевизоры с выходом в интернет
Режим оффлайн – приложение должно работать оффлайн при отсутствии соединения с интернетом
Прогрессивность – обновляемый UX для максимально эффективной работы с каждым пользователем и дальнейшего улучшения и апгрейда
Нативность – UX привычен для большинства пользователей
Вовлечённость – прогрессивный UX-дизайн создаёт условия для комфортного использования веб-приложений. Прогрессивные веб-приложения обладают упрощённой опцией установки и оптимальным удобством использования
Самообновляемость – приложение должно контролировать процесс обновлений посредством Service Worker API
Определяемость – W3C-стандарт и регистрация в Service Worker идентифицируют прогрессивные веб-приложения поисковыми системами.Прогрессивные веб-приложения

Responsive Web Design

Responsive Web Design | Блог | Сергей ИоффеResponsive Web Design рассматривается как составная адаптивного подхода в веб-дизайне. Адаптивный веб-дизайн обеспечивает простое и понятное визуальное восприятие контента и интерфейса независимо от характеристик экрана и других особенностей пользовательского устройства. Адаптивный веб-дизайн включает в себя метод улучшения способами CSS и JavaScript.

Основные характеристики Responsive Web Design
  • применение гибкого макета на основе сетки (flexible, grid-layout)
  • использование гибких изображений (flexible images)
  • работа с медиа-запросами (media queries)
Адаптивный веб-дизайн добавляет следующие методы
  • применение постепенного улучшения JavaScript/jQuery
  • проектирование для мобильных устройств ранних видов
  • плавное перестраивание блоков в отзывчивом дизайне при изменении размера экрана (например, при повороте планшета)