O pixel perfeito está morto

Por que eu acho que 'pixel perfeito' está morto,
e por que eu acho que ele nunca realmente existiu.

“Por que a renderização não é a mesma em todos os lugares? é uma pergunta que você deve ter ouvido repetidamente como integrador ou como desenvolvedor front-end.
[linha] [um_terço] perfeccionista-hooponopono1
[/one_third] [two_third] Eu fui o primeiro a afirmar ser fã de 'pixel perfect'. Eu era absolutamente perfeccionista neste ponto, e muitas vezes perdi um tempo precioso para 'depurar' um deslocamento de 1 pixel em um div.
Minha percepção da coisa era que dizia um pouco mais sutil do que a definição exata.
Nunca fui fundamentalista a ponto de usar uma imagem de fundo para ter a mesma sombra em todos os navegadores (alguns já fizeram isso, principalmente no antigo IE < 7!), me enganei apesar de tudo.
[/two_third] [/row] A ideia de que um site deve parecer pixel-perfect em todos os navegadores é antiga, e tem sido um El Dorado muito perseguido. 'Pixel perfect' é uma expressão que, portanto, é comumente usada no campo da web, e você a verá em todos os lugares. Você provavelmente a conhece muito bem, tenho certeza. Essa ideia também é responsável por um dos debates mais antigos e acirrados da web.
Acho que hoje, em nossas profissões, não devemos mais ouvir essa noção na boca de ninguém. Porque o 'Pixel Perfect' significa perfeitamente idêntico à criação seja qual for o navegador ou a tela utilizada é impossível. Simplesmente.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

Mas por que tanto ódio?

Não, sem ódio… apenas moderação. Tive a oportunidade de falar um pouco sobre isso com Stéphane Deschamps (Clever Age), que na época me provocava por ousar falar sobre 'pixel perfeito'. Ele estava certo. Desde então, revisei minha concepção da coisa na direção certa (acho).
De fato, tomemos por exemplo a propriedade 'box-shadow'. Esta propriedade não dá não é a mesma renderização de um navegador para outro. Então, a menos que você caia em práticas muito, muito ruins, e use, como eu disse acima, uma imagem de fundo para reproduzir exatamente a mesma sombra do modelo, a sombra será diferente dependendo do Navegador…
[tipo de separador=”” tamanho=”” ícone=”estrela”]

O que exatamente é o pixel perfeito?

Pixel perfect é a obsessão pela perfeição inatingível.

Imagine alguém verificando com uma régua de pixels colada na tela para ver se está tudo igual. Eu fiz isso. Ainda faço isso às vezes... Pego uma folha de papel e verifico se está tudo alinhado. Ou eu uso outra janela aberta no meu computador e uso isso como uma régua. Eu também costumava colocar uma marca de verificação na minha folha de papel para ver se dois elementos na minha tela caíam no mesmo lugar, com o mesmo espaçamento da maquete… sim sim. Eu fiz isso.

Claramente, o 'pixel perfeito' é a ideia de que um site deve ser exatamente o mesmo em todos os lugares, até o pixel.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

O que você está dizendo jovem Padawan?

Você deve saber que os navegadores da web (Firefox, Chrome, Internet Explorer, etc.) têm seu próprio mecanismo de renderização, e este nem sempre interpreta o “código” da mesma maneira. A renderização de um site pode, portanto, variar de um navegador para outro. E isso, desde a sua criação. A renderização nunca poderia ser exatamente a mesma de um navegador para outro.
Pode-se sonhar que uma convenção é posta em prática e que todos os navegadores começam a exibir uma sombra de caixa ou uma fonte exatamente da mesma maneira. Mesmo se fosse possível alcançar esse estado de coisas, 'pixel perfeito' ainda seria impossível porque as telas de hoje são baseadas em tecnologias respectivas um pouco diferentes:
800px-Pixel_geometry_01_Pengo
Além dessas dificuldades de “software”, as dimensões físicas dos terminais devem ser levadas em consideração:
_5T1
As resoluções, as configurações do usuário vêm para agregar uma “sobreposição” de diferença, e não se deve esquecer o sistema operacional do usuário. A renderização de um site não depende apenas do navegador. Ele também depende do sistema operacional. Um botão ou um campo de formulário que não recebe nenhum estilo específico (CSS) será exibido de forma diferente dependendo do sistema operacional do usuário. Uma “caixa” de seleção do tipo select tem uma renderização otimizada para o Apple OS quando é exibida no Safari (ou seja, cuja aparência lembra as convenções da Apple). O Windows oferecerá renderização em torno do Flat Design. O Google está atualmente empurrando sua abordagem “Material Design” etc.
Se abrirmos os olhos para a realidade, percebemos que 'pixel perfeito' é impossível e nunca existiu de verdade.
Além disso, se concordarmos que uma convenção deve ser implementada, em que ela deve se basear? Photoshop? É verdade que é um software de design amplamente utilizado, mas ainda é muito caro, e alguns web designers não podem pagar e usar outra coisa. Por que devemos basear essa eventual convenção no Photoshop? Esta convenção é uma utopia, e provavelmente nunca será implementada.
Para ter um projeto 'pixel perfeito' de verdade, seria necessário uniformidade de navegadores, sistemas operacionais, dispositivos e forçar os usuários a ter todas as mesmas configurações. A ditadura o quê.
arton114
[tipo de separador=”” tamanho=”” ícone=”estrela”]

Mas então o que fazemos? É a debandada!

No entanto, não se trata de deixar de respeitar os modelos dos nossos designers. Mas você tem que pensar em pixels de forma diferente. Por algum tempo, eu gosto de usar a noção de 'bom pixel', ou de 'pixel em movimento' Onde 'pixel fluido'. Acho que corresponde muito melhor ao mercado atual. É bem possível, na minha opinião, respeitar a integridade de um modelo ao mesmo tempo em que torna o site adaptável, fluido, responsivo. Não, não aparecerá o mesmo em todos os lugares. Mas vai se encaixar bem.

Acho que todo o problema está na ideia que temos de “pixel perfeito”. O que realmente está por trás disso? Simplesmente a ideia de que respeitaremos o modelo do designer.

Isso é muito bom, porque a integridade do projeto em que estamos trabalhando depende disso (e do bom entendimento da equipe!). Mas é algo que teremos que aprender a fazer sem rigidez, e o designer deve ser capaz de aceitar esse fato.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

Abraçando a era responsiva de braços abertos

Estamos em 2015, e já estamos na era responsiva há alguns anos. Devemos parar de querer ter a mesma renderização em todos os lugares, até o pixel: a web é fluida em altura e largura, os dispositivos são cada vez mais diversificados. Adaptar-se à mídia fluida é uma realidade, e é um constrangimento para se acostumar (é realmente a hora!), e é válido tanto para designers quanto para desenvolvedores.
Querer ter exatamente o mesmo tom é uma utopia, e então é francamente inútil.
O usuário nem vai notar. Precisamos ser mais pragmáticos e pensar primeiro nesse usuário. Você tem que saber se manter humilde e sempre colocar o usuário em primeiro lugar. No final, será muito mais importante que essa sombra, tão perfeita no modelo do Photoshop e não mais tão perfeita no Internet Explorer (sem querer sempre atacar a mesma…)
Mesmo quando o responsivo não existia, em uma inspeção mais detalhada, era impossível ter exatamente a mesma renderização perfeita em pixels de um navegador para outro. As fontes nunca foram interpretadas da mesma maneira e a renderização sempre foi diferente. Houve de fato esse odiado tempo em que os desenvolvedores se viram colocando conteúdo de texto na forma de uma imagem, mas ouso esperar que esse tempo tenha realmente acabado!!! Foi uma prática muito, muito ruim, e tudo em nome do respeito máximo pelo modelo. O DA deve ser capaz de aceitar que seu trabalho não é exatamente o mesmo uma vez integrado aos navegadores, e o DEV deve ser capaz de ser mais zen em relação a tudo isso e não entrar em uma fase de cronofagia.
[tipo de separador=”” tamanho=”” ícone=”estrela”]

'Belo pixel'

Existe essa nova ideia de 'zen web' que transmite a noção de que devemos nos tornar mais flexíveis, mais zen e dar lugar a mais desapego. Um desapego que salvará a vida de todos.
Tenha cuidado, é claro que evitaremos cair na armadilha de fazer as coisas sem nos preocupar com a renderização final... a web fluida é uma noção que exige muito trabalho, muito mais do que a noção de 'pixel perfeito' que queríamos configurar como um conceito final todos esses anos. Construir um site ou aplicativo responsivo requer muita reflexão, do DA ao DEV.
A noção de 'pixel perfeito' é uma noção que muitas pessoas, inclusive eu, tentaram impor, mas foi um erro.
O pixel agora é fluido, em movimento, e deve saber se manter em seu lugar enquanto consegue se mover (você fez a ginástica? =) ). Como uma escama na asa de uma borboleta, perfeitamente no lugar, mas capaz de se mover com a borboleta. Um 'pixel bonito'.
Emmanuelle GUYOT / Cientista UX