{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Блоги: заметки с тегом Web", "_rss_description": "Автоматически собираемая лента заметок, написанных в блогах на Эгее", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": false, "_itunes_explicit": "no", "home_page_url": "https:\/\/blogengine.me\/blogs\/tags\/web\/", "feed_url": "https:\/\/blogengine.me\/blogs\/tags\/web\/json\/", "icon": false, "authors": [ { "name": "Илья Бирман", "url": "https:\/\/blogengine.me\/blogs\/", "avatar": false } ], "items": [ { "id": "136974", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/mobile-desktop-recognizability\/", "title": "Recognizability between mobile and desktop", "content_html": "

How much can a design change when adapting it for mobile?<\/p>\n

I go by this rule: the mobile and desktop versions should be mutually recognizable. If I’ve used a website on my computer and then open it on my phone, everything should be where I expect it to be — and vice versa.<\/p>\n

If, say, there’s a row of six images on desktop and on mobile it becomes two rows of three — that’s fine. But if the images are replaced by a “View Photos” button that opens a popup — that’s not fine anymore. If there’s a large block of text on desktop and on mobile part of it becomes hidden with “Show more” — that’s fine. But if the text is edited down just for mobile — that’s not fine anymore.<\/p>\n

I disagree with the idea of separating scenarios where people say things like: “On mobile, users are usually in a hurry, for them section X is more important than section Y, so let’s move it up”. That breaks the mutual recognizability.<\/p>\n

You can put the mobile and desktop designs side by side and ask yourself: do they feel like two views of the same thing, just rearranged for screen size? Will someone who knows one version find their way around the other? If not — I’d ask for a redesign.<\/p>\n", "date_published": "2025-08-04T00:58:13+05:00", "date_modified": "2025-08-04T00:58:11+05:00", "tags": [ "interface", "Web" ], "author": { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Mon, 04 Aug 2025 00:58:13 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "136974", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "120954", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/dom-toma-website\/", "title": "Dom Toma’s online store", "content_html": "

\n\n\"\"\n<\/a><\/div>\n

Check out my design project from 2019: an online store for ‘Dom Toma’<\/a>. I had to manage to show both the variety of the collection and the individuality of the items. Repost everywhere and come back for good design!<\/p>\n", "date_published": "2023-06-25T15:52:20+05:00", "date_modified": "2023-06-25T15:52:15+05:00", "tags": [ "design", "projects", "Web" ], "author": { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Sun, 25 Jun 2023 15:52:20 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "120954", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "125690", "url": "https:\/\/kini24.ru\/all\/servisy-dlya-testirovaniya-veb-i-pochtovyh-serverov\/", "title": "Сервисы для тестирования веб, почты и других серверов (обновляемая запись)", "content_html": "

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

Почта<\/b>
\nCheckTLS<\/a>. Очень любопытный сервис проверки почты. Наблюдаем за прогрессом в реальном времени.<\/p>\n

DKIM Core Tools<\/a>. Генерация и проверка настроек DKIM.<\/p>\n

DMARC Inspector<\/a>. Проверка корректности записи DMARC.<\/p>\n

ESMTP email<\/a>. Проверка настройки MTA-STS. Это функция, призывающая удаленные серверы обмениваться почтовыми сообщениями, используя защищенное соединение.<\/p>\n

Mail tester<\/a>. Всё время «теряю» этот сервис. Отправляете письмо на указанный адрес и через некоторое время можете посмотреть отчет о прохождении письма.<\/p>\n

MX Toolbox<\/a>. Сервис проверки почтового сервера и, немножко, веб-сервера. Множество самых различных тестов. Имхо, один из самых лучших сервисов.<\/p>\n

SSL Tools<\/a>. Старый и уже позабытый мной сервис проверки SSL почтового сервера. Также есть проверка web-сервера и некоторых уязвимостей.<\/p>\n

UptimeBot<\/a>. Можно по быстрому посмотреть на каких портах поддерживается TLS\/STARTTLS. А также проверить DKIM, DMARC, SPF, Whois.<\/p>\n

Сканеры открытых портов<\/b>
\nСканер IPv6<\/a>. Сканирует на выбор либо только указанный порт, либо все часто используемые. В первом случае можно указать использовать TCP или UDP протокол.<\/p>\n

Jabber<\/b>
\nТест jabber-сервера<\/a>. Проверка jabber-сервера на наличие часто используемых функций.<\/p>\n

IPv6<\/b>
\nТест IPv6<\/a>. Тест доступности сервера по IPv6. Краткий, но доступный для понимания проблем отчет.<\/p>\n

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

Черепашка<\/a>. Если вы видите танцующую черепашку, то доступ к страницам, работающим по IPv6, у вас есть.<\/p>\n

Скорость соединения<\/b>
\nSpeedtest<\/a>. Всем известный ресурс проверки скорости соединения. Настолько известный, что почти все провайдеры так или иначе мухлюют при обращении клиента к этому сайту, чтобы он показал скорость выше той, что есть на самом деле.<\/p>\n

Тест от Cloudflare<\/a>. Не менее известный сервис проверки скорости соединения.<\/p>\n

Общее<\/b>
\nDNS Checker<\/a>. Несмотря на название, это комплекс утилит для проверки почты, домена и т. д. В чем-то схож с MX Toolbox<\/a>.<\/p>\n

HSTS Preload<\/a>. Сервис проверки на включение вашего сервера в список HSTS Preload. Это список серверов, при обращении к которым будет сразу использоваться HTTPS-соединение, минуя HTTP. На мой взгляд, сейчас не сильно актуально, потому все поголовно переходят на HTTPS. Там же находятся рекомендации по настройке сервера для последующего включения его в список. Если проверка прошла успешно, фон страницы станет зеленым. Эта настройка отображается в отчете SSL Labs.<\/p>\n

Hardenize<\/a>. Проверяет веб- и почтовый серверы. Выдает информацию по зоне, DNS-записям и настройкам. Среди проверяемых функций такие как: DNSSEC, CAA, MTA-STS, TLSRPT, SPF, DMARC, DANE, заголовки ответов и прочее. Выдает достаточно информативный отчет.<\/p>\n

Immuniweb<\/a>. Есть два неплохих теста: SSL<\/a> и безопасности сайта<\/a>. В первом проверяет настройки сервера на соответствие стандартам PCI DSS, HIPAA and NIST и Industry Best Practices. Второй проверяет GDPR Compliance, PCI DSS и заголовки ответов (куда же без них?).<\/p>\n

internet.nl<\/a>. Позволяет проверить настройки веб- и почтового серверов. Тестирует DNSSEC, IPv6, DANE, заголовки ответов и RPKI. Для меня лично новинкой стала проверка файла security.txt.<\/p>\n

NetTools<\/a>. Сборник самых различных тестов: почта, веб-сервер, сканер открытых портов, скорости соединения, NTP-сервера, DNS, FTP..<\/p>\n

Security Headers<\/a>. Проверяет заголовки ответов веб-сервера. Пройдя по ссылкам, можно попасть на блог Scott Helme<\/a> и узнать как настроить тот или иной заголовок. Вообще в блоге много полезной информации. Единственный «минус» — всё на английском.<\/p>\n

SSL Labs<\/a>. Один из самых популярных сервисов тестирования веб-серверов. Проверяет сертификаты, используемые шифры, протоколы (HTTP, HTTP\/2), совместимость с популярными браузерами, наличие уязвимостей и некоторых настроек (HSTS, OCSP, HPKP и другие). К сожалению, почту проверять не умеет.<\/p>\n

Verisign анализатор<\/a>. Быстрая проверка DNSSEC. Не могли что ли сделать шрифт покрупнее в отчете?<\/p>\n

ZoneMaster<\/a>. Проводит полную проверку вашего доменного имени.<\/p>\n

Проверка STUN и TURN<\/a>. Собственно весь функционал описан в названии. В случае корректной настройки STUN должен вернуть «srflx» в списке. В случае с TURN — «relay».<\/p>\n

Тест DoH<\/a>. Проверка работоспособности DNS-over-HTTPS от Cloudflare. Показывает «Yes» только в случае, если вы настроили DoH на их серверы. В противном случае стоит ориентироваться на ASN.<\/p>\n

Тест утечки DNS<\/a>. Отображает серверы, которым вы «доверяете» хранить и, возможно, использовать информацию о том, к каким серверам или сайтам вы подключаетесь.<\/p>\n

Генераторы настроек<\/b>
\nГенератор настроек SSL<\/a>. Генератор настроек SSL от Mozilla для различных программ.<\/p>\n

Генератор файла security.txt<\/a> Удобная форма генератора security.txt.<\/p>\n

Реклама<\/b>
\nCheckAdBlock<\/a>. Один из первых сайтов, который мне попался много лет назад, когда возникла мысль протестировать работу блокировщиков рекламы в браузере.<\/p>\n", "date_published": "2023-01-20T11:35:10+05:00", "date_modified": "2025-02-28T07:01:38+05:00", "tags": [ "DNS", "ipv6", "jabber", "online", "ssl", "Web", "веб", "защита", "Настройка", "порт", "почта", "проверка", "сервер", "сервис", "тест" ], "author": { "name": "Копытов Иван", "url": "https:\/\/kini24.ru\/", "avatar": "" }, "_date_published_rfc2822": "Fri, 20 Jan 2023 11:35:10 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "125690", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } }, { "id": "128011", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/buy-works\/", "title": "The “Buy” button should always work", "content_html": "

Here is one lesson I have learnt working on Envy, a cool Hawaiian car rental<\/a>.<\/p>\n

On a car page, there is a yellow price tag with a “Rent” button:<\/p>\n

\n\"The\n<\/div>\n

A typical way to get to this page is the following. On the front page a client chooses the desired rent dates, clicks “Find”, then selects from available cars. It is possible though, that by the time the client selects a car, somebody else books it already. Or the client reloads the car page in a couple of days, and the car is gone. One way or the other, a client can end up on the car page with the pre-selected rent dates, for which the car is no longer available, and they won’t be able to rent it.<\/p>\n

Also, on the front page we show the best cars we have. A client can click any of them and get to its page, having skipped the dates selection altogether. In this case, the dates won’t be specified, and the client also won’t be able to rent the car. We didn’t want the client to be confused by the disabled “Rent” button, so in addition to the front page, we put the dates selectors to this price tag itself.<\/p>\n

I presented the design of the car page to Ilya Sinelnikov (co-creator of Envy) and was talking about the price tag.<\/p>\n

I said, we didn’t like that the “Rent” button is disabled sometimes: the website is there for the people to rent cars. But how can you rent a car which is taken by someöne else? At first, we thought that we could automatically change the dates to the nearest available ones. But it can result in a disaster: what if the client doesn’t notice the change, pays for the rent, comes to pick-up the car, and learns that we don’t have it? I said, we were also thinking about some tool to explain the problem and help the client change the dates, but there was no chance to make it on time for the website launch. So, I said, for now I suggest just disabling “Rent” the button in this case.<\/p>\n

Also, I said, a car could become unavailable while the clients looks at its page. Therefore we needed to re-check the availability after the “Rent” button is pressed, and inform the client of a problem, if it occurs. For now, I said, we’ve designed this error page. In the future it would be better to suggest a date change or offer another car. But this is also not going to be implemented by launch...<\/p>\n

Ilya interrupts: “To hell with the dates, let’s just make the button always enabled.”<\/p>\n

What? There can be no car for the client when they come.<\/p>\n

“The client is willing to pay us money”, Ilya says, “and you prevent them from it by disabling the button. This is inefficient. Let them pay, and we’ll sort it out”.<\/p>\n

And then Ilya enlightens me. Envy as a business must be able to sort this out anyway. It is possible that a booked car is not available for the client, say, if the previous client breaks it, or whatever. In order to make the client happy, Envy offers them a better car for the same price.<\/p>\n

For Ilya, it all appeared as if I was trying to stop his client from paying him money with my UI. But from the business perspective my UI consistency hurdles are insignificant. Dates have accidentally overlapped? Oops, sorry, here’s a Mercedes instead of a Ford, no big deal. In the worst case, if there’s a super-picky client who won’t take anything<\/i> but the very car they’ve chosen on the website, we’ll return the money and apologise.<\/p>\n

So we made the “Rent” button always enabled. If by the time the client clicks it, the car becomes unavailable for the selected dates, the manager gets a notification about a problem, and it is their job then to contact the client and agree on a new car or dates. And if the dates are not selected at all, clicking “Rent” moves the focus to the dates fields and opens the calendar<\/a>, so that the client knows what to do.<\/p>\n

Principle:<\/b> the “Buy” button should always work.<\/p>\n", "date_published": "2016-08-12T03:35:27+05:00", "date_modified": "2024-05-20T12:42:03+05:00", "tags": [ "Bureau", "design", "service design", "Web", "work" ], "author": { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" }, "_date_published_rfc2822": "Fri, 12 Aug 2016 03:35:27 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "128011", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": null, "og_images": [] } } ], "_e2_version": 4079, "_e2_ua_string": "Aegea 11.0 (v4079e)" }