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. Verifique se cada visualização do seu design se concentra apenas no conteúdo e nas interações essenciais.
- Dê ênfase ao conteúdo e à funcionalidade principal no processo de design.
- Melhore progressivamente quando necessário. Comece criando o conteúdo e a funcionalidade principal de um componente com as ferramentas mais simples e mais amplamente disponíveis. Torne-o acessível. Em seguida, teste os recursos avançados que você quer usar e melhore seu componente com eles.
- Ofereça uma experiência do usuário rápida e de qualidade com foco em métricas de desempenho da Web centradas no usuário, obtenha métricas reais do usuário e aumente o desempenho de todos os usuários, independentemente da conexão de rede, tipo de entrada, CPU ou capacidade da GPU.
Ao seguir esses princípios e aprimorar com padrões e recursos da Web modernos, é possível criar experiências rápidas e excelentes com designs realmente intrínsecos. Designs que são otimizados por restrições em vez de pixels, permitindo que cada usuário acesse o conteúdo e a funcionalidade principal da melhor maneira possível para o contexto de navegação específico.
Web design responsivo
Desde o artigo de Ethan Marcotte em 2010, Responsive Web Design (em inglês), designers e desenvolvedores têm sido incentivados a criar experiências flexíveis, fazendo interfaces que funcionem em uma variedade de tamanhos de tela e dispositivos.
No entanto, em algum momento, isso foi abreviado para tamanhos de dispositivos móveis, tablets e computadores, com larguras fortemente influenciadas pelos tamanhos de tela do iOS. Com o CSS moderno e um foco renovado na intenção original do design responsivo, podemos colocar o efeito de compressão de volta em sites com essa característica.
O web design responsivo apresenta 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 a seguir também exige uma maneira diferente de pensar.
O mito do usuário de dispositivos móveis
No início do design responsivo, o nome dos sites era facilitar a criação de sites. Por exemplo, experiências pequenas eram para smartphones e tinham 320 px de largura, experiências médias eram para tablets e tinham 1.024 px de largura e qualquer tamanho maior que isso em computadores. As telas pequenas tinham capacidade de toque, mas as telas grandes não. Os usuários de smartphones estavam apressados e distraídos e, por isso, precisavam de uma experiência "leve".
Nada disso é verdade. São mitos perpetuados pela suposição de que as necessidades de um usuário são fundamentalmente diferentes com base apenas no tamanho da tela ou no tipo de dispositivo. Isso não é suficiente para o escrutínio.
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. Além disso, presumir que eles estão usando um dispositivo móvel devido à largura disponível seria errado.
O mundo das PWA fora da guia do navegador está até mesmo adicionando novos desafios ao mundo do design responsivo, como o modo mini e o trabalho com dispositivos dobráveis.
Modo mini
Com uma PWA instalada em um dispositivo desktop, uma janela pode ficar muito pequena, menor que a janela de um navegador, menor que uma viewport para dispositivos móveis. Isso é algo novo na Web: podemos oferecer suporte a um minimodo, uma janela que pode ser tão pequena quanto 200 x 100 pixels CSS.
Atualmente, ao criar um PWA, é uma boa ideia pensar no 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.
Em computadores, uma PWA pode ser renderizada em uma janela menor do que a menor janela que você já projetou para o navegador. Ele adiciona um novo ponto de interrupção para seu Web design responsivo: o modo mini.
Dobráveis e híbridos
Dispositivos dobráveis e híbridos também são comuns hoje em dia:
- Pequenos smartphones dobráveis.
- 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 smartphones podem ser convertidos em computadores com um hub.
O desafio existe para todos os sites, mas, com um app da Web progressivo, você tem controle e é responsável pela janela quando o app é instalado. Portanto, seu design precisa reagir e oferecer a melhor experiência em todos os contextos.
Tudo em primeiro lugar
Mas por onde começar? Priorizar dispositivos móveis, conteúdo ou dispositivos off-line? Ao projetar pensando na flexibilidade da Web, qual é o caso? A resposta é sim, tudo primeiro. O termo prioridade para dispositivos móveis foi interpretado de muitas maneiras desde que Luke Wroblewski o criou pela primeira vez em 2009: de emular padrões de IU e UX específicos da plataforma na Web para criar apps para dispositivos móveis antes de criar apps da Web para usar consultas de mídia de largura mínima e encerrar o dia. No entanto, a intenção original é esta: o dispositivo móvel força você a se concentrar. Como Luke disse:
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 para elementos irrelevantes e desnecessários em uma tela de 320 por 480 pixels. Você precisa priorizar. Assim, quando uma equipe projeta o design mobile-first, o resultado é uma experiência focada nas principais tarefas que os usuários querem realizar sem os desvios e a interface de lixo que enchem os sites acessados por computadores. Isso é uma boa experiência para o usuário e bom para os negócios.
Luke Wroblewski
Concentre cada visualização do site apenas nas tarefas essenciais que o usuário quer realizar e não adicione mais coisas à ideia só porque eles têm mais espaço na tela.
O segundo princípio é sugerido em Design responsivo da Web: o "gradiente de experiências diferentes". Uma experiência única, idêntica e perfeita para cada usuário não deve ser o objetivo do seu trabalho. Isso é quase impossível.
Em vez de pensar nas suas experiências da Web como algo fixo, pense nelas como um conjunto de recomendações que o dispositivo do usuário vai usar para criar a melhor experiência para o contexto atual. Para isso, é preciso adotar o aprimoramento progressivo.
Aprimoramento progressivo
O aprimoramento progressivo é um padrão que permite escrever código que é executado em qualquer lugar, começando com HTML, CSS e JavaScript padrão e adicionando camadas de recursos com substitutos adequados quando uma API não está disponível.
Como você melhora? A detecção de recursos é um padrão em que você realiza um teste de suporte e reage com base nos resultados desse teste. Há várias ferramentas e práticas integradas da plataforma da Web para fazer isso.
Usando @supports, verifique o suporte do navegador a um recurso do CSS e aplique regras com base no resultado.
Isso se aplica a propriedades e valores CSS. Se uma propriedade tiver suporte e um valor não tiver, a propriedade vai falhar, assim como uma propriedade sem suporte. O código JavaScript pode acessar isso pelo CSSSupportsRule.
A maioria dos novos recursos da plataforma da Web é anexada a objetos existentes. Portanto, "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 enviar JavaScript moderno, use o padrão module/nomodule e ofereça recursos mais robustos com um payload menor para navegadores mais modernos e uma experiência de fallback para navegadores mais antigos. Isso tem o bônus de garantir uma nova referência de recursos do JavaScript, como promessas, classes, funções de seta e const e let, disponíveis para navegadores com suporte a módulos ES.
Você pode até combinar várias formas de detecção de recursos para criar sua referência aprimorada. Criada pela equipe de notícias da BBC, essa estratégia é chamada de "Cutting the Mustard" (algo como "Acertar o alvo", em tradução livre) e permite que você envie uma experiência principal para todos e comece a melhorar a experiência somente depois que uma barra específica de recursos detectados for alcançada.
Evitar a detecção do dispositivo
Teste diretamente o suporte a recursos em vez de fazer suposições de suporte com base na string User-Agent.
As strings do user agent nunca foram totalmente confiáveis. Eles contam com um conhecimento quase perfeito de cada navegador, sistema operacional e combinação de dispositivos existentes para "adivinhar corretamente". Mesmo assim, eles são suscetíveis ao spoofing do usuário. Por exemplo, os redirecionamentos do site para computador em navegadores para dispositivos móveis costumam ser tão simples quanto falsificar uma string do user agent do computador.
Além disso, os navegadores estão trabalhando para congelar as strings do User-Agent, com strings do User-Agent para a detecção de recursos especificamente mencionadas como um motivo para a descontinuação, tornando-as ainda mais confiáveis do que antes para identificar um usuário e um dispositivo.
Conteúdo em primeiro lugar
Outro princípio do design para a Web é: comece pelo seu conteúdo em primeiro lugar. Por exemplo, um mostrador de ações em tempo real com um gráfico dos preços de uma ação é, em sua essência, 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 temporizador ou aprimorado com soquetes para fornecer atualizações push em tempo real. Ele pode ser aprimorado novamente para representar os resultados em um gráfico, talvez com CSS, SVG ou Canvas. Mas o núcleo começa com o conteúdo.
Design intrínseco
- Os dispositivos móveis são uma restrição de foco para a experiência do usuário.
- Enfatiza o conteúdo e a funcionalidade principal no processo de design.
- Melhorias progressivas com recursos avançados, quando disponíveis.
Esses princípios se combinam para nos dar algo novo: o design intrínseco. Em sua palestra Designing Intrinsic Layouts, Jen Simmons fala sobre o uso de ferramentas modernas do CSS, como Grid, Flexbox, layout de fluxo e modos de gravação, para projetar e criar interfaces do usuário. Com essas ferramentas, ela diz:
Você pode fazer com que o layout seja intrínseco ao conteúdo que temos e ao design que queremos fazer.
Jen Simmons
Esse novo CSS permite que os designers recuperem algum controle sobre o layout, mas façam isso alinhado 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 com base no conteúdo, que determinam o layout, usando propriedades intrínsecas desse conteúdo, como o tamanho do texto e o espaço disponível, tudo de uma vez. Eles permitem que você perceba o design à medida que ele interage com o conteúdo sem precisar controlar o posicionamento de cada pixel.
Os layouts intrínsecos levam a conversa sobre controle na Web, dar definição a ela. O controle na Web não se trata de ditar dispositivos, 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 vai usar para montar sua experiência, criando-a de forma exclusiva para cada usuário no seu app da Web progressivo.
Desempenho da Web
A última, mas não menos importante, base para nossa PWA é a performance da Web. É obrigatório oferecer uma ótima experiência aos usuários, porque isso vai gerar 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 de forma estática no código ou servidor.
- Meça de novo.
- Melhore a experiência de cada usuário em tempo real com base no contexto dele.
Atualmente, as métricas de desempenho da Web medem a velocidade com que seu conteúdo aparece na tela, mas também a interação do seu site e como os usuários percebem a experiência.
Core Web Vitals
Durante a última década, lidamos com diferentes métricas para medir o sucesso na performance da Web. Hoje, um conjunto de métricas recomendadas, conhecidas como Principais métricas da Web, se concentra em três áreas principais que afetam a performance e a experiência do usuário:
- Carregamento: representado pela maior exibição de conteúdo (LCP).
- Interatividade: representada pela Interaction to Next Paint (INP).
- Estabilidade visual: representada pela Cumulative Layout Shift (CLS).
Com as Core Web Vitals, você pode conferir rapidamente o desempenho e a experiência do usuário da sua PWA.
Conceitos básicos de PWA
É importante que sua PWA tenha uma base sólida em design responsivo, priorização de dispositivos móveis e tudo mais, design intrínseco e desempenho da Web como base para uma ótima experiência para todos os usuários.