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.
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.
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.
~
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
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.
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
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)
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