Parece ser um erro comum dos novatos criar versões diferentes do mesmo site.
O ano era 1997. Eu e e todo mundo que eu conhecia usávamos Netscape Navigator. Foi o ano em que, pela primeira vez, fiz um site sozinho. Tudo, atendi o cliente, preparei textos, fotos, fiz o layout, se é que se pode chamar aquilo de layout, criei uma conta no Geocities e publiquei. Em seguida entrei no Yahoo! e cadastrei o site, para que aparecesse nas buscas.
Depois de alguns dias recebi um e-mail do Yahoo! dizendo que o site não poderia ser publicado no diretório porque não funcionava no Internet Explorer. Sim, cavalheiros, era política do Yahoo! só publicar em seu diretório sites que funcionassem bem nos dois navegadores. Como eu resolvi? Criei duas versões do site, uma para cada navegador, e um Javascript que selecionava a versão de acordo com o navegador do usuário.
Mas eu não fiquei satisfeito. Fazer duas versões do site dava um bocado de trabalho. Manter as duas versões dava mais trabalho ainda. E se houvesse mais um navegador relevante? Eu não queria ter três ou quatro versões de cada site que desenvolvesse. Parece que muito mais gente tinha o mesmo sentimento que eu. Gente muito mais talentosa e importante do que eu. Gente como o pessoal que criou o projeto Web Standards.
Você não imagina como eu fiquei feliz quando, no final do século passado, ao estudar os Padrões Web, percebi que não precisava de duas versões de cada site. Eu hoje uso Opera, Firefox e Konqueror. E esporadicamente, Flock, Safari, Epiphany e Galeon. E ainda preciso testar meus sites no Internet Explorer. Esta é uma das grandes vantagens dos padrões, seu site, uma única versão, funcionando em todo lugar.
Bom, talvez eu me preocupe com navegadores demais. Quem sabe é alguma paranóia minha. Talvez para você seja importante apenas que o site funcione no IE e no Firefox. Mas geralmente não dá nenhum trabalho fazê-lo funcionar nesses navegadores todos. Agora, dê uma olhada no mundo da mobilidade. Você vai construir uma versão para cada navegador? Que tal se simplesmente não construísse versão nenhuma?
Ora, os padrões web surgiram justamente para isso, para que seu site, a única versão, funcione em qualquer lugar. Naturalmente, há sites e aplicações online, por exemplo aquelas cuja experiência de uso depende fortemente de Ajax, que realmente merecem uma versão em HTML simples, acessível via dispositivos móveis e outros dispositivos e cenários de uso. Mas a maioria, a esmagadora maioria dos sites não precisa de uma versão mobile. Basta que o site seja bem feito, vai funcionar no mobile.
Existe porém um mito sendo difundido por aí de que as pessoas precisam de uma versão mobile de seus sites. Há uma febre de versão mobile por aí! Então, vamos deixar claro quais são as opções que temos em relação à acessibilidade de um site em dispositivos móveis:
- Ter um site que simplesmente funcione: um site bem feito, nos padrões web, vai funcionar bem no celular. É a estratégia mais simples, mais barata, e os resultados são fantásticos!
- Ter um CSS para dispositivos móveis: essa é a melhor estratégia. Você continua tendo uma única versão do site para manter. Mas oferece um layout trabalhado especialmente para dispositivos móveis que suportem bem CSS. Ou seja, dá só um pouquinho de trabalho em relação à primeira estratégia, oferece os mesmos resultados para navegadores sem CSS, e dão um conforto a mais para usuários de bons navegadores mobile.
- Ter uma versão do site específica para mobile: vai te dar um trabalho desgraçado. Mas, ás vezes, simplesmente não tem jeito. É o caso de aplicações como o Twitter e o Google Reader. Aplicações Ajax, sites que dependem de um plugin específico ou aqueles cuja quantidade de conteúdo torna o uso muito desconfortável no mobile são potenciais candidatos a uma segunda versão. Uma abordagem semelhante é aquela que oferece uma versão “HTML simples”, que vai funcionar no mobile, no leitor de telas e etc.
- Não se importar: é a estratégia de boa parte dos sites hoje. Não é irônico perceber que sites de operadoras de telefonia móvel não funcionam em seus próprios celulares?
Se você não tiver nenhum motivo muito bom para fazer diferente, fique num dos dois primeiros níveis. Você vai ter muito menos trabalho, e todo mundo vai poder acessar seu site. Da próxima vez que pensar em acessibilidade para dispositivos móveis, lembre-se: muito provavelmente você não precisa de uma versão mobile.
Os mesmos quatro níveis podem ser aplicados a praticamente qualquer cenário de uso. Por exemplo, impressão ou leitores de tela. Você pode fazer um site nos padrões e isso vai funcionar de maneira razoável. Pode escrever CSS ou pequenas adições em seu HTML para melhorar a experiência nesses cenários de uso. Pode, se não tiver outro jeito mesmo, fazer a indesejável segunda versão. Ou pode ignorar seus usuários.
Se ainda estiver interessado, leia também:
Este post foi criado
na Terça-feira, Dezembro 11th, 2007 às 22:21 e está arquivado em Artigos, Browsers, Internet Móvel, Tecnologia e Tendências.
Você pode seguir as atualizações pelo feed: RSS 2.0.
Você pode deixar um comentário, ou deixar um trackback de seu próprio site.
Parabéns pelo artigo! Ultimamente este asusnto de mobile estava me preocupando.
Gostaria de saber se alguem conhece algum browser ou aplicação onde poderíamos testar versoes de css proprias para mobile, pois como eu muita gente não tem celular com um browser relativamente bom para navegar.
valeu!
O Adobe Dreamweaver CS3 vem acompanhado do Adobe Device Central CS3, que é um programa com diversos modelos de parelhos (basicamente celulares e smart phones), onde é possível testar seus sites. Não sei a fidelidade com os aparelhos reais. No que eu tenho parece ser fiel pelo menos.
Para palms, você consegue alguns emuladores junto com SDKs. O parceiro do Tableless, Mundo Mobile, disponibiliza um artigo sobre isso.
Existe um plugin para o Firefox, chamado Web Developer Toolbar, que permite voce alterar exibição a página para um dispositivo como impressora ou handheld.
Dirceu, eu acho interessante a idéia do Device Central, mas eu fico com os emuladores, pois Device leva um tempo para ser atualizado e é cobrado junto ao Dreamweaver.
Abraço.
As versões móveis são realmente intrigantes e vão gerar discussões por muito tempo até se estabelecer no mercado brasileiro. Como todos nós aqui sabemos, para se acessar a internet no país ainda está caro…
Penso que ainda é questão de necessidade! Muita gente usa aplicações móveis para fazer contatos urgentes, ver e-mails e coisas desse gênero. Acho muito raro que alguém use o celular para ficar lendo artigos, notícias, etc…
Vamos aguardar e ver o que nos espera, mas estudando webstandards e criando maturidade para quando essa época virar uma “febre consciente”!
Pablo,
O preço está caindo significativamente. O plano de 512Mbps da Claro, sem limite de banda, custa R$ 70/mês, por exemplo.
Eu passo mais tempo navegando no celular do que vendo TV, por exemplo. E se continuar no ritmo em que estou indo, logo o tempo vai empatar com o que passo no computador.
Sim Elcio, você passa muito tempo.
Mas uma pessoa “normal” (não que você seja anormal), passa bem menos tempo.
Mas concordo com a importância de fazer os sites funcionarem pra qualquer pessoa, de qualquer jeito que ela o acesse.
[]’s
Lamento discordar, Inside, mas em termos de Web nada é “normal”. Eu, como desenvolvedor, não sou uma pessoa normal. Você, como desenvolvedor, não é também. E o Elcio também não é normal.
Os sites geralmente são desenvolvidos de acordo com um público-alvo, e de acordo com as tecnologias que cada grupo desse público tem condições de possuir.
Por exemplo: provavelmente o site da quitanda da esquina não vai fazer um site tridimensional com o Silverlight, pois provavemente o público-alvo (os moradores do bairro, talvez) sequer saibam o que é Silverlight e muito menos como baixá-lo.
Sabendo da tamanha disparidade, da gigantesca diversidade de conexões, browsers, dispositivos e, dificuldades físicas, versões de software, plug-ins, e etc, os padrões Web tentam amenizar essas diferenças, fazendo com o que, além de tudo, o desenvolvedor não precise se preocupar (tanto) com essas diferenças.
O X da questão é que nada e ninguém é normal na Web, e são os nossos sites que devem ser feitos de tal maneira que consigam se adaptar a quaisquer circunstâncias, sejam elas conhecidas ou não, pois justamente nada é normal e nem pode ser generalizado quando se fala em Web.
Digo isso de maneira bastante específica; mas é claro que certas generalizações podem ser feitas como, por exemplo, um “público-alvo” (se bem que os sites estão disponíveis para qualquer um, basta dar um clique).
Excelente artigo, Elcio!
Eu sou um leigo em desenvolvimento web. Sou usuário final que navega com uma certa frequência… daí minha pergunta o uso de um css para os mobile não resolve o problema da quantidade de dados trafegados… e isso faz muita diferença!
Prefiro quando existe uma versão mobilizada do sítio! Com imagens mais leves e mesmo menos texto e menos navegação.
Obviamente que, do ponto de vista do desenvolvedor isto é tudo de ruim 
[]’s
e infelizmente nao e o que acontece no vosso site. tentei acessar do meu hp ipaq e nao foi muito agradavel o resultado. aguardamos resultados futuros. abraco
Voltando a questão levantada pelo Elcio, concordo que o custo para manter acesso web para mobiles está cainda cada vez mais, mas ainda acho que não será um serviço amplamente utilizado.
Por outro lado, a maioria dos mobile que estão saindo, vem com wi-fi e quantidade de estabelecimentos que disponibilizam o acesso gratuito (hotspot, é o termo?) aumenta muito. Tenho em meu home office um desktop, um note e um celular nokia com wi-fi, os dois bares que mais frequento possuem acesso e em muitos outros lugares, quase sempre tem uma rede aberta.
Finalizando, esse acho que é o principal meio/motivo que garante a necessidade de manter o seu web site funcional para mobiles.
Abraço
Quando eu tirar um tempinho farei uns testes com CSS Mobile para ver o que dá.
É uma extensão interessante entre o assunto (Web Standards) que já está se expandindo muito.
A questão é que ultimamente existem MUITOS dispositivos que acessam a internet. Outro dia, eu estava com meu PSP em um lugar com acesso à Internet, fui postar no Twitter e descobri que o botãozinho de Update não funciona no browser do PSP. Então, pensemos no número de browsers que temos hoje em dia.
Olá, para começar, esse não é um comentário e sim um toque para vocês…
Abri o site de vocês em diferentes browsers e percebi um problema sério de Overflow na Home!
Só um toque!
Té mais!
pelo amor de Deus, troca o fundo cinza com a fonte em branco…
Eu gostei do fundo cinza com a fonte em branco 
Eu tb gostei do fundo cinza com letras brancas. Se está muito ruim pra vc, procure calibrar as cores do seu monitor. pode ser que esteja mostrando cores erradas.
Abraços.
bom os padrões existem nos usamos mas…
se os proprios browsers respeitessem esses era ótimo, ainda bem que o IE 8 ta no caminho certo,
porque padding não influenciar no tamanho de algo (div) quebra as pernas né XD
Geralmente quem ta acessando via mobile, são pessoas que querem informação rápida.
Acho que o conteúdo via mobile tem que ser o mais acessível possível.
Olá galera, no topo dos posts percebi que um colega havia questionado versões de browsers para testar as aplicações Mobile.
Já utilizei o Device Central da Adobe, que usa a engine do Opera, ainda acho q naum retrata a realidade, pois tdo fica muito perfeito nele, apenas com as dimensões reduzidas.
Usei o modo SSR, da uma boa noção do resultado em um mobile.
Ainda naum satisfeito, fiz algumas pesquisas e consegui otimas ferramentas para emular meu XHTML MP e CSS, visitei o http://www.forum.nokia.com/main/resources/tools_and_sdks/index.html e peguei alguns SDKS das Series 40 e 60.
Considero uma dica quente para quem esta começando a implementar para dispositivos moveis, uma vez q a nokia é detentora de boa parte dos aparelhinhos que bolam pelo mundo.
Atualmente trabalho em um projeto mobile para o partido Democratas 25, seria legal trocar uma ideias com vcs. deixo ai meu email: moa.isaias@gmail.com
Sou usuário de navegador mobile… e oa meu ver a preocupação com o mundo mobile não é “ficar bonito” ou funcionar..
Ao abrir alguns sites que não possuem versão mobile o grande problema no qual eu esbarro é a mensagem “não há memoria suficiente”
A maioria dos navegadores mobiles podem abrir uma página como o firefox abre, mas o aparelho esbarra na memora RAM que é limitadissima.. e ai sim.. carregue o site de flash e imagens… e já era seu cliente mobile.
Sites simples, limpos e onde as imagens são carregadas no CSS, bastam mesmo ter o CSS alternativo que você indicou, e pronto, instant-mobile 
Adorei o momento nostalgia, isso me lembrou também do primeiro website que fiz mais ou menos nessa mesma epoca 96/97
Essa eh para os saudosistas 
to falando do wayback machine, eh so colocar a URL de um site e esperar pra ver suas versoes no passado, bem divertido
http://www.archive.org/web/web.php
[…] terá de se despir de todos os seus valores caso vá trabalhar com esse elefante branco (que o diga Diego Eis, que assim também trata o Vignette). Diferente do Wordpress, os padrões web passam longe dali e o […]
Interessante este ponto de vista.
Realmente o princípio dos Web Standards é justamente eliminar essa necessidade de fazer um site para cada browser, dispositivo… Mas ainda bem que o CSS nos possibilita exibir o site da maneira desejada, sem ter que fazer um site novo!
Acho importante termos o cuidado com a versão mobile, por exemplo, fazendo com que só o conteúdo relevante apareça na tela do usuário, pois quem navega com celular, por exemplo, precisa da informação da maneira mais fácil e rápida que puder. O CSS pode ajudar (e muito) nisso.
[…] e enquanto me adaptava à navegação do aparelho, muitas perguntas surgiram, uma delas foi a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser de […]
[…] um pouco pelo Safari do iPhone, e enquanto me adaptava, me perguntava várias vezes sobre a real necessidade de haver uma versão para mobiles. O iPhone tem uma maneira diferente de tratar os sites. Ele renderiza como se fosse um browser para […]