Princípios básicos

Uma base sólida

Uma base sólida é o requisito básico para criar ótimos PWAs. Para implementar essa base, você precisa projetar e codificar as restrições da Web usando alguns princípios:

  • Use dispositivos móveis como uma restrição de foco. Certificar-se de que cada visualização do seu design se concentre apenas no conteúdo e nas interações essenciais.
  • Destaque o conteúdo e a funcionalidade principal do processo de design.
  • Aprimorar progressivamente quando necessário. Comece criando o conteúdo principal e a funcionalidade de um componente com as ferramentas mais diretas e disponíveis. Torne-o acessível. Em seguida, teste os recursos avançados que você gostaria de usar e aprimore seu componente com eles.
  • Ofereça uma experiência do usuário rápida e de boa qualidade com foco em métricas de desempenho da Web centradas no usuário, receba métricas de usuário reais e melhore o desempenho para todos os usuários, independentemente da conexão de rede, tipo de entrada, CPU ou GPU.

Seguindo esses princípios e melhorando com padrões modernos e recursos da Web, você pode criar experiências ótimas e rápidas com designs realmente intrínsecos. Designs com restrições em vez de pixels, permitindo que todos os usuários acessem o conteúdo e a funcionalidade principal da maneira mais adequada ao contexto de navegação específico.

Web design responsivo

Desde o artigo A List Apart de 2010 de Ethan Marcotte, Web design responsivo, designers e desenvolvedores são incentivados a criar experiências flexíveis, fazendo interfaces de usuário que funcionam em vários tamanhos de tela e dispositivos.

No entanto, em algum momento, essa mudança foi reduzida para os tamanhos de dispositivos móveis, tablets e computadores, com as larguras altamente influenciadas pelos tamanhos de tela do iOS. Com CSS moderno e um foco renovado na intenção original do design responsivo, podemos colocar o esguicho de volta em sites macios.

O Web design responsivo introduz três ingredientes técnicos:

  • Grades fluidas
  • Mídia flexível
  • Consultas de mídia

Ethan conclui que esses requisitos técnicos não são suficientes. O caminho para o futuro também exige uma maneira diferente de pensar.

O mito do usuário de dispositivos móveis

Nos primeiros dias do design responsivo, as suposições foram feitas para tornar o design mais fácil de sites. Por exemplo, experiências pequenas eram para smartphones com largura de 320 px, experiências médias para tablets e 1.024 px de largura e qualquer item maior do que isso para computadores. Telas pequenas tinham capacidades de toque, as telas grandes não. Os usuários de telefone estavam apressados e distraídos e, portanto, precisavam de uma experiência "leve".

Nada disso é verdade. Eles são mitos sobre dispositivos móveis perpetuados pela suposição de que as necessidades de um usuário são fundamentalmente diferentes com base apenas no tamanho da tela ou tipo de dispositivo. Isso não precisa ser examinado.

Pense, por exemplo, em um PWA de rede social que você pode instalar hoje em dispositivos móveis e computadores. No computador, muitos usuários podem manter uma janela estreita com o feed em um lado da tela enquanto trabalham. Considerando que estão em um dispositivo móvel por causa da largura disponível, seria errado.

O mundo do PWA que está fora da guia do navegador está até mesmo adicionando novos desafios a um mundo de design responsivo, como o minimodo e o trabalho com dispositivos dobráveis.

Minimodo

Com um PWA instalado em um dispositivo desktop, uma janela pode ficar muito pequena. Ela é menor do que a de um navegador e menor do que a janela de visualização em um dispositivo móvel. Isso é algo novo na Web: podemos oferecer suporte a um minimodo, uma janela que pode ter até 200 x 100 pixels CSS.

Ao criar um PWA atualmente, é uma boa ideia pensar sobre o que oferecer no minimodo, graças ao Web design responsivo, como botões de controle em um player de música, informações do painel ou ações rápidas.

No computador, um PWA pode ser renderizado em uma janela menor do que a menor janela que você já projetou para o navegador. Ele adiciona um novo ponto de interrupção ao seu web design responsivo: o minimodo.

Dispositivos dobráveis e híbridos

Dispositivos dobráveis e híbridos também são comuns:

  • Smartphones flip pequenos.
  • Dispositivos dobráveis que podem ser usados como smartphones ou tablets.
  • Laptops que podem ser transformados em tablets.
  • Tablets que podem funcionar como laptops com teclado e trackpad.
  • Os telefones podem ser convertidos para desktop com um hub.

Embora haja desafios para todos os sites, com um App Web Progressivo você está no controle e é responsável pela janela de instalação do app. Portanto, seu design deve reagir e oferecer a melhor experiência em todos os contextos.

Tudo em primeiro lugar

Mas por onde você deve começar? Priorização de dispositivos móveis, primeiro conteúdo e depois off-line? Ao projetar pensando na flexibilidade da Web, qual seria? Bem, a resposta é sim, tudo em primeiro lugar. O termo dispositivos móveis primeiro tem sido interpretado de muitas maneiras desde que Luke Wroblewski o cunhou pela primeira vez em 2009: da emulação de padrões de interface e UX específicos da plataforma na Web à criação de apps para dispositivos móveis antes de criar apps da Web, a apenas usar consultas de mídia de largura mínima e chamá-lo por dia. No entanto, a intenção original é esta: os dispositivos móveis forçam você a se concentrar. Como disse Luke:

Os dispositivos móveis exigem que as equipes de desenvolvimento de software se concentrem apenas nos dados e nas ações mais importantes de um aplicativo. Simplesmente não há espaço em uma tela de 320 x 480 pixels para elementos irrelevantes e desnecessários. Você precisa priorizar. Portanto, quando uma equipe projeta Mobile First, o resultado é uma experiência focada nas principais tarefas que os usuários querem realizar, sem os desvios e resíduos de interface que atacam os sites acessados atualmente em computadores. Essa é uma boa experiência do usuário e boa para os negócios.

Luke Wroblewski

Concentre cada visualização do seu site apenas nas tarefas essenciais que o usuário quer realizar. Não adicione outros itens à ideia só porque elas têm mais espaço na tela.

O segundo princípio é sugerido no Web design responsivo: o "gradiente de experiências diferentes". Uma experiência única, idêntica e perfeita de pixels para cada usuário não deve ser o objetivo do seu trabalho. É tudo menos impossível.

Em vez de pensar nas suas experiências na Web como algo fixo, pense nelas como um conjunto de recomendações que o dispositivo do usuário usará para criar a melhor experiência para o contexto atual dele. Para isso, o aprimoramento progressivo precisa ser adotado.

Aprimoramento progressivo

O aprimoramento progressivo é um padrão que nos permite escrever código que é executado em qualquer lugar, começando no HTML, CSS e JavaScript padrão, e adicionar camadas de recursos além disso com substitutos adequados quando uma API não está disponível.

Como fazer melhorias? A detecção de atributos é um padrão em que você executa um teste de suporte e reage com base nos resultados do teste. Existem várias ferramentas e práticas de plataformas da Web integradas para fazer isso.

Usando @supports, verifique se há suporte para um recurso CSS no navegador e aplique regras com base no resultado. Isso se aplica a propriedades e valores CSS. Se uma propriedade for compatível e um valor não for, ela vai falhar, assim como uma propriedade sem suporte. O código JavaScript pode acessar isso pelo CSSSupportsRule

A maioria dos novos recursos de plataforma da Web é anexada a objetos existentes, de modo que o elemento "feature" na detecção de estilo de objeto funciona bem em JavaScript, assim como outras pesquisas semelhantes, como a verificação de propriedades ou métodos em elementos.

Para fornecer JavaScript moderno, use o padrão module/nomodule para fornecer recursos mais robustos com um payload menor para navegadores mais modernos e uma experiência substituta para navegadores mais antigos. Isso tem a vantagem de garantir uma nova referência de recursos do JavaScript, como promessas, classes, funções de seta e const e let, que estão disponíveis para navegadores compatíveis com módulos ES.

É possível até combinar várias formas de detecção de recursos para criar sua linha de base aprimorada. Criado pela equipe da BBC News, o jogo se chama Cutting the Mostard e permite enviar uma experiência principal para todos e começar a aprimorar a experiência somente depois que uma barra específica for detectada.

Evitar a detecção do dispositivo

Teste diretamente o suporte ao recurso em vez de fazer suposições de suporte com base na string do user agent.

As strings de user agent nunca foram confiáveis. Eles contam com um conhecimento quase perfeito de cada navegador, sistema operacional e combinação de dispositivos para "adivinhar direito". Mesmo assim, eles são suscetíveis ao spoofing de usuários, por exemplo, os redirecionamentos do site para computador em navegadores para dispositivos móveis costumam ser tão simples quanto o spoofing de uma string de user agent de computador.

Além disso, os navegadores estão trabalhando para congelar as strings do user agent, com strings do user agent para detecção de recursos destacadas especificamente como um motivo da descontinuação. Isso os torna ainda mais duvidosos do que antes para identificar um usuário e um dispositivo.

Conteúdo em primeiro lugar

Outro princípio do design para a Web é: começar com seu conteúdo primeiro. Por exemplo, um código de ações em tempo real com um gráfico dos preços de uma ação é, basicamente, uma tabela de ações com seus preços ao longo de algum tempo, talvez com um link para atualizar o site.

Isso pode ser aprimorado com JavaScript e solicitações de busca para atualizar os valores da tabela em um timer ou aprimorado com soquetes para fornecer atualizações baseadas em push em tempo real. Ele pode ser aprimorado novamente para representar os resultados no gráfico, talvez com CSS, talvez com SVG, talvez com Canvas. Mas o núcleo começa com o conteúdo.

Design intrínseco

  • O celular é uma restrição de foco para a experiência do usuário.
  • Destacar o conteúdo e a funcionalidade principal no processo de design.
  • Aprimorando progressivamente com funcionalidade avançada, quando disponível.

Esses princípios se combinam para nos dar algo novo: o design intrínseco. Na palestra Designing Intrinsic Layouts (em inglês), Jen Simmons fala sobre o uso de ferramentas CSS modernas, como Grid, Flexbox, layout de fluxo e modos de escrita, para projetar e criar interfaces do usuário. Com essas ferramentas, ela diz:

O layout pode ser intrínseco ao conteúdo que temos e ao design que queremos fazer.

Jen Simmons

Esse novo CSS permite que os designers recuperem certo controle sobre o layout, mas de uma maneira que se alinhe com os princípios mais recentes de web design. Em vez de criar formulários fixos com base em tamanhos de tela fixos, você define regras baseadas no conteúdo para definir as propriedades intrínsecas desse conteúdo, como tamanho do texto e espaço disponível, tudo de uma só vez. Eles permitem que você perceba o design conforme ele interage com o conteúdo, sem precisar controlar o posicionamento de cada pixel.

Os layouts intrínsecos proporcionam uma conversa sobre o controle na Web, com definição. O controle na Web não se trata de ditar dispositivos ou tamanhos de tela, cores, fontes, layouts ou recursos para cada visitante do seu site. O controle na Web é sobre escrever as regras que um navegador usará para montar sua experiência, criando-a exclusivamente para cada usuário no seu App Web Progressivo.

Desempenho da Web

A última base, mas não menos importante, para nosso PWA é o desempenho na Web. É obrigatório proporcionar uma boa experiência para os usuários. Isso gera mais conversões de todas as formas possíveis.

O desempenho da Web envolve várias etapas:

  • Entenda as principais métricas centradas no usuário disponíveis.
  • Defina metas para cada métrica.
  • Avalie nosso PWA.
  • Melhorar nossas métricas aplicando técnicas e práticas recomendadas estaticamente no código ou servidor.
  • Medir novamente.
  • Melhore a experiência para cada usuário, ao vivo, com base no contexto do usuário.

Atualmente, as métricas de desempenho da Web avaliam a rapidez com que seu conteúdo aparece na tela, mas também a interação do site e como os usuários percebem a experiência.

Métricas da Web

Durante a última década, lidamos com diferentes métricas para medir o sucesso no desempenho da Web. Atualmente, um conjunto de métricas recomendadas é agrupado no projeto Web Vitals. As Métricas da Web se concentram em três áreas principais que afetam o desempenho e a percepção da Web:

  • Carregando
  • Interativo
  • Estabilidade visual

Um conjunto de métricas das Core Web Vitals mostrando os resultados de desempenho de um site.

Com as Core Web Vitals, é possível conferir rapidamente o desempenho do PWA na Web e na experiência do usuário.

Bases PWA

É importante que seu PWA tenha uma base sólida em design responsivo, dispositivos móveis e tudo primeiro, design intrínseco e desempenho da Web como base para uma ótima experiência para todos os usuários.

Recursos