Perché penso che "pixel perfetto" sia morto,
e perché penso che in realtà non sia mai esistito.

“Perché il rendering non è lo stesso ovunque? è una domanda che devi aver sentito più e più volte come integratore o come sviluppatore front-end.
[riga] [un_terzo]
[/uno_terzo] [due_terzo] Sono stato il primo a dichiarare di essere un fan del "pixel perfetto". Ero assolutamente perfezionista su questo punto e troppo spesso perdevo tempo prezioso per "debug" di un offset di 1 pixel su un div.
La mia percezione della cosa era che diceva un po' più sfumata della definizione esatta.
Non sono mai stato un fondamentalista al punto da usare un'immagine di sfondo per avere la stessa ombra su tutti i browser (alcuni lo hanno fatto, soprattutto su vecchio IE <7!), mi sbagliavo nonostante tutto.
[/two_third] [/row] L'idea che un sito debba avere un aspetto perfetto per i pixel su tutti i browser è vecchia, ed è stato a lungo un El Dorado molto ricercato. 'Pixel perfect' è quindi un'espressione comunemente usata nel campo del web, e la vedrai ovunque. Probabilmente la conosci molto bene, ne sono certo. Questa idea è anche responsabile di uno dei dibattiti più antichi e accaniti del web.
Penso che oggi, nelle nostre professioni, non dovremmo più sentire questa nozione in bocca a nessuno. Perché il significato di "Pixel Perfect" perfettamente identico alla creazione, qualunque sia il browser o lo schermo utilizzato, è impossibile. Semplicemente.
[tipo separatore=”” size=”” icon=”stella”]

Ma perché tanto odio?

No, niente odio... solo moderazione. Ho avuto l'opportunità di parlarne un po' con Stéphane Deschamps (Clever Age), che all'epoca mi aveva preso in giro per aver osato parlare di "pixel perfetti". Lui aveva ragione. Da allora ho rivisto la mia concezione della cosa nella giusta direzione (credo).
Infatti, prendiamo ad esempio la proprietà 'box-shadow'. Questa proprietà non dà non lo stesso rendering da un browser all'altro. Quindi, a meno che tu non cada in pratiche molto molto molto cattive, e usi, come ho detto sopra, un'immagine di sfondo per riprodurre esattamente la stessa ombra del modello, l'ombra sarà diversa a seconda del Navigatore ...
[tipo separatore=”” size=”” icon=”stella”]

Cos'è esattamente il pixel perfetto?

Pixel perfect è l'ossessione per la perfezione irraggiungibile.

Immagina che qualcuno controlli con un righello di pixel attaccato allo schermo per vedere se tutto è uguale. L'ho fatto. A volte lo faccio ancora… Prendo un foglio di carta e controllo per vedere se è tutto allineato. Oppure uso un'altra finestra aperta sul mio computer e la uso come righello. Inoltre mettevo un segno di spunta sul mio foglio di carta per vedere se due elementi sul mio schermo cadevano nello stesso punto, con la stessa spaziatura del mockup... si si. L'ho fatto.

Chiaramente, il "pixel perfect" è l'idea che un sito deve essere esattamente lo stesso ovunque, fino al pixel.
[tipo separatore=”” size=”” icon=”stella”]

Cosa stai dicendo giovane Padawan?

Dovresti sapere che i browser web (Firefox, Chrome, Internet Explorer, ecc.) hanno ciascuno il proprio motore di rendering e quest'ultimo non interpreta sempre il "codice" allo stesso modo. La resa di un sito può quindi variare da un browser all'altro. E questo, sin dalla loro creazione. Il rendering non potrebbe mai essere esattamente lo stesso da un browser all'altro.
Si potrebbe sognare che venga messa in atto una convenzione e che tutti i browser inizino a visualizzare un box-shadow o un font esattamente nello stesso modo. Anche se fosse possibile raggiungere questo stato di cose, il "pixel perfect" rimarrebbe comunque impossibile perché gli schermi odierni si basano su rispettive tecnologie alquanto diverse:

Oltre a queste difficoltà “software”, vanno tenute in considerazione le dimensioni fisiche dei terminali:

Le risoluzioni, le impostazioni dell'utente vengono ad aggiungere una "sovrapposizione" di differenza e non bisogna dimenticare il sistema operativo dell'utente. Il rendering di un sito non dipende esclusivamente dal browser. Si basa anche sul sistema operativo. Un pulsante o un campo modulo che non riceve alcuno stile specifico (CSS) verrà visualizzato in modo diverso a seconda del sistema operativo dell'utente. Una "scatola" di selezione del tipo di selezione ha un rendering ottimizzato per il sistema operativo Apple quando viene visualizzata in Safari (vale a dire il cui aspetto ricorda le convenzioni Apple). Windows offrirà il rendering attorno a Flat Design. Google sta attualmente spingendo il suo approccio "Material Design" ecc.
Se apriamo gli occhi sulla realtà, ci rendiamo conto che il "pixel perfetto" è impossibile e non è mai esistito davvero.
Inoltre, se siamo d'accordo sulla necessità di mettere in atto una convenzione, su cosa dovrebbe basarsi? Photoshop? È vero che è un software di progettazione molto utilizzato, ma è comunque molto costoso e alcuni web designer non possono permetterselo e usano qualcos'altro. Perché dovremmo basare questa eventuale convenzione su Photoshop? Questa convenzione è un'utopia e probabilmente non verrà mai attuata.
Per avere un progetto "pixel perfect" per davvero, sarebbe necessaria l'uniformità di browser, sistemi operativi, dispositivi e costringere gli utenti ad avere tutte le stesse impostazioni. La dittatura cosa.

[tipo separatore=”” size=”” icon=”stella”]

Ma allora cosa facciamo? È la fuga precipitosa!

Questo non significa che dovremmo ignorare i mockup dei nostri designer. Dobbiamo però ripensare ai pixel. Ultimamente, mi piace usare il concetto di " pixel bello ", o anche di " pixel in movimento " o " pixel fluido ". Trovo che questi termini siano molto più in linea con il mercato attuale. A mio parere, è assolutamente possibile rispettare l'integrità di un mockup rendendo al contempo il sito adattabile, fluido e responsivo. Certo, non verrà visualizzato esattamente allo stesso modo ovunque, ma si adatterà in modo impeccabile.

Penso che l'intero problema risieda nell'idea che abbiamo di "pixel perfetti". Cosa c'è davvero dietro? Semplicemente l'idea che rispetteremo il modello del designer.

Questa è un'ottima cosa, perché l'integrità del progetto su cui stiamo lavorando dipende da questo (e dalla buona comprensione del team!). Ma è qualcosa che dovremo imparare a fare senza rigidità, e il progettista deve saper accettare questo fatto.
[tipo separatore=”” size=”” icon=”stella”]

Abbracciare l'era reattiva a braccia aperte

Siamo nel 2015 e siamo già nell'era reattiva da alcuni anni. Dobbiamo smettere di voler avere lo stesso rendering ovunque, fino al pixel: il web è fluido in altezza e larghezza, i dispositivi sono sempre più diversificati. L'adattamento ai fluid media è una realtà, ed è un vincolo a cui abituarsi (è davvero il momento!), ed è valido sia per i designer che per gli sviluppatori.
Voler avere esattamente la stessa tonalità è un'utopia, e poi è francamente inutile.
L'utente non se ne accorgerà nemmeno. Dobbiamo essere più pragmatici e pensare prima a questo utente. Devi sapere come rimanere umile e mettere sempre l'utente al primo posto. Alla fine sarà molto più importante di questa ombra, così perfetta sul modello Photoshop e non più così perfetta su Internet Explorer (senza voler attaccare sempre la stessa...)
Anche quando il reattivo non esisteva, a un esame più attento era impossibile avere esattamente lo stesso rendering perfetto per i pixel da un browser all'altro. I caratteri non sono mai stati interpretati allo stesso modo e il rendering è sempre stato diverso. C'è stato davvero questo odiato periodo durante il quale gli sviluppatori si sono visti mettere il contenuto del testo sotto forma di un'immagine, ma oso sperare che questo tempo sia davvero finito!!! È stata una pratica davvero, davvero pessima, e tutto in nome del massimo rispetto per il modello. Il DA deve essere in grado di accettare che il suo lavoro non è esattamente lo stesso una volta integrato nei browser, e il DEV deve essere in grado di essere più zen di fronte a tutto questo e non entrare in una fase di cronofagia.
[tipo separatore=”” size=”” icon=”stella”]

'Bellissimo pixel'

C'è questa nuova idea di "rete zen" che trasmette l'idea che dobbiamo diventare più flessibili, più zen e lasciare il posto a più lasciarci andare. Un lasciarsi andare che salverà la vita a tutti.
Attenzione, ovviamente eviteremo di cadere nella trappola di fare le cose senza preoccuparci del rendering finale... il web fluido è una nozione che richiede molto lavoro, molto più della nozione di "pixel perfetto" che volevamo impostato come un concetto definitivo in tutti questi anni. La creazione di un sito o di un'applicazione reattiva richiede molta riflessione, da DA a DEV.
La nozione di "pixel perfetto" è una nozione che troppe persone, me compreso, hanno cercato di imporre, ma è stato un errore.
Il pixel ora è fluido, in movimento, e deve saper stare al suo posto pur essendo in grado di muoversi (hai fatto la ginnastica? =)). Come una squama sull'ala di una farfalla, ben al suo posto, ma in grado di muoversi con la farfalla. Un 'bel pixel'.
Emmanuelle GUYOT / UX-Scienziata