Responsive Web Design: introdução ao conceito e fundamentos

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

Fonte: http://www.siliconbeachtraining.co.uk/blog/wp-content/uploads/2012/05/Responsive-Web-Design.jpg

Saindo da zona de conforto

“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

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

Muito menos este!

Veja você mesmo: http://www2.warnerbros.com/spacejam/movie/jam.htm

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
Fonte: G1
de usuários de celular com acesso à internet

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
initial-scale=1, user-scalable=no">

– minimum-scale, maximum-scale: 0.25 a 10
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;
}

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

940px
Grid

40px

20px

460px 460px

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> <aside>

width: 570px; margin-left: 10px; margin-right: width: 315px; margin-left: 10px;
10px; padding-right: 10px; margin-right: 10px; padding-left:
25px;

<section> <section> <section>
width: width: width:
160px 160px 160px

<div> max-width: 960px

<header>

width: 940 / 960; margin-left: 10px; margin-right: 10px

<article> <aside>

width: 570 / 960; margin-left: 10px; margin- width: 315 / 960; margin-left:
right: 10px; padding-right: 10px; 10px; margin-right: 10px;
padding-left: 25px;

width: 160 width: 160 width: 160
/ 570 / 570 / 570


<header>

width: 97.91666666666667%; margin-left: 10px; margin-right: 10px

<article> <aside>

width: 59.375%; margin-left: 10px; margin-right: width: 32.8125%; margin-left:
10px; padding-right: 10px; 10px; margin-right: 10px;
padding-left: 25px;

28.0701754 28.0701754 28.0701754
3859649% 3859649% 3859649%

Margin e padding relativos
• Margin
– Considera a largura do elemento-pai
• Padding
– Considera a largura do próprio elemento


<header>

width: 97.91666666666667%; margin-left: 10 / 940; margin-right: 10 / 940

<article> <aside>

width: 59.375%; margin-left: 10 / 940; margin- width: 32.8125%; margin-left: 10
right: 10 / 940; padding-right: 10 / 570; / 940; margin-right: 10 / 940;
padding-left: 25 / 315;

28.0701754 28.0701754 28.0701754
3859649% 3859649% 3859649%


<header>

width: 97.91666666666667%; margin-left: 1.04166666666667%; margin-right:
1.04166666666667%

<article> <aside>

width: 59.375%; margin-left: width: 32.8125%; margin-left:
1.04166666666667%; margin-right: 1.04166666666667%; margin-
1.04166666666667%; padding-right: right: 1.04166666666667%;
1.75438596491228%; padding-left:
7.93650793650794%;
28.0701754 28.0701754 28.0701754
3859649% 3859649% 3859649%

Considerando a largura do
container também de forma
relativa, dado o contexto de
1280px para a página

<div> width: 960 / 1280

<header>

1.04166666666667%

<article> <aside>

1.75438596491228%; padding-left:
7.93650793650794%;
28.0701754 28.0701754 28.0701754
3859649% 3859649% 3859649%

<div> width: 75%

<header>

1.04166666666667%

<article> <aside>

1.75438596491228%; padding-left:
7.93650793650794%;
28.0701754 28.0701754 28.0701754
3859649% 3859649% 3859649%

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.as
p?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) { }

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?

• 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/

http://www.themaninblue.com/experime
nt/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/

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

Design Responsivo ou versão mobile?

Design Responsivo Versão mobile

Sites de Aplicações
conteúdo

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.

Responsive Web Design
Talita Pagani
MStech | @talitapagani | talita.cpb@gmail.com

Responsive Web Design: introdução ao conceito e fundamentos

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

Similaire à Responsive Web Design: introdução ao conceito e fundamentos

Similaire à Responsive Web Design: introdução ao conceito e fundamentos (20)

Plus de Talita Pagani

Plus de Talita Pagani (20)

Responsive Web Design: introdução ao conceito e fundamentos