Версия платформы 2022−2

3 мая 2022

Весна в этом году богата обновками, не успели ещё как следует насладиться версией 1.7, как подоспела новая! В этот раз уделили много внимания маленьким экранам мобильных устройств, поработали над оптимизацией и закрыли несколько мелких багов (куда без них).


Добавили новое

🟢 364 Настройки → Оформление → Заголовки: Можно настраивать размер

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

Ну, а мы любим дизайнеров и не хотим обижать. Так что теперь размер любого уровня заголовков настраивается, как душе угодно: Н1 размером 74 px — пожалуйста, хотите 174 px — всё можно!

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

364

🟢 247 Общее → Заголовки и обычный текст: Умная адаптация размеров шрифта под различные разрешения

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

Теперь же адаптация всех размеров шрифтов происходит по какой-то невероятной формуле. Нам даже пришлось привлечь стороннего консультанта-математика для её разработки (Андрей, привет, спасибо тебе)! Адаптируется как основной шрифт, так и все уровни заголовков. Учитывается аж 15 (!) диапазонов разрешений, подстраивая шрифты для оптимального отображения под каждое из них.

Во-первых, какой бы размер текста ни задали, хоть 300 px, в маленьких разрешениях он будет выглядеть корректно:

247-1

При этом учли, что текст не может бесконечно уменьшаться. Даже если поставить очень маленький размер, в мобильной версии он не сожмётся до атомов.

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

Например, для первых трёх уровней заголовков поставили 50, 40 и 30 px. Разница между ними 10 px — визуально равномерно уменьшаются, а система стремится сохранить эту визуальную зависимость при адаптации под любой экран. Потом пришёл дизайнер и увеличил первый заголовок в 2 раза. Равномерность испарилась, первый стал сильно больше собратьев, а система умна и отразит эту визуальную разницу под любым разрешением:

247-2

Улучшили

🔵 666 Общее → Сетка: Улучшили адаптацию под самые маленькие экраны

Раньше для экранов, шириной меньше 410 px, две и четыре колонки контента превращались в одну, а шесть — в три.

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

На скриншоте пример адаптации 4 колонок при разрешении 375 px, как было и стало:

666

🔵 665 Секция «Отзывы» → Отзыв → Автор: Улучшили выравнивание в мобильной версии

На мобильных фото автора, имя и дата сдвигались левее текста отзыва, ибо у текста есть подложка, а у них — нет. Получалась некрасивая лесенка, усложняющая чтение.

Выровняли всё по одной линии. Красота!

665

🔵 391 Общее: Статические файлы скриптов, стилей и изображений платформы подключаются с централизованного домена

Каждый раз, когда вы открываете сайт, сервер отдаёт используемые сайтом файлы скриптов, стилей и изображений, а браузер загружает их на ваше устройство. Чем быстрее сервер отдаёт такие файлы — тем быстрее загружается сайт.

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

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

Увидели ещё одну возможность ускорения сайтов — вынесли статические файлы на отдельный сервер, специально заточенный под них (иначе настроены сжатие, кэширование и другие штуки):

  1. Теперь статика отдаётся ещё быстрее и сайты на платформе ускорились уже за счёт этого.
  2. Плюс, основному серверу стало чуть легче, ибо с него сняли часть обязанностей — ещё ускорение сайтов.
  3. Но и это ещё не всё, если ваши пользователи посетят более одного сайта, созданного на Cubona, второй и следующие будут загружаться быстрее, т. к. статика у них уже закэширована с первого сайта. Этот же принцип работает и для роботов, проверяющих скорость сайтов (по крайней мере, для части из них). Так что чем больше сайтов на Cubona — тем всем быстрее и лучше!

🔵 611 Настройки → Окна: Переименовали

Папка со всплывающими окнами называлась «Формы (окна)». Мы думали, что так будет понятнее, но практика показала, что от этого только больше путаницы. Переименовали просто в «Окна».

Пофиксили баги

🔴 663 Виджет «YouTube»: Не всегда занимал 100% ширины колонки

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

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

🔴 594 Общее → Навигационная панель → Фон → Изображение: Не отображалось

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

🔴 657 API → Уведомления об отправке форм: Сообщения в Telegram иногда не приходили

Клиент заметил, что у пары заказов уведомления на почту пришли, а в Телеграм нет.

Оказалось, что если у пользователя в почтовом адресе был символ подчёркивания _, то Телегой он воспринимался как символ Markdown, ломая разметку сообщения.

Добавили экранирование всех спец. символов во всех полях, куда пользователь вводит текст.

🔴 654 Секция → Оформление → Вертикальные отступы: Двойные не работали

Когда запустили предыдущую версию платформы обнаружили, что перестали работать двойные отступы. Oops! Быстро обнаружили и сразу исправили.

🔴 667 Общее: Сайты иногда притормаживали при скроллинге на мобилках

Заметили, что сайты на мобильниках иногда притормаживают, иногда нет.

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

🔴 668 Общее → Навигационная панель: На мобилках иногда обрезалась снизу

Обнаружили, что иногда навигационная панель «обрезалась» снизу в мобильной версии.

Предположили, высота в скрытом состоянии некорректно рассчитывалась. Дописали код, чтобы пересчитывал высоту панели при открытии.

Новая версия уже у вас на сайте, пользуйтесь на здоровье, а нам не забывайте сообщать о неполадках и пожеланиях, за что вам огромное спасибо! Смело обращайтесь за любой помощью, команда Cubona на связи 💙

Поделиться в социальных сетях

Телеграм-канал Cubona

Публикуем и обсуждаем релизы.
Подписывайтесь ;-)

Ильяс Мирзагалиев

основатель, CEO