O QUE SERÁ VISTO NESSE AULÃO

● Avisos Gerais

● O que é Mobile First e porque é tão importante?

● Estudo de Caso (Aluno Evandro)

● Como Fazer um projeto Mobile First no Elementor (NA PRÁTICA)

 AVISOS GERAIS

● Boas Vindas!

● Funcionamento Comunidade / Aulões

● Jobs p/ Alunos (Eduardo/Cristophe)

● Bônus entregue (exercícios)

 Boas Vindas!

● Assistam ao curso em ordem cronológica

● Usem a Comunidade (ajude para ser ajudado!)

● Resgatem os Bônus

● Peçam Análise de Sites

 Comunidade
● Regras e Instruções lá na comunidade

● Compartilhem Experiências

● Façam network

● Mari, Herbert, Raíssa, Eduardo

(equipe de suporte)
 Jobs p/ Alunos

● Teste de job p/ Alunos

● Cristophe (Nomad3D)

● Eduardo (Otimização SEO)

● Futuros Jobs...
 BÔNUS ENTREGUE

● Paloma ● Bruno

● Karoline ● Angela

● Eduardo Simões ● Talita

● Rafael ● Eduardo A.
 MAS O QUE É
MOBILE FIRST?
O que é Mobile First?
Conceito aplicado em projetos web.

Foco inicial da arquitetura e desenvolvimento é

direcionado aos dispositivos móveis e em seguida
para os desktops.
De onde surgiu?
O conceito Mobile First foi criado pelo, na época, diretor
de produtos da Google, o Luke Wroblewski.

Ele propôs criar um site pensando primeiro em Mobile

e depois ajustá-lo para o computador

Luke Wroblewski

Livro lançado em 2011

Como funciona hoje?
Hoje o desenvolvimento é pensado no sentido oposto
ao Mobile First.

Em geral se pensa em vender projetos de sites

pensados primeiramente para o uso em desktops (em
alguns casos a venda do responsivo / mobile nem é
feita)
Por que o Mobile First é importante?

O Brasil é o país mais conectado da América Latina são

mais de 234 milhões de conexões até o final de 2017.

O tráfego de dados aumenta cerca de 50% por ano.

O uso de aplicativos e redes sociais é feito quase que

exclusivamente via celulares.

Campanhas de tráfego pago são feitas em redes

sociais
BENEFÍCIOS DO MOBILE FIRST
Ranqueamento no Google (Páginas otimizadas
ganham mais ponto e visibilidades no google)

Melhor experiência do usuário.

Melhoria do carregamento de páginas.

Economia de dados por parte dos usuários

RESPONSIVO x MOBILE FIRST
COMO COMEÇAR A DESENVOLVER EM
MOBILE FIRST?
REFERÊNCIAS
Dribble - https://dribbble.com/

Behance - https://behance.net/

Aplicativos - Ex. HeadSpace, LivUp, Spotify, Netflix

Comunidade - Mandem na Nossa Comunidade!

 APPS DO DIA A DIA
NETFLIX HEADSPACE LIVUP SPOTIFY
E DA PRA FAZER ISSO NO ELEMENTOR??

SIM!
(Mas saiba suas limitações)

Layout x Funcionalidade
FERRAMENTAS
CROCOBLOCK - https://aescoladesites.com.br/crocoblock

ESSENTIAL ADDONS - https://essential-addons.com/elementor/

ULTIMATE ADDONS - https://ultimateelementor.com/

YELLOW PENCIL, VISUAL INSPECTOR - Entre outros

CROCOBLOCK - https://aescoladesites.com.br/crocoblock
 ESTUDO DE CASO

Evandro Texeira

https://souzaengconsultoria.com.br/
Vamos Ver
Na Prática!

https://mobile.siteslucrativos.com/
ALTERNATIVAS?

Temas Mobile First

https://colorlib.com/wp/mobile-first-wordpress-themes
 EXERCÍCIOS

BÁSICO AVANÇADO
Pra quem entrou Já tem domínio
no curso agora com o Elementor

3 Referências de Apps Faça uma Pág Inicial

AULÃO DE SEXTA #4
Comece a Pensar Mobile First