Carlos Eduardo é um desenvolvedor da Vítrio especializado em design responsivo. Seus interesses incluem HTML, CSS, JavaScript, otimização de sites e experiência do usuário. Ele pode ser contatado por e-mail ou nas redes sociais onde também mantém um blog sobre design responsivo.

1. DESIGN
RESPONSIVO

2. CARLOS EDUARDO - KADU
Faz parte da equipe de
Desenvolvedores da Vítrio.
INTERESSES :
 HTML, CSS, JS, jQuery e PHP;
 Design Responsivo;
 Otimização de sites;
 Usabilidade e UX (User Experience).
CONTATOS:
 Kadunew@gmail.com
 @kadunew
 www.kadunew.com/blog

3. 960px de largura? 800px?
etc, etc.
Alterar layout quando a
resolução mais comum
deixar de ser utilizada.
Usuários mobile querem
páginas simples e focadas
em atividades chave.
Passado...

4. 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.

5. px

6. 960px
960px
300px 300px 300px 300px 300px
300px

7. DESIGN
RESPONSIVO

8. Muita gente já falou
disso antes.
“... 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

9. Devemos entregar a
mesma informação
relevante para
Não
Importa todo mundo!
qual seja o
dispositivo do
usuário.

10. Design responsivo é oferecer um único site para
todo mundo e adaptar a experiência do usuário
de acordo com o dispositivo.
1024 + 768 480 479 -

11. O Google recomenda Design
responsivo:
https://developers.google.com/webmasters/s
martphone-sites/details
SEO

12. O canal é
usar a
estratégia
Mobile-First

13. MELHORIA PROGRESSIVA

14. Estratégia para o sucesso do
01 02 03 04
 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
projeto
(Mobile-First)

15. Priorizar
Conteúdo
Código de
Qualidade
Design
Simples e
Funcional
Maior
Produtividade
da equipe

16. Posso fazer o
contrário?
(Desktop-First)

17. Focar no
conteúdo
Mobile
First
Layout
Fluído
Media
Queries
Design responsivo é
basicamente

18. DESIGN
RESPONSIVO
(NA PRÁTICA)

19. Converter um site que não é
responsivo em responsivo

20. %

21. 100%
30% 30% 30%

22. 320px 320px

23. @media

24. Link1 | Link2 | Link3 | Link4 | Link5
01 02 03
04
01
02
03
Adaptar  Layout
 Conteúdo
Media Queries

25. Como funciona essa coisa?
Simples...

26. Como funciona essa coisa?

27. Conteúdo do site... “chirrion”

28. Nunca use
“display: none”

29. FACILITAR A VIDA DO USUÁRIO
Digitar dados no
celular é bem difícil.
Que tal no lugar dos asteriscos mostrar a senha, logo
você não precisa do campo “confirmar senha”. Um
campo a menos.

30. <input type="text"> <input type="url">
<input type="email"> <input type="tel">

31. Responsivo X Versão .m

32. www.m.uol.com.br www.uol.com.br

34. Contatos!
Obrigado
Meu povo