Desde 2014, o Google vem redesenhando seus aplicativos e serviços de acordo com suas próprias Design material princípios. Ontem anunciou em seu blog de design que uma versão futura do seu navegador Chrome (versão 49.2) adotará o Material Design como sua renderização padrão.
De maneira crítica, a nova versão do Chrome, apelidada de Chrome MD, substituirá o CSS definido pelo site em consideração à especificação do Material Design; cores, tipo e até imagens serão renderizadas de acordo com a linguagem de design do Google.
Um pilar da estratégia de design do gigante de tecnologia por quase dois anos, o salto para o Material Design provou ser bem-sucedido para o Google em seus aplicativos e, de acordo com o Google, impor o sistema de design ao conteúdo exibido em seus navegadores garantirá uma consistência e alta qualidade experiência do usuário para seus clientes:
Desenvolvemos o Material Design para fornecer aos nossos clientes a melhor experiência do usuário, e acreditamos que eles merecem essa qualidade sempre que usarem um produto do Google - Anjeet Singh, Asst. Diretor de Produção de Marketing, Google Design
Além de rebranding da Web em sua própria imagem, o principal impacto dessa atualização será uma Web radicalmente mais rápida.
A principal preocupação do Google é uma Web mais rápida e, limitando as variáveis que seu navegador é forçado a renderizar, espera aumentar a renderização inicial das páginas em uma média de 17%.
O Google Chrome MD renderiza páginas da Web com mais rapidez do que um HTML simples sem CSS. Isso ocorre porque, mesmo quando nenhum estilo é definido, os navegadores ainda precisam pesquisar possíveis definições de estilo; O Google Chrome MD simplesmente ignora essa renderização de etapas de acordo com seu sistema de estilo interno.
O Chrome MD marca uma importante adoção de AMP (Accelerated Mobile Pages), reduzindo significativamente a carga de trabalho do navegador. No entanto, a maioria dos ganhos de desempenho foi encontrada restringindo as opções de estilo.
Paleta de cores do Material Design está restrito a 256 cores, e o Chrome MD não renderiza nenhuma outra cor além dos 256 valores hexadecimais.
Quando os projetistas especificam um valor hexadecimal diferente de uma das 256 cores aprovadas, o Google Chrome MD traduz automaticamente para o equivalente de material design mais próximo. Por exemplo, esses dois vermelhos diferentes serão renderizados como a mesma cor de Material Design:
p.material { color:#E53935; } /* renders correctly as #E53935 */p.notMaterial { color:#EF2A39; } /* renders incorrectly as #E53935 */
O mesmo princípio se aplica aos valores RGB, os valores RGBA serão traduzidos para a cor de Material Design mais próxima com base na cor que eles sobrepõem.
Os gradientes não serão renderizados no Chrome MD. No entanto, espera-se que a implementação de beta fechada (que os gradientes renderizam como seu valor tonal médio) seja adaptada para renderizar a tonalidade mais clara encontrada no gradiente.
As mesmas restrições de cor também se aplicam às imagens: cada pixel em uma imagem de bitmap será renderizado como uma das 256 cores definidas do Material Design - muito parecido com a atual tecnologia .gif. Os valores de cor SVG também serão convertidos automaticamente.
O Google forneceu uma exceção à regra de imagem para os casos que descreve como "críticos para as cores", apoiando a configuração -webkit-appearance :
img.default { -webkit-appearance:material; } /* the default Material Design rendering */img.trueColor { -webkit-appearance:none; } /* the true color as defined in the image file */
No entanto, essa solução só funcionará com bitmaps e arquivos SVG incorporados, o SVG embutido sempre será renderizado usando as cores do Material Design.
Substituindo as fontes padrão do sistema, todo o texto no Google Chrome MD será processado usando uma única família de fontes incorporada. Devido ao suporte ao idioma, não será o Roboto como seria de se esperar, mas Noto .
O texto também será renderizado em 1 de 2 tons: preto ou branco; o tom será selecionado automaticamente com base na cor de fundo. As graduações de tom serão determinado automaticamente : em fundos escuros H1-H6 irá render a 100% de opacidade, todos os outros textos com 70% de opacidade; em fundos de luz H1 – H6 renderiza com 87% de opacidade, todos os outros textos renderizarão com 54% de opacidade.
O Google Chrome MD reforçará também uma rígida escala tipográfica para pesos, tamanhos e altura da linha:
h1 { font: light 45sp/48pt Noto; }h2 { font: regular 34sp/40pt Noto; }h3 { font: regular 24sp/32pt Noto; }h4 { font: regular 16sp/28pt Noto; }h5 { font: regular 15sp/24pt Noto; }h6 { font: medium 13sp/24pt Noto; }*, p { font: regular 14sp/20pt Noto; }strong, em { font: medium 14sp/20pt Noto; }
Esses estilos não serão super ridículos e, notavelmente, não há opção em itálico.
Talvez a decisão mais radical seja a inclusão obrigatória de um único apelo à ação. Isso é definido com o ID primário e será renderizado como um botão de ação flutuante :
https://pt.odwebdesign.net/google-challenges-responsive-best-practice-with-resizer/"> Resizer os pontos de interrupção utilizáveis são: 360 px, 480 px, 600 px, 720 px, 840 px, 960 px, 1024 px, 1280 px, 1440 px, 1600 px.Qualquer ponto de interrupção definido pelo designer que não se encaixe será arredondado para o próximo ponto de interrupção mais alto. Por exemplo:
@media only screen and (min-device-width:840px) { /* applies at 840px wide and above */ }@media only screen and (min-device-width:841px) { /* applies at 960px wide and above */ }Impacto abrangente
O Google tem uma longa e orgulhosa história de impor sua vontade a designers da Web, desde atualizações inesperadas até seu algoritmo até a adoção do AMP. No entanto, a imposição de material design na web provavelmente terá o maior impacto.
É claro que essas alterações afetam apenas os sites visualizados no Chrome, mas com mais de 52% do uso global do navegador, é difícil imaginar um site que não seja afetado.
Nossa principal preocupação é com a qualidade da experiência de nossos clientes. Por isso, recomendamos que todos os web designers usem as práticas recomendadas do Material Design para garantir uma experiência consistente para seus clientes em todos os dispositivos e plataformas - Anjeet Singh, Asst. Diretor de Produção de Marketing, Google Design
Aparentemente, a atualização do Chrome para o Google trata de oferecer uma experiência na Web mais rápida e consistente, mas, na verdade, é provável que a Web inteira seja renomeada como um projeto do Google.
A versão atual do Chrome é 49.0.2623.110, sugerindo que pelo menos uma pequena atualização seja esperada antes que o Google Chrome MD seja lançado com força total. No entanto, hoje, 1º de abril, marca o ponto em que finalmente abraçamos a teia homogênea?
Update: Sim, felizmente, este artigo foi uma piada de April Fools.