O documento apresenta os conceitos e fundamentos do design responsivo. Em 3 frases:
Introduz o conceito de design responsivo, que permite a adaptação de sites para diferentes dispositivos de forma flexível, utilizando grids, imagens e media queries em CSS. Explica que o design responsivo não é apenas sobre layouts fluidos, mas sim sobre a adaptação do conteúdo e navegação para diferentes telas. Apresenta exemplos básicos de como implementar grids, imagens e estilos flexíveis utilizando unidades relativas e media queries para criar sites responsivos.
2. Quem sou
• Programadora / Tester na Mstech
• Bacharel em Ciência da Computação
– Pós-graduanda em Gerenciamento de Projetos
• Articulista no Tableless
• Palestrante em eventos de front-end e
curadora do FrontInterior
3. Alinhando expectativas
O que é este minicurso O que não é este minicurso
• Introdução ao conceito de • Curso avançado de
Responsive Web Design desenvolvimento web
(RWD) ou Design
• Curso de Mobile First
Responsivo
(apesar de ser
• Apresentações de
mencionado)
exemplos e fundamentos
básicos de RWD • Curso de HTML, CSS e
• Bootstrap para quem padrões web
deseja iniciar o
desenvolvimento de sites
responsivos
6. “Dia-a-dia, cresce o número de
dispositivos, plataformas e
navegadores em que o seu site
precisa funcionar. O Design
Responsivo representa uma mudança
fundamental na forma como iremos
construir sites na próxima década.”
Jeffrey Veen
7. “O número total de pessoas
acessando a web através de
dispositivos móveis irá superar
o acesso via desktop em 2015.”
International Data Corporation (IDC)
http://www.idc.com/getdoc.jsp?containerId=prUS23028711
8. Responsive Design é...
• Adaptação de páginas web para
– Diferentes resoluções
– Diferentes orientações de tela
– Distintas plataformas de interação
– Otimização de performance
9. Responsive Design não é...
• Adaptação de layout considerando
apenas dispositivos diferentes
• Apenas layout fluído
• Layout adaptativo
• Miniaturização de um site
17. Mobile no Brasil
2008: 794 usuários de telefonia móvel / 100 mil habitantes
Fonte: IBGE
2011: 40 milhões
Fonte: G1
de usuários de celular com acesso à internet
18. Conceitos de um layout responsivo
• Controle do viewport
• Grids adaptativas
• Imagens flexíveis
• CSS Media Queries
20. Viewport
• Aréa de visualização onde o site
aparece
Largura de tela ≠ Resolução
• Customização do viewport: definir
resolução inicial e evitar miniaturização
21. Páginas sem definição de
viewport
Fonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit
http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale
22. Metatag viewport
<name="viewport" content="">
• Parâmetros
– width/height: valor ou device-[width/height]
<name="viewport" content=“width=device-width">
– initial-scale: 0 a 10
<name="viewport" content=“width=device-width,
initial-scale=1">
– user-scalable: yes/no
<name="viewport" content=“width=device-width,
initial-scale=1, user-scalable=no">
– minimum-scale, maximum-scale: 0.25 a 10
<name="viewport" content=“width=device-width,
initial-scale=1, maximum-scale=1.5">
23. Páginas com definição de
viewport
Fonte: http://thecodinghumanist.com/blog/archives/2012/1/25/using-the-viewport-meta-tag-for-fun-and-profit
http://www.html5today.it/tutorial/mobile-web-development-meta-tag-viewport-visualizzazione-ottimale
48. Mas já é válido para vídeos
<video>
<source type=“video/webm”
src=“small.webm” media=“all and(max-
width: 480px)”/>
<source type=“video/webm”
src=“large.webm” media=“all and(min-
width: 481px)”/>
</video>
49. Background também pode ser
responsivo
• Propriedade background-size do CSS3
– background-size: <largura> <altura>;
http://www.w3schools.com/css3/tryit.as
p?filename=trycss3_background-size
51. Media Queries
• Expressões condicionais para aplicar
diferentes regras CSS dependendo da
largura do viewport, orientação da tela
e/ou aspect ratio.
53. Exemplos
• screen and (max-width:480px)
– Resolução máxima no viewport de 480px
• @media all and (orientation:landscape)
– Orientação “paisagem”
• @media screen and (device-aspect-ratio: 16/9)
– Monitores 16:9 (ex.: resolução de 1280 x 720px)
• @media screen and (min-width: 400px) and (max-width:
700px)
– Tela com resolução mínima de 400px e máxima de 700px
54. Formas de aplicar
• Propriedade “media” da tag <link>
– <link rel="stylesheet" media="screen
and (max-width: 600px)"
href="small.css" />
• Direto no CSS
– @media screen and (min-width: 600px)
and (max-width: 900px) {
.class {
background: #333;
}
}
55. Definindo ranges
• Preciso criar folhas de estilo para
todas as resoluções possíveis e
imagináveis?
– NÃO!
– Defina ranges (faixas de valores)
• 320px (iPhone retrato)
• 480px (iPhone paisagem)
• 768px (iPad retrato)
• 1024px (iPad paisagem)
61. Faça wireframes e protótipos
Fonte: http://dolody.com/#!/masterpiece/responsive-design-streamlining-your-process.html
62. Mobile First
• Projete e otimize primeiro para telas
menores
• Progressive Enhancement
– Assegure as funcionalidades básicas a
qualquer dispositivo
– Versões mais avançadas podem ser
visualizadas em browsers e dispositivos
melhores
64. Usabilidade
• Foco em tarefas primárias
• Eleve o conteúdo com o qual as pessoas
se importam
– Liste as funcionalidades que os usuários
possam gostar
– Determine a audiência
• Dê ao usuário um caminho lógico a
seguir
• Utilização simples e óbvia
• Terminologia “centrada no usuário”
65. Usabilidade
• Qual a necessidade de seus usuários
ao acessar o seu site através de um
dispositivos móvel?
• Que recursos ele utilizam?
• Quais recursos são cruciais para eles
quando estão acessando via mobile?
• Quais as frustrações?
• Quais dispositivos são utilizados para
este acesso?
74. Vantagens do Design
Responsivo
• Um único código
• Uma única URL
• Economia de tempo e dinheiro
• Melhoria para SEO
• Melhor desempenho
• Amplo suporte
75. Design Responsivo ou versão mobile?
Design Responsivo Versão mobile
• Reduzir algumas • Subconjunto de
informações funcionalidades da
• Rearranjo de layout aplicação desktop
para beneficiar • Tarefas mais focadas
diferentes resoluções • Corte de alguns
de tela caminhos de interação
• Utilizar os padrões de
interface de mobile
76. Design Responsivo ou versão mobile?
Design Responsivo Versão mobile
Sites de Aplicações
conteúdo
77. Referências
Ethan, M. “Responsive Web Design”, 2010. Disponível em:
<http://www.alistapart.com/articles/responsive-web-design/>.
Dagobert. “Introduction au Responsive Web Design”, 2012.
Disponível em: <http://www.slideshare.net/agencedagobert/le-
responsive-design-par-dagobert>.
Pagani, T. “Usabilidade em Dispositivos Móveis”, 2012. Disponível
em: <http://talitapagani.github.com/FrontInCuritiba-2012/>.
Byttebier, T. “Responsive Web Design”, 2011. Disponível em: <
http://www.slideshare.net/bytte/responsive-web-design-
10389263>.
78. Referências
W3C. “Media Queries”, 2012. Disponível em:
<http://www.w3.org/TR/css3-mediaqueries/>.
Web Designer Wall. “CSS3 Media Queries”. 2010. Disponível em:
<http://webdesignerwall.com/tutorials/css3-media-queries>.
Eis, D. “Introdução sobre Media Queries”, 2009. Disponível em:
<http://tableless.com.br/introducao-sobre-media-queries/>.
Bovens, A. “Responsive design: techniques and tricks to prepare
your website for the multi-screen future”, 2012. Disponível em: <
http://www.slideshare.net/andreasbovens/responsive-design-
techniques-and-tricks-to-prepare-your-websites-for-the-
multiscreen-future>.
79. Referências
Bovens, A. “An introduction to meta viewport and @viewport”,
2011. Disponível em: < http://dev.opera.com/articles/view/an-
introduction-to-meta-viewport-and-viewport/>.
Marcotte, E. “Responsive Web Design”. New York: A Book Apart,
2011.