Sites Mobile, tutorial definitivo

1. EU
MOBILE

2. 1.
2.
3.
4.
5.
6.
Crescimento Mobile no Brasil
Como seu site pode atender esta demanda?
Opções de site Mobile
Quais as Técnicas para Implementação (Vantagens/Desvantagens)
Alternativa de Baixo Custo
Você ainda pode validar o site
SUMÁRIO

3. Segundo pesquisas feitas pelo instituto de pesquisas IDC (International Data Corporation) as vendas de smartphones no
Brasil aumentaram 110% no último ano.
Apenas no segundo trimestre de 2013 foram vendidos 8 milhões de smartphones no Brasil. Este é um forte indicativo da
popularização do Mobile. Além disso outros dispositivos também estão se popularizando como é o exemplo de smart tv
e tablets.
O crescimento nas vendas destes aparelhos contribuem para o aumento do número de pessoas conectadas na web.
A internet cada vez mais deixa de ser um privilégio de poucos.
CRESCIMENTO MOBILE NO BRASIL

4. Os tempos mudaram, e o comportamento do internauta também, o primeiro contato com a marca pode ser de um
dispositivo móvel ou de uma televisão.
A experiência do usuário com a marca nestes dispositivos é muito importante, por isso vamos ver quais as técnicas
usadas atualmente para projetar web sites e atender a crescente demanda de acessos oriundos destes dispositivos e
melhorar a experiência do usuário na web.
Atender a todos é preciso...
COMO SEU SITE PODE ATENDER ESTA DEMANDA?

5. O Google oferece suporte a três tipos diferentes de sites mobile:
• Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo
conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para
alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.
• Sites que funcionam dinamicamente em todos os dispositivos com o mesmo conjunto de URLs, mas que em
cada URL fornece HTML (e CSS) diferente dependendo se o user agent pertence a um desktop ou a um
dispositivo móvel.
•Sites que têm URLs separados para desktop e dispositivos móveis.
Fonte: http://goo.gl/Xj2Bao
OPÇÕES DE SITE MOBILE

6. Vamos entender como funciona cada um dos tipo de sites mobile.
• Responsive Web Design
É quando um site se adapta a qualquer tipo de dispositivo seja ela um desktop, celular, tablet ou televisão, sem modificar
em nada o seu conteúdo.
A maior dificuldade é planejar um conteúdo único que atenda a todos os dispositivos nos diferentes momentos do dia.
OPÇÕES DE SITE MOBILE

7. Veja um exemplo de sites responsivos:
OPÇÕES DE SITE MOBILE

8. Vantagens:
• Uma URL para ambas as versões, não há duplicação de conteúdo.
• Evita a dispersão de popularidade no site.
• Não há necessidade de redirecionamentos.
Desvantagens
• É mais difícil produzir um conteúdo que atenda ao diferentes tipos de dispositivos.
• A experiência do usuário pode não ser tão boa.
OPÇÕES DE SITE MOBILE

9. • Dynamic serving
É quando um site utiliza uma única URL mas com conteúdo diferenciado para Desktop e Mobile.
Fonte: http://goo.gl/v3gYWr
OPÇÕES DE SITE MOBILE

10. Vantagens:
• Consegue criar conteúdos específicos para cada tipo de usuário.
• Uma URL para ambas versões, não há duplicação de conteúdo.
Desvantagens
• Exige maior entendimento técnico para implementação.
• O custo é maior devido a demanda de conteúdo personalizado para cada usuário.
OPÇÕES DE SITE MOBILE

11. • Parallel mobile site
É quando um site identifica o “user agent” e o direciona para a URL correspondente, neste caso é uma URL diferente
para cada tipo de dispositivo. O mais comum é utilizar sub-domínio como “m.seusite.com” para exibir o conteúdo
mobile.
Fonte: http://goo.gl/v3gYWr
OPÇÕES DE SITE MOBILE

12. Vantagens:
• Consegue criar conteúdos específicos para cada tipo de usuário.
• Maior facilidade na Implementação.
• Melhor usabilidade para o usuário.
Desvantagens
• Maior custo de manutenção.
•. Pode ocasionar duplicidade de conteúdo.
OPÇÕES DE SITE MOBILE

13. Algumas vezes o site possui muitos acessos mobile, mas não há dinheiro no momento para adapta-lo...
ALTERNATIVAS DE BAIXO CUSTO

14. Existem alguns serviços na web de baixo custo que podem adaptar um site para mobile...
Exemplo do site da Prato Verde na versão Mobile:
Ferramenta: http://www.dudamobile.com/
ALTERNATIVAS DE BAIXO CUSTO

15. Vantagens:
• Baixo custo.
• Não existe tempo de implementação.
• Fácil de implementar.
Desvantagens
• A URL do site será um sub-domínio da empresa que presta o serviço.
•. Pode ocasionar duplicidade de conteúdo.
• Por ser uma outra URL o Google vai considerar um site diferente, caso o site desktop já tenha popularidade, não será
repassada para este novo site.
ALTERNATIVAS DE BAIXO CUSTO

16. Ferramenta que podem ajudar na otimização da marcação HTML para sites mobile:
• http://validator.w3.org/mobile/#validate_by_uri
VOCÊ AINDA PODE VALIDAR O SITE

17. Mateada – Agência de Marketing Digital
.
(51) 3516.8137
(11) 3522.9568
contato@mateada.com.br
Rodrigo Leusin
rodrigo@mateda.com.br
@rodrigoleusin
OBRIGADO!