O documento discute layout responsivo, fornecendo definições, princípios e exemplos. Explica como criar interfaces flexíveis para diferentes dispositivos através de planejamento, uso de frameworks e media queries. Também lista vantagens como SEO, identidade visual e experiência do usuário.

1. Construsite Brasil
Criação de sites
L A Y O U T
RESPONSIVO

2. Construsite Brasil
Criação de sites
RESPONSIVO
PROJETAR INTERFACE FLEXÍVEL PARA
DIFERENTES RESOLUÇÕES E DISPOSITIVOS,
QUE TENHA FOCO NA EXPERIÊNCIA DO
USUÁRIO ATRAVÉS DAS NOVAS TECNOLOGIAS
DE DESENVOLVIMENTO WEB.

3. Construsite Brasil
Criação de sites
DE ONDE VOCÊ ACESSA E ATRAVÉS DE
QUAL DISPOSITIVO?

4. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites

5. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites

6. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites

7. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites

8. Construsite Brasil
Criação de sites
2010
APROXIMADAMENTE EM 2010 OS DESIGNERS
E DESENVOLVEDORES DE INTERFACES
COMEÇARAM A PENSAR NESTE MÉTODO DE
MANTER A ESTRUTURA, PORÉM PROMOVER
DIFERENCIAIS NA INTERFACE PARA MELHORAR
A EXPERIÊNCIA DO USUÁRIO.
~

9. Construsite Brasil
Criação de sites
PRINCÍPIOS PARA
UM BOM LAYOUT
RESPONSIVO
Construsite Brasil
Criação de sites

10. Construsite Brasil
Criação de sites
PRINCÍPIOS PARA
UM BOM LAYOUT
RESPONSIVO
PLANEJAMENTO
WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS
(É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO
QUE A MAIORIA DOS PROFISSIONAIS ERRAM.)
Construsite Brasil
Criação de sites

11. Construsite Brasil
Criação de sites
PRINCÍPIOS PARA
UM BOM LAYOUT
RESPONSIVO
PLANEJAMENTO
WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS
(É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO
QUE A MAIORIA DOS PROFISSIONAIS ERRAM.)
MELHORES PRÁTICAS DE
DESENVOLVIMENTO
ACREDITE! NINGUÉM SABE 100% CSS OU HTML.
ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR
UM FRAMEWORK.
Construsite Brasil
Criação de sites

12. Construsite Brasil
Criação de sites
PRINCÍPIOS PARA
UM BOM LAYOUT
RESPONSIVO
PLANEJAMENTO
WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS
(É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO
QUE A MAIORIA DOS PROFISSIONAIS ERRAM.)
MELHORES PRÁTICAS DE
DESENVOLVIMENTO
SAIBA COMO O USUÁRIO DOS
PRINCIPAIS DISPOSITIVOS
SE COMPORTA.
ACREDITE! NINGUÉM SABE 100% CSS OU HTML.
ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR
UM FRAMEWORK.
Construsite Brasil
Criação de sites

13. Construsite Brasil
Criação de sites
QUAIS AS VANTAGENS DE
DESENVOLVER UM PROJETO
RESPONSIVO?

14. Construsite Brasil
Criação de sites
QUAIS AS VANTAGENS DE
DESENVOLVER UM PROJETO
RESPONSIVO?
SEO
- Não ao conteúdo duplicado. (http://m.meusite.com/).
- Utilização dos microdados e marcações simples e semânticas.

15. Construsite Brasil
Criação de sites
QUAIS AS VANTAGENS DE
DESENVOLVER UM PROJETO
RESPONSIVO?
SEO
- Não ao conteúdo duplicado. (http://m.meusite.com/).
- Utilização dos microdados e marcações simples e semânticas.
DESIGN
- Identidade visual uniforme.
- Experiência do usuário é o foco.
- Não se projeta para plataforma e sim para usuários.

16. Construsite Brasil
Criação de sites
PROGRAMAÇÃO ÚNICA
- Mais produtividade no back-end.
- Único banco e única linguagem.
QUAIS AS VANTAGENS DE
DESENVOLVER UM PROJETO
RESPONSIVO?
SEO
- Não ao conteúdo duplicado. (http://m.meusite.com/).
- Utilização dos microdados e marcações simples e semânticas.
DESIGN
- Identidade visual uniforme.
- Experiência do usuário é o foco.
- Não se projeta para plataforma e sim para usuários.

17. Construsite Brasil
Criação de sites
GOOGLE
- Recomenda a utilização desta técnica.
- Punições:
1. Sites que exibe conteúdo em flash para dispositivos móveis.
2. Sites que exibe layout para desktop em dispositivos móveis.
3. Se o usuário acessar “meusite.com/casa” e for direcionado para “m.meusite.com”.
PROGRAMAÇÃO ÚNICA
- Mais produtividade no back-end.
- Único banco e única linguagem.
DESENVOLVER UM PROJETO
RESPONSIVO?
SEO
- Não ao conteúdo duplicado. (http://m.meusite.com/).
- Utilização dos microdados e marcações simples e semânticas.
DESIGN
- Identidade visual uniforme.
- Experiência do usuário é o foco.
- Não se projeta para plataforma e sim para usuários.

18. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites

19. Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
#comofaz?

20. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END

21. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END

22. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/

23. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/
FOUNDATION
http://foundation.zurb.com

24. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/
FOUNDATION
http://foundation.zurb.com
HTML5 BOILERPLATE
http://html5boilerplate.com

25. Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/
FOUNDATION
http://foundation.zurb.com
HTML5 BOILERPLATE
http://html5boilerplate.com
PURE CSS
http://purecss.io

26. Construsite Brasil
Criação de sites
Adobe Edge Reflow CC (Preview)
Design the responsive web.
http://html.adobe.com/edge/reflow/
Construsite Brasil
Criação de sites

27. Construsite Brasil
Criação de sites
MEDIA QUERIES
SEMÂNTICA HTML5
http://www.w3.org/TR/css3-mediaqueries/
CSS3
+

28. Construsite Brasil
Criação de sites
MEDIA QUERIES
//html link
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel="stylesheet" type="text/css" media="print" href="serif.css">
//stylesheet document
@media screen {
* { font-family: sans-serif }
}

29. Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
//html link - é no atributo media que definimos para quais dispositipos, resoluções, tamanhos ou
aplicações servirá nossa folha de estilo.
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link rel=”stylesheet” media=”screen and (color)” href=”example.css” />
<link rel=”stylesheet” media=”aural and (device-aspect-ratio: 16/9)” href=”example.css” />
<link rel=”stylesheet” media=”speech and (min-device-width: 800px)” href=”example.css” />
<link rel=”stylesheet” media=”screen and (device-height: 600px)” />
<link rel=”stylesheet” media=”print and (color)” href=”http://…” />
<link rel=”stylesheet” media=”print and (monochrome)” href=”http://…” />

30. Construsite Brasil
Criação de sites
MEDIA QUERIES
//stylesheet document
@media screen {
* { font-family: sans-serif }
}
@media all and (min-width:500px) { … }
@media (min-width:500px) { … }
@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
@media (min-width: -100px) { … }
@media screen and (device-width: 800px) { … }
@media all and (monochrome) { … }
@media all and (min-monochrome: 1) { … }
@media print and (min-resolution: 300dpi) { … }
@media tv and (scan: progressive) { … }
(MEDIA TYPES)

31. Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
//initial scale
<meta name=”viewport” content=”width=device-width, initial-scale=1” />

32. Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
NORMAL SLTYLE
(width: 1024px or +)
TABLET
(width: 1023-768px)
SMART PHONE
(width: 767-479px)

33. Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)

34. Construsite Brasil
Criação de sites
http://mediaqueri.es
(MEDIA TYPES - EXEMPLOS)

35. Construsite Brasil
Criação de sites
Créditos
Construsite Brasil
Criação de sites
www.construsitebrasil.com
Marcos César
Desenvolvedor front-end e Designer
Material elaborado por:

36. Construsite Brasil
Criação de sites
Referências
Introdução ao Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013].
Disponível em: http://tableless.com.br/introducao-ao-responsive-web-design/#.Ucwyhz7wLT0
Design Responsivo na prática: do rascunho ao digital. [acesso em 26 de junho de 2013].
Disponível em: http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/#.UcwzRj7wLT0
Slides para Devs #3 – Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013].
http://tableless.com.br/slides-para-devs-3-responsive-web-design/#.UcwzQz7wLT0
Adobe Edge Reflow CC (Preview) Design the responsive web. [acesso em 26 de junho de 2013].
http://html.adobe.com/edge/reflow/
Responsive Design - the only mobile strategy that scales. [acesso em 26 de junho de 2013].
Disponível em: http://visual.ly/responsive-design-only-mobile-strategy-scales
Responsive design : 10 exemples de sites web de destinations touristiques. [acesso em 26 de junho de 2013].
Disponível em: http://www.leweboskop.fr/responsive-design-10-exemples-de-sites-web-de-destinations-touristiques/
What is Responsive Design!?. [acesso em 26 de junho de 2013].
Disponível em: http://vinaganda.com/what-is-responsive-design/
Layouts Responsivos. Bernard De Luna/Zeno Rocha . [acesso em 26 de junho de 2013].
Disponível em: http://www.slideshare.net/bernarddeluna/pdf-apresentacaolayoutsresponsivos
Design Responsivo: Entenda o que é a técnica e como ela funciona. [acesso em 26 de junho de 2013].
Disponível em: http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona