Как сделать один сайт для всех устройств (Responsive Web Design)
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:
«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»
Почему это глупо
Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.
Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).
Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».
Как сделать один сайт для всех устройств
Вопросы, которые поднимал автор вышеуказанной статьи, уже довольно давно в цивилизованном мире обдуманы, и, более того, они уже решены.
Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):
Все это называется «Responsive Web Design»
Responsive состоит из следующих техник:
Резиновый макет на основе пропорций (fluid grid)
Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:
.leftcolumn <
width : 27 % ; /* 270px / 1000px = 0,27 */
float : left ;
>
.rightcolumn <
width : 73 % ; /* 730px / 1000px = 0,73 */
float : right ;
>
Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:
.leftcolumn .some-div <
width : 62 , 962963 % ; /* 170px / 270px = 0.62962963 */
float : left ;
>
Резиновые изображения (fluid images)
Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства < max-width: 100% >. Изображение с img < max-width: 100% >никогда не вылезет из своего блока-родителя.
Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.
Media queries
Нужны для отображения макета, оптимизированного под разрешение, с которого в данный момент этот сайт смотрится. Это часть стандарта CSS, которая позволяет применять стили на основе информации о разрешении устройства.
Здесь базовые стили для глупых браузеров. Например , для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же : ) .
@media only screen and (min-width: 480px)
Здесь стили более разумных , но все еще мобильных устройств. Android , iPhone и так далее.
@media only screen and (min-width: 768px)
Планшеты в режиме portrait.
@media only screen and (min-width: 992px)
Планшеты в режиме landscape , нетбуки , ноутбуки , десктоп.
@media only screen and (min-width: 1382px)
Десктоп с большими разрешениями , телевизоры.
Mobile first
Это техника, при которой сайт верстается сначала для устройств с меньшими возможностями, а затем с помощью media queries добавляются возможности и плюшки.
Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.
Ссылки
2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.
- media queries
- css
- html
- mobile first
- responsive web design
- адаптивный сайт
- адаптивный дизайн
Создание отзывчивых приложений на основе холста
Под отзывчивостью понимается способность приложения автоматически согласовываться с различными размерами экрана и форм-факторами, чтобы разумно использовать доступное пространство экрана, обеспечивая отличный пользовательский интерфейс и пользовательский опыт на каждом устройстве, форм-факторе и размере экрана.
Отзывчивость позволяет различным элементам приложения определять, как они:
- Растягиваются или изменяют размеры с изменением размера экрана.
- Сохраняют или изменяют позиции при изменении размера экрана.
Зачем создавать адаптивные приложения
Конечные пользователи могут получить доступ к вашему приложению с разных устройств, таких как телефоны, планшеты, ноутбуки и настольные компьютеры с большими мониторами, экранами разных размеров и с различным количеством пикселей.
Чтобы обеспечить удобство опыта и удобство использования приложения на каждом форм-фактор и устройстве, необходимо разрабатывать приложение с учетом принципов адаптивного дизайна. Даже если приложение предназначено для использования только в веб-браузере или на мобильных телефонах, размеры экрана пользовательского устройства могут быть разными, поэтому разработка приложения с учетом принципов адаптивности — хорошая идея.
Разработка приложения с учетом принципов адаптивности
Прежде чем вы начнете разрабатывать пользовательский интерфейс для своего приложения, вам необходимо рассмотреть следующие аспекты:
- Какие форм-факторы или устройства вы хотите поддерживать?
- Как приложение должно выглядеть в каждом форм-факторе?
- Какие элементы приложения нужно растягивать или изменять размер?
- Скрыты ли элементы в некоторых форм-факторах?
- Приложение работает по-разному в некоторых форм-факторах?
После того, как все эти требования собраны, вы должны начать думать о том, как эти различные макеты пользовательского интерфейса могут быть созданы в одном приложении с помощью адаптивных инструментов, доступных в Power Apps.
Прежде чем вы начнете использовать адаптивные макеты, вам необходимо сделать следующее:
- Перейдите к Power Apps.
- Откройте приложение, в котором вы хотите использовать гибкий макет.
- Перейдите Настройки >Отображение, чтобы отключить Масштабирование по размеру, Сохранить пропорции, Заблокировать ориентацию и выберите Применить.
Гибкие макеты
Следующие адаптивные макеты можно создать, добавив новый экран и выбрав соответствующий параметр на вкладке Макет:
Новые адаптивные макеты доступны для форматов приложений, но новые шаблоны экрана доступны только для формата Планшет.
Разделенный экран
Макет с разделенным экраном состоит из двух разделов, каждый из которых занимает 50% ширины экрана на рабочем столе. На мобильных устройствах разделы располагаются один под другим, каждый занимает всю ширину экрана.
Боковая панель
Макет боковой панели имеет боковую панель фиксированной ширины слева. Основная часть состоит из заголовка фиксированной высоты, а основной раздел занимает остальную часть ширины экрана. По умолчанию шаблон имеет такое же поведение на мобильных устройствах, однако рекомендуется выполнить некоторые настройки на основе шаблона пользовательского интерфейса, необходимого для работы на мобильных устройствах.
Работа с контейнерами
Контейнеры — это строительные блоки всего адаптивного дизайна. Контейнер может быть контейнером с автоматической компоновкой в вертикальном или горизонтальном направлении или контейнер с фиксированным макетом, который в будущем будет поддерживать ограничения.
Ниже приведены несколько советов по созданию пользовательского интерфейса вашего приложения с контейнерами:
- Всегда создавайте элементы пользовательского интерфейса, которые образуют таблицу пользовательского интерфейса внутри контейнера.
- Позволяет контейнеру иметь собственные адаптивные свойства и настройки, чтобы указать, как он располагается или изменяет размер на экранах разных размеров.
- Позволяет вам изменить расположение дочерних компонентов с точки зрения адаптивности.
Выберите один из двух режимов макета для контейнера: макет вручную или автоматический макет (горизонтальный или вертикальный)
Контейнеры с автоматической компоновкой
Два элемента управления, Горизонтальный контейнер и Вертикальный контейнер, могут использоваться для автоматического размещения дочерних компонентов. Эти контейнеры определяют положение дочерних компонентов, поэтому вам никогда не придется устанавливать X, Y для компонента внутри контейнера. Кроме того, он может распределять доступное пространство между дочерними компонентами на основе настроек, а также определяет выравнивание дочерних компонентов как по вертикали, так и по горизонтали.
Когда использовать контейнеры с автоматической компоновкой
Контейнеры с автоматической компоновкой можно использовать в следующих сценариях:
- Пользовательский интерфейс должен реагировать на размер экрана или изменения форм-фактора.
- Существует несколько дочерних компонентов, которые необходимо изменять или перемещать в зависимости от размера экрана или изменений форм-фактора.
- Когда нужно размещать элементы в стопку вертикально или горизонтально (независимо от их размера).
- Когда вам нужно равномерно расположить элементы на экране.
Пример контейнера с автоматической компоновкой
Чтобы создать адаптивный экран:
- Создайте пустое приложение на основе холста с макетом Планшет.
- Выберите Настройки >Отображение и отключите Масштабирование по размеру, Сохранить пропорции, Заблокировать ориентацию и выберите Применить.
- Теперь из области Вставить на левой боковой панели под вкладкой Макет выберите Контейнер с горизонтальной компоновкой.
- X = 0
- Y= 0
- Width = Parent.Width
- Height = Parent. Высота
- Выберите Container2. Вы увидите, что свойство Flexible width включено. Задайте для Fill portions значение 1.
- Выберите Container3. Вы увидите, что свойство Flexible width включено. Задайте для Fill portions значение 3.
Известные проблемы
- Некоторые комбинации свойств контейнера макета несовместимы или могут приводить к нежелательным результатам, например:
- Если свойство Wrap контейнера включено, настройка свойства Align игнорируется в дочерних элементах управления.
- Если свойство Wrap контейнера отключено, а для переполнения первичной оси контейнера установлено значение Прокрутка (горизонтальное переполнение для горизонтальных контейнеров или вертикальное переполнение для вертикальных контейнеров), рекомендуется установить для свойства Justify значение Начало или Пространство между.
- Параметры Центр или Конец могут сделать дочерние элементы управления недоступными, когда контейнер слишком мал для отображения всех элементов управления, даже если свойство Overflow установлено на Прокрутка.
См. также
Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).
Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).
Обратная связь
Отправить и просмотреть отзыв по
14 марта 2016 г. Что выбрать: приложение, мобильная версия сайта или адаптивный дизайн?
В этой статье мы рассказываем, чем отличается мобильная версия сайта, адаптивный дизайн сайта и приложение для мобильного и делимся соображениями о том, что лучше выбрать, если вы хотите сделать свой сервис доступным для пользователей смартфонов и планшетов.
Количество пользователей мобильных устройств в мире растет и, согласно прогнозам, к 2020 году 6,1 миллиарда людей или 70% населения Земли будут пользователями смартфонов. Это означает, что в какой бы сфере не работала ваша компания, самое время задуматься о том, как стать ближе пользователям мобильных устройств.
Перед вами открывается несколько перспектив:
- Разработка мобильной версии сайта
- Создание мобильных приложений (для iOS, Android и, возможно, Windows Phone)
- Дизайн сайта с использованием адаптивной верстки
Разберемся, что происходит в каждом из этих случаев.
Создание сайта для мобильных устройств
Мобильный сайт — это специально созданная версия сайта, которую видят пользователи, когда заходят на вашу страничку с помощью браузера, установленного на смартфоне или планшете. В отличие от основной версии сайта, версия сайта для мобильных устройств адаптирована под просмотр на небольших экранах.
Например, вот как выглядит сайт Amazon на ПК (обратите внимание на сложное меню):
В мобильной версии меню с разделами открывается на отдельной странице, а для просмотра товаров на главной достаточно провести пальцем по экрану:
Интересно, что в США самый популярный мобильный сайт — это Buzzfeed. За ним следуют Answers.com, Wikia, Urban Dictionary и Bustle. В то же время список самых популярных сайтов по общему интернет-трафику вполне предсказуем:
Почему так получается? Ответ прост: у всех топовых веб-сайтов США есть собственное мобильное приложение, которым и пользуется большинство посетителей.
Если вы ограничены в бюджете или ваш сайт не является площадкой для продаж или социальной сетью, а просто содержит краткие сведения о компании, то вам подойдет дизайн и верстка сайта под мобильные устройства.
Но если ваша компания продает товары и услуги через Интернет, является новостным сайтом или социальной сетью, вам стоит инвестировать в нативные приложения для Android и iOS, ведь согласно исследованиям, пользователи проводят в них в 18 раз больше времени, чем на мобильных версиях сайтов.
Разработка мобильных приложений
Мобильное приложение — это специальная программа, разработанная с учетом требований и возможностей конкретной платформы, например Android или iOS. Чтобы использовать ее, пользователям понадобится зайти в магазин приложений (Google Play или App Store), найти ее среди других и установить на свое устройство.
Если разработка мобильных сайтов требует тестирования конечного продукта в разных мобильных браузерах, то при создании приложения приходится учитывать, что пользователи используют разные версии операционной системы. Например, вот данные об использовании разных версий операционной системы Android:
Как видно из графика, большая часть пользователей все еще на версиях KitKat, Lollipop и Jelly Bean, хотя для некоторых устройств сейчас уже доступна версия Marshmallow.
Следующая трудность связана с внешним видом приложения. Если дизайн мобильной версии сайта можно сделать практически таким, как сайт, который пользователи видят в обычном браузере, то приложение для сайта должно отвечать требованиям производителя ОС к интерфейсу пользователя. В этом есть свои преимущества: приложение для мобильного выглядит более «родным» для ОС и работает быстрее благодаря интеграции с платформой.
С другой стороны, в защиту мобильных сайтов следует сказать, что с ними проще наращивать трафик. Мобильные сайты для смартфонов выигрывают с точки зрения количества уникальных пользователей, но на приложения приходится больше уникальных действий (unique actions), т. е. опять же, в приложениях пользователи проводят больше времени.
Что же мы все таки рекомендуем: мобильный сайт или приложение? Если позволяет бюджет, мы советуем сделать отдельный мобильный сайт и приложения для Android и iOS. Это позволит максимально охватить рынок мобильных устройств.
Тем не менее, on-demand стартапы могут обходиться и просто приложением. Веб-сайт в таком случае заменяет посадочная страница, которая описывает основные возможности сервиса и призывает скачать приложение.
Разработка адаптивного дизайна
Если вы заказываете создание адаптивного макета сайта, то разрабатывать отдельную мобильную версию не требуется. Адаптивный дизайн сайта — это дизайн, который рассчитан на отображение на мониторах разного размера: от экранов смартфонов до широкоугольных мониторов. Мы уже рассказывали о создании адаптивных сайтов, поэтому отметим только основные их преимущества:
- Возможность показывать пользователям разный контент в зависимости от устройства.
- Простота внесения изменений. Если вы хотите добавить новый блок на сайт, это нужно будет сделать только один раз.
- SEO-преимущества. С адаптивным сайтом вам не нужно будет заниматься привлечением трафика на мобильную версию сайта.
Кроме того, адаптивные сайты для мобильных устройств рекомендует использовать Google. Но адаптивный веб-дизайн имеет и свои сложности:
- Требуется оптимизировать сайт для быстрой загрузки на мобильных устройствах.
- Появляется необходимость готовить изображения разного размера для настольных и мобильных устройств.
- Для устройств с маленьким экраном потребуется создать отдельное компактное меню.
- Увеличивает время тестирования сайта.
Кому в первую очередь нужен адаптивный дизайн? Корпоративным сайтам, блогам и новостным порталам — это те типы сайтов, которые пользователи привыкли пролистывать. Интернет-магазинам, у которых еще нет собственного приложения и мобильной версии сайта, тоже стоит задуматься об адаптивном дизайне. Хотя пока уровень конверсии для мобильных устройств ниже, чем для ПК и ноутбуков, количество заказов, осуществляемых со смартфонов и планшетов начинает расти: в 2014 году в США этот показатель составлял 19%, а в 2015 — уже 25%.
Студия stfalcon.com выполняет дизайн и разработку адаптивных сайтов и приложений для Android и iOS. Обратитесь к нам, и мы поможем вашей компании стать ближе пользователям мобильных устройств.
Как сделать мобильную версию сайта?
Разработчики понимают, что во время бума мобильных устройств без мобильных версий сайтов никак не обойтись. Они стоят перед выбором, что лучше: сделать сайт адаптивным к просмотру с гаджетов или создать отдельный мобильный сайт? В этой статье мы с вами рассмотрим, как создать каждую из таких версий, а также их преимущества и недостатки.
Итак, существует три способа построения мобильных версий сайтов:
- Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
- Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
- Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.
Как создать мобильную версию сайта
Мобильная версия сайта должна по стилистике, цвету и содержанию быть такой же, как и основной сайт. Разница в том, что пространство в мобильной версии должно быть максимально заполнено текстовым контентом и содержать минимум графики. Задача дизайнера в данном случае – продумать, какие элементы должны быть в приоритете, оставив лишь самую значимую графику и навигацию, и убрать все пробелы между блоками, чтобы уместить все в ограниченный размер экрана мобильного устройства.
Страница должна быть ограничена по ширине. Для этого можно весь контент организовать в одну колонку и не перегружать графикой, чтобы не снижать скорость загрузки сайта.
По длине страницы ограничений нет. Поэтому при прокрутке на экране должны показываться тезис за тезисом для удержания внимания.
Тенденции веб-дизайна
- «Mobile First»
Изначально создается мобильная версия, а затем основной сайт, который дополняется разными элементами и адаптируется под компьютер. Такой подход применяется, если наполнение сайтов совпадает.
Очень легко сделать основной сайт, когда на главной странице есть выпадающее меню со списком всех остальных страниц. Это удобно, к тому же, такая страница хорошо ранжируется поисковиками. В мобильной же версии такая навигация просто не поместится на экране. Поэтому нужно сделать несколько ссылок для навигации или воспользоваться поисковой строкой.
Большинство смартфонов имеют расширение 320 пикселей. Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.
Аналитический инструмент Google Analytics дает возможность просмотреть самые популярные мобильные устройства, которые используют пользователи вашего сайта, и сделать соответствующие выводы при проработке мобильной версии.
Учитывая то, что палец намного больше, чем курсор мышки, точность попадания по ссылкам довольно низкая. В связи с этим мобильную версию сайта нужно продумать так, чтобы вокруг ссылок было оставлено как минимум 28 пикселей свободного пространства.
Кроме того, пока сайт подгружает страницу по ссылке, пользователь должен понимать, что ссылка нажата, и не кликать по ней несколько раз. Для этого отлично подойдут вдавленные кнопки или ссылки, которые меняют цвет, что сигнализирует о принятии команды.
Выпадающее меню должно открываться, когда пользователь касается экрана. При этом подпункты в нем должны быть крупные и четко разделены.
- По возможности нужно отказаться от ввода текста.
- Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).
Как сделать адаптивную верстку
При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.
Медиа запросы для мобильных устройств используются тогда, когда нужно применить CSS-стили для гаджетов, что отличаются по типу отображения, ширине окна браузера и внешнего освещения. Это очень важный инструмент, обеспечивающий корректную работу сайтов.
Задача мобильной верстки в том, чтобы оптимизировать сайт под все возможные размеры экранов. Причем меняется не весь сайт, а его отдельные элементы. Чтобы при уменьшении масштаба страницы сайта элементы не исчезали, нужно размещать их в видимую колонку путем прописывания в таблице стилей.
Правила верстки
При создании сайта с нуля, лучше начать с мобильной версии. Но зачастую компании уже имеют основной сайт, поэтому нужно сжимать его элементы для портативной версии. Чтобы сжатие было плавным, необходимо ширину объектов задавать в процентном соотношении к ширине экрана.
Часто сжатые элементы получаются неразборчивыми, поэтому их нужно перенести в другое место, а левый блок меню сделать более заметным (закрепить в нижней части страницы после основного контента).
Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.
Любую реорганизацию начинают с ключевых блоков, а менее значимые элементы не отображают на усмотрение дизайнера.
Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:
- Весь контент находится в одной колонке, но разделяется на блоки с подсказками. В верхней части располагают элементы навигации;
- «Гармошка» — прием, когда контент скрывается под заголовками в виде кнопок.
Все блоки, которые удалены с мобильной версии, необходимо внести в HTML-код и скрыть их отображение на определенных устройствах.
Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.
Удачные примеры адаптивных сайтов:
- New Adventures In Web Design Conference 2012
Макет основан на гибкой сетке и привлекает максимальное количество пользователей. Это сайт о конференции по веб-дизайну, поэтому здесь показаны все лучшие и современные тенденции веб-дизайна.
Дизайн этого сайта удобен для экранов всех гаджетов и отображает всю информацию о компании и сервисе.
- Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.
Если же массив данных огромен, то есть смысл сделать отдельный сайт для мобильных устройств.
Разрабатываем отдельный сайт под мобильные устройства
Отдельный сайт использует собственный HTML-код. Именно поэтому дизайнер сам решает, будет ли сайт копией основного или существенно отличаться от него. В любом случае, следует при разработке позаимствовать основной контент и решить, какие элементы стоит оставить, а какие удалить.
Перед разработкой важно проверить ключевые запросы, по которым пользователи ищут данный контент. Эту информацию можно просмотреть в Google Analytics в отчете «Поисковая оптимизация».
Кроме того, мобильную версию сайта можно создать по уже существующим шаблонам в конструкторах. Это займет намного меньше времени для разработки.
Преимущества и недостатки этих способов разработки
Преимущества Недостатки Адаптивный дизайн ● Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов; ● Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;
● Простая поддержка такого продукта;
● Наличие одного адреса позитивно сказывается на продвижении сайта.
● Удобен для пользователей;
Заключение
Нет идеального и уникального варианта мобильного сайта, который подойдет для всех. Все зависит от сути и направленности сайта, а также требований заказчика. Для крупных проектов целесообразно создавать отдельный мобильный сайт.
Учитывая нынешние тенденции использования мобильных устройств, создание мобильной версии просто необходимо, так как большинство пользователей заходят в Интернет через гаджеты. Если у вас ограниченный бюджет и вы не хотите тратить деньги на создание мобильного приложения для вашего сайта — компания Google рекомендует новую технологию Progressive Web App или прогрессивные веб-приложения.
Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).
Кроме того, в технологию «вшита» функция push-уведомлений, которые возвращают посетителей на сайт, напоминая им о нем. Наконец, раскрутка сайта с PWA происходит по той же схеме, что и раскрутка обычного сайта (не приложения — иметь дело с Интернет-магазинами приложений даже не придется) при помощи обычных маркетинговых инструментов, без задействования дополнительного бюджета. Если учесть, что уже с лета компания Google анонсирует введение ранжирования мобильных страниц по скорости загрузки, то становится ясно — супербыстрые прогрессивные веб-приложения PWA помогут добиться лидерских позиций в этом рейтинге.