Responsive Web Design
Talita Pagani MStech | @talitapagani
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
Alinhando expectativas
O que é este minicurso
• Introdução ao conceito de Responsive Web Design (RWD) ou Design Responsivo
• Apresentações de exemplos e fundamentos básicos de RWD
• Bootstrap para quem deseja iniciar o desenvolvimento de sites responsivos
O que não é este minicurso
• Curso avançado de desenvolvimento web
• Curso de Mobile First (apesar de ser mencionado)
• Curso de HTML, CSS e padrões web
Conceito
Saindo da zona de conforto
Fonte: http://www.siliconbeachtraining.co.uk/blog/wp-content/uploads/2012/05/Responsive-Web-Design.jpg
Jeffrey Veen
“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.”
“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
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
Responsive Design não é...
• Adaptação de layout considerando apenas dispositivos diferentes
• Apenas layout fluído
• Layout adaptativo
• Miniaturização de um site
Estes sites possuem um layout responsivo...
Este não...
Muito menos este!
Veja você mesmo: http://www2.warnerbros.com/spacejam/movie/jam.htm
Quem “inventou” isso?
Fonte: http://www.alistapart.com/articles/responsive-web-design
Cenário atual
Fonte: http://www.artistechnewmedia.com/thenest/wp-content/uploads/2012/03/responsive-web-design.jpg
Fonte: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
Mobile no Brasil
2008: 794 usuários de telefonia móvel / 100 mil habitantes Fonte: IBGE
2011: 40 milhões de usuários de celular com acesso à internet
Fonte: G1
Conceitos de um layout responsivo
• Controle do viewport
• Grids adaptativas
• Imagens flexíveis
• CSS Media Queries
Viewport
Fonte: http://www.iconfinder.com/icondetails/81865/512/_icon
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
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
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">
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
Futura implementação para CSS3
@viewport {
width: 320px;
height: device-height;
zoom: 1;
max-zoom: 2;
min-zoom: 0.5;
}
Fonte Aa
Fontes
body {
font: normal 100% Cambria, Georgia, serif;
}
• Fonte padrão de 16px na maioria dos browsers
• Para os demais elementos, uso da medida relativa em – Tamanho desejado ÷ contexto = resultado
– Ex.: 24 ÷ 16 = 1.5
h1 {
font-size: 1.5em; /* 24px / 16px */
font-style: italic;
font-weight: normal;
}
Fontes
• Para este código h1 span { } • Onde desejamos ter uma fonte de 11px, iremos
dividir a fonte desejada pelo novo contexto, 24px – 11 ÷ 24 = 0.458333333333333 – Contexto = tamanho da fonte do elemento
ancestral
h1 span {
font: bold 0.458333333333333em Calibri, Optima, Arial, sans-serif; /* 11px / 24px */
color: #747474;
letter-spacing: 0.15em;
}
Grids
Fonte: http://www.agencyofrecord.com/library/resources338/images/articles/responsive_web_design_grids.jpg
Grid
Grid
Grid 940px
460px 460px
40px
20px
Grids Flexíveis
• Transforme as larguras fixas em larguras variáveis
– Mesma fórmula: Tamanho desejado ÷ contexto = resultado
– Unidade diferente: %
<div> width: 960px
<header>
width: 940px; margin-left: 10px; margin-right: 10px
<article>
width: 570px; margin-left: 10px; margin-right: 10px; padding-right: 10px;
<aside>
width: 315px; margin-left: 10px; margin-right: 10px; padding-left:
25px;
<section> width: 160px
<section> width: 160px
<section> width: 160px
<div> max-width: 960px
<header>
width: 940 / 960; margin-left: 10px; margin-right: 10px
<article>
width: 570 / 960; margin-left: 10px; margin-right: 10px; padding-right: 10px;
<aside>
width: 315 / 960; margin-left: 10px; margin-right: 10px;
padding-left: 25px;
<section> width: 160
/ 570
<section> width: 160
/ 570
<section> width: 160
/ 570
<div> max-width: 960px
<header>
width: 97.91666666666667%; margin-left: 10px; margin-right: 10px
<article>
width: 59.375%; margin-left: 10px; margin-right: 10px; padding-right: 10px;
<aside>
width: 32.8125%; margin-left: 10px; margin-right: 10px;
padding-left: 25px;
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
Margin e padding relativos
• Margin
– Considera a largura do elemento-pai
• Padding
– Considera a largura do próprio elemento
<div> max-width: 960px
<header>
width: 97.91666666666667%; margin-left: 10 / 940; margin-right: 10 / 940
<article>
width: 59.375%; margin-left: 10 / 940; margin-right: 10 / 940; padding-right: 10 / 570;
<aside>
width: 32.8125%; margin-left: 10 / 940; margin-right: 10 / 940;
padding-left: 25 / 315;
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
<div> max-width: 960px
<header>
width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%
<article>
width: 59.375%; margin-left: 1.04166666666667%; margin-right:
1.04166666666667%; padding-right: 1.75438596491228%;
<aside>
width: 32.8125%; margin-left: 1.04166666666667%; margin-
right: 1.04166666666667%; padding-left:
7.93650793650794%; <section>
width: 28.07017543859649%
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
Considerando a largura do container também de forma relativa, dado o contexto de 1280px para a página
<div> width: 960 / 1280
<header>
width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%
<article>
width: 59.375%; margin-left: 1.04166666666667%; margin-right:
1.04166666666667%; padding-right: 1.75438596491228%;
<aside>
width: 32.8125%; margin-left: 1.04166666666667%; margin-
right: 1.04166666666667%; padding-left:
7.93650793650794%; <section>
width: 28.07017543859649%
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
<div> width: 75%
<header>
width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right: 1.04166666666667%
<article>
width: 59.375%; margin-left: 1.04166666666667%; margin-right:
1.04166666666667%; padding-right: 1.75438596491228%;
<aside>
width: 32.8125%; margin-left: 1.04166666666667%; margin-
right: 1.04166666666667%; padding-left:
7.93650793650794%; <section>
width: 28.07017543859649%
<section> width:
28.07017543859649%
<section> width:
28.07017543859649%
Imagens
Imagens dimensionáveis
• Utilize também medidas relativas
• Inserir a imagem em um container com dimensões relativas
<figure>
<img src="robot.jpg"
alt="" />
<figcaption>Lo, the robot
walks</figcaption>
</ figure>
figure {
width: 48.7341772%;
}
figure img {
max-width: 100%;
}
figure {
width: 48.7341772%;
}
img,
embed,
object,
video {
max-width: 100%;
}
Ou... (ainda não implementado na especificação)
<picture>
<source media=“(orientation:
landscape)” srcset=“long1.jpg 1x,
long2.jpg 2x” />
<source media=“(orientation:
portrait)” srcset=“tall1.jpg 1x,
tall2.jpg 2x” />
<img src=“fallback.jpg” />
</picture>
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>
Background também pode ser responsivo
• Propriedade background-size do CSS3
– background-size: <largura> <altura>;
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_background-size
Media Queries
Fonte: http://dribbble.s3.amazonaws.com/users/4465/screenshots/494207/responsive_design.png
Media Queries
• Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio.
Sintaxe básica
@media <mediatype> <operador> <característica>
• Mediatype: all, screen, print, braille, print, handheld, etc...
• Operadores lógicos: and / or
• Característica: width, height, device-width, device-height, orientation, aspect-radio, etc...
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
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; } }
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)
Fonte: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
/* WIDE DESKTOP LAYOUT
----------------------------------------------- */
@media screen and (min-width: 1176px) { }
/* TABLET LAYOUT
----------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 991px) { }
/* MOBILE LAYOUT (PORTRAIT/320PX)
----------------------------------------------- */
@media screen and (max-width: 767px) { }
/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)
----------------------------------------------- */
@media screen and (min-width: 480px) and (max-width: 767px) { }
Experiência do Usuário
Diferentes dispositivos, diferentes interações
• Botões
• Campos de formulários
• Áreas de clique
Fonte: http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/
Faça wireframes e protótipos
Fonte: http://dolody.com/#!/masterpiece/responsive-design-streamlining-your-process.html
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
Progressive Enhancement X
Graceful Degradation
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”
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?
Ferramentas
• Golden Grid System – http://goldengridsystem.com/
• The 1140 CSS Grid – http://cssgrid.net/
• Fluid Grids – http://csswizardry.com/fluid-grids/
• The Responsive Calculator – http://rwdcalc.com/
• FitText – http://fittextjs.com/
• Respond.js
– https://github.com/scottjehl/Respond
• Fluid Grids – http://csswizardry.com/fluid-grids/
• The Responsive Calculator – http://rwdcalc.com/
• Responsive Grid System – http://www.responsivegridsystem.com/
• CSS3-mediaqueries-js – http://code.google.com/p/css3-mediaqueries-
js/
• Bootstrap – http://twitter.github.com/bootstrap/
• Responsive Plugin – http://www.responsiveplugin.com/
• Gridpak – http://gridpak.com/
Exemplos
http://www.themaninblue.com/experiment/ResolutionLayout/
http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html
http://wet-boew.github.com/wet-boew/index-eng.html
http://www.anderssonwise.com/
http://foodsense.is/
http://forefathersgroup.com/
http://2012.newadventuresconf.com/
Muitos outros exemplos aqui:
http://mediaqueri.es/
Conclusões
Vantagens do Design Responsivo
• Um único código
• Uma única URL
• Economia de tempo e dinheiro
• Melhoria para SEO
• Melhor desempenho
• Amplo suporte
Design Responsivo ou versão mobile?
Design Responsivo
• Reduzir algumas informações
• Rearranjo de layout para beneficiar diferentes resoluções de tela
• Utilizar os padrões de interface de mobile
Versão mobile
• Subconjunto de funcionalidades da aplicação desktop
• Tarefas mais focadas
• Corte de alguns caminhos de interação
Design Responsivo ou versão mobile?
Design Responsivo
Sites de conteúdo
Versão mobile
Aplicações
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>.
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>.
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.
Obrigada.
Responsive Web Design
Talita Pagani MStech | @talitapagani | [email protected]
Perguntas?
Top Related