Дві родини по пʼять

Пʼять сторінок на нашому сайті не мали ілюстрації: покажчик документації, покажчик посібників, сторінка партнерів, покажчик блогу і сторінка контактів. Усе інше її мало. Завдання полягало в тому, щоб намалювати пʼять картин, які виглядають своїми.

Своїми де саме, і є питанням, і на нього не можна відповісти, просто подивившись. Десять наявних зображень, розглянутих по одному на десяти різних сторінках протягом кількох місяців, дають упевнене враження фірмового стилю. Це враження не варте нічого, і ми маємо лічбу, щоб це довести.

Стилю не існувало

Короткий скрипт обійшов усі десять зображень на полотні й полічив темні пікселі: яскравість на 110 або нижче, альфа на 200 або вище, зведені до шістнадцяти рівнів, аби згладжування не давало тисячі майже однакових кольорів.

Наслідком стали дві групи по пʼять, без жодного перекриття.

Пʼять на пʼять. Більшості немає. Якби хтось прикинув оком, він обрав би ту групу, на яку дивився востаннє, і зробив би шосте зображення, що пасує половині сайту.

Нові пʼять ідуть за першою групою, і причиною є не лічба. Порівняльні зображення є підродиною з власною складовою, власним співвідношенням сторін і власним місцем у продукті; вони належать іншому родові сторінок, що робить іншу роботу. Нові ілюстрації стоять поруч із першою групою, тож і малюються як перша група. Вимірювання рішення не ухвалило. Воно зробило рішення можливим, замінивши відчуття щодо фірмового стилю двома фактами про дві множини.

Колір, якого немає в таблиці стилів, є вигаданим кольором

Темно-синій, що панує в першій групі, не трапляється в нашій таблиці стилів ніде. Це колір, який прийшов разом із тими зображеннями і не має імені в системі дизайну.

Скопіювати його в пʼять нових файлів означало б зробити рівно те, чого цей раунд мав уникнути: значення, що існує лише тому, що хтось узяв пробу з пікселя. Тому нові зображення вживають токен, значення якого до нього найближче і який сидить у тій самій родині, що й колір бренду. Він не є тотожним. Він є обґрунтованим, і він рухається, якщо рухається система.

У першій чернетці на зображенні документації була також помаранчева закладка, акцентним кольором, бо закладка ж помаранчева. Друга лічба владнала і це: з десяти наявних ілюстрацій, на 1,79 мільйона непрозорих пікселів, число тих, що мають хоч один теплий піксель, дорівнює нулю. Не мало, а нуль. Один помаранчевий елемент зробив би новий малюнок єдиною теплою річчю на сайті, а це рішення, яке хтось колись може захотіти ухвалити навмисно, і воно не є рішенням, яке закладка має ухвалювати сама.

Біле є місцем, куди падає око

Останньою спільною властивістю є та, якої ніхто не записав і якої дотримуються всі десять: кожне зображення має рівно одну білу площину, і саме туди йде око. Передня стінка сховища, внутрішній бік щита, плитки навколо вузла.

Чотири з пʼяти нових малюнків підхопили це природно, бо аркуш паперу, стаття, лист і кнопка відтворення є білими речами. Зображення партнерів цього не зробило: два відтінки синього, і жодного білого.

На сторінці партнерів воно виглядало добре. Воно було очевидно хибним на контрольному аркуші, тобто на одній породженій сторінці, що ставить усі пʼятнадцять зображень поруч на справжньому кольорі тла. Один малюнок у ряду з пʼятнадцяти, що не має площини фокуса, читається пласкішим за решту, негайно, і не читається ніяк, коли ви дивитеся на нього самого. Лівий шестикутник тепер сидить на кольорі поверхні.

Якщо ви робите набір, дивіться на набір. Окремі сторінки є хибним оглядовим полем для властивості, яка існує лише в порівнянні.

Лінія, проведена перед фігурами, є лінією, якої ви не бачите

Перша версія зображення партнерів мала сполучну лінію між двома шестикутниками: один горизонтальний штрих завширшки 433 пікселі, оголошений перед двома фігурами.

Решту зробив порядок малярів. Шестикутники затулили її середину, лишивши два огризки, що стирчали з боків, а оскільки правий шестикутник мав непрозорість заливки трохи нижчу за одиницю, затулена частина просвічувала крізь нього примарною смугою. Два дефекти з однієї помилки в порядку, і обидва виглядають як проблема малювання, а не як проблема джерела.

Сполученням тепер є саме перекриття, обрізане до перетину двох фігур, і часткової прозорості у файлі немає ніде. Це не лише робочий, а й кращий малюнок: спільна площа між двома партнерами і є ідеєю, а лінія між ними була слабшим способом це сказати.

Два дефіси завершують коментар XML

Кожен із цих файлів несе коментарі, що пояснюють геометрію, а коментарі в SVG подорожують до браузера. Виміряно на першій версії: з 10 160 байтів у пʼяти файлах 5789 були коментарем. Пʼятдесят сім відсотків того, що ми б випустили, було поясненням того, що ми випустили.

Пояснення тепер живе у складовій, що посилається на зображення, де воно щонайменше так само корисне і не сягає нічийого браузера. Це є загальним зауваженням про різницю між коментарями в джерелі та коментарями в ресурсі: одні безкоштовні, а другі є корисним вантажем.

Друге зауваження є радше правилом, ніж вимірюванням, і це той різновид правила, який потрібен вам лише раз. Подвійний дефіс завершує коментар XML. Згадка власної властивості CSS на імʼя всередині коментаря SVG через це завершує коментар зарано, посеред речення, а решта того речення стає розміткою. Файл тоді не розбирається, а SVG, який не розбирається, не видає повідомлення про помилку. Він видає відповідь 200 і порожнє зображення.

Теперішні пʼять не містять подвійних дефісів у жодному коментарі, і всі пʼять розбираються як чинний XML. Спосіб схибити є справжнім; на конкретний випадок я не можу дати вам вимірювання, бо той стан ніколи не потрапив у коміт.

Альтернативний текст не є рішенням дизайну

Ілюстрація, яка не каже нічого, чого вже не каже сусідній заголовок, є оздобою, а відповіддю доступності на оздобу є порожній атрибут alt, аби зчитувач екрана не читав уголос «сховище з ключем» поруч із заголовком про облікові дані, що лишаються на вашому власному хості. Це міркування є слушним, і ми довго його дотримувалися.

Воно також не є всією картиною, бо сканер не відрізняє оздоби від змісту. Перевірка SEO рахує порожній alt як відсутній alt, а звіт, повний відсутніх атрибутів alt, є звітом, якого ніхто не читає.

Тому кожна ілюстрація тепер несе короткий опис із каталогу перекладів, по одному опису на зображення, а не на розміщення, оскільки той самий малюнок означає те саме на двох різних сторінках. Сторожа вимагає непорожнього alt на кожній ілюстрації, а це означає, що сховати якусь із них від дерева доступності вже не є тим вибором, що його хтось може зробити тихо. Нова ілюстрація потребує опису в усіх девʼяти мовах, перш ніж зможе вийти.

Нульовий зсув і зустрічний доказ

Ширина і висота на кожному зображенні є розмірами власної рамки перегляду файлу, і стоять вони там рівно з однієї причини: щоб браузер зарезервував місце ще до того, як прийдуть байти. Видима ширина походить із класів і до тих чисел стосунку не має.

Сукупний зсув верстки на сорока пʼяти станах сторінок виміряно як 0,00000, і це число саме по собі не означає нічого. Будь-яке вимірювання, що звітує про досконалий нуль, мусить відповісти на питання, чи воно взагалі дивилося.

Тому той самий запуск повторили з вилученими розмірами і затримкою в 1500 мілісекунд, вставленою перед зображеннями. Зсунулося тринадцять із пʼятнадцяти станів. Ті два, що не зсунулися, сидять у найнижчій комірці сітки, де зображення не може змінити висоту рядка хоч би що воно робило, тож їхній нуль є структурним, а не випадковим. Це перевірили поодинці, а не відмахнулися, бо два незʼясовані нулі у зустрічному доказі є саме тим місцем, де сховалася б справжня прогалина.

Є ще одна механічна подробиця, яку варто назвати, бо в інший бік її легко зробити хибно: ці зображення цілком обходять оптимізатор зображень середовища. Це не лінощі. Оптимізатор відхиляє SVG, доки не увімкнено спеціально небезпечний прапорець, тож пропустити їх крізь нього означало б дістати зламане зображення, а не менше.

Знахідка, що не належала до раунду

Під час вимірювання ширин виявилося, що один допоміжний клас на неповʼязаній сторінці не робить нічого взагалі. Він ставить найбільшу ширину, яку перекриває клас, оголошений у таблиці стилів пізніше, тож це значення є мертвим від дня, коли його написали.

Ніхто не помітив, бо елемент виглядає розумно на своїй справжній ширині. Це є звичайним способом, у який виживає мертве оформлення: на екрані воно не хибне, воно просто не є тим, що робить роботу, і єдиний спосіб його знайти полягає у вимірюванні властивості, яку ви й так уже міряли з іншої причини.

Що ми б записали

1. 01Фірмовий стиль, якого ви ніколи не рахували, може не існувати. Десять зображень, дві родини, по пʼять у кожній, і кожне враження про більшість було хибним.
2. 02Вимірювання робить рішення можливим; воно його не ухвалює. Жодна з двох груп не була більшою; нові зображення йдуть за ілюстраціями можливостей через те, на якому роді сторінок вони стоять.
3. 03Колір, узятий пробою з пікселя, є вигаданим кольором. Вживайте найближчий токен і згодьтеся, що він не тотожний.
4. 04Нуль є сильною відповіддю. Жодного теплого пікселя на 1,79 мільйона владнує суперечку про помаранчеву закладку швидше за смак.
5. 05Оглядайте набір як набір. Властивості, що існують лише в порівнянні, є невидимими на окремій сторінці.
6. 06Оголошуйте сполучний елемент після того, що він сполучає, інакше його затулять, а часткова прозорість зробить помилку схожою на ваду малювальника.
7. 07Коментарі в ресурсі є корисним вантажем. Більше половини того, що ми мало не випустили, було поясненням.
8. 08Хибний XML у SVG є порожнім зображенням, а не помилкою. Шукати нема чого.
9. 09Порожній alt є правильним для людини і відсутнім для сканера. Обирайте компроміс навмисно і закріпіть його тестом.
10. 10Досконалий нуль потребує зустрічного доказу. Зламайте річ навмисно і перевірте, що число рушить.

Для ясності про те, чим це є: пʼять зображень працюють девʼятьма мовами з описами, лічби походять із запуску по полотну на справжніх файлах, і все міряли проти сервера розробки, а не проти виробничої збірки. Темної теми, проти якої перевіряти, немає, і це перевірили, а не припустили: з емульованою темною знімок є байт у байт тотожним світлому.

Із платформної роботи над Provibr. Дефект верстки, що дав нуль пікселів виходу за межі, описано в смуга, вужча за власне вікно, а що девʼять мов роблять із набором сталих елементів керування, описано в шістнадцять тисяч ключів, девʼять мов.