Como criar websites para o consumidor que usa vários tipos de tela

PUBLICADO
Marcha de
2014
EM QUALQUER LUGAR,
A QUALQUER HORA, EM
QUALQUER DISPOSITIVO
Como criar websites para
o consumidor que usa
vários tipos de tela
O RESUMO
Os consumidores de hoje estão prontos para se conectarem
a sua empresa por meio de telas de todos os tipos
e tamanhos. É uma nova oportunidade enorme, contanto
que seu website tenha sido projetado para oferecer
aos clientes o que eles precisam nas telas menores de
smartphones, bem como em tablets e em computadores.
Este white paper analisa as estruturas mais comuns de
websites para vários tipos tela. Ele tem dicas sobre como
criar uma ótima experiência do usuário e evitar alguns dos
erros mais comuns.
google.com.br/think
|1
INTRODUÇÃO
Atualmente, os consumidores estão constantemente conectados,
alternando entre dispositivos (do tablet para o laptop, para
o computador, para o smartphone) durante o dia todo.
A situação ficará ainda mais complexa quando novos tipos
diversas formas de criar um site para celular que funcione
de tela, de wearables a outros dispositivos conectados,
continuamente para seus clientes. Também examinaremos
entrarem no mercado nos próximos meses e anos.
os prós, os contras e o impacto de cada uma.
Essa conectividade constante oferece novas oportunidades
valiosas para que marcas e empresas alcancem os
consumidores, caso elas aceitem o desafio de alcançar
todos os tipos de tela. As empresas precisam criar websites
adequados às necessidades dos clientes em todos os
Discutiremos estes itens:
1
Prepare-se para entrar no mercado para celular
2
Escolha a tecnologia que é mais adequada a suas
3
Crie uma ótima experiência do usuário e evite os
4
Avalie seu sucesso nos vários tipos de tela
tipos de tela, de monitores de computador a dispositivos
que cabem na palma da mão, em todos os momentos
importante.
Para muitas empresas, o celular é a peça mais importante
que falta nessa equação de vários tipos de tela. Este white
paper ajudará você a encontrar a abordagem para celular
que funciona melhor para sua empresa. Analisaremos
necessidades
erros comuns
Antes de chegar nesses pontos, vamos observar mais
detalhadamente o consumidor atual e suas expectativas.
O consumidor que usa vários
tipos de tela
Atualmente, para a maioria das pessoas, o uso de vários
Portanto, um site otimizado para celular precisa fazer
tipos de tela não é mais uma revolução. É a vida cotidiana.
parte de seu plano geral de vários tipos de tela. Isso exige
As pessoas usam o dispositivo que for mais prático para
planejamento, investimento e as ferramentas corretas.
elas no momento. Pode ser o computador na hora do
O celular possui sua própria experiência, com uma tela
almoço, o tablet na hora de dormir ou o smartphone no
menor e uma interface por toque, não por mouse. Os
shopping center.
smartphones têm recursos adicionais para usuários indo
de um lugar para outro, como câmeras, GPS e telefones.
Independente do tipo de tela, os usuários querem que ela
Enquanto os usuários de computador permanecem em
funcione. Eles não querem fazer gesto de pinça, arrastar
suas mesas, os usuários de smartphones podem estar
e lutar para carregar páginas, preencher um formulário
em qualquer lugar, a qualquer momento.
ou efetuar uma compra.
O fornecimento de uma ótima experiência para todos esses
Isso é mais verdadeiro ainda em telas de 7 polegadas
tipos de tela e contextos é um verdadeiro desafio para as
(18 cm) ou menos, nas quais o espaço vale muito. Esse
empresas. Na verdade, é nesse ponto que os profissionais
é o dispositivo com crescimento mais rápido no espaço
de marketing de hoje estão mais atrasados em relação
de vários tipos de tela. No momento, são 1,5 bilhões de
aos usuários. Mas um bom site para vários tipos de tela
assinantes de celular no mundo todo, com a incrível
vale o esforço. É uma forma vital de fortalecer sua marca,
taxa de crescimento de 31%1. Nos EUA, a adoção de
nutrir relacionamentos longos com o cliente e ampliar
smartphones superou os 61%2.
sua empresa.
1
2
"Tendências da Internet" da KPCB, 2013.
Relatório do Google "Our Mobile Planet" (Nosso planeta para celular), 2013.
Como fazer isso acontecer…
google.com.br/think
|2
1
PREPARE-SE PARA ENTRAR NO MERCADO PARA CELULAR
A estratégia de vários tipos de tela deve ser adequada
às necessidades de seus clientes e de sua empresa.
Quais metas você deseja concluir em seu site? O que
seus clientes esperam?
Defina sua proposta de valor para
os usuários. Ela será a resposta
para a pergunta “Por que eu
deveria acessar seu website e
me relacionar com sua empresa?”. O que você
oferece aos usuários, o que eles esperam de
você e o que você pode conquistar com o site
devem ser adequados uns aos outros.
Entenda o que os usuários de vários tipos de
tela veem e desejam em seu site atual. Use um
programa de análise (como o Google Analytics)
para ver a origem de seus usuários atuais de
celular, as ações que eles realizam e a diferença
de comportamento em relação aos usuários
de computador (por exemplo, compare as
consultas de pesquisa de sites por dispositivo).
Se seu site for de comércio eletrônico, verifique
também as taxas de conversão e faça uma
análise de funil por dispositivo.
O que você aprender aqui será a base de
seu novo plano para os vários tipos de tela.
Se os dados mostrarem que os usuários de
smartphone acessam uma área de conteúdo
específica de seu site, convém colocá-la na
frente e no centro de seu site para celular. Por
outro lado, se partes de seu site tiverem uma
alta taxa de rejeição (usuários que entram e
saem imediatamente), você terá que tentar
corrigir isso no novo projeto.
Lembre-se também de que, para um número
cada vez maior de pessoas, o celular é o único
tipo de tela. Isso é verdadeiro especialmente
em mercados emergentes e com pessoas
mais jovens em qualquer lugar. Sendo assim,
não pense no celular como uma tela "extra".
Garanta que ele tenha todos os recursos.
google.com.br/think
|3
1
PREPARE-SE PARA ENTRAR NO MERCADO PARA CELULAR
Veja algumas formas de concentrar-se na proposta de
valor ao mesmo tempo que mantém todos os usuários
de vários tipos de tela satisfeitos
Crie uma experiência
conhecida
As pessoas acostumadas com telas de
computador desejam encontrar o mesmo
conteúdo básico e experiência do usuário nos
outros tipos de tela. Seu exercício de equilíbrio
é preservar as funções conhecidas e criar uma
experiência que funcione em telas de celular
e em tablets.
Se seu site para computador tiver ferramentas
ou elementos complexos que não são
transferidos com facilidade para o celular
(por exemplo, uma ferramenta interativa para
a configuração de carros), convém oferecer
um substituto mais simples para celular. Inclua
também um link de seu site completo para
computador para as pessoas que preferem
usá-lo. Permita que o usuário escolha
a experiência mais adequada para ele.
Pense no contexto do usuário
Leve em consideração o que os clientes
desejam do site em cada tipo de dispositivo
utilizado. Um usuário indo de um lugar para
outro com um smartphone talvez queira um
Localizador de lojas ou um número de telefone.
É possível encontrar um facilmente em seu
site para celular? Outro usuário pode até estar
em sua loja, procurando comentários sobre
o cortador de grama que pensa em comprar.
Você consegue ajudá-los?
Use todos os recursos do
celular
Pergunte a sua equipe: como podemos
suportar nossa proposta de valor com recursos
específicos do dispositivo? Uma cadeia
de cinemas pode oferecer locais próximos
e horários de sessões com base no local de
GPS do smartphone de um usuário. Uma
equipe esportiva profissional quer ajudar
os fãs a fazerem upload de vídeos do estádio
gravados em câmeras de celular diretamente
para o YouTube. Repense seu website
e aproveite ao máximo os recursos do celular.
Seus clientes agradecem!
Não se sinta envergonhado por
buscar as tendências do setor
nos sites de seus concorrentes.
Você poderá ver os padrões
atuais da Web para celular
de seu setor. Poderá também
encontrar recursos que queira
adaptar para seu próprio site.
google.com.br/think
|4
2
ESCOLHA A TECNOLOGIA CERTA
Há várias formas de configurar um website para todos
os tipos de tela. Sua melhor abordagem depende dos
requisitos exclusivos de sua marca e de sua empresa.
Os fatores a considerar incluem o custo, o tempo para
construção, os recursos humanos e a infraestrutura
disponíveis, bem como as necessidades dos clientes.
Independentemente da configuração escolhida, como princípio básico
recomendamos que você veicule todos os sites usando um único
domínio, como example.com
Em especial, se seu site para computador
estiver hospedado em example.com, não
coloque o site para celular em um domínio
diferente, como a.com/example.
Os provedores de serviços de terceiros
normalmente sugerem isso. No entanto,
essa configuração causará confusão para os
usuários. Você pode exibir seu site para celular
em um subdomínio (por exemplo, m.example.
com). Entretanto, veja o impacto potencial nos
tempos de carregamento (página 9). Permaneça
com um único domínio e você criará equidade
da marca e do URL com seus usuários.
Pensando nesse princípio, observaremos as
três formas básicas de construir um website
otimizado para celular: design responsivo,
veiculação dinâmica e um site para celular
totalmente diferente.
google.com.br/think
|5
2
ESCOLHA A TECNOLOGIA CERTA
Design responsivo
O design responsivo para a Web (RWD, na sigla em inglês)
é uma técnica de design inteligente que usa uma única
base de código em HTML para todas as plataformas.
Ou seja, todos os dispositivos de exibição usam
o mesmo código no mesmo URL. O conteúdo
é redimensionado automaticamente para adequar-se
à tela sendo usada, com base em pontos de quebra
O RWD exige um forte planejamento antecipado.
Os custos podem ser altos no início. No entanto,
quando a estratégia específica por dispositivo estiver
configurada, a manutenção usa menos recursos.
e grades fluidas definidos anteriormente.
Prós:
• Um URL para todo o conteúdo.
Ao usar um único URL para um conteúdo, é mais
fácil para os usuários interagirem, compartilharem
e criarem vínculos para seu conteúdo. Além disso,
é mais fácil para os mecanismos de pesquisa
descobrirem e indexarem seu conteúdo.
• Uma experiência do usuário simplificada.
A apresentação de todo o conteúdo
é personalizada e os recursos específicos
do dispositivo ainda podem ser usados.
• Orientação flexível.
O RWD permite naturalmente que os usuários
alterem a orientação do dispositivo para paisagem
ou retrato.
• Sem redirecionamentos.
O tempo de carregamento é reduzido
e o desempenho é melhorado.
Contras:
• É necessário um planejamento cuidadoso.
Como todo o HTML é compartilhado aqui,
o planejamento cuidadoso é obrigatório
para desenvolver uma experiência robusta e
verdadeiramente personalizada, com desempenho
ideal para todos os dispositivos e usuários.
Erros comuns:
• Dados em excesso.
Não permita que os usuários de celular façam
o download de imagens inteiras que foram
destinadas para telas grandes e velocidades
rápidas. Tente reduzir as solicitações de HTTP
e minimizar CSS e JavaScript. Carregue primeiro
o conteúdo visível e retarde o restante.
Para quem é indicado:
Empresas focadas na oferta de uma experiência
consistente e que planejam de forma holística para
todos os dispositivos com uma única equipe da Web.
Starbucks.com, BostonGlobe.com e Time.com usam
essa abordagem. O RWD pode ser expandido para
adequar-se a novos dispositivos quando surgirem.
O URL único é bom para vincular e compartilhar
artigos sem confusão ou redirecionamentos.
Dica de SEO (otimização de
mecanismos de pesquisa)
para o design responsivo
Para que os mecanismos
de pesquisa entendam
completamente a estrutura
responsivo de seu site e como
o conteúdo é apresentado
para computador e celular,
precisamos ter acesso total ao
CSS, JS e arquivos de imagem.
Não bloqueie os ativos de seu
website para o Googlebot e o
Googlebot-Mobile.
google.com.br/think
|6
2
ESCOLHA A TECNOLOGIA CERTA
Veiculação dinâmica
Nesse método, o servidor da Web detecta o tipo de
dispositivo que o visitante está usando. Em seguida,
apresenta uma página personalizada desenvolvida
apenas para o dispositivo em questão. As páginas
personalizadas podem ser desenvolvidas para
qualquer tipo de dispositivo, de telefones celulares
e tablets até smart TVs.
Prós:
• Uma experiência do usuário
personalizada.
Cada usuário visualiza conteúdo e layout
criados apenas para seu dispositivo.
• Alterações mais fáceis.
Ajuste o conteúdo ou o layout para um
tamanho de tela sem ter que mexer em
outras versões.
• Carregamento mais rápido.
Sua equipe pode simplificar o conteúdo para
alcançar o tempo de carregamento ideal em
todos os dispositivos.
• URL único.
Assim como com o design responsivo, a
veiculação dinâmica mantém todos os seus
usuários em um único URL.
Contras:
• Bifurcação de conteúdo.
Várias páginas personalizadas significam
vários conjuntos do mesmo conteúdo.
A menos que você tenha um CMS sofisticado
implementado, manter o conteúdo
atualizado em todas as páginas específicas
de dispositivos pode ser desafiador.
Para quem é indicado:
A veiculação dinâmica é uma solução com
uso intensivo de recursos para empresas que
fazem alterações frequentes em seu website.
Além disso, elas geralmente precisam ajustar
a exibição para um dispositivo, como ajustes
apenas no site para celular.
Uma equipe (ou fornecedor) de TI capaz
é obrigatória para gerenciar os conjuntos
diferentes e possivelmente complexos de
códigos de websites necessários.
Dica de SEO para veiculação
dinâmica
Para o Googlebot, não é
imediatamente óbvio que um site
veicula dinamicamente HTML com
base no user-agent. Use o método
de cabeçalho HTTP padrão para
indicar que a resposta do servidor
pode variar com base no useragent. Garanta que o Googlebot
e o Googlebot-Mobile possam
acessar todos os CSS, JS e arquivos
de imagem da página.
google.com.br/think
|7
2
ESCOLHA A TECNOLOGIA CERTA
Erros comuns:
• Detecção errada de dispositivo.
Seus servidores precisarão executar scripts
para reconhecer todos os dispositivos
disponíveis. Se esses scripts ficarem
desatualizados, poderão ocorrer problemas,
como o servidor enviar um site otimizado
para celular para usuários de tablet.
Outro erro comum é que o servidor assume
a orientação de um dispositivo, geralmente
retrato. No entanto, o usuário pode estar
segurando o dispositivo em outra orientação
(por exemplo, paisagem).
• Experiências intercambiáveis.
Os usuários ficarão confusos se você tiver
vários sites e eles tiverem uma aparência
radicalmente diferente. Embora seja
importante personalizar para cada tipo
de tela, a aparência e a sensação de sua
marca devem ser reconhecíveis em todos
os formatos.
google.com.br/think
|8
2
ESCOLHA A TECNOLOGIA CERTA
Um site diferente para celular
Uma terceira opção é simplesmente criar um site para
celular diferente do site original para computador.
O sistema detecta os visitantes usando celular
e os redireciona para seu site otimizado para
celular (normalmente usando um subdomínio
como m.yourname.com).
Apenas os usuários de celular usarão o site
diferente para celular. Os usuários de tablets,
de TVs habilitadas para a Web ou de outros
dispositivos continuarão a visualizar seu site
original para computador.
Prós:
Para quem é indicado:
Contras:
Como a configuração é relativamente fácil e pode
ser bastante econômica, um site diferente para
celular pode ser bom para pequenas empresas
com mais necessidades básicas no site.
• Uma experiência do usuário
personalizada.
Isso oferece maior liberdade para criar um
site diferente para celular, que foi desenvolvido
apenas para usuários de celular.
• Alterações mais fáceis.
As alterações ao conteúdo ou ao design
podem ser limitadas à versão para celular
do site, sem efeito em outros dispositivos.
• Vários URLs.
O compartilhamento de uma página da
Web requer redirecionamentos cautelosos
e integração entre seus sites para celular
e os outros. Os redirecionamentos também
resultam em tempos de carregamento da
página mais longos.
• Bifurcação de conteúdo.
Manter dois conjuntos diferentes de conteúdo
pode tornar o gerenciamento de dados mais
complexo.
Empresas que, por qualquer motivo, precisam
gerenciar o site para celular de forma
independente. Por exemplo, algumas empresas
desejam usar um fornecedor diferente para
celular ou um estrutura para celular que
simplesmente não seja possível com o RWD.
Dica de SEO para sites diferentes
para celular
Ajude os mecanismos de
pesquisa a entender o
relacionamento entre páginas
equivalentes para computador
e para celular. As anotações
bidirecionais indicam que os
mecanismos de pesquisa devem
tratar os URLs diferentes como
uma entidade única. E garanta
que o Googlebot e o GooglebotMobile possam acessar todos
os seus websites e seus CSS,
JS e arquivos de imagem.
google.com.br/think
|9
2
ESCOLHA A TECNOLOGIA CERTA
Erros comuns:
• Redirecionamentos com falhas.
Quando um usuário é direcionado para
uma página de computador detalhada,
garanta que ele não seja redirecionado
para sua página inicial genérica para celular.
Importante: evite erros apenas para
smartphones, nos quais um URL de
computador redireciona para um URL
de celular não existente.
• Anotações ausentes.
A anotação de duas vias ("bidirecional")
ajuda o Googlebot a descobrir seu
conteúdo e os algoritmos a entender
o relacionamento entre suas páginas
para computador e para celular, além
de tratá-las corretamente.
• Experiência inconsistente do usuário.
As pessoas que acessam seu site para
smartphone devem reconhecê-lo como
sendo da mesma empresa cujo site
visualizam no computador. Isso evita
confusões e uma experiência geral ruim
do usuário.
As três abordagens (RWD, veiculação
dinâmica e site diferentes para celular)
têm seus prós e contras. Para encontrar
a mais adequada a sua empresa, converse
com todas as equipes que serão afetadas,
de marketing e vendas à finanças, negócios
e, é claro, o departamento técnico.
Esta deverá ser uma decisão de negócios
verdadeiramente consolidada.
google.com.br/think
| 10
3
CRIE UMA ÓTIMA EXPERIÊNCIA DO USUÁRIO
Além da configuração e definição básicas, uma ótima
experiência do usuário para celular tem três partes:
layout, conteúdo e velocidade. A melhor forma de
engajar e manter seus usuários é garantir que essas
três variáveis sejam fortes.
Layout
Seja otimizado para toques.
Para o dedo humano, 48 dp
(pixels independentes de
densidade) é o tamanho mínimo
do destino recomendado para o toque, com
pelo menos 8 dp entre destinos. Destinos muito
pequenos e, como consequência, os erros nos
cliques, são uma forma rápida de desanimar um
usuário de celular.
Escolha a fonte correta.
O tamanho mínimo da fonte deve ser de
12 pixels. Qualquer tamanho menor do que isso
forçará a visão dos usuários. Escolha um tipo
de letra que seja limpo e fácil de ler. Se possível,
evite o uso de texto com base em imagens.
Defina a largura correta.
A maioria dos usuários da Web está acostumada
a rolar a tela verticalmente (para cima e para
baixo). Forçá-los a rolar a página lateralmente
representa uma experiência ruim do usuário.
Seus usuários acharão que o site não foi criado
para ajudá-los em telas menores.
Evite o recurso mouseover.
Em uma tela de computador, o mouseover
é uma ótima forma de exibir conteúdo
oculto. Mas o mouseover requer um mouse.
Em telas sensíveis ao toque, como tablets
ou smartphones, os dedos dos usuários não
funcionam como passar o cursor. Sendo assim,
evite o recurso mouseover. Em vez dele, use
botões nos quais o usuário pode tocar para
exibir menus mais detalhados.
Não use pop-ups.
Eles são irritantes em sites para computador
e mais irritantes ainda em sites para celular.
Além disso, em vez de usar intersticiais para
estimular o download de aplicativos, incorpore
o prompt em seu site.
Use botões descritivos.
Não faça os clientes adivinharem qual será
o destino de um clique. Rotule seus botões
de forma clara. Em seguida, use trilhas de
navegação e nomes de categoria claros
(como "Etapa 2: pagamento") para ajudar
a navegação dos clientes.
google.com.br/think
| 11
3
CRIE UMA ÓTIMA EXPERIÊNCIA DO USUÁRIO
Conteúdo
Não sobrecarregue os usuários.
No celular, mais não é
necessariamente melhor. Impeça o
desejo de encaixar cada pedacinho da
sua página para computador, mas em
tamanho menor. Mas...
Personalize, não elimine.
Os usuários de celular e de tablet esperam a mesma
funcionalidade principal oferecida aos usuários de
computador, seja assistir a vídeos ou comprar material
de escritório. Em vez de cortar o conteúdo principal,
reestruture-o para adequar-se à tela do celular.
Não oculte ações principais.
Forneça aos usuários acesso rápido a todas as
principais funções que eles esperam no site.
Se você for um varejista, elementos como pesquisa
de produto e carrinho de compras (e ferramentas
otimizadas para celular, como o Localizador de lojas)
devem estar na frente e no centro.
Velocidade
Inclua um link para o site completo para usuários
de celular que preferem esse tipo de experiência.
Verifique novamente os arquivos de mídia.
Vídeo em flash, por exemplo, não é executado na
maioria dos celulares. Verifique se os arquivos de
mídia nos sites para vários tipos de tela realmente
funcionam nas telas para as quais eles foram
desenvolvidos.
Simplifique o checkout.
É difícil preencher formulários longos no celular,
digitando com o dedão endereços completos
e outros dados em várias etapas. Para aumentar
suas taxas de conversão, simplifique o processo de
pagamento como puder. Ative a compra instantânea
com a Carteira virtual do Google ou outros serviços
que permitam que os clientes façam o checkout
rapidamente. Os detalhes de pagamento e de
envio são gerados automaticamente da nuvem.
Este item é importante: seja mais
Sobrecarga de imagens.
rápido. Otimizar a velocidade de
Conforme as telas dos smartphone ficam maiores,
seu site é uma forma garantida de
é tentador veicular a maior imagem possível e deixar
melhorar a experiência do usuário
que o dispositivo a diminua para caber na tela.
especialmente no celular, onde os usuários estão indo
Essa é uma opção ruim. Ela gasta tempo e poder
de um lugar para outro e as redes de dados podem
de processamento. Veicule os tamanhos de imagem
ser lentas. A velocidade normalmente impulsiona o
corretos para cada dispositivo.
engajamento do visitante, a retenção e as conversões.
Sobrecarga de arquivos.
A velocidade não é apenas um sinal de classificação
Decida se os snippets de JavaScript e os estilos de CSS
para a Pesquisa do Google. Muitas empresas que
são úteis para os usuários de celular. Muito JavaScript
investiram em melhorias na velocidade de página
ou CSS pode retardar a página. Diminua/compacte
observaram um efeito positivo diretamente na linha
seu código onde for possível. Além disso, considere
de resultados. Veja três erros comuns que devem
reorganizar o CSS junto. Verifique se os ativos estão
ser evitados:
sendo colocados em cache pelo navegador. Assim,
Há muitas solicitações de HTTP.
Embora os usuários de celular tentem fazer
os visitantes não precisam recarregá-los em todos os
carregamentos de páginas.
o mesmo que os usuários de computador, o poder
Para mais detalhes e as ferramentas que podem
de processamento é limitado. A largura de banda
ajudar você a otimizar o desempenho de seu site,
não é confiável. Para ajudá-los a serem mais rápidos,
acesse a página do Google "Torne a Web mais rápida"
corte os elementos da página que geram solicitações
neste endereço: developers.google.com/speed
extras de HTTP.
google.com.br/think
| 12
4
AVALIE SEU SUCESSO
Como nos sites para computador, é uma boa ideia
continuar testando, analisando e ajustando o site
para celular para atender a novos dispositivos
e novos hábitos de visualização do usuário.
É importante acompanhar os relatórios de análise e executar testes A/B no conteúdo e no fluxo.
Os dois ajudarão você a responder perguntas como estas sobre seu site e sua estratégia:
Quem são seus visitantes para celular?
Um relatório para celular responderá.
O que eles procuram?
Verifique o conteúdo que eles acessam e as
consultas de pesquisa de sites.
Eles têm problemas para encontrar as
informações?
Veja as taxas de rejeição e o tempo médio
na página.
Algumas campanhas ou páginas de
anúncios são melhores para usuários
de celular?
A estrutura de seu site é otimizada para
celular?
Gere relatórios sobre pesquisa de sites, fluxo de metas,
profundidade de navegação e velocidade do site.
Seu site é carregado rápido o suficiente
para impedir que os usuários saiam dele?
Teste a velocidade do site.
É fácil navegar em seu site usando um
dispositivo que cabe na palma da mão?
Faça uma experiência com a taxa de rejeição da
página de destino.
Verifique as conversões de celular comparadas com
As frases de chamariz para computador
funcionam no celular?
as de computador.
Verifique as conversões de celular comparadas com
as de computador e faça uma experiência com o
acompanhamento responsivo de cliques.
Conclusão
Uma estratégia de vários tipos de tela é necessária
para você ser bem-sucedido com os consumidores
constantemente conectados de atualmente. Mas
um único tamanho não serve para todos quando se
trata da criação da configuração perfeita. Existem
muitos fatores e você é quem melhor conhece as
necessidades de sua empresa.
Quando você projetar seu site, é importante
investir em tempo e recursos para testar,
analisar e continuar ajustando seu conteúdo e
layout. Talvez o que funciona para outros não
funcione para sua empresa, e vice-versa.
Existe uma constante verdadeira: todos os usuários
de celular de atualmente esperam uma ótima
experiência livre de problemas. Agora é o momento
de juntar sua equipe, planejar sua estratégia e
construir os sites para engajar e agradar os usuários.
google.com.br/think
| 13
CONCLUSÃO | A Recapitulação
Design
responsivo
Complexidade
Moderada. Deve ser construído
desde as bases, usando grades
fluidas que mudam com
o tamanho da tela.
Para sites básicos, existem vários
modelos de código aberto.
Sites sofisticados de RWD
com programação agregada
exigem mais tempo para serem
construídos.
Veiculação
dinâmica
Moderada a alta, dependendo
da sofisticação do site e do
número de bases de código
individual que você precisa
criar.
A veiculação dinâmica pode
levar bastante tempo e requer
programação do servidor.
Um site diferente
para celular
Simples a moderada. Um
site independente pode ser
desenvolvido rapidamente.
Pequenas empresas
encontrarão várias opções
automatizadas que geram
sites para celular quase
imediatamente.
Desempenho
Alto. Não são necessários
redirecionamentos. No entanto,
requer um planejamento
abrangente para oferecer
desempenho otimizado.
Ter dados em excesso
é o erro mais comum.
Alto. Pode ser simplificado
para conteúdo otimizado
por dispositivo para conquistar
o desempenho ideal.
Moderado. Embora as imagens
e outros conteúdos do website
possam ser otimizados
facilmente para telas menores,
os redirecionamentos do site
costumam gerar problemas
de latência.
Manutenção
Baixa. Depois de criadas, as
atualizações são distribuídas
para todos os dispositivos
e a manutenção é mínima.
Exige muitos recursos se
for mantido manualmente.
Muitos sites usam um CMS
para evitar o problema
e publicar automaticamente
em todos os modelos.
Moderada a alta. As
atualizações no site
principal também devem,
obrigatoriamente, ser
realizadas separadamente
neste site.
Custos
Altos no início, mais baixos
posteriormente. São
necessários muitos recursos
para o planejamento inicial e a
garantia de desempenho ideal.
Mas os custos de manutenção
geralmente são baixos.
Moderados a altos. Se
gerenciado manualmente,
ele requer codificação de
todos os sites e modelos.
O desenvolvimento e licenças
de CMS também requerem
recursos.
Baixos a moderados. As opções
variam de soluções de baixo
custo para pequenas e médias
empresas (SMB, na sigla em
inglês) com taxas mensais até
horas de desenvolvedor para
construir um site independente.
Dispositivos
Experiência do usuário
consistente em todos os
dispositivos. Algumas opções
específicas do dispositivo podem
ser adicionadas com programas
no servidor.
Arquivos diferentes e códigos no
servidor (que são executados no
servidor antes de veicular uma
página para o usuário) podem
oferecer uma experiência
específica do dispositivo.
O site pode ser otimizado
especificamente para clientes
indo de um lugar para outro.
Compartilhamento
Totalmente otimizado.
O URL único funciona no layout
ideal para cada tamanho de
tela.
Oferece uma ótima experiência
do usuário se for configurado
corretamente. O URL único
enviará de volta o markup
específico do dispositivo.
Sujeito a erros. Requer que
você redirecione todos os
URLs do site para computador
para o site para celular,
e vice-versa.
Expansível
para novas
plataformas?
Sim. Pontos de quebra definidos
e grades fluidas permitem
a expansão fácil para novas
plataformas e dispositivos.
Sim. Modelos para dispositivos
específicos (como smart TVs)
podem ser facilmente criados
e veiculados por meio de um
URL único.
Não. É um site diferente
para celular apenas para
smartphones. Novas
plataformas não são
integradas com facilidade
na estrutura existente.
Para mais informações, acesse: google.com.br/think/multiscreen
google.com.br/think
| 14