{ "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\/web-design\/", "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-design\/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": "6848", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ilyabirmanru-2026-stable-menu\/", "title": "Стабильное меню на новом сайте", "content_html": "

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

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

Идея решения простая: каждый пункт меню должен всегда занимать столько места, сколько занимал бы, будь он жирным, даже когда на самом деле он не жирный. Но как это сделать?<\/p>\n

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

Можно положить внутрь каждого пункта невидимую жирную копию текста, распорку. Это лишний элемент в разметке, тоже не идеально, но смириться можно. Я не нашёл решения совсем без изменения разметки, но зато нашёл, как обойтись атрибутом, без лишних элементов: слово, жирность которого нужно мерить, ставится в атрибут, а потом в ЦССе делается псевдоэлемент, контент которого берётся из этого атрибута. Так уже неплохо.<\/p>\n

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

Соответственно надо как-то так сверстать, чтобы подчёркнутая часть осталась по ширине видимого текста, а вокруг неё уже была обёртка по ширине жирного текста, которая бы влияла только на лейаут меню. При этом ради Фиттса область нажатия пункта меню у меня дотянута до середины отступа с соседним пунктом. То есть сама ссылка на самом деле больше и чем её обычный текст, и чем её жирный текст. И да, все эти отступы ещё и адаптивятся по-всякому.<\/p>\n

С адаптивом есть ещё и такой момент. Когда меню не влезает целиком, важно, чтобы ты хотя бы видел, что какие-то пункты ещё есть за пределами экрана. На сайте Бюро для этого давно работает фокус<\/a>: если меню не влезает полностью, то расстояния между пунктами подкручиваются так, чтобы последний пункт гарантированно обрезался краем экрана, и тем намекал на продолжение. Это я тоже к запуску сделать не успел, но хотел.<\/p>\n

В общем, теперь всё распутал: атрибут, используемый ЦССом для измерения жирного текста, стоит у обёртки, а сам текст пункта меню стоит у элемента внутри. Любой пункт можно делать и жирным, и обычным, и подчёркивание при наведении всегда остаётся ровно под буквами. Кликать можно в отступ между пунктами, и ничего никуда не прыгает при переключении. Жирность как бы переезжает с пункта на пункт при переключении, но каждый из них остаётся на своём месте. И расстояние между пунктами растягивается так, чтобы всегда было видно, что есть ещё пункты за краем. Красота!<\/p>\n", "summary": "У меня на сайте текущий пункт меню выделяется жирным. Обычно при таком дизайне возникают прыжки: жирное слово ведь чуть шире обычного, так что при переходах между разделами более правые пункты немного", "date_published": "2026-10-14T19:27:58+05:00", "date_modified": "2026-10-14T20:41:05+05:00", "tags": [ "веб-дизайн", "веб-разработка", "стабильность", "ЦСС" ], "_date_published_rfc2822": "Wed, 14 Oct 2026 19:27:58 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6848", "_rss_enclosures": [], "_e2_data": { "is_favourite": true, "links_required": [], "og_images": [] } }, { "id": "6446", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/potykat-v-interfeys-avtomobilya-onlayn\/", "title": "Потыкать в интерфейс автомобиля онлайн", "content_html": "

Я давно жалуюсь, что все сайты автомобилей — ужасны<\/a>. Из них ничего нельзя понять. Начиная с того, что в интернете нереально даже найти подробную спецификацию. Если очень повезёт, будет бесконечный список пунктов типа «Интеллектуальная система управления бардачком», но нигде не будет объяснено, что конкретно и как она делает.<\/p>\n

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

Короче, мне пришла в голову такая идея. У современных машин значительная часть элементов управления находятся на экране. Уж настройка-то всяких систем точно делается через экран. Почему бы не дать на сайте симулятор этого экрана? Вот прям чтобы я походил по меню, посмотрел, какие там есть параметры. Да, если я изменю оттенок подсветки салона, в моей реальной комнате ничё не изменится, но я хотя бы увижу, что там такое есть.<\/p>\n", "summary": "Я давно жалуюсь, что все сайты автомобилей — ужасны. Из них ничего нельзя понять. Начиная с того, что в интернете нереально даже найти подробную спецификацию", "date_published": "2025-02-26T12:10:09+05:00", "date_modified": "2025-02-26T12:10:06+05:00", "tags": [ "автомобиль", "веб-дизайн", "интерфейс" ], "_date_published_rfc2822": "Wed, 26 Feb 2025 12:10:09 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6446", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "6384", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/pro-solidnost-i-chelovechnost\/", "title": "Про солидность и человечность", "content_html": "

Из моего комментария к работе студентки:<\/p>\n

\n

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

А то вдруг вы всё ещё солидный сайт хотите.<\/p>\n", "summary": "Из моего комментария к работе студентки", "date_published": "2024-11-02T12:54:02+05:00", "date_modified": "2024-11-02T12:53:55+05:00", "tags": [ "веб-дизайн", "человечность" ], "_date_published_rfc2822": "Sat, 02 Nov 2024 12:54:02 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6384", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [] } }, { "id": "6317", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/unicorn-blitz\/", "title": "Блиц-редизайн сайта «Уникорн»", "content_html": "

Запилили блиц-редизайн сайта «Уникорн»<\/a>:<\/p>\n

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

Повысили конверсию на 20% среди новых покупателей и на 13% среди возвращающихся. Приходите тоже за блиц-редизайном.<\/p>\n", "summary": "Запилили блиц-редизайн сайта «Уникорн»", "date_published": "2024-07-08T18:21:11+05:00", "date_modified": "2024-07-08T18:20:24+05:00", "tags": [ "веб-дизайн", "дизайн", "проекты", "работа" ], "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/unicorn-blitz-cover.jpg", "_date_published_rfc2822": "Mon, 08 Jul 2024 18:21:11 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "6317", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/unicorn-blitz-cover.jpg" ] } }, { "id": "6221", "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/alfa-medical-video\/", "title": "Разбор дизайна сайта компании «Альфа-Медикал»", "content_html": "

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

\n