Tableless - Desenvolvimento inteligente com Padrões Web

11/12/2007
Artigos

Quem precisa de versão mobile?

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. …

Por


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:

  1. 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!
  2. 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.
  3. 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.
  4. 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.

Por Elcio Ferreira

http://elcio.com.br/

Veja os outros posts de

  • Thiago Henrique

    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!

  • http://blog.klaus.pro.br/ Klaus Paiva

    @Thiago,
    para fazer testes, dê uma olhada neste artigo:
    http://www.3point7designs.com/blog/2007/01/08/ways-to-test-your-site-for-the-mobile-web/

    []‘s

  • Dirceu Bimonti

    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.

  • http://blog.ipe.srv.br Nicholas Bittencourt

    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.

  • http://blog.eucrio.com Helder Santana

    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.

  • http://www.pabloalmeida.net Pablo Almeida

    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”!

  • http://elcio.com.br/ Elcio Ferreira

    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.

  • http://www.web2ponto0.com.br Inside

    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

  • http://rafaelmarin.net Rafael Marin

    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!

  • http://sergioflima.pro.br/blog/blogs Sérgio F. Lima

    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

  • Raphael Cardoso

    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

  • http://www.s3web.com.br Eduardo Penna

    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

  • http://www.cosmefae.com/blog/ Cosme

    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.

  • http://www.mundoestranho.net Wilerson

    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.

  • http://www.thaysa.com Thaysa Wandeur

    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!

  • http://www.frogs.com.br Alexandre

    pelo amor de Deus, troca o fundo cinza com a fonte em branco…

  • http://www.gargantas.org KveRa

    Eu gostei do fundo cinza com a fonte em branco :P

  • Wendel

    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.

  • http://www.iesart.com Jeison Frasson

    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

  • http://www.sadjow.com Sadjow

    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.

  • Isaias Alexandre

    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

  • http://www.rafaeldohms.com.br Rafael Dohms

    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 :D

  • http://openjobs.com.br Eduardo Sasso

    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

  • Pingback: Vignette versus Wordpress | Netlus

  • http://project47.viscountbox.com/ Carlos Eduardo

    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.

  • Pingback: » Browsers para Mobile - Nova era - Tableless - Desenvolvimento com Padrões Web

  • Pingback: Browsers para Mobile - Nova era | Tomás Vásquez - Blog

  • http://www.nextgti.com Eduardo Faria

    As vezes as pessoas só querem fazer um mobile site só para dizer que tem, mas algumas empresas realmente necessitam dos benefícios trazidos pelos sistemas portáteis…

  • Humberto

    Não concordo com esse artigo. Questão de padrões web. Achei esse artigo justamente porque estava em busca de como desenvolver para celular. Fiz um sitezinho simples, que deve ser exclusivamente para celular, e eu achando que estava tudo bem testei apenas no Opera, Firefox, Safari e Internet Explorer 6, e estava tudo funcionando perfeitamente. Mas quando fui para o celular, no famoso windows mobile, nada funcionou corretamente. quebrou o tão trabalhado layout webstandard com css perfeito e xhtml que fiz. simples. Poucas linhas. E o resultado é que tive que reduzir a quantidade de linhas até cercar o problema, o que nao consegui ainda. O certo é que nem mesmo o Famoso Opera Mobile consegue renderizar um simples elemento como div, corretamente. e o javascript? o Ie mobile não reconhece nem mesmo eventos como onload. E a renderização dos dois é um lixo. o único que foi melhorzinho foi o chrome mobile que apresentou algum resultado até para css 3, mas não perfeito. Será que vocês escreveram baseados em testes, ou em coisas que outras pessoas disseram? O simulador da Opera para mini, não funciona sequer com css. É uma tristeza. Então, não tenho que fazer uma versão só pra mobile?

    é melhor sentar que lá vem um caminhão de desculpas.