Завтра, в среду 9 сентября, Apple проводит ежегодную презентацию в Apple Park под названием Surprise and shine. Это всё, что компания официально подтвердила: дату, название и платформы трансляции. Профильная пресса ожидает новое поколение iPhone, а вместе с ним первое складное устройство Apple.
Если вы руководите бизнесом, это не новость о телефоне, который вы, возможно, купите. Она важна потому, что вот-вот появится экран, который откроет ваш сайт и ваше приложение и поведёт себя так, как вы никогда не проектировали: его ширина меняется, пока клиент находится посреди какого-то действия.
Что Apple подтвердила, а что лишь сообщается
Это различие важно, прежде чем строить на нём любое бюджетное решение:
- Подтверждено Apple: мероприятие пройдёт в среду 9 сентября 2026 года в 10:00 по тихоокеанскому времени в Apple Park под названием Surprise and shine, с трансляцией на сайте Apple, на YouTube и в приложении Apple TV.
- Сообщается, но не подтверждено: складное устройство в формате книжки с внешним дисплеем около 5,5 дюйма и внутренним дисплеем около 7,8 дюйма, со стартовой ценой примерно в две тысячи долларов. Это оценки профильной прессы, а не официальные цифры, и любая из них может завтра измениться.
Поэтому не стройте никаких решений на этих цифрах. Здесь есть лишь одна вещь, на которую стоит опираться, и она верна независимо от итоговых характеристик: класс экранов, площадь которых меняется во время работы, теперь стал реальной частью рынка.
Категория не новая. Новый её масштаб
Складные устройства других производителей продаются с 2019 года, но сегмент оставался настолько маленьким, что его можно было игнорировать без последствий. Приход Apple, если завтра всё пойдёт так, как говорят сообщения, не изобретает категорию. Он переводит её с окраины, которая никогда не появлялась в вашей аналитике, в долю, которая там появляется.
Мы не станем называть вам процент доли рынка, для которого у нас нет официального источника. Единственная цифра, которая имеет значение, уже есть на вашей собственной панели: откройте аналитику и посмотрите, какая доля ваших посещений приходится на устройства iOS. Если она заметна, этот форм-фактор доберётся до ваших показателей за месяцы, а не за годы. Если она мала, вопрос менее срочный, но он никуда не исчезает.
Настоящее изменение: ширина меняется внутри сессии
Веб давно научился работать с разными размерами: телефон, планшет, компьютер. Но молчаливое допущение, на котором построено большинство сделанного, состоит в том, что размер определяется в момент открытия страницы и сохраняется до конца сессии. Поворот устройства был редким исключением, и многие сайты плохо справляются даже с ним.
Складное устройство ломает это допущение десятки раз в день. Клиент раскладывает устройство, и область просмотра скачком переходит от ширины телефона к чему-то близкому к ширине планшета; затем он складывает его, и всё резко возвращается обратно. По сообщениям, внутренний дисплей в разложенном виде шире, чем выше, а значит, макет, который вы делали для телефона, может отображаться в горизонтальном пространстве, которое вы ни разу не тестировали.
Одно правило описывает последствия: всё в вашем интерфейсе, что один раз измеряет доступное пространство и затем запоминает ответ, окажется неверным после первого складывания.
Где на самом деле всё ломается
- Макет, который считывает ширину один раз. Код, который при загрузке считывает ширину окна и фиксирует решение, мобильное меню или настольное, сохраняет это решение после раскладывания, пока клиент не перезагрузит страницу. Надёжный подход оставляет решение CSS-запросам, которые пересчитываются сами, а не сохранённой переменной.
- Определение устройства по user agent. Решение о том, какую версию сайта отдавать, по названию устройства не срабатывает дважды: во-первых, потому что одно устройство теперь имеет два размера, а во-вторых, потому что списки устройств устаревают с каждым запуском.
- Состояние, теряющееся при повторной отрисовке. Это самое опасное с коммерческой точки зрения. Клиент находится посреди формы заказа или шага оплаты, раскладывает устройство, интерфейс перестраивается, и поля очищаются или шаг сбрасывается. Этого никогда не видно при тестировании статичной страницы, но сразу видно по вашему коэффициенту завершения.
- Таблицы, карты и карусели. Компоненты, которые сами вычисляют свои размеры при загрузке, искажаются первыми: таблица выходит за пределы страницы, карта застревает в прежнем размере, карусель замирает посреди перехода.
- Ваше мобильное приложение, если оно есть. Обе платформы теперь поддерживают многооконные режимы и меняющиеся размеры. Приложение, которое рассчитывает на фиксированные высоту и ширину, показывается с пустыми полями или обрезанными элементами.
Пять проверок, которые можно провести на этой неделе, не покупая устройство
Чтобы понять, в каком вы положении, складное устройство не нужно. Откройте свой сайт в настольном браузере, медленно двигайте край окна внутрь и наружу и наблюдайте:
- Меню и макет плавно перестраиваются, пока вы тянете, или старая форма застревает, пока вы не перезагрузите страницу?
- Заполните наполовину контактную форму или добавьте товар в корзину, а затем измените ширину окна. Данные на месте?
- Перейдите к шагу оплаты и измените ширину, находясь на нём. Вы остаётесь на этом шаге или возвращаетесь к началу?
- Откройте страницу с таблицей, картой или каруселью и измените ширину. Пересчитывает ли она свои размеры или искажается?
- Попробуйте неудобную промежуточную ширину, примерно от 700 до 900 пикселей. Большинство сайтов тестируют на известных размерах телефонов и на компьютере, а диапазон между ними и есть то место, где живёт разложенное устройство.
Одна только последняя проверка выявляет большинство проблем, и она занимает десять минут.
Взгляд Origami
Мы видим в этом наглядную иллюстрацию правила, которое повторяем нашим клиентам: не стройте интерфейс вокруг списка устройств, стройте его вокруг доступного пространства. Любой дизайн, рассчитанный на конкретное устройство, начинает стареть в день выпуска, потому что каждый год добавляется размер, которого не было в списке. Дизайн, который считывает пространство и перестраивается, не требует никаких правок, когда появляется новая категория.
И проверки выше касаются не только складных устройств. Сайт, который их проходит, надёжнее работает в разделённых окнах, на автомобильных дисплеях, на экранах в отделениях и в старых браузерах. Мы с самого начала строим на этой основе и проверяем её на существующих сайтах в рамках работы над пользовательским опытом. Связаться с нами можно на странице контактов.
Итог
Что Apple объявит завтра, это дело Apple. Ваше дело в том, что класс экранов, площадь которых меняется во время использования, растёт, и ваш сайт, скорее всего, опирается на допущение, что размер фиксируется после загрузки. Потяните сегодня край окна в течение десяти минут, и вы своими глазами увидите то, что ваш клиент увидит через несколько месяцев. Исправить это, пока проблема мала, гораздо дешевле, чем исправлять после того, как кто-то позвонит и скажет, что его заказ пропал на полпути.
Источники
- Официальное приглашение Apple на мероприятие 9 сентября 2026 года под названием Surprise and shine с датой, местом и платформами трансляции, как опубликовали MacRumors и 9to5Mac 26 августа 2026 года.
- Сообщения профильной прессы об ожидаемом складном устройстве, включая два размера дисплея и стартовую цену: MacRumors и 9to5Mac; оценки, которые Apple не подтвердила.
- Присутствие складных устройств других производителей на рынке с 2019 года: объявленные производителями данные о запусках.
Частые вопросы
Нужно ли покупать складное устройство, чтобы протестировать сайт?
Нет. Откройте сайт в настольном браузере и медленно тяните край окна, пока вы находитесь посреди заполнения формы или шага оплаты. Большинство проблем проявляется именно так, особенно при ширине от 700 до 900 пикселей, то есть в диапазоне, который занимает разложенное устройство.
Чем это отличается от адаптивного дизайна, который у меня уже есть?
Адаптивный дизайн работает с размером, который определяется при открытии страницы и дальше не меняется. Здесь размер меняется во время сессии, поэтому сбои возникают в сохранении состояния и пересчёте компонентов, а не только в макете.
Значит ли это, что сайт придётся переделывать?
Обычно нет. В большинстве случаев работа сводится к конкретным местам: перенести решения о макете из кода, который один раз считывает ширину, в CSS-запросы, сохранять состояние форм и пересчитывать размеры таблиц и карт при изменении пространства.
Что Apple на самом деле подтвердила на данный момент?
Только дату мероприятия, 9 сентября 2026 года, его название Surprise and shine и платформы трансляции. Всё, что говорят о складном устройстве, его размерах и цене, это неподтверждённые сообщения прессы, которые могут измениться на презентации.
