{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блог Ильи Бирмана: заметки с тегом адаптив", "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.", "_rss_language": "ru", "_itunes_email": "ilyabirman@ilyabirman.ru", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/adaptiv\/", "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/adaptiv\/json\/", "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Илья Бирман", "url": "https:\/\/ilyabirman.ru\/meanwhile\/", "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "6844", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ilyabirmanru-2026\/", "title": "9-я версия моего сайта", "content_html": "

Добро пожаловать на мой новый сайт<\/a>:<\/p>\n

\n \n \"\"\n <\/a>\n<\/figure>\n

Я начал думать над новым дизайном много лет назад, но в конце лета наконец сел доделывать, и вот — открываю. Работы ещё много, но я решил, что лучше докручивать по живому, чем тянуть много месяцев. Там внутри большой задел на будущее развитие.<\/p>\n

Зацените адаптив от 320 до 3200 и хитрую навигацию по проектам.<\/p>\n

Адаптив<\/h2>\n

Вот как ведёт себя адаптив на сегодняшний день (кое-что ещё буду допиливать постепенно):<\/p>\n

\n
\n
\n \"\"\n<\/figure>\n

На горизонтальном Айфоне в качестве полей используется место под камерой и такое же симметрично справа, чтобы максимум полезной ширины отдать контенту и не городить ещё дополнительные поля к этому (как делают почти все остальные). При этом всё, что прокручивается, спокойно вылезает в эти поля, не беда.<\/p>\n

Оказывается, оно вмещается даже в часы:<\/p>\n

\n \"\"\n<\/figure>\n

Тоже всё прокручивается так же. Я сам удивился, это мне в комментариях показали. Прикольно! Правда, там не всё работает, и теперь появился соблазн докрутить. Но часы рендерят так, как если бы ширина была 320, так что никаких новых приёмов там не применяется.<\/p>\n

Навигация<\/h2>\n

Что касается навигации, то проблема в том, что многообразие моих продуктов, проектов и затей ну никак не ложится в классическую древовидную структуру сайта. Вот есть какой-нибудь Вайрлесс-диджей<\/a>:<\/p>\n

\n \"\"\n<\/figure>\n

Он вроде и продукт, но и как пример работы над интерфейсом его хочется показать. В то же время, у меня есть разные другие штуки про музыку, и хочется их всех как-то объединить в тему «штуки про музыку». Поэтому у меня страница может находиться сразу в нескольких разделах меню и состоять из нескольких строчек, провязывающих её с другими страницами. Это не говоря о том, что, как видите, она ещё сама может разделяться на подстраницы с версиями или подразделами.<\/p>\n

Или вот взять схему челябинских трамваев<\/a>:<\/p>\n

\n \"\"\n<\/figure>\n

Это, конечно, схема, и хочется её показать в контексте других схем. Но она ведь и одна из работ, что я делал для Челябинска, и хочется показать её среди других работ для Челябинска. И вот теперь я так могу сделать.<\/p>\n

Зацените, что происходит при переключении между страницами, когда связи с другими меняются. Например, с этой страницы схемы трамваев можно уйти в адресные таблички, и тогда она уже провяжется с другими адресными табличками; а можно — в знак выделенки, и тогда она уже провяжется с другими знаками.<\/p>\n

Ещё моментик на стыке адаптива и навигации: когда любой строчке меню не хватает ширины и она прокручиваеся, она всегда изначально подкручивается так, чтобы выбранный пункт меню был виден. Поэтому на телефоне всегда сразу видно, где ты.<\/p>\n

Ну и в концах страниц проектов теперь тоже есть ссылки на связанные проекты:<\/p>\n

\n \"\"\n<\/figure>\n

Расскажите, какие видите косяки в каких случаях.<\/p>\n", "summary": "Добро пожаловать на мой новый сайт", "date_published": "2026-10-10T11:41:58+05:00", "date_modified": "2026-10-10T12:48:21+05:00", "tags": [ "адаптив", "дизайн", "навигация", "этот сайт" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026.jpg", "_date_published_rfc2822": "Sat, 10 Oct 2026 11:41:58 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6844", "_rss_enclosures": [ { "url": "https:\/\/ilyabirman.ru\/meanwhile\/video\/ilyabirmanru-2026-adaptive-1@loop.mp4", "type": "video\/mp4", "length": 2149861 }, { "url": "https:\/\/ilyabirman.ru\/meanwhile\/video\/ilyabirmanru-2026-adaptive-2@loop.mp4", "type": "video\/mp4", "length": 603479 } ], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026-adaptive-mobile-landscape.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026-adaptive-watch.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026-navigation-1.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026-navigation-2.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-2026-navigation-3.jpg" ] } }, { "id": "6756", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ilyabirmanru-menu-update-2026\/", "title": "Полноценное меню сайта на мобиле", "content_html": "

Доклад про 1024<\/a> сподвиг меня на то, чтобы наконец улучшить меню на моём сайте, о чём я мечтал несколько лет.<\/p>\n

Было: Наверху ссылка на более верхний раздел, а полное меню — в бургере. Стало: На мобиле точно такое же полноценное меню, как на десктопе:<\/p>\n

\n \"\"\n<\/figure>\n

Зато заодно подкрутил стили заголовков и картинок на главной, стало получше.<\/p>\n

\n \"\"\n<\/figure>\n

То, что сам мой сайт еле дышит, знаю, с этим пока тоже ничего поделать не могу.<\/p>\n", "summary": "Доклад про 1024 сподвиг меня на то, чтобы наконец улучшить меню на моём сайте, о чём я мечтал несколько лет", "date_published": "2026-06-16T11:46:28+05:00", "date_modified": "2026-06-16T11:46:23+05:00", "tags": [ "адаптив", "дизайн", "этот сайт" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-menu-update-2026-1.jpg", "_date_published_rfc2822": "Tue, 16 Jun 2026 11:46:28 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6756", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-menu-update-2026-1.jpg", "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/ilyabirmanru-menu-update-2026-2.jpg" ] } }, { "id": "6512", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/mobile-desktop-recognizability\/", "title": "Взаимоузнаваемость мобилы-десктопа", "content_html": "

До какой степени дизайн может меняться при адаптации под мобилу?<\/p>\n

У меня есть такой критерий: мобильный и десктопный дизайны должны быть взаимоузнаваемы. Если я пользовался сайтом на компьютере, а потом зашёл с телефона, всё должно быть в ожидаемых местах. Ну и наоборот.<\/p>\n

Если, например, на десктопе у нас этажик из шести картинок в ширину, а на мобиле они превращаются в два этажика по три картинки — это окей. А если вместо картинок появляется кнопка «Посмотреть фотографии», открывающая попап, то не окей. Если на десктопе есть большой блок текста, а на мобиле его часть спрятана за раскрывашку «Показать больше» — это окей. А если для мобилы предлагается написать более короткий текст, то не окей.<\/p>\n

Я не согласен с идеей разделения сценариев. Это когда рассуждают в духе: «На мобиле обычно люди смотрят на бегу, поэтому им важнее раздел X, чем раздел Y, так что давайте поставим его выше». Тут нарушается принцип взаимоузнаваемости.<\/p>\n

Можно поставить дизайн десктопа и мобилы рядом и задать себе вопрос: можно ли сказать, что это одно и то же, просто как бы в разном масштабе? человек, знакомый с одним дизайном, будет уверенно ориентироваться во втором? Если нет, я бы попросил переделать.<\/p>\n", "summary": "До какой степени дизайн может меняться при адаптации под мобилу?", "date_published": "2025-08-03T20:13:35+05:00", "date_modified": "2026-03-22T22:28:29+05:00", "tags": [ "адаптив", "дизайн сайтов", "интерфейс" ], "_date_published_rfc2822": "Sun, 03 Aug 2025 20:13:35 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6512", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "3205", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/responsive\/", "title": "Резиновый дизайн, респонсив и адаптив", "content_html": "

Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом.<\/p>\n

Хороший дизайнер смотрит на споры о необходимости резины с удивлением. Ясен пень, дизайн должен уметь жить при разных размерах экрана, о чём тут спорить? Сайт — не плакат.<\/p>\n

Резиновый сайт, вопреки заблуждению, — это не когда всё прописано в процентах вместо пикселей, а когда дизайнер тщательно думает о том, как сайт себя ведёт в зависимости от ширины экрана и внимательно подстраивает отступы, максимальные и минимальные размеры разных блоков, переносы, чтобы при любой ширине хорошо использовалась площадь экрана, никакие блоки не смотрелись непропорционально, фоновые изображения не повторялись.<\/p>\n

По мере развития веба, технические средства для реализации резины не стояли на месте, и хорошие дизайнеры с удовольствием брали новые приёмы на вооружение. Появилась возможность указать максимальные размеры блока — стали ограничивать длину текстовых строк независимо от общей ширины. Появились флоаты — стали показывать разное число элементов в строке при разной ширине. Появились медиавыражения — стали менять фрагменты вёрстки в зависимости от ширины.<\/p>\n

На западе необходимость резины долгое время не признавалась. Дело в том, что когда на западе появился веб, в него пришли полиграфисты, которые просто не понимали, как дизайн может быть не фиксированным, и насиловали веб своими полиграфическими представлениями о прекрасном. В России же «веб» и «дизайн» появились более-менее одновременно, поэтому здесь резиновость среды воспринималась как естественная её степень свободы, дизайнеры изначально учились с этим жить.<\/p>\n

Некоторые русские дизайнеры, ссылаясь на западный опыт, зачем-то отказывались от резины. Но нерезиновость западного веба — случайное неприятное следствие его истории, а не осознанный выбор. Отказ же русского дизайнера от резины — очевидный шаг назад, регресс.<\/p>\n

Шли годы, и в связи с распространением мобильных устройств на западе стали понимать, что сайт должен всё-таки как-то адаптироваться к разным размерам экрана. Что ж, лучше поздно, чем никогда. Но, к сожалению, пока западное представление о резине весьма примитивно. В то время как русские дизайнеры научились тысяче приёмов, которые позволяют сайту плавно сжиматься и растягиваться, западные дизайнеры пока делают два-три макета для разных, всё ещё, зачастую, фиксированных размеров, и переключаются между ними при разных пороговых значениях ширины окна.<\/p>\n

Подход, когда макеты для разных экранов готовятся отдельно, провоцирует дизайнеров на то, чтобы придумать чуть ли не отдельный сайт для каждого размера. Например, дизайнер решает, что какая-то функция на мобильном нужна не так часто, и переносит её сверху вниз или вовсе убирает. Это такая же медвежья услуга пользователю, как микрософтовское сокрытие редкоиспользуемых пунктов меню в старых версиях «Офиса». Человек, привыкший пользоваться сайтом на одном устройстве, вынужден заново знакомиться с ним на другом. Качественная резина не позволяет себе такого неуважения к привычкам пользователя.<\/p>\n

Распространившиеся в западном вебе термины responsive design и adaptive design — это всего лишь маркетинг-буллшит, означающий такую вот дискретную недорезину для бедных. Можно только удивляться тем русским дизайнерам, которые сначала вопреки здравому смыслу отказывались от резины вовсе, а теперь поют дифирамбы её примитивному пониманию, которое только начинает формироваться на западе, и даже выдают это за какой-то новый подход к веб-дизайну.<\/p>\n

Делайте сайты полезными и привычными независимо от размеров экрана.<\/p>\n", "summary": "Хорошие веб-дизайнеры всегда делали сайты резиновыми, а плохие — кирпичом", "date_published": "2013-02-18T15:34:01+05:00", "date_modified": "2026-03-22T22:28:58+05:00", "tags": [ "адаптив", "веб-дизайн", "веб-разработка", "дизайн", "дизайн сайтов" ], "_date_published_rfc2822": "Mon, 18 Feb 2013 15:34:01 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "3205", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } } ], "_e2_version": 4309, "_e2_ua_string": "Aegea 12.0a (v4309e)" }