truques optimização progressiva [fechado]

Question

Há uma verdadeira arte de conceber um site que funciona para todos, e Progressive Enhancement é praticamente um mantra para mim ...

Então, eu estou perguntando, o que são alguns dos melhores truques que você usou para fazer sites de trabalho para todos , independentemente do navegador, sistema operacional, javascript, flash, resolução de tela, pessoas com deficiência a acessibilidade do usuário, etc.?

(eu sei muito sobre JavaScript e navegadores truques, mas vai admitir a ser ignorante sobre flash, etc.)

Editar : Eu realmente não estou falando sobre o 1% dos sites que são RIAs que simplesmente não pode funcionar sem JavaScript ou Flash. Eu não estou pedindo como escrever Google Docs sem js. Eu gostaria de saber o que as pessoas fazem para sites que pode fazer coisas legais, mas não realmente necessidade para.

Eu vou oferecer um par de meu próprio como uma resposta ...

Answer 1

Eu tento mantras EVITAR, exceto o mantra de que o mundo é um lugar confuso.

Eu acho que um monte de funcionalidade de desktop será substituído por funcionalidade web, e que vai ser uma transição complicada que vai acabar com aplicativos reais no browser. aplicativos reais através de JavaScript ou Flash ou Silverlight ou Java ou C # ou Objective-J compilados em JavaScript.

Para mim o único truque é identificar as pessoas e os navegadores que não podem utilmente usam os aplicativos e proporcionando-lhes um conteúdo alternativo.

E isso inclui a detecção móvel e fornecimento do conteúdo apropriado. Existem muitos sites que apenas ficar em pedaços no iPhone porque eles são tão Flash pesado e dependente de monitores de computador de largura.

I não acho que é OK para exigir JavaScript para um site que é um site, mas eu acho que é OK para uma web que é um app. I não acho que é OK para servir apenas 960 páginas de largura. I não acho que é ok para servir vídeos em formato Flash somente.

Answer 2

Alguns dos truques bacanas que eu uso para trabalhar com sites baseados em ajax:

1) Escrever a página inteira e todos os links usando tags um normal que vão para a página direita com javascript desativado, em seguida, "Hijax"-los com base em algo como "rel = externa".

2) Adicione tags noscript com qualquer lugar conteúdo alternativo onde javascript seria de outra forma inserir conteúdo dinâmico.

3) Ocultar elementos que javascript irá controlar a carga DOM com javascript em vez de escondê-los na folha de estilo e mais tarde mostrando -los com javascript desde que o usuário nunca chegar a vê-los se eles tem o javascript off.

Answer 3

Verifique suas estatísticas (ou instalar Google Analytics se você não tem estatísticas) e determinar onde seus usuários estão indo eo que eles estão realmente fazendo.

por exemplo.

1.) Os seus usuários usam constantemente busca, porque eles não conseguem encontrar alguma coisa? Se assim for, talvez você pode fazer o trabalho de busca melhor?

2.) A sua página de 404 fornecer algumas opções rápidas para procurar termos relacionados ou tentar "adivinhar" o que estava procurando?

3.) O seu site tem um mapa do site que fornece acesso rápido a partes significativas do seu site?

4). Se tudo mais falhar, se o usuário tem um meio fácil para contactá-lo / suporte técnico para ajudá-los a encontrar o que precisa?

5.) Não tenho certeza se você algo "vender" em seu site, mas semelhante a quando você chegar ao check-out em qualquer grande tijolos n varejista argamassa ... eles perguntar se você encontrou tudo o que você estava procurando para hoje. Considere fornecer uma opção onde os usuários podem fazer sugestões ... talvez você tem um mercado bateu-un esperando para ser conquistado.

6.) Em usabilidade, certifique-se de navegar seu site no IE (6,7,8), Safari, etc. e verifique se ele funciona em qualquer lugar que você gosta.

7). Há um grande livro chamado " Não me faça pensar ", que é um grande recurso na usabilidade realista. Se você ainda não leu já ... Vai pegar uma cópia.

Além disso, garantir todo o cuidado as outras pequenas coisas são tomadas de ... por exemplo, você fazer bom uso de caching (JS, CSS, imagens)

Answer 4

Normalmente o que eu faço é escrever todo o site sem qualquer javascript. Uma vez que este é funcional, você pode "marcá-lo".

Dito isto, existem alguns bons blocos de partida:

O padrão PRG geralmente é essencial para uma boa acessibilidade.

Você deseja garantir que há um menu habilitados para jumplink perto do início do seu HTML. Se você está inseguro, tente executar o seu site sob links, ou um navegador de texto ou discurso semelhante com base. Se você ficar irritado, assim que seus usuários acessíveis.

Certifique-se de aplicar tags alt às suas imagens apenas quando eles são significativos. É legítimo para dar uma alt imagem = "" quando é apenas para fins de projeto. Da mesma forma, a criação title = "" irá satisfazer os seus usuários do Firefox desejo para dicas pairar sem irritar seus usuários acessíveis.

Hope estas dicas simples ajuda! Acessibilidade é responsabilidade de todos!

Answer 5

Tente fornecer conteúdo fallback ao usar plugins ou outros conteúdos que podem ser difíceis de tornar acessível. Colocando vídeo na página, por exemplo. Se você fosse para ir a maneira HTML5:

<video>
    <source src="video.ogv" type="video/ogg" /><!-- OGG for Mozilla/Opera -->
    <source src="video.mp4" type="video/mp4" /><!-- h.264 for Apple/Google -->
    <object><!-- Fall back to Flash/h.264 for older browsers -->
            <!-- And in the event the UA can't handle any of those, all you can do is provide a link to the media -->
            <p><a href="video.ogv">Download the video</a>.</p>
    </object>
</video>

[Pseudocódigo, mas você começa a idéia]

Para uma solução mais abrangente para esse problema específico, consulte a Vídeo de Kroc Camen para todos .

Answer 6

Progressive Enhancement não é complicado.

Considere as três preocupações principais:

• Conteúdo (HTML)
• Apresentação (CSS)
• Comportamento (JS)

Você começa com o conteúdo e trabalhar o seu caminho através das preocupações certificando-se de que cada nova preocupação não impede o anterior ou tentar imitar outra preocupação; JavaScript não deve ser a geração de conteúdo; CSS não deve ser lidar com o comportamento; HTML não deve ser lidar com apresentação etc etc.

Answer 7

ok, quando se trata de web-site tipo de aplicação, o melhor é, para apoiar sempre uma infinidade de formatos, em uma maneira RESTful ... HTML, XML, JSON, RSS, Atom (onde faz sentido) e por que não outros ... para fazer isso, você precisa de uma arquitetura MVC limpo no servidor ... bem, ele não precisa ser MVC, mas vamos dizer, a camada de renderização deve ser mudo como pão, e uma lógica de negócios bem escrito correndo por baixo ... seu controlador frontend deve escolher o formato certo para retornar em resposta a um pedido e lá vai você ... sua lógica de todo negócio para recuperar / atualização de dados, faça a paginação, etc. é implementada uma vez, e então você só torná-lo em um modelo HTML, ou convertê-lo em JSON, ou fazer tudo .. .

Agora, uma idéia seria, para tornar a implementação de um ponto de vista, que irá retornar rock-solid, semântica e HTML simples ... e fazer um, que vai fortemente usar javascript ... torná-los acessíveis sob diferentes caminhos, e fazer o javascript não rastreável ... colocar uma linha de javascript no início de sua principal HTML-modelo, que irá causar um redirecionamento para a versão javascript do site ... você pode fazer a mesma coisa para o flash, bem como ... etc ... então, na versão "suja" dos aplicativos, você pode fazer realmente qualquer coisa, você como ... modelos de carga por HTTP, e em seguida os dados em JSON, e fazer o processamento no cliente, criando um persistente stateful aplicativo clientside javascript ... por que não?

Eu pessoalmente acho, é melhor, do que começar com agradável e HTML clara, e que encher em toneladas de javascript, que não vai mesmo trabalho para todos os usuários ...

greetz

back2dos