Não há uma tradução literal para Graceful Degradation. O mais próximo seria Degradação Harmoniosa. Não é um termo muito bonito de ficar dizendo por aí. Por isso, vamos utilizar o termo original inglês durante todo o artigo.
Graceful Degradation é algo que vemos todos os dias. Trata-se de um método comum em dias onde a Internet é muito mais que um simples computador ligado no telefone. Acho que resumidamente, podemos dizer o que exatamente é Graceful Degradation com a frase:
Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.
Peter-Paul Koch em Fluid Thinking
Esse assunto é bastante velho, mas que volta à tona nestes dias de campanhas contra o IE6 e outros browsers antigos. Eu mesmo já falei para ignorar totalmente o Internet Explorer 6, mas não é tão fácil assim. Eu posso ignorar aqui no Tableless, onde os usuários são de um nicho específico, mas eu não posso ignorar esse público quando se trata de um produto que é feito para o meu cliente. O cliente do meu cliente utiliza IE6. E ignorá-los significa fazer meu cliente perder dinheiro. Isso está fora de questão.
Então, se seguirmos este raciocínio, pense bem: podemos cometer este erro com outros tipos de usuários. Por exemplo, se seu site não pode ser bem visto em dispositivos móveis ou se não é bem acessado por leitores de tela.
É tudo sobre acessibilidade
Engana-se aquele que acha que acessibilidade é apenas sobre cegos e outras pessoas com alguma necessidade fisica. É claro que esse público merece uma atenção especial, que muitas vezes é tristemente ignorada. Mas quando falamos sobre acessibilidade, temos que entender que há outros grupos que se encaixam nesse assunto.
Quando um visitante não consegue acessar seu site por causa da resolução, ou por meio de algum dispositvo, ou por algum sistema de voz etc, estamos falando de acessibilidade.
Temos que prever visitantes com necessidades diversas. Há pessoas que passam a maior parte do tempo viajando. Por isso é muito difícil ler emails ou trabalhar conectado por notebook ou computador decente. Por isso ela passa a maior parte do tempo utilizando aparelhos móveis. Não por que ela queira, mas por causa da sua necessidade.
Se negligenciarmos o acesso desse tipo de público, cometemos um erro grave de acessibilidade. O mesmo para um simples visitante que não consegue acessar seu website por causa da sua resolução. Ele usa 800×600 porque precisa e não porque quer. Embora haja alguns que nem sabem o que é resolução.
Necessidade. Acessibilidade é tudo sobre a necessidade das pessoas.
Meios de acesso a Internet
Se as pessoas acessam a Internet, elas acessam por meio de um dispositivo especifico. Se ela é cega ou tem algum ou outro problema de visão, ela acessa o site por um leitor de tela. Se ela viaja muito ou fica muito tempo presa no trânsito, utililza dispositivos móveis.
Hoje em dia não existem muitos meios de acesso a Web. Se não acessamos por um computador ou um dispositivo móvel, acessamos com o que?
Outros meios de acesso a Internet estão nascendo. Na verdade novos usos para o acesso a Internet estamos surgindo e com estes novos usos, surgem novos meios de acesso. Vide o Surface da Microsof. É um meio totalmente diferente de interagir com a Web. Mas é um novo meio.
Mas e o Graceful Degradation?
Problemas com compatibilidades sempre existiram e creio que nunca deixarão de existir. Pelo contrário. Esses problemas serão mais comuns embora fiquem mais fáceis de resolver. Não serão apenas probleminhas entre browsers (os browsers existirão em tempos futuros?), mas também entre dispositivos.
Acontece muito hoje: tentamos acessar um serviço por um determinado browser, e somos aconselhados a utilizar outro browser porque o serviço não é compativel ou não funciona bem no nosso browser predileto.
Isso tira qualquer um do sério. O site deveria funcionar em qualquer browser. Para exemplificar: se em um meio de acesso eu não consigo utilizar bordas arredondadas nos elementos, os elementos apareceriam sem as bordas arredondadas. Isso não deveria prejudicar minha experiência de uso. Eu perderia um pouco no Design, mas conseguiria utilizar o serviço sem problemas.
A idéia do Graceful Degradation é exatamente essa: dar a melhor experiência possível ao dispositivo/meio que o usuário estiver utilizando sem prejudicar a acessibilidade.
Os usuários do IE6 por exemplo podem ficar sem bordas arredondas, position fixed, sombras e pngs semi-transparentes, mas eles precisam acessar e utilizar perfeitamente o site, com a melhor experiência que é possivel dar a este browser.
Mesma coisa é aplicada aos dispositivos móveis. Estes dispositivos normalmente não tem os mesmos recursos de um desktop. É tudo diferente, desde o poder de processamente até o tamanho das coisas. Então imaginar que o uso do sistema/site será parecido como se fosse acessado por PC, é um erro.
É um erro também se fizermos um site pensando em dispositivos menos capazes mas não nós lembrarmos do grupo de usuarios que acessam seu site com dispositivos mais completos e modernos. É engraçado porque pensamos sempre no usuário que está no pior cenário. Mas aquele usuário que não seria um problema pra nós, pode se tornar o pior deles.
Um exemplo disso é quando usuários de iphone acessam sites inteiros feitos em Flash. Sabemos que é uma limitação do aparelho. Mas estes usuários estão crescendo e seu cliente pode estar ali. Normalmente ninuem coloca uma versão diferente da do Flash. Logo, estes usuários simplesmente são ignorados. Imagine a frustação.
Resumidamente, Graceful Degradation é dar a melhor experiência que você conseguir para o usuário.
Se ele utiliza o último lançamento da Apple ou se ele utiliza um Nokia 6111 com Opera Mini. Ele precisa ter a melhor experiência que é possível dar dentro dos limites de cada dispositivo.
Obviamente que vice não vai prever todos os tipos de usuário. Mesmo porque seria impossível fazer isso. Novamente eu digo o óbvio: faça um estudo de público-alvo é importante.
Para complementar seu estudo:
- Fault-tolerant System
- Graceful Degradation Dan’s Web Tips
- Graceful Degradation – CSS3.info
- Graceful Degradation Progressive Enhancement
29 Comentários
Leonardo Antonioli 13/04/2009 às 19:47
Acho que Degradação Elegante seria uma boa tradução para Graceful Degradation.
Em um projeto gratuito (www.artejovem.org/cd), limitei no IE6 coisas que você citou (position fixed, bordas arredondadas) e inseri no rodapé um aviso para atualização. Mas coloquei um script para que as PNGs funcionassem… É difícil falar “dane-se”…
E acho que o Graceful Degradation tem muito disso: dizer “dane-se” em vez de coisas mais pesadas, ser mais eufêmico.
Ultimamente tenho pensado muito sobre a resolução de 800×600. Fiz uma média sobre isso: em 6 meses os acesso caíram de 15% para 7%. Rezo para que suma, mas não creio que essa resolução possa desaparecer. Um eeePc tem 800×480, um celular menos. Apesar dos navegadores desses dispositivos serem preparados para essas telas, nem sempre será assim.
Rainer 13/04/2009 às 20:34
Excelente matéria Diego.
http://www.w3.org/WAI/
So faltou esse link aí na lista.
Josenir 13/04/2009 às 22:18
Dar suporte a novos dispositivos (por exemplo) é uma coisa. Outra coisa bem diferente é dispender esforço de desenvolvimento, com mágicas e truques para resolver problemas de produtos que o próprio fabricante não suporta mais (ie6 por exemplo). Podemos fazer, mas é preciso cobrar o preço justo. Não existe lanche grátis. As vezes se perde mais tempo com estes “ajustes” que com o desenvolvimento propriamente dito.
Magno Valdetaro 14/04/2009 às 10:13
Poxa eu uso um 6111 com Opera mini, muito triste, hehehe.
Tenho me preocupado muito com a questão de acessibilidade em todos os sentidos da palavra, especialmente por estar tocando o projeto http://www.blindtube.com.br, é um site “entretenimento” com dedicado principalmente ao público com alguma deficiência, mas é destinado a todos. Com a ideia de conquistar um conteúdo completamente, um artigo como este cai como ótima ajuda para expandir os estudos!
Alberto Kaneto 14/04/2009 às 10:52
Outro dia recebi um email do meu chefe falando que o nosso sistema precisaria suportar este tipo de dispositivo:
http://www.ted.com/index.php/talks/pattie_maes_demos_the_sixth_sense.html
Claro ele falou em tom de brincadeira, mas se adotarmos esse seu pensamento, ficamos mais próximos do possível.
Cristiano M. Gomes 14/04/2009 às 11:00
Há sempre soluções para os problemas através de javascript ou simplesmente abrindo mão de um efeito mais sofisticado em pró da acessibilidade.
Sabemos que um bom marketing ou uma boa campanha publicitária não quer dizer sites complexos dimais, a complexidade varia de acordo com o foco, e se o foco é fazer seu site ser visto em todos os browsers e dispositivos possíveis, então é só prestar um pouquinho de atenção, a w3c ta aí pra ajudar e é só ter força de vontade pois se o problema é ingles então http://www.tableless.com.br
Abraço a todos.
Sobre resolução, acredito que site em 800×600 não quer dizer site pobre em qualidade.
Matheus 14/04/2009 às 11:02
Excelente texto!
Hoje acordei pensando em acessiblidade e quando entro aqui… dou de cara com este ótimo artigo!!!
Desconhecia o termo em questão, contudo a idéia por trás é de conhecimento (e dever de conhecer) de todos.
É refletir e pôr em prática!
Parabéns
Neto 14/04/2009 às 11:42
Um bom exemplo para estudo desse tema, é o site do yahoo, nele se desbalitarmos o flash, o logo tem uma imagem de fundo que substitui muito bem o logo em flash.
E, se desabilitarmos as imagens do site, ainda assim navegaramos no site sem problemas. Parabéns para a equipe de yahoo.
O problema é que o cliente geralmente não quer pagar um pouco a mais por isso. E eu acho que não vale a pena fazer n versões e/ou adaptações por um preço de (literalmente) um site.
Juarez P. A. Filho 14/04/2009 às 12:23
Muito interessante o artigo Diego. Realmente os desenvolvedores devem ter essas preocupações ao criarem sites/aplicações, além disso Designers deveriam estudar mais as limitações que temos nas web com determinados browsers e quando estiverem criando pensarem nisso também.
Temos várias maneiras de resolver algumas peculiaridades, resolução, cores suportadas por monitores, fontes, etc. Mas claro que se ficarmos parados enquanto a web avança estaremos perdendo muito do que ela tem para oferecer.
Espero realmente que a atualização automática para o IE8 acabe com nossos problemas com o IE6 e caso encontremos problemas com o IE8 é só pedir educadamente que ele renderize como se fosse o IE7.
Riosney S. 14/04/2009 às 19:55
Nunca ouvi falar nesse termo, pensava que na questão de aparelhos móveis isso apenas poderia ser apontada como acessibilidade, mas com todas essas especificações deu para compreender bem. Quando der posta detalhes na prática.
Kaleb Martins 14/04/2009 às 23:15
é… teremos muito trabalho pela frente. Bacana o post
Abraços
Sodré 15/04/2009 às 16:13
parabéns pelo artigo, desde o início do meu trabalho com Web sempre me preocupei em tornar acessivel os sites desenvolvidos para todo tipo de usuário. Hoje eu vejo que o trabalho é mais dificil pois como o Diego bem falou temos que nos preocupar com outras formas de navegação e não apenas com os navegadores.
Agora uma coisa que eu realmente nunca tinha aplicado ou pensado é pensar no usuário que tem um equipamento melhor para que ele possa fazer uso dos recursos dele, criar um site que se adeque exatamente para o nivel do usuário seja ele com um equipamento “péba” ou um top de linha.
Thiago Cavalcanti 15/04/2009 às 18:14
Não gosto de criar polêmica, infelizmente este artigo não me deixa opção.
Graceful tem um L só no final, provavelmente o Diego utilizou um tradutor online que não leva em conta erros de digitação e por isso ficou achando que não tinha tradução literal. Tem sim, neste caso o termo pode ser traduzido literalmente sim, como degradação graciosa.
Degradar-se graciosamente significa degradar-se com graça, elegância, etc. como o artigo dele muito bem explicou.
Também faltou falar mais sobre Melhoramento Progressivo (Progressive Enhancement) que só foi citado no título de um dos links no final do artigo.
O melhoramento progressivo tomou o lugar que era da degradação graciosa no desenvolvimento web moderno. A melhor prática atual é melhorar progressivamente do nosso denominador comum (o IE6) para frente e degradar graciosamente daí para trás (IE5.5 e anteriores).
Isto não quer dizer que vocês devam deixar de desenvolver seus sites no Firefox primeiro (exemplo) e passem a partir do IE6 primeiro para os navegadores mais recentes depois. Longe de mim sugerir uma estultice dessas. O que estou dizendo é que devemos fazer nossos projetos tendo desde o começo em mente as limitações do IE6 e adicionar elementos de design e funcionalidade a partir desta base, não fazer com que o site “funcione e pareça +ou- ok” porém mutilado nestes casos.
Pode parecer besteira a primeira vista, mas faz toda a diferença, aliás, isso é muito comum na nossa área não é mesmo?
Tá todo mundo parabenizando eu sei, mas dessa vez acho que é mais por desconhecimento do tema (que é normal, ninguém sabe de tudo) e pela expectativa que quem acessa o Tableless tem de encontrar artigos de muita qualidade, como já é de costume do Diego criar.
O problema aqui é que a competência do Diego traz uma certa responsabilidade junto com ela, por isso que achei que devia fazer este longo comentário. NÃO estou dizendo que o artigo é ruim, longe disso, só estou dizendo que ele não é atual nem tão completo como os que ele costuma postar normalmente.
SEI que vou ler um artigo melhor da próxima vez. Até o próximo Diego!
Márcio Dias - Space Online - Programar, um futuro melhor » Faculdade, revisão prova html 16/04/2009 às 10:34
[...] A experiência de usuário é um dos fatores mais importantes que temos no desenvolvimento de um sit… [...]
Thalis Valle 29/04/2009 às 18:37
Não sou a reencarnação do Pedra 90, mas há controvérsias.
“O cliente do meu cliente utiliza IE6. E ignorá-los significa fazer meu cliente perder dinheiro. Isso está fora de questão.”
Diego, é por isso que você tem investimentos para estudo e trabalho. Você precisa ter clientes para fornecer a sua solução, enfim, sobreviver fazendo o que sabe.
É o mundo capitalista.
Sem falar da globalização “internética”, que é um campo de guerra sob olhar comercial.
Resumindo, seria muito bom se:
Eu não tivesse uma TV e as Casas Bahia me fornecesse uma de graça, porque a Globo precisa lucrar com audiência, e sendo assim, eu faço parte dos telespectadores.
O mundo não funciona assim.
Peterson Souza 01/05/2009 às 16:02
Acho que a cada passo que as tecnologias avançam pelo menos um passo é retrogrado. Digamos que, com a popularização da internet nos mais longínquos lugares do mundo, onde a cultura e costumes são tão diferentes, com o objetivo de criar uma web mais justa para todos fosse criada uma lei de caráter mundial onde os mais famosos navegadores fossem “exterminados”… Desse extermínio surgisse um único navegador elaborado com o que há de melhor em cada um dos atuais navegadores, um trabalho em conjunto dessas empresas para oferecer o melhor o “Best of the Best” dos navegadores… O único.
Não me apedrejem por esse comentário, mas é um sonho…
Imaginem, marcações mais claras e objetivas, CSS bem escritos sem necessidade de hacks pra um ou pra outro navegador. As boas práticas para garantir a acessibilidade 100% em um projeto seriam alcançadas mais diretamente.
BrodocK: Ubuntu e Tecnologia » Blog Archive » Gracefull Degradation, Progressive Enhancement e Fluid Layout 02/05/2009 às 00:09
[...] quem não domina o inglês e gostaria de uma segunda opinião, eu indico um artigo do Diego Eis, do site Tableless, em que faz uma abordagem sobre o mesmo assunto, e por coincidência, encontrei [...]
Saulo B 02/05/2009 às 07:51
Graceful Degradation perde muito da sua força se não for considerada quando o site ainda está na ponta da caneta, mudar um conceito de design no meio do caminho porque ele não se adequa a uma possível limitação é inviável, não compensa ficar adaptando layouts que não são feitos pensando na acessibilidade.
Em meu último trabalho, recebi um layout que tinha 950px de largura. Não compensaria ($$$$) adequar ele para resolução de 800px para que possíveis 7% dos usuários não precisem usar o scroll.
Afinal, as Casas Bahia não dão TV de graça.
Abraços
Campinas 04/05/2009 às 08:54
Muito interessante esta iniciativa e pode vir a ser benéfica para todos com intenções sérias e direcionadas ao conhecimento.
jonathan 05/05/2009 às 13:47
O que hoje é opção e custo em alguns anos vai se tornar regra e necessidade.
Com a popularização dos netbooks, smarthphones e da internet móvel, vai ser muito mais viavel fazer um único visual para todos os aparelhos !
Gracefull Degradation - thaysa.com 10/05/2009 às 10:47
[...] Gracefull Degradation Tags: Acessibilidade, Web Developer You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Emerson 10/05/2009 às 23:06
O estudo do público alvo é importante, usuários ignorados(mesmo que seja uma pequena parcela) é sempre uma grande perda!!!
Ótimo post!!!
acessibilidade.net - Gracefull Degradation é sobre Acessibilidade | Boas práticas de … 13/05/2009 às 08:38
[...] de usuário e para cada tipo de dispositivo é algo que você deve … Veja o post completo clicando aqui. Post indexado de: [...]
acessibilidade.net - Graceful degradation é tudo sobre Acessibilidade 15/05/2009 às 07:23
[...] que muitas vezes é tristemente ignorada. Mas quando falamos sobre … Veja o post completo clicando aqui. Post indexado de: [...]
Carlos Eduardo 18/05/2009 às 15:10
Resumindo, Grafecull Degradation nada mais é do que um conceito que aprendemos quando conhecemos bem os Web Standards e devemos seguí-lo.
Não é nenhuma novidade, é quase uma obrigação não só nossa, pois isso deve vir desde o Arquiteto da Informação, passando pelo Designer e, por fim, no Desenvolvedor.
Usando o SWFObject para adicionar Flash ao seu projeto | bittersweet dev 27/05/2009 às 08:14
[...] Dentre as razões, podemos citar: * Sua página terá um HTML válido * Detecta automaticamente o Flash Player (existem outras soluções para isso, mas todas tem seus problemas) * Remove o incômodo de ter que clicar para ativar o Flash no Internet Explorer * Como é possível ter um conteúdo alternativo para o Flash, melhora a indexação pelos mecanismos de busca * Permite que se tenha uma Graceful Degradation [...]
Clica Aqui » Prepare-se para a Revolução 02/09/2009 às 23:03
[...] Graceful degradation é tudo sobre Acessibilidade [...]
Breve introdução: diversidade dos meios acesso | Boas práticas de Desenvolvimento com Padrões Web 28/09/2009 às 16:58
[...] porque temos que melhorar a experiência de alguns perfis de usuário. Por isso sou a favor do Graceful Degradation e do Progressive [...]
segurança na rede 28/12/2009 às 14:01
Assunto complexo que deve ser discutido novamente.