[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-responsive-design":66},true,[5,14,20,29,34,40,46,52,56,62],{"id":6,"name":7,"hex":8,"translations":9,"count_pages":13},8,"Компания","#f40925",{"ru":10,"en":11},{"name":7},{"name":12},"Company",9,{"id":15,"name":16,"hex":17,"translations":18,"count_pages":6},26,"Главная страница",null,{"ru":19},{"name":16},{"id":21,"name":22,"hex":23,"translations":24,"count_pages":28},2,"Проекты","#3027ff",{"ru":25,"en":26},{"name":22},{"name":27},"Project",15,{"id":30,"name":31,"hex":17,"translations":32,"count_pages":21},33,"ИИ",{"ru":33},{"name":31},{"id":35,"name":36,"hex":17,"translations":37,"count_pages":39},34,"Комментарии",{"ru":38},{"name":36},4,{"id":41,"name":42,"hex":17,"translations":43,"count_pages":45},25,"Задачи",{"ru":44},{"name":42},24,{"id":47,"name":48,"hex":17,"translations":49,"count_pages":51},27,"Рабочие пространства",{"ru":50},{"name":48},3,{"id":45,"name":53,"hex":17,"translations":54,"count_pages":6},"Kanban-доска",{"ru":55},{"name":53},{"id":57,"name":58,"hex":17,"translations":59,"count_pages":61},23,"Диаграмма Ганта",{"ru":60},{"name":58},1,{"id":28,"name":63,"hex":17,"translations":64,"count_pages":61},"Календарь",{"ru":65},{"name":63},{"detail":67,"more":145},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":111,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":112,"related":126,"views_count":142,"helpful_yes_count":115,"helpful_no_count":115,"created_at":143,"updated_at":144,"published_at":17},334,"responsive-design",{"ru":71},{"title":72,"short_definition":73,"tldr":74,"full_explanation":75,"when_to_apply":76,"when_not_to_apply":77,"examples":78,"tips":79,"synonyms":80,"translation_en":81,"seo_title":82,"seo_description":83},"Адаптивный дизайн","Подход, при котором интерфейс автоматически подстраивается под размер экрана: от мобильного до большого монитора.","Адаптивный дизайн — это когда сайт или приложение одинаково удобны на любом устройстве. Один и тот же код подстраивается под экран: на телефоне колонки сворачиваются в один поток, на планшете появляется боковое меню, на большом мониторе — широкая многоколоночная сетка. В современном вебе адаптивность не опция, а базовое требование.","\u003Cp>Адаптивность работает за счёт сочетания резиновой сетки, гибких изображений и медиазапросов в стилях, которые меняют оформление на разных диапазонах ширины экрана.\u003C\u002Fp>\u003Ch3>Ключевые приёмы\u003C\u002Fh3>\u003Cul>\u003Cli>Резиновая сетка: размеры в процентах и относительных единицах вместо фиксированных пикселей.\u003C\u002Fli>\u003Cli>Контрольные точки (брейкпоинты) — ширины, на которых меняется раскладка: обычно 640, 768, 1024 и 1280 пикселей.\u003C\u002Fli>\u003Cli>Изображения разной плотности и в разных форматах под разные устройства.\u003C\u002Fli>\u003Cli>Скрытие или перестроение элементов на маленьких экранах.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Распространённые ошибки\u003C\u002Fh3>\u003Cul>\u003Cli>Сначала делают версию для компьютера, а потом «впихивают» её в телефон — надёжнее идти от мобильного (mobile-first).\u003C\u002Fli>\u003Cli>Прячут на телефоне важные функции «потому что не помещаются» — лучше переосмыслить интерфейс, чем убрать функцию.\u003C\u002Fli>\u003Cli>Забывают про средние размеры: планшет часто выглядит как растянутый телефон или сжатый монитор.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Любой публичный веб-продукт\u003C\u002Fli>\u003Cli>Внутренние SaaS-сервисы, где сотрудники работают и с ноутбука, и с телефона\u003C\u002Fli>\u003Cli>Посадочные страницы, маркетинговые сайты, медиа\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>Когда вы действительно делаете отдельные приложения под платформы — в нативных iOS и Android адаптивность устроена иначе\u003C\u002Fli>\u003Cli>Очень узкоспециализированные интерфейсы под одно устройство: промышленные панели и подобное\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>В административной панели внутреннего сервиса менеджеры регулярно работают и с ноутбука, и с телефона. Изначально интерфейс был рассчитан только на компьютер — на телефоне приходилось увеличивать масштаб и целиться в мелкие кнопки. После перевода на адаптивный дизайн команда стала закрывать срочные задачи прямо с телефона: за неделю выросло число ответов на запросы клиентов после окончания рабочего дня.\u003C\u002Fp>","\u003Cp>Начинайте проектировать с мобильной версии и постепенно расширяйте её до большого экрана, а не наоборот. Так команда вынуждена заранее решать, что действительно важно: лишнее на маленьком экране просто не помещается, и не возникает соблазна оставить всё «на всякий случай».\u003C\u002Fp>","адаптивный дизайн, адаптивная вёрстка, Responsive Design","Responsive Design","Адаптивный дизайн (Responsive Design) | Глоссарий Shtab","Адаптивный дизайн — интерфейс, который подстраивается под любой экран. Резиновая сетка, контрольные точки, гибкие картинки и типичные ошибки вёрстки.",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":88},12,"ux-design","#ec4899",{"ru":89},{"title":90,"description":91},"UX и дизайн","Понятия дизайна пользовательских интерфейсов и пользовательского опыта: исследования, юзабилити, доступность, IA, прототипы, дизайн-системы, методологии и тёмные паттерны.",[93,102],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":99},48,"ui-design","tool","#7c5ce6",111,{"ru":100},{"title":101},"UI-дизайн",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":108},51,"ux-pattern","other","#cc5649",114,{"ru":109},{"title":110},"UX-паттерны","А",[113,120],{"id":114,"order":115,"translations":116},1659,0,{"ru":117},{"question":118,"answer":119},"Чем адаптивный дизайн отличается от адаптивной вёрстки и mobile-first?","\u003Cp>Адаптивный дизайн — общее понятие о том, что интерфейс подстраивается под экран. Mobile-first — подход к процессу: проектирование начинают с мобильной версии. «Адаптивная вёрстка» в нашей традиции означает техническую реализацию в стилях. В разговоре эти слова часто используют как синонимы, и особой беды в этом нет — важно понимать, о каком уровне идёт речь.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1660,{"ru":123},{"question":124,"answer":125},"Нужны ли отдельные мобильные версии сайта?","\u003Cp>Сейчас почти никогда. Отдельные мобильные версии вроде m.site.ru — наследие 2010-х, когда возможностей у стилей было меньше. Современный подход — один сайт с адаптивным дизайном: его проще поддерживать, не нужно синхронизировать содержимое двух версий, и для SEO это лучше, потому что весь вес ссылок собирается на одном адресе.\u003C\u002Fp>",{"related":127},[128,135],{"id":129,"slug":130,"translations":131},335,"mobile-first",{"ru":132},{"title":133,"short_definition":134},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.",{"id":136,"slug":137,"translations":138},324,"accessibility",{"ru":139},{"title":140,"short_definition":141},"Доступность (a11y)","Принципы и практики проектирования продукта, которым могут пользоваться люди с разными возможностями, включая нарушения зрения, слуха, моторики.",105,"2026-05-11T20:33:06.591827+03:00","2026-05-11T20:33:06.591843+03:00",[146,175,195],{"id":147,"slug":148,"translations":149,"category":154,"tags":157,"letter":173,"cover":17,"updated_at":174,"published_at":17},332,"atomic-design",{"ru":150},{"title":151,"short_definition":152,"translation_en":153},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":155},{"ru":156},{"title":90,"description":91},[158,164],{"id":61,"slug":159,"kind":159,"hex":160,"order":61,"translations":161},"methodology","#5e79ec",{"ru":162},{"title":163},"Методология",{"id":165,"slug":166,"kind":167,"hex":168,"order":169,"translations":170},50,"design-system-tag","framework","#14b8a6",113,{"ru":171},{"title":172},"Дизайн-системы","A","2026-05-11T20:33:05.908305+03:00",{"id":129,"slug":130,"translations":176,"category":179,"tags":182,"letter":193,"cover":17,"updated_at":194,"published_at":17},{"ru":177},{"title":133,"short_definition":134,"translation_en":178},"Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":180},{"ru":181},{"title":90,"description":91},[183,186],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":184},{"ru":185},{"title":101},{"id":187,"slug":188,"kind":159,"hex":160,"order":189,"translations":190},49,"design-process",112,{"ru":191},{"title":192},"Процесс дизайна","M","2026-05-11T20:33:07.021925+03:00",{"id":196,"slug":197,"translations":198,"category":203,"tags":206,"letter":223,"cover":17,"updated_at":224,"published_at":17},319,"ux-vs-ui",{"ru":199},{"title":200,"short_definition":201,"translation_en":202},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":204},{"ru":205},{"title":90,"description":91},[207,213,220],{"id":6,"slug":208,"kind":105,"hex":209,"order":6,"translations":210},"concept","#4b5370",{"ru":211},{"title":212},"Концепция",{"id":214,"slug":215,"kind":96,"hex":87,"order":216,"translations":217},47,"ux-research",110,{"ru":218},{"title":219},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":221},{"ru":222},{"title":101},"U","2026-05-11T20:33:01.213551+03:00"]