O documento discute as vantagens e desafios da abordagem Mobile First, incluindo: 1) Embora a maioria ainda não seja totalmente Mobile First, há grandes vantagens como o alto uso de dispositivos móveis; 2) Os principais desafios são mudanças de mentalidade e culturais para se adaptar às necessidades dos usuários móveis; 3) É necessário considerar fatores como horário, dia da semana e localização dos usuários para criar experiências otimizadas para dispositivos móveis.

1. As vantagens e os desafios
na implementação do
Mobile First
Leandrinho Vieira
WordCamp São Paulo 2019

2. Especialista em WordPress
Fundador e CEO da Apiki
@leandrovieira
Leandrinho
Vieira

3. Mobile
First
Abordei o assunto em 2016
no blog da Apiki.

4. Mobile
First
Em 2019 falei sobre o
mesmo assunto no Expo
Fórum Digitalks Portugal

5. Somos, ou
não,
Mobile
First?
Não.
Talvez orientado.
As dificuldades:
● Desejo x realidade
(clientes);
● Mercado B2B e B2C;
● A regra 80/20 e a
jornada do
consumidor.

6. As
Vantagens
Grandes e significativas.
Ilustradas a seguir com
números e reflexos no
comportamento do
consumidor.

7. 102% de
penetração
63% são pré-pago, enquanto
37% são pós-pago.

8. 61% de
penetração
social
mobile
130 Milhões de usuários
sociais através de
dispositivos móveis. Cresceu
8.3%.

9. 85%
acessam
todos os
dias
21.16 mbps é a média da
velocidade. Crescemos 29%.

10. App
ou site
Mobile
First?
74 apps instalados. 35
utilizados por mês.

11. Compramos
no
celular?
45% no mobile, enquanto
55% não.

12. Google
dita
regras
1, 2 e 3 lugar entre os sites
mais acessados no Brasil.

13. Google
dita
regras
A rede social mais acessada.

14. Facebook
dita
regras
também
Entre os mais acessados

15. As
Vantagens
Toda grande vantagem
exige grande desafio.

16. Os
Desafios
● Mentalidade sobre o
assunto;
● Mudança cultural
prática;
● Mudança de visão
sobre alguns assuntos.

17. Mudança
cultural na
prática
Em 2016.
Visitei 15 capitais brasileiras,
130 agências digitais.
O mesmo desafio:
mudança de mentalidade
e cultural.

18. Mudança de
visão
Para vencer os desafios
mude a visão sobre cinco
tópicos.
1. Usuários;
2. Negócios;
3. Design;
4. Conteúdo;
5. Presença digital.

19. Usuários Precisamos observar os
padrões e
comportamentos
daqueles que fazem uso
diário das nossas soluções.
O desafio pode ser
resumido na tríade
horário-dia-lugar.

20. Usuários Sobre horário.
Você acorda e usa o celular.
No trabalho, o desktop. Nos
intervalos, volta ao celular.
À noite continua com ele.

21. Usuários Sobre dia da semana.
O uso de dispositivos
móveis, considerando o
mercado B2B, é muito
maior aos finais de
semana.

22. Usuários Sobre lugares.
Em casa, no trabalho ou
em viagem, o uso de
dispositivos é alternado.

23. Usuários Vença o desafio.
Um único site. Um único
conteúdo. Uma única
estratégia.
Faça uso das Media
Queries da CSS e defina os
breakpoints.

24. Negócios Os negócios precisam ser
pensados
estrategicamente para a
realidade dos
consumidores.

25. Negócios Adeque sua estratégia e
pense sobre os
micro-momentos da
jornada do usuário.

26. Negócios Os micro-momentos são
quatro.
1. Eu quero SABER;
2. Eu quero IR;
3. Eu quero FAZER;
4. Eu quero COMPRAR.

27. Negócios Vença o desafio.
O tipo de site "Web design
Responsivo" é a preferência
e recomendação do
Google.
Menor esforço, um único
trabalho, melhor
otimizado.

28. Design Embora o Web design
Responsivo deva ser
considerado, precisamos ir
além.
Por que não usar recursos
que agregam valor a
experiência do usuário?

29. Design Exemplos relevantes de
potenciais recursos a
serem usados.
● Google AMP Stories;
● Client-Side Storage;
● Battery Status API;
● Vibration API;
● Page Visibility API.

30. Design Client-Side Storage
Utilizado para armazenar
dados locais nos
dispositivos em uso, ou
para realizar o uso de
aplicações offline.
Um exemplo é WhatsApp
para Desktop.

31. Design Google AMP Stories
AMP Stories é uma
variação do AMP.
Uma implementação dos
famosos Stories sociais em
seu website.

32. Design Battery Status API
Utilizado para saber se a
bateria está por acabar ou
sendo carregada.
Ainda no exemplo do
WhatsApp para Desktop, a
interface exibe um alerta
vermelho quando a bateria
do celular está acabando.

33. Design Vibration API
Através desse recurso é
possível vibrar o aparelho
do usuário.
A funcionalidade pode ser
muito útil para interfaces
de games, alertas e
notificações ao usuário.

34. Design Page Visibility API
Utilizado para saber se a
aba em questão está ativa.
O usuário realmente está
interagindo com a
interface?
É um recurso incrível para
controlar a execução de
sliders, players de música e
vídeo.

35. Design Vença o desafio
Pense fora da caixa.
Conheça os recursos e
encontre as possibilidades
de encaixar nos seus
projetos.

36. Conteúdo A forma de consumir
conteúdo mudou
drasticamente.
As pessoas estão
impacientes, querem tudo
rápido, só lêem títulos.

37. Conteúdo Vença o desafio.
Aplique:
● Readbility;
● AMP;
● FBIA.

38. Conteúdo Readbility
É um conceito que analisa
a facilidade de leitura dos
textos.
Quanto maior a pontuação
indica que o texto é de fácil
leitura. Por outro lado, uma
baixa pontuação indica
dificuldades de leitura.

39. Conteúdo AMP
O AMP (Accelerated Mobile
Pages) é a tecnologia para
deixar suas páginas
carregamento
extremamente rápidas no
mobile.

40. Conteúdo FBIA
Enquanto o AMP é
suportado por diversas
plataformas, o Instant
Article é um formato
proprietário do Facebook.

41. Presença
Digital
Sua presença em
diferentes canais, precisa
considerar a conversão
desse público para a sua
plataforma.
Seu projeto digital, precisa
garantir simultaneamente
uma boa performance e a
sensação de segurança.

42. Presença
Digital
Segurança
O mínimo é fazer uso do
certificado de segurança
SSL.
Navegadores de internet já
alertam a falta dele.
Sem ele, sua marca perde
credibilidade com o
potencial cliente.

43. Presença
Digital
Performance
Relembrando: usuários são
impacientes e querem
tudo imediatamente.
Além disso, temos uma
realidade brasileira de
conexões lentas à internet.

44. Presença
Digital
Performance
O desafio, e considerado o
tempo ideal, é alcançar um
tempo de carregamento
de 2 a 3 segundos.

45. Presença
Digital
Vença o desafio.
● Implemente o SSL e
tenha o HTTPS em
todos os endereços;
● Faça uso do protocolo
IPv6;
● Faço uso do protocolo
HTTP/2;
● Reduza o tempo de
TTFB.

46. Os
Desafios
Elaborar um projeto Mobile
First é desafiador.
Seja no nascimento de um
projeto ou na aplicação do
conceito em projetos
existentes.

47. Os
Resultados
Toda implementação,
para termos uma melhor
convergência para o
Mobile First, será válida
para seus usuários e seu
negócio.

48. Vença o
desafio!
Espero ter ajudado.
Você está implementando,
ou já concluiu, um projeto
Mobile First?
Vamos falar sobre.

49. Muito obrigado o/
Pesquisa apresentada disponível em
https://www.slideshare.net/DataReportal/digital-2019-brazil-january-2019-v01