#статья дня
Сегодня у нас, прости господи, статья с Хабра. Там нынче много странного контента и плохих переводов, но эта — хорошая.
Автор — Карен Ананян, продуктовый дизайнер — предлагает новый (?) метод адаптивного дизайна, объединяющий принципы отзывчивого дизайна, адаптивного дизайна и масштабирования.
Я поставил вопрос после «новый», потому что, по факту, автор перепридумал clamp(). Но не то чтобы совсем.
Существующие подходы:
Responsive design (отзывчивый дизайн): Элементы интерфейса адаптируются к размерам экрана, сохраняя общую композицию и функциональность. Однако при значительном увеличении размеров экрана элементы могут чрезмерно растягиваться, ухудшая удобочитаемость и внешний вид.
Adaptive design (адаптивный дизайн): Структура блоков и элементов перестраивается в зависимости от устройства. Это требует разработки и поддержки нескольких макетов для разных типов устройств, что может быть трудоемким процессом.
Проблемы существующих подходов:
В Responsive design элементы могут чрезмерно растягиваться на больших экранах, что снижает удобство использования.
Adaptive design требует значительных ресурсов для разработки и поддержки множества макетов под разные устройства.
Предлагаемое решение: Stretch, Scale, Switch (SSS):
Автор предлагает трехэтапный подход к адаптивному веб-дизайну:
Stretch (Растяжение): Использование принципов отзывчивого дизайна для гибкого изменения размеров элементов по ширине или высоте, что обеспечивает адаптацию интерфейса к различным размерам экранов.
Scale (Масштабирование): При значительном изменении размеров экрана применяется пропорциональное масштабирование всего макета, включая шрифты, отступы и размеры блоков, с использованием выбранного множителя (scale-фактора).
Switch (Переключение): Если масштабирование достигает предела своей эффективности, происходит переключение на другой макет, оптимизированный для текущего разрешения экрана.
На самом деле, статья является действительно сборником хороших примеров и техник. Я сам пытался на эту территорию заходить с своё время, но не делал попыток свести всё к какому-то названию.
А вот собственно, ссылка: https://habr.com/ru/companies/simpleone/articles/881168/
#css #adaptive #responsive
Сегодня у нас, прости господи, статья с Хабра. Там нынче много странного контента и плохих переводов, но эта — хорошая.
Автор — Карен Ананян, продуктовый дизайнер — предлагает новый (?) метод адаптивного дизайна, объединяющий принципы отзывчивого дизайна, адаптивного дизайна и масштабирования.
Я поставил вопрос после «новый», потому что, по факту, автор перепридумал clamp(). Но не то чтобы совсем.
Существующие подходы:
Responsive design (отзывчивый дизайн): Элементы интерфейса адаптируются к размерам экрана, сохраняя общую композицию и функциональность. Однако при значительном увеличении размеров экрана элементы могут чрезмерно растягиваться, ухудшая удобочитаемость и внешний вид.
Adaptive design (адаптивный дизайн): Структура блоков и элементов перестраивается в зависимости от устройства. Это требует разработки и поддержки нескольких макетов для разных типов устройств, что может быть трудоемким процессом.
Проблемы существующих подходов:
В Responsive design элементы могут чрезмерно растягиваться на больших экранах, что снижает удобство использования.
Adaptive design требует значительных ресурсов для разработки и поддержки множества макетов под разные устройства.
Предлагаемое решение: Stretch, Scale, Switch (SSS):
Автор предлагает трехэтапный подход к адаптивному веб-дизайну:
Stretch (Растяжение): Использование принципов отзывчивого дизайна для гибкого изменения размеров элементов по ширине или высоте, что обеспечивает адаптацию интерфейса к различным размерам экранов.
Scale (Масштабирование): При значительном изменении размеров экрана применяется пропорциональное масштабирование всего макета, включая шрифты, отступы и размеры блоков, с использованием выбранного множителя (scale-фактора).
Switch (Переключение): Если масштабирование достигает предела своей эффективности, происходит переключение на другой макет, оптимизированный для текущего разрешения экрана.
На самом деле, статья является действительно сборником хороших примеров и техник. Я сам пытался на эту территорию заходить с своё время, но не делал попыток свести всё к какому-то названию.
А вот собственно, ссылка: https://habr.com/ru/companies/simpleone/articles/881168/
#css #adaptive #responsive
👍14❤4🤩1