View
141
Download
0
Category
Preview:
DESCRIPTION
Veja quais as melhores estratégias para um bom site responsivo. Dicas para melhorar a experiência dos usuários. Aplicando Mobile-first em seus projetos.
Citation preview
DESIGNRESPONSIVO
CARLOS EDUARDO - KADU
Faz parte da equipe de Desenvolvedores da Vítrio.
HTML, CSS, JS, jQuery e PHP; Design Responsivo; Otimização de sites; Usabilidade e UX (User Experience).
INTERESSES :
Kadunew@gmail.com @kadunew www.kadunew.com/blog
CONTATOS:
960px de largura? 800px? etc, etc.
Usuários mobile querem páginas simples e focadas em atividades chave.
Alterar layout quando a resolução mais comum deixar de ser utilizada.
Passado...
Isso não é Web universal, acessível...
Devemos entregar a mesma informação relevante para todo
mundo!
Não importa qual seja o dispositivo do usuário.
px
960px
300px 300px 300px
960px
300px 300px300px
DESIGNRESPONSIVO
“... Faça páginas que são acessíveis, independentemente de navegador, plataforma ou tela que seu leitor escolha...”
John Allsopp, 2000 em http://alistapart.com/article/dao
Muita gente já falou disso antes.
Devemos entregar a mesma informação
relevante paratodo mundo!Importa
qual seja o dispositivo do usuário.
Não
1024 + 768 480 479 -
Design responsivo é oferecer um único site para todo mundo e adaptar a experiência do usuário
de acordo com o dispositivo.
O Google recomenda Design responsivo: https://developers.google.com/webmasters/smartphone-sites/details
SEO
O canal é usar a
estratégiaMobile-First
MELH
OR
IAP
RO
GR
ESSIVA
Layout Simples Imagens Pequenas CSS e JS limitados Performance
Layout Simples Imagens maiores Mais CSS e JS
Conteúdo adicional Layout c/ colunas Imagens maiores e até mais pesadas
Layout widescreen Imagens maiores e mais pesadas Total recurso a CSS e JS
01 02 03 04
Estratégia para o sucesso do projeto
(Mobile-First)
Priorizar Conteúdo
Código de Qualidade
Design Simples e Funcional
MaiorProdutividade
da equipe
Posso fazer o contrário?
(Desktop-First)
Focar no conteúdo
MobileFirst
Layout Fluído
Media Queries
Design responsivo é basicamente
DESIGNRESPONSIVO
(NA PRÁTICA)
Converter um site que não é responsivo em responsivo
%
100%
30% 30%30%
320px 320px
@media
Link1 | Link2 | Link3 | Link4 | Link5
01 02 03
04
01
02
03
Adaptar Layout Conteúdo
Media Queries
Como funciona essa coisa?
Simples...
Como funciona essa coisa?
Conteúdo do site... “chirrion”
Nunca use
“display: none”
Digitar dados no celular é bem difícil.
FACILITAR A VIDA DO USUÁRIO
Que tal no lugar dos asteriscos mostrar a senha, logo você não precisa do campo “confirmar senha”. Um campo a menos.
<input type="url"><input type="text">
<input type="tel"><input type="email">
Responsivo X Versão .m
www.m.uol.com.br www.uol.com.br
Contatos!
ObrigadoMeu povo
Recommended