Melhores práticas para aprimoramento progressivo em web design

O ofício de construir sites é incrivelmente complexo com muitas partes que mudam rapidamente. O objetivo da comunidade de web design é diminuir a complexidade, e reduzir o potencial de erro em cada estágio do processo de criação.

Aprimoramento progressivo é tal ideia em web design que visa reduzir erros e fornecer uma experiência de usuário consistente de maneira geral. O conceito tem sua própria página da Wikipedia, que explica isso como um método de conteúdo totalmente acessível, renderizando recursos aprimorados somente quando suportado pelo navegador.

É fácil entender o aprimoramento progressivo, mas não é tão fácil aplicá-lo diretamente ao seu trabalho de design. Eu gostaria de cobrir alguns melhores práticas para aprimoramento progressivo em projetos do mundo real para ajudar os designers a pensar de forma mais sustentável sobre o fluxo de trabalho.

1. Entendendo o Aprimoramento Progressivo

A teoria do realce progressivo recomenda comece com um site simples que funciona em todos os navegadores, tornando acessível para todos os visitantes. Em seguida, adicione recursos sempre que possível.

Isso é o oposto da degradação graciosa que inclui todos os recursos por padrão, e então degrada quando algo não funciona.

O aprimoramento progressivo é melhor para a experiência geral do usuário, porque em seu carrega apenas elementos necessários. Todo navegador da Web pode suportar texto (e normalmente imagens). Sem qualquer CSS, essa informação ficará sem graça e sem gosto, mas estará acessível.

este Listar Apart artigo argumenta que a melhoria progressiva é content-first com estilos e componentes dinâmicos adicionados posteriormente. Conteúdo em HTML semântico deve ser entregue antes de mais nada.

O CSS avançado e JavaScript que usamos hoje são amplamente suportados, mas se quisermos seguir os princípios do aprimoramento progressivo, eles devem ser considerados luxos.

Aqui está um resumo geral dos principais recursos do aprimoramento progressivo, que você deve levar em consideração:

Marcação Semântica para todo o conteúdo
Comercial' preferências do navegador precisa ser respeitado
Conteúdo e funcionalidade básica devem ser disponível para todos os usuários
JavaScript não intrusivo é carregado apenas em ambientes que podem apoiá-lo

Restrições tecnológicas no desenvolvimento de front-end são determinadas principalmente pela compatibilidade do navegador. O aprimoramento progressivo leva você de volta ao básico, pensando em como página web mais simples pode parecer. De lá, você pode planejar recursos mais avançados, como as propriedades do CSS3.

Mas e os navegadores que não suportam o CSS3 moderno? É aqui que entram sites como o Can I Use. Você deve decidir quais recursos valem a pena implementar e fazer julgamentos com base no público-alvo do seu site.

2. Subsistência nos Stylesheets

A maioria dos navegadores hoje suporta todas as propriedades básicas que você precisa. Mas CSS3 avançado ainda é um problema para usuários legados, e aprimoramento progressivo oferece uma solução.

Em vez de procurar métodos de fallback para manter esses novos recursos, preocupe-se primeiro com estruturas de layout adequadas.

Escreva HTML semântico e marcação CSS que funcione em tantos navegadores ativos quanto possível (o suporte para navegadores antigos como o suporte a IE5 não é necessário).

Tomemos por exemplo este JSFiddle que usa floats com duas barras laterais (.fixo) e uma área de conteúdo fluido (.fluido). Se você excluir todo o CSS e executar novamente o código, você perceberá que tudo se empilha bem com a primeira coluna, depois com o segundo e, finalmente, com o último..

Alguns desenvolvedores prefeririam ter a coluna de conteúdo (.fluido) aparecem primeiro no HTML. É aí que o aprimoramento progressivo entra em ação e soluções CSS alternativas se tornam viáveis.

Os dois principais objetivos do seu HTML são os seguintes:

Totalmente semântico e válido código
UMA experiência consistente para todos

A maneira mais direta de atingir esses objetivos é começar do nada e trabalhar, como a maioria dos defensores do realce progressivo recomendaria.

Se o seu código parece bom com o CSS desativado e ativado, ele oferece uma solução razoável para todos.

Também vale a pena considerar em que ponto você deixa cair o suporte para algo. A Microsoft já abandonou o suporte principal para o IE6, portanto, os usuários que executam esse navegador podem não valer o seu tempo.

Mas ainda há uma grande questão: se um navegador não suporta meu CSS moderno, o que devo fazer?

Você simplesmente escrever código que funcione sem isto, e considere o CSS moderno como um aprimoramento progressivo. Essa é a beleza da metodologia de aprimoramento progressivo.

Você não precisa de substitutos, porque você é basicamente, assumindo que nada é suportado por padrão.

Os métodos de aprimoramento progressivo tratam de tornar o site utilizável mesmo em casos em que algo não é suportado, mas, se ele for suportado, tanto melhor.

Você precisa considerar como o conteúdo realmente flui sem CSS. Por exemplo, quando desabilito o CSS no site do Transmit, o conteúdo continua fluindo organicamente pela página.

Sim, é feio e, sim, parece que perdemos vinte anos de progresso ... mas funciona.

3. Manipulando JavaScript

Vale a pena mencionar que cada problema de JavaScript com o qual você pode se deparar durante o processo de desenvolvimento é complicado e único. Ao criar um novo projeto com aprimoramento progressivo, você deve listar todos os recursos necessários baseados em JS e considerar como eles poderiam operar sem JavaScript.

Isso exigirá muita pesquisa online para encontrar soluções válidas. Aaron Gustafson escreveu um ótimo post com soluções para vários problemas, como substituir o Ajax por uma atualização meta para conteúdo dentro de um iframe..

Além disso, quando você cria guias JavaScript, é uma boa ideia use links de âncora com valores reais de ID. Dessa forma, quando o JavaScript está desativado, você ainda pode ter as guias visíveis e acessíveis pelo valor de âncora. Aaron escreveu outra peça em A List Apart que aborda uma visão geral mais geral de como você deve pensar sobre esses problemas.

Aqui está outro exemplo. Digamos que você tenha um link que carregue conteúdo dinamicamente. o href valor está vazio, porque tudo é carregado via JavaScript com o método preventDefault ().

Em vez disso, seria sensato definir o href propriedade para apontar para uma página diferente onde o conteúdo pode carregar naturalmente, mas o visitante só vê essa página quando o JavaScript está desativado.

O aprimoramento progressivo é mais do que o JavaScript, mas com o desenvolvimento da Web avançando a cada ano, não há dúvida de que o JavaScript desempenha um papel significativo.

Opere sob a suposição de que tudo foi desativado, e escalar a partir daí. Isso pode incluir problemas com widgets incorporados que estão fora de seu controle,