Uma prévia do processo e das ferramentas usadas para criar a experiência no estilo calendário de fim de ano do Designcember.
No clima de dezembro e dos vários calendários que as pessoas usam para fazer contagem regressiva e comemorar, queremos destacar o conteúdo da Web da comunidade e da equipe do Chrome. Todos os dias, destacamos um conteúdo relacionado ao desenvolvimento e design de UI, totalizando 31 destaques, entre os quais estavam 26 novos sites de demonstração, ferramentas, anúncios, podcasts, vídeos, artigos e estudos de caso.
Confira a experiência completa em designcember.web.app.
Visão geral
Nosso objetivo era oferecer uma experiência na Web acessível, divertida, moderna e responsiva com o menor número possível de bytes. Queremos destacar novas APIs responsivas, como consultas de contêiner, e incluir um belo exemplo de modo escuro em um site focado em design e com muitos recursos. Para isso, compactamos arquivos, oferecemos vários formatos, usamos ferramentas de build otimizadas para geração de sites estáticos, enviamos um novo polyfill e muito mais.
Começar com um toque de fantasia
A ideia do site do calendário do Designcember era funcionar como uma vitrine de todo o trabalho que queríamos destacar ao longo do mês de dezembro, além de atuar como um site de demonstração. Decidimos construir um prédio de apartamentos responsivo que pudesse ficar mais alto e estreito ou mais baixo e largo, com janelas que se reorganizavam dentro da estrutura. Cada janela representava um dia (e, portanto, um conteúdo). Trabalhamos com a ilustradora Alice Lee para dar vida à nossa visão.
Alice foi inspiradora, compartilhando processos e esboços que eram interessantes mesmo nos conceitos iniciais. Enquanto ela trabalhava na arte, nós hackeávamos a arquitetura. As primeiras discussões foram sobre o layout macro, o prédio e as janelas dele. Como as janelas se adaptariam a uma, duas ou três colunas à medida que mais espaço de viewport ficasse disponível? Quanto eles podem encolher ou esticar? Qual seria o tamanho máximo do edifício? Quanto as janelas mudariam?
Confira uma prévia de um protótipo responsivo usando grid-auto-flow: dense, mostrando como as janelas podem ser colocadas automaticamente pelo algoritmo de grade. Percebemos rapidamente que, embora as grades de proporção de tela funcionassem bem para mostrar arte, elas não ofereciam a oportunidade de aumentar e diminuir as janelas em um espaço disponível não uniforme e mostrar o poder das consultas de contêiner.
Quando a grade geral estava relativamente estável e comunicava um senso de direção para a capacidade de resposta do edifício e das janelas, pudemos nos concentrar em uma única janela. Algumas janelas se esticaram, encolheram, apertaram, cresceram e se recomporam mais do que outras na grade.
Cada janela precisaria lidar com uma certa quantidade de turbulência de redimensionamento. Abaixo está um protótipo de uma janela que demonstra a capacidade de resposta à turbulência, mostrando o quanto podemos esperar que cada janela interativa se ajuste.
Animação de janela com spritesheets
Algumas janelas têm animações para trazer mais interação à experiência. As animações são desenhadas à mão, frame a frame, no Photoshop. Cada frame é exportado, transformado em uma folha de sprites com este gerador de folhas de sprites e otimizado com o Squoosh. A animação CSS usa background-position-x e animation-timing-function, conforme mostrado no exemplo a seguir.
.una
background: url("/day1/una_sprite.webp") 0% 0%;
background-size: 400% auto;
}
.day:is(:hover, :focus-within) .una {
animation: una-wave .5s steps(1) alternate infinite;
}
@keyframes una-wave {
0% { background-position-x: 0%; }
25% { background-position-x: 300%; }
50% { background-position-x: 200%; }
75% { background-position-x: 100%; }
}
Algumas animações, como o cofre do sexto dia, eram animações CSS baseadas em etapas.
Conseguimos esse efeito com uma técnica semelhante, usando steps(). A diferença é que os keyframes eram posições de transformação do CSS em vez de posições de plano de fundo.
Mascaramento de CSS
Algumas janelas tinham formatos exclusivos. Usamos máscaras e aspect-ratio para criar uma janela escalonável, com formato exclusivo e adaptável.
Para criar uma máscara, como esta para a janela oito, foram necessárias algumas habilidades clássicas do Photoshop, além de um pouco de conhecimento sobre como as máscaras funcionam na Web. Vamos analisar a janela do dia 8.
Para se tornar uma máscara, o formato interno de trevo de quatro folhas precisa ser isolado como um formato próprio e preenchido com a cor branca. O branco informa ao CSS qual conteúdo permanece, e tudo fora do branco não permanece. No Photoshop, o interior da janela foi selecionado, teve um efeito de difusão de 1 px (para remover problemas de aliasing), foi preenchido com branco e exportado com a mesma altura e largura da moldura da janela. Dessa forma, o frame e a máscara podem ser sobrepostos diretamente, mostrando o conteúdo interno dentro do frame conforme o esperado.
Depois de concluído, o conteúdo da janela pode ser modificado e sempre vai aparecer dentro da estrutura personalizada. A imagem a seguir mostra a versão do modo escuro da janela, com um gradiente de plano de fundo diferente e um filtro CSS de brilho aplicado à luz.
A máscara também é compatível com janelas responsivas baseadas em consultas de contêiner. Na janela nove, há um personagem escondido atrás de uma máscara até que a janela fique mais estreita. Para garantir que o usuário não possa ajustar a imagem fora do quadro, Alice completou o personagem para nós. O personagem é mascarado dentro da janela, mas as plantas não. Portanto, outro desafio que enfrentamos foi a sobreposição de elementos mascarados com camadas não mascaradas e garantir que todos fossem dimensionados bem juntos.
A imagem a seguir mostra como fica sem a máscara na janela e no personagem.
Achatar a arte
Para manter a fidelidade da ilustração e garantir que telas de alta definição não tivessem uma experiência do usuário desfocada, Alice trabalhou com uma proporção de pixels de 3x. O plano era usar o imgix e veicular imagens e formatos otimizados no servidor deles, mas descobrimos que ajustes manuais com a ferramenta Squoosh poderiam economizar 50% ou mais.
A ilustração tem desafios únicos para a compactação, especialmente o estilo de pincelada e borda áspera transparente usado por Alice. Optamos por compactar cada imagem png exportada do Photoshop 3x para um png, webp e avif menores. Cada tipo de arquivo tem suas próprias capacidades especiais de compactação, e foi necessário compactar mais de 50 imagens para encontrar algumas configurações comuns de otimização.
A CLI Squoosh foi essencial com mais de 200 imagens para otimizar. Fazer tudo isso manualmente levaria dias. Depois de ter as configurações de otimização comuns, fornecemos como instruções de linha de comando e processamos em lote pastas inteiras de imagens PNG para as versões compactadas em WebP e AVIF.
Confira um exemplo de comando squoosh da CLI AVIF usado:
npx @squoosh/cli --quant '{"enabled":true,"zx":0,"maxNumColors":256,"dither":1}' --avif '{"cqLevel":19,"cqAlphaLevel":17,"subsample":1,"tileColsLog2":0,"tileRowsLog2":0,"speed":6,"chromaDeltaQ":false,"sharpness":5,"denoiseLevel":0,"tune":0}' image-1.png image-2.png image-3.png
Com a arte otimizada verificada no repositório, podemos começar a carregá-las do HTML:
<picture>
<source srcset="/day1/inner-frame.avif" type="image/avif">
<source srcset="/day1/inner-frame.webp" type="image/webp">
<img alt="" decoding="async" role="presentation" src="/day1/inner-frame.png">
</picture>
Era repetitivo escrever o código-fonte da imagem, então criamos um componente do Astro para incorporar imagens com uma linha de código.
<Pic filename="day1/inner-frame" role="presentation" />
Usuários de leitores de tela e teclados
Grande parte da experiência do Designcember é feita pelas artes e janelas interativas. Era importante para nós que um usuário de teclado pudesse usar o site e espiar as janelas, e que os usuários de leitores de tela tivessem uma boa experiência narrada.
Por exemplo, ao incorporar as imagens, usamos role="presentation" para marcar a imagem como de apresentação para leitores de tela. Achamos que uma experiência do usuário com entre 5 e 12 descrições de alt fragmentadas seria ruim. Então, marcamos as imagens como apresentacionais e fornecemos uma narração geral da janela. A navegação pelas janelas em um leitor de tela tem uma sensação narrativa agradável, o que esperamos que ajude a transmitir o toque de fantasia e diversão que o site quer compartilhar.
O vídeo a seguir mostra uma demonstração da experiência do teclado. As teclas Tab, Enter, barra de espaço e Esc são usadas para orquestrar o foco nos pop-ups e nas janelas.
A experiência do leitor de tela tem atributos ARIA especiais que trazem clareza ao conteúdo. Por exemplo, os links dos dias dizem apenas "um" ou "dois", mas com um pouco de ARIA adicionado, eles são anunciados como "Dia um" e "Dia dois". Além disso, todas as imagens são resumidas em um único rótulo para que cada janela tenha uma descrição.
Astro, gerador de sites estático primeiro e orientado a componentes
O Astro facilitou o trabalho em equipe no site. O modelo de componente era familiar para desenvolvedores de Angular e React, enquanto o sistema de estilo de nome de classe com escopo ajudava cada desenvolvedor a saber que o trabalho em uma janela não entraria em conflito com o de outra pessoa.
Dias como componentes
Cada dia era um componente que buscava o status de um repositório de dados de tempo de build. Isso nos permitiu executar a lógica do modelo antes que o HTML chegasse ao navegador. A lógica determina se o dia deve mostrar a dica ou não, já que os dias inativos não têm pop-ups.
Os builds são executados a cada hora, e o repositório de dados de tempo de build desbloqueia um novo dia quando o servidor de build passa da meia-noite. Esses pequenos sistemas autossuficientes e com atualização automática mantêm o site atualizado.
Estilos com escopo e Open Props
O Astro define o escopo dos estilos escritos no modelo de componente, o que facilitou a distribuição da carga de trabalho entre muitos membros da equipe e também tornou divertido o uso do Open Props. Os estilos Open Props normalize.css foram úteis com o tema adaptável (claro e escuro), além de ajudar a organizar conteúdo como parágrafos e cabeçalhos.
Como usuários pioneiros do Astro, encontramos alguns problemas com o PostCSS. Por exemplo, não foi possível atualizar para a versão mais recente do Astro devido a muitos problemas de build. Mais tempo pode ser gasto aqui, otimizando os fluxos de trabalho de build e de desenvolvedor.
Contêineres flexíveis
Algumas janelas aumentam e diminuem, mantendo a proporção para preservar a arte. Usamos outras janelas para mostrar o poder da arquitetura baseada em componentes com consultas de contêiner. As consultas de contêiner significavam que as janelas podiam ter informações de estilo responsivo individuais e se reajustar com base nos próprios tamanhos. Algumas janelas passaram de estreitas para largas e precisaram ajustar o tamanho e o posicionamento da mídia dentro delas.
À medida que mais espaço fica disponível para uma janela, podemos adaptar o tamanho ou os elementos filhos dela para caber. Acontece que, para atender às janelas adaptáveis, as consultas de contêiner não seriam apenas divertidas de mostrar, mas também necessárias e simplificariam drasticamente a orquestração de determinados layouts.
.day {
container: inline-size;
}
.day > .pane {
min-block-size: 250px;
@container (min-width: 220px) {
min-block-size: 300px;
}
@container (min-width: 260px) {
min-block-size: 310px;
}
@container (min-width: 360px) {
min-block-size: 450px;
}
}
Essa abordagem é diferente de manter uma proporção. Ela oferece mais controle e oportunidades. Em determinado tamanho, muitas crianças mudam de posição para se adaptar a um novo layout.
As consultas de contêiner também permitiram oferecer suporte à contenção de direção de bloco (vertical). Assim, à medida que uma janela aumentava de comprimento, podíamos ajustar os estilos para que ela se encaixasse adequadamente. Isso é visto nas consultas baseadas em altura, que usamos de forma independente, além das consultas baseadas em largura:
.person {
place-self: flex-end;
margin-block: 25% 50%;
margin-inline-start: -15%;
z-index: var(--layer-1);
@container (max-height: 350px) and (max-width: 425px) {
place-self: center flex-end;
inline-size: 50%;
inset-block-end: -15%;
margin-block-start: -2%;
margin-block-end: -25%;
z-index: var(--layer-2);
}
}
Também usamos consultas de contêiner para mostrar e ocultar detalhes à medida que a arte ficava cada vez mais cheia em tamanhos menores e mais vazia em tamanhos maiores. A janela 9 é um ótimo exemplo de onde isso entrou em jogo:
Suporte para vários navegadores
Para criar uma ótima experiência moderna entre navegadores, especialmente para APIs experimentais, como consultas de contêiner, precisamos de um ótimo polyfill. Enviamos uma solicitação à nossa equipe, e Surma liderou a criação de um novo polyfill de consulta de contêiner. O polyfill depende de ResizeObserver, MutationObserver e da função:is() do CSS. Portanto, todos os navegadores modernos são compatíveis com o polyfill, especificamente o Chrome e o Edge a partir da versão 88, o Firefox a partir da versão 78 e o Safari a partir da versão 14. Usar o polyfill permite qualquer uma das seguintes sintaxes:
/* These are all equivalent */
@container (min-width: 200px) {
/* ... */
}
@container (width >= 200px) {
/* ... */
}
@container size(width >= 200px) {
/* ... */
}
Modo escuro
Um último toque essencial para o site do Designcember foi um tema escuro incrível. Queremos mostrar como você pode usar a arte para participar ativamente da criação de uma ótima experiência no modo escuro. Para isso, ajustamos os estilos de plano de fundo de cada janela de forma programática e usamos o máximo de CSS possível ao criar a arte da janela. A maioria dos planos de fundo era gradientes CSS, para facilitar o ajuste dos valores de cor. Em seguida, colocamos a arte em cima deles.
Outros easter eggs
Toques pessoais
Adicionamos alguns toques pessoais à página para dar mais personalidade ao site. O primeiro foi o elenco de personagens, inspirado na nossa equipe. Também incluímos um cursor no estilo retrô nos dias inativos e brincamos com o estilo do favicon.
Toques funcionais
Um dos toques funcionais adicionais é a funcionalidade "Ir para hoje", com um pássaro que fica em cima do prédio. Ao clicar ou pressionar "Enter" nesse pássaro, você pula para o dia atual do mês na página e pode acessar rapidamente os lançamentos mais recentes.
O site Designcember também tem uma folha de estilo de impressão especial em que basicamente oferecemos uma imagem específica que funciona melhor em papel de 21,59 cm x 27,94 cm para que você possa imprimir o calendário e ficar no clima festivo o ano todo.
No geral, muito trabalho foi feito para criar uma experiência da Web moderna, divertida e fantástica para celebrar o desenvolvimento de UI durante todo o mês de dezembro. Esperamos que você tenha gostado!
