Чому я думаю, що "ідеальний піксель" мертвий,
і чому я думаю, що він насправді ніколи не існував.

«Чому відображення не всюди однаково? Це питання, яке ви, напевно, чули знову і знову як інтегратор або як розробник інтерфейсу.
[рядок] [одна_третина]
[/one_third] [two_third] Я ​​був першим, хто заявив, що є шанувальником «ідеального пікселя». Я був абсолютним перфекціоністом у цьому питанні, і я занадто часто втрачав дорогоцінний час, щоб «налагодити» зміщення на 1 піксель на div.
Моє сприйняття речі було дещо більш тонким, ніж точне визначення.
Я ніколи не був фундаменталістом до такої міри, що використовував фонове зображення, щоб мати однакову тінь у всіх браузерах (деякі зробили це, особливо у старому IE < 7!), я помилявся, незважаючи на все.
[/two_third] [/row] Ідея про те, що сайт повинен виглядати ідеально в усіх браузерах, є давньою, і це вже давно гаряче переслідуваний Ельдорадо. "Pixel perfect" - це вираз, який зазвичай використовується в Інтернеті, і ви побачите його всюди. Ви, мабуть, добре її знаєте, я впевнений. Ця ідея також є причиною однієї з найстаріших і найзапекліших дебатів у мережі.
Я думаю, що сьогодні в наших професіях ми більше не повинні чути це поняття в чиїхось устах. Тому що «Pixel Perfect» означає абсолютно ідентичне створенню, незалежно від того, який браузер або екран використовує, неможливо. Просто.
[тип роздільника=”” size=”” icon=”зірочка”]

Але чому стільки ненависті?

Ні, без ненависті… лише поміркованість. У мене була можливість трохи поговорити про це зі Стефаном Дешамом (Розумний вік), який тоді дражнив мене за те, що я наважився говорити про «ідеальний піксель». Він мав рацію. З тих пір я переглянув свою концепцію речі в правильному напрямку (я думаю).
Справді, візьмемо для прикладу властивість box-shadow. Ця властивість не дає зовсім не однакове відтворення з одного браузера до іншого. Отже, якщо ви не потрапите на дуже-дуже погані практики та не використовуєте, як я вже говорив вище, фонове зображення для відтворення точно такої ж тіні, що й на моделі, тінь буде відрізнятися залежно від навігатора…
[тип роздільника=”” size=”” icon=”зірочка”]

Що таке піксель ідеальний?

Pixel perfect — це одержимість недосяжною досконалістю.

Уявіть, що хтось перевіряє за допомогою піксельної лінійки, прикріпленої до екрана, чи все те саме. Я зробив це. Я й досі так іноді роблю… Беру аркуш паперу й перевіряю, чи все вишикувано. Або я використовую інше відкрите вікно на своєму комп’ютері і використовую його як лінійку. Я також ставив галочку на своєму аркуші паперу, щоб побачити, чи два елементи на моєму екрані впали в одне й те саме місце, з тим самим інтервалом, що й на макете… так, так. я зробив це.

Очевидно, що «ідеальний піксель» — це ідея, що сайт має бути абсолютно однаковим скрізь, аж до пікселя.
[тип роздільника=”” size=”” icon=”зірочка”]

Що ти кажеш, юний падаван?

Ви повинні знати, що веб-браузери (Firefox, Chrome, Internet Explorer тощо) мають свій власний механізм візуалізації, і останній не завжди інтерпретує «код» однаково. Тому відображення сайту може відрізнятися від одного браузера до іншого. І це з моменту їх створення. Відображення ніколи не може бути абсолютно однаковим від одного браузера до іншого.
Можна мріяти, що введено конвенцію, і що всі браузери починають відображати тінь або шрифт точно так само. Навіть якби можна було досягти такого стану речей, «ідеальний піксель» все одно залишався б неможливим, оскільки сучасні екрани засновані на дещо інших відповідних технологіях:

Крім цих «програмних» труднощів, необхідно враховувати фізичні розміри терміналів:

Роздільна здатність, налаштування користувача додають «накладку» відмінності, і не варто забувати про операційну систему користувача. Відтворення сайту не залежить лише від браузера. Він також залежить від операційної системи. Кнопка або поле форми, які не мають певного стилю (CSS), відображатимуться по-різному залежно від операційної системи користувача. «Коробка» вибору вибраного типу має оптимізовану візуалізацію для ОС Apple, коли вона відображається в Safari (тобто чий зовнішній вигляд нагадує конвенції Apple). Windows запропонує візуалізацію навколо Flat Design. Наразі Google просуває свій підхід «Матеріальний дизайн» тощо.
Якщо ми відкриємо очі на реальність, ми зрозуміємо, що «ідеальний піксель» неможливий і ніколи насправді не існував.
Більше того, якщо ми згодні з тим, що конвенція має бути запроваджена, на чому вона має ґрунтуватися? Photoshop? Це правда, що це широко використовується програмне забезпечення для дизайну, але воно все одно дуже дороге, і деякі веб-дизайнери не можуть собі його дозволити і використовують щось інше. Чому ми повинні заснувати цю остаточну конвенцію на Photoshop? Ця конвенція — утопія, і вона, ймовірно, ніколи не буде реалізована.
Щоб мати «ідеальний піксельний» проект по-справжньому, це вимагало б уніфікації браузерів, операційних систем, пристроїв і примушувати користувачів мати однакові налаштування. Диктатура яка.

[тип роздільника=”” size=”” icon=”зірочка”]

Але що ж нам робити? Це тиснява!

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

Я думаю, що вся проблема полягає в уявленні про «ідеальний піксель». Що насправді стоїть за цим? Досить просто ідея, що ми будемо поважати модель дизайнера.

Це дуже добре, тому що від цього (і від хорошого розуміння команди!) залежить цілісність проекту, над яким ми працюємо. Але це те, що нам доведеться навчитися робити без жорсткості, і дизайнер повинен вміти прийняти цей факт.
[тип роздільника=”” size=”” icon=”зірочка”]

З розпростертими обіймами приймаємо епоху реагування

Ми перебуваємо в 2015 році, і вже кілька років ми перебуваємо в ері реагування. Ми повинні перестати хотіти мати однаковий рендеринг скрізь, аж до пікселя: мережа плинна за висотою і шириною, пристрої все більш і більш різноманітними. Адаптація до рідких середовищ є реальністю, і це обмеження, до якого потрібно звикнути (справді час!), і це справедливо як для дизайнерів, так і для розробників.
Бажання мати точно такий же відтінок – утопія, а потім відверто марно.
Користувач цього навіть не помітить. Нам потрібно бути більш прагматичними і спочатку думати про цього користувача. Ви повинні знати, як залишатися скромними і завжди ставити користувача на перше місце. Зрештою, це буде набагато важливіше, ніж ця тінь, настільки ідеальна для моделі Photoshop і більше не така ідеальна для Internet Explorer (без бажання завжди атакувати одну й ту саму…)
Навіть коли відповіді не існувало, при ближчому розгляді неможливо було мати точно таку ж ідеальну візуалізацію від одного браузера до іншого. Шрифти ніколи не інтерпретувалися однаково, а рендеринг завжди був різним. Справді, був цей ненависний час, коли розробники бачили, що вміщують текстовий вміст у вигляді зображення, але я смію сподіватися, що цей час дійсно закінчився!!! Це була дійсно, дуже погана практика, і все в ім’я повної поваги до моделі. Окружний прокурор повинен бути в змозі визнати, що його робота не зовсім така ж, як тільки інтегрована в браузери, а DEV має бути здатним бути більш zen vis-à-vis і не входити у фазу хронофагії.
[тип роздільника=”” size=”” icon=”зірочка”]

"Прекрасний піксель"

Існує нова ідея «дзен-мережі», яка передає ідею про те, що ми повинні стати більш гнучкими, більш дзен і поступитися місцем більшої свободи. Звільнення, яке врятує життя кожному.
Будьте обережні, ми, звичайно, не потрапимо в пастку робити речі, не турбуючись про остаточне відображення... плавна павутина — це поняття, яке вимагає багато роботи, набагато більше, ніж поняття «ідеальний піксель», яке ми хотіли створювався як остаточна концепція всі ці роки. Створення адаптивного сайту або програми вимагає багато думань, від DA до DEV.
Поняття «ідеальний піксель» — це поняття, яке намагалися нав’язати занадто багато людей, включаючи мене, але це було помилкою.
Піксель тепер плинний, рухається, і він повинен знати, як залишатися на своєму місці, маючи можливість рухатися (ви отримали гімнастику? =) ). Як луска на крилі метелика, акуратно на місці, але здатна рухатися разом з метеликом. «Прекрасний піксель».
Еммануель ГУЙОТ / UX-Scientist