Você se lembra da Internet por volta de 1997? As páginas foram projetadas para monitores CRT de baixa resolução e modems lentos. O texto dominava a Web, e imagens ocasionais em JPEG e GIF decoravam páginas aqui e ali. Na maioria das vezes não os víamos, já que desligar as imagens era uma maneira segura de obter um pouco mais de velocidade de um modem dial-up. Mais de uma década depois, todo o cenário da Internet mudou. A Internet de banda larga via cabo e conexões DSL é o padrão no mundo desenvolvido, e as páginas da Web podem usar elementos mais complexos – toneladas de imagens, efeitos de transparência e até vídeo – para fornecer conteúdo. Podemos até transmitir filmes inteiros da Internet para nossos computadores sem esperar o download dos arquivos!
Por maior que tenha sido a mudança para monitores de maior resolução, velocidades de banda larga e opções gráficas sofisticadas, uma segunda tendência teve um grande impacto na World Wide Web tal como existe hoje. À medida que a tecnologia telefónica se tornou mais avançada e menos dispendiosa, os smartphones tornaram-se parte integrante da experiência na Internet. Os dispositivos móveis representam uma porta de entrada fundamental para a Web para milhões e milhões de usuários que não possuem PCs. Por exemplo, na Índia, o uso do popular navegador Opera Mini cresceu 300% entre março de 2010 e março de 2011. Em muitas partes do mundo, a janela para a Internet não está num monitor de 23 polegadas. Está na tela de um telefone de 3 polegadas. Mesmo telefones “burros” baratos, sem telas sensíveis ao toque ou hardware poderoso, podem navegar na Web.
Entre no site móvel. Como a popularidade do uso da Internet móvel chegou lado a lado com o serviço de Internet de alta velocidade e hardware de computador mais poderoso, os desenvolvedores de conteúdo on-line enfrentam um desafio único. Sites projetados para monitores grandes, computadores rápidos e Internet rápida dependem fortemente de gráficos e programação de ponta que nem sempre funcionam em telas menores e redes mais lentas de dispositivos móveis. A solução está em sites móveis – páginas especificamente adaptadas para funcionar em dispositivos menores e fornecer conteúdo importante, ao mesmo tempo em que reduzem os gráficos que retardam o carregamento da página. Embora os sites para dispositivos móveis sejam intencionalmente mais simples que os sites completos, isso não significa que sejam fáceis de construir. Os sites móveis ainda exigem atenção ao design e à tecnologia, e as limitações estritas do hardware móvel não tornam as coisas mais fáceis.
Por que sites para celular precisam de considerações especiais de design
A transição de um navegador de desktop para um navegador móvel não envolve apenas diminuir a tela. Trata-se de eliminar o ruído. Ao criar um site móvel, você não está apenas tornando as coisas menores. Você está repensando o que importa.
Os usuários de desktop esperam um toque visual. Eles têm largura de banda e contagem de pixels para lidar com isso. Usuários móveis? Nem tanto. Um usuário com uma conexão 3G em uma área rural não está esperando o carregamento de uma imagem principal. Eles querem o texto. Eles querem os dados. Se você forçar uma experiência de desktop em um dispositivo móvel, não estará sendo inovador. Você está sendo um obstáculo.
Isso cria um problema específico para os desenvolvedores. Como você equilibra a necessidade de conteúdo rico com a realidade de recursos limitados?
As principais restrições do web design para dispositivos móveis:
- O espaço da tela é escasso. Uma tela de 3 polegadas não pode exibir o mesmo layout que um monitor de 23 polegadas. A navegação deve ser intuitiva e não extensa.
- A potência do hardware varia muito. Embora os smartphones tenham se tornado poderosos, ainda existem telefones básicos. O código que funciona perfeitamente em um iPhone pode engasgar em um dispositivo Android básico ou em um feature phone.
- A instabilidade da rede é a norma, não a exceção. Ao contrário da conexão de banda larga estável em casa, as redes móveis flutuam. Ativos pesados eliminam os tempos de carregamento.
É uma caminhada na corda bamba. Você cortou demais e o site parece quebrado. Você guarda demais e carrega como se fosse 1998 de novo.
“Os sites móveis são intencionalmente mais simples que os sites completos, o que não significa que sejam fáceis de construir.”
Não se trata
Screen Real Estate dita o design
Tudo se resume a polegadas quadradas. Ou melhor, a falta deles.
Mesmo as maiores telas de smartphones – aquelas que excedem 10,2 cm na diagonal – parecem selos postais ao lado de um monitor de desktop. Os números de resolução podem aumentar, mas a física não mente. Uma contagem alta de pixels em uma tela pequena ainda não consegue mostrar um site completo de forma legível. Você acaba apertando para aumentar o zoom, lutando contra layouts de várias colunas que transformam a navegação em um jogo de acertar uma toupeira.
Um bom web design para celular não significa reduzir um site para desktop. Trata-se de começar de novo com layouts de coluna única.
Isso significa condensar tudo em um fluxo vertical. Você reorganiza os links de navegação. Você remove o lixo decorativo. Você estreita a coluna principal para caber na largura real do telefone. A maioria dos monitores são retângulos largos. Telefones? São tiras altas. Claro, você pode girar o dispositivo para o modo paisagem, mas a experiência padrão é retrato. Projete primeiro a faixa estreita.
Depois, há o problema do método de entrada.
Os navegadores de desktop dependem do mouse. Passe o mouse sobre um menu e um menu suspenso aparecerá. Tente isso com o polegar. Não funciona. O design da Web móvel exige repensar esses “estados de passagem do mouse”. Os menus precisam ser tocados, não pairados. Os botões precisam ser grandes o suficiente para um dedo, não para um cursor preciso. Se o seu site depende de efeitos de foco, ele já está quebrado no celular.
O pesadelo da fragmentação de dispositivos
Construir para desktop já é bastante difícil. Você tem acessos de Internet Explorer, Firefox fazendo seu trabalho e Chrome consumindo toda a RAM. Mas móvel? É uma fera completamente diferente.
A variedade de hardware é impressionante. Por um lado, você tem telefones “burros” com telas minúsculas de baixa resolução e navegadores básicos. Por outro lado, você tem smartphones com telas sensíveis ao toque nítidas e de alta resolução e processadores poderosos.
Um tamanho não serve para todos. Às vezes, você precisa de interfaces separadas.
Veja o Facebook. Ele não serve apenas o mesmo HTML para todos. Ele detecta qual dispositivo você está usando. Se você estiver em um iPhone ou Android, terá uma experiência personalizada otimizada para aquela tela e capacidade específicas do navegador. Se você estiver em um feature phone, terá uma versão mais leve.
Um site para celular não é suficiente. Você precisa projetar para o dispositivo, não apenas para o navegador.
Essa lógica de detecção é a ponte entre o usuário e a interface correta. É a tecnologia que torna o design possível.
Mais inteligente, não mais simples
Simplificar a interface não significa emburrecer a experiência. Na verdade, o celular pode ser mais poderoso que o desktop para tarefas específicas.
Os smartphones possuem hardware que falta aos PCs. Câmeras. GPS. Acelerômetros.
Os códigos QR são um exemplo perfeito. Aponte sua câmera para um código e ele abrirá instantaneamente um site ou baixará um aplicativo. Sem digitação de URLs. Sem pesquisa. Basta digitalizar e pronto.
Os mapas são vinculados a dados de GPS para fornecer rotas em tempo real ou recomendações de restaurantes com base na sua localização exata. Este não é apenas “um site menor”. É um utilitário diferente.
A criação de um site móvel eficiente exige um uso inteligente dessa tecnologia de back-end. Não se trata apenas de CSS e HTML. Trata-se de aproveitar o próprio dispositivo. Design e tecnologia são duas faces da mesma moeda. Você não pode ter um sem o outro.
Vejamos mais de perto como essa detecção acontece. Como o Facebook sabe que você está usando um iPhone e não um Nokia antigo?
Servindo a experiência móvel: detecção, subdomínios e escolha do usuário
Você vê as linhas limpas e o texto legível. Parece simples. Sob o capô há uma bagunça de engenharia inteligente. O web design moderno depende de Folhas de estilo em cascata ou CSS. Este código determina fontes, cores, margens e largura da página. O conteúdo reside em um banco de dados ou em arquivos HTML. CSS decide a aparência desse conteúdo.
Cada ajuste de design mencionado anteriormente acontece aqui. Para tornar um site mobile mais rápido, você troca uma imagem de fundo pesada por uma cor sólida. Isso economiza largura de banda. Isso torna o carregamento da página mais rápido.
Construir o site é o primeiro passo. Fazer com que as pessoas o usem é o segundo passo. Não existe uma maneira única e correta de entregar um site para celular. Existem várias opções.
O método mais simples é um link. Você colocou no site completo. Diz “Ver site para celular”. Freqüentemente, os desenvolvedores usam um subdomínio como m.website.com. Isso é fácil de analisar. Website.com vai para a versão desktop. m.website.com vai para a versão móvel. Alguns sites usam i.website.com por causa do iPhone. O código funciona da mesma maneira.
Alguns usuários precisam digitar m.website.com manualmente. A maioria dos sites automatiza esse processo.
Como os sites para celular detectam seu dispositivo
Outras técnicas são mais complexas. Muitos sites detectam o seu tipo de dispositivo automaticamente. Eles decidem qual arquivo CSS servir com base no seu hardware.
Isso acontece consultando o dispositivo. O servidor verifica fatores de identificação como largura da tela em pixels. Ele lê a string do agente do usuário. Esta string declara qual navegador está carregando a página.
Consultas de mídia são linhas de código CSS. Eles fazem referência à string do agente do usuário. Eles escolhem fatores de identificação específicos. Se o agente do usuário se identificar como um navegador móvel com tela estreita, o servidor carregará a página móvel.
Este método tem falhas. Alguns navegadores permitem falsificar o agente do usuário. Novos navegadores lançam novas strings constantemente. Os servidores geralmente enviam o site certo para o dispositivo certo. Mas não é perfeito.
Este sistema de identificação está vinculado a outra opção. Dê uma escolha ao usuário. Navegue até IMDB.com em um telefone. Ele carrega o site móvel automaticamente. Ele também solicita que você baixe um aplicativo móvel. O aplicativo oferece mais recursos.
Vantagens e desvantagens dos navegadores móveis
Sites para celular geralmente funcionam melhor do que sites completos em smartphones. Eles são feitos sob medida para telas pequenas. “Tamanho único” raramente funciona.
Mas “melhor” é relativo. Os sites para celular oferecem uma experiência limitada. Eles são responsáveis pelas limitações do dispositivo. A navegação muitas vezes desaparece. Não há espaço suficiente na tela para manter os menus sempre visíveis.
Interagir com um site é a parte mais difícil da navegação móvel. Percorrer um formulário de entrada leva tempo. Selecionar campos é tedioso. Digitar no telefone é mais lento do que no computador. Telas sensíveis ao toque e teclados de software tornam isso pior.
Os navegadores do telefone podem armazenar cookies. Eles se lembram de senhas como os navegadores de desktop. Isso ajuda. Navegadores com equivalentes para desktop, como Firefox para Android e Opera Mobile, podem sincronizar dados. Você transfere os dados salvos do seu computador. Isso simplifica a navegação em ambas as plataformas.
Os telefones também têm truques. Beliscar para ampliar amplia o texto. Tocar para aplicar zoom ajusta um parágrafo à largura da tela.
Por que o vídeo em Flash falha em dispositivos móveis
O vídeo em Flash entra em todas as discussões sobre navegação móvel. É exigente com os processadores. Isso esgota a vida útil da bateria. Melhorou ao longo dos anos. Funciona em muitos dispositivos.
Não funciona em nenhum dispositivo Apple.
A Apple bloqueia vídeos em Flash no iOS. Em vez disso, eles suportam vídeo HTML5. O YouTube usa vídeo HTML5. Muitos outros sites também.
Você pode incorporar vídeos em Flash em páginas da web para dispositivos móveis. Isso vai contra os princípios de design móvel. A simplicidade é o maior ponto forte dos sites para celular. Eles carregam rapidamente porque usam texto e imagens pequenas. Flash quebra isso.
Colocar Flash em seu site limita os usuários do iPhone. Eles não podem interagir com a página. Você perde uma grande parte do seu público.
Compras no celular: são realmente mais seguras que no desktop?
Aqui está uma reviravolta. Seu telefone pode ser o lugar mais seguro para guardar seu cartão de crédito.
A maioria dos vírus da web tem como alvo o Windows. Eles não funcionam em iOS ou Android. Você fica essencialmente invisível a uma grande quantidade de malware simplesmente porque não está em um PC. Os telefones modernos suportam criptografia HTTPS e SSL, assim como o seu laptop.
Mas não seja arrogante.
Você ainda precisa observar a barra de URL. Procure o ícone de cadeado. Atenha-se a sites confiáveis. Se um site parece incompleto em um desktop, ele parecerá incompleto em um telefone. Apenas menor. O cenário de ameaças muda, mas o princípio permanece. Cuidado é melhor do que remediar.
Explicação do design da página móvel
O que é um design de página móvel?
Não é apenas um site reduzido. É uma otimização específica para telas sensíveis ao toque e janelas de visualização estreitas. Pense menor. Mais simples. Sem desordem.
Os sites para desktop dependem de movimentos do mouse e cliques precisos. O celular depende dos polegares. Isso muda tudo. Os botões ficam maiores. Os menus ficam ocultos. O conteúdo é priorizado. Se você está tentando ler um parágrafo denso em uma tela de 6 polegadas, você está lutando contra o dispositivo. Um bom design móvel interrompe essa luta antes de começar.
Sites para celular versus sites tradicionais
As pessoas confundem esses termos o tempo todo. Vamos separá-los.
Um site padrão é criado para desktops. Teclados. Ratos. Grandes monitores. Pressupõe que você tenha largura de banda e paciência.
Um website móvel é criado para smartphones e tablets. Ele tira a gordura. Recursos que não funcionam em telas sensíveis ao toque são cortados. Compressão de imagens. Os scripts ficam mais leves.
A diferença importa.
Por que? Porque os sites para celular carregam mais rápido. Eles usam menos dados. Esta não é apenas uma conveniência para usuários da Apple em Manhattan. É uma necessidade para as pessoas nos países em desenvolvimento, onde a Internet de alta velocidade é um luxo, não uma utilidade. Se o seu site for pesado, eles não conseguirão carregá-lo. Período.
Por que o design móvel é importante
Tudo se resume ao atrito.
A navegação na área de trabalho é eficiente. A navegação móvel é conveniente. Você tem a internet no seu bolso. Mas digitar em uma tela de vidro é entediante.
Um bom design móvel faz com que esse tédio desapareça. Respeita o seu tempo. Respeita o seu plano de dados. Respeita o fato de que você provavelmente está andando enquanto o usa.
A publicidade também funciona aqui. Mas pop-ups gigantes? Não. De qualquer forma, eles são proibidos pela maioria dos navegadores móveis. O Google AdSense se encaixa no projeto. Pequeno. Não intrusivo. Relevante.
A web móvel não é uma versão inferior da web para desktop. É um animal diferente. Trate dessa forma.
