Download - Responsive Web Design
![Page 1: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/1.jpg)
Responsive Web Design
Talita Pagani MStech | @talitapagani
![Page 2: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/2.jpg)
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
![Page 3: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/3.jpg)
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
![Page 4: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/4.jpg)
Conceito
![Page 5: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/5.jpg)
Saindo da zona de conforto
Fonte: http://www.siliconbeachtraining.co.uk/blog/wp-content/uploads/2012/05/Responsive-Web-Design.jpg
![Page 6: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/6.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.”
![Page 7: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/7.jpg)
“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
![Page 8: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/8.jpg)
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
![Page 9: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/9.jpg)
Responsive Design não é...
• Adaptação de layout considerando apenas dispositivos diferentes
• Apenas layout fluído
• Layout adaptativo
• Miniaturização de um site
![Page 10: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/10.jpg)
Estes sites possuem um layout responsivo...
![Page 11: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/11.jpg)
Este não...
![Page 12: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/12.jpg)
Muito menos este!
Veja você mesmo: http://www2.warnerbros.com/spacejam/movie/jam.htm
![Page 13: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/13.jpg)
Quem “inventou” isso?
![Page 14: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/14.jpg)
Fonte: http://www.alistapart.com/articles/responsive-web-design
![Page 15: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/15.jpg)
Cenário atual
Fonte: http://www.artistechnewmedia.com/thenest/wp-content/uploads/2012/03/responsive-web-design.jpg
![Page 16: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/16.jpg)
Fonte: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
![Page 17: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/17.jpg)
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
![Page 18: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/18.jpg)
Conceitos de um layout responsivo
• Controle do viewport
• Grids adaptativas
• Imagens flexíveis
• CSS Media Queries
![Page 19: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/19.jpg)
Viewport
Fonte: http://www.iconfinder.com/icondetails/81865/512/_icon
![Page 20: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/20.jpg)
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
![Page 21: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/21.jpg)
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
![Page 22: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/22.jpg)
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">
![Page 23: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/23.jpg)
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
![Page 24: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/24.jpg)
Futura implementação para CSS3
@viewport {
width: 320px;
height: device-height;
zoom: 1;
max-zoom: 2;
min-zoom: 0.5;
}
![Page 25: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/25.jpg)
Fonte Aa
![Page 26: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/26.jpg)
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;
}
![Page 27: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/27.jpg)
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;
}
![Page 28: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/28.jpg)
Grids
Fonte: http://www.agencyofrecord.com/library/resources338/images/articles/responsive_web_design_grids.jpg
![Page 29: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/29.jpg)
Grid
![Page 30: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/30.jpg)
Grid
![Page 31: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/31.jpg)
Grid 940px
460px 460px
40px
20px
![Page 32: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/32.jpg)
Grids Flexíveis
• Transforme as larguras fixas em larguras variáveis
– Mesma fórmula: Tamanho desejado ÷ contexto = resultado
– Unidade diferente: %
![Page 33: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/33.jpg)
<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
![Page 34: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/34.jpg)
<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
![Page 35: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/35.jpg)
<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%
![Page 36: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/36.jpg)
Margin e padding relativos
• Margin
– Considera a largura do elemento-pai
• Padding
– Considera a largura do próprio elemento
![Page 37: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/37.jpg)
<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%
![Page 38: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/38.jpg)
<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%
![Page 39: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/39.jpg)
Considerando a largura do container também de forma relativa, dado o contexto de 1280px para a página
![Page 40: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/40.jpg)
<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%
![Page 41: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/41.jpg)
<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%
![Page 42: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/42.jpg)
Imagens
![Page 43: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/43.jpg)
Imagens dimensionáveis
• Utilize também medidas relativas
• Inserir a imagem em um container com dimensões relativas
![Page 44: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/44.jpg)
<figure>
<img src="robot.jpg"
alt="" />
<figcaption>Lo, the robot
walks</figcaption>
</ figure>
![Page 45: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/45.jpg)
figure {
width: 48.7341772%;
}
figure img {
max-width: 100%;
}
![Page 46: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/46.jpg)
figure {
width: 48.7341772%;
}
img,
embed,
object,
video {
max-width: 100%;
}
![Page 47: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/47.jpg)
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>
![Page 48: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/48.jpg)
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>
![Page 49: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/49.jpg)
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
![Page 50: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/50.jpg)
Media Queries
Fonte: http://dribbble.s3.amazonaws.com/users/4465/screenshots/494207/responsive_design.png
![Page 51: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/51.jpg)
Media Queries
• Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio.
![Page 52: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/52.jpg)
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...
![Page 53: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/53.jpg)
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
![Page 54: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/54.jpg)
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; } }
![Page 55: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/55.jpg)
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)
![Page 56: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/56.jpg)
Fonte: http://www.metaltoad.com/blog/simple-device-diagram-responsive-design-planning
![Page 57: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/57.jpg)
/* 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) { }
![Page 58: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/58.jpg)
Experiência do Usuário
![Page 59: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/59.jpg)
Diferentes dispositivos, diferentes interações
• Botões
• Campos de formulários
• Áreas de clique
![Page 60: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/60.jpg)
Fonte: http://mobile.smashingmagazine.com/2012/06/28/responsive-menus-enhancing-navigation-on-mobile-websites/
![Page 61: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/61.jpg)
Faça wireframes e protótipos
Fonte: http://dolody.com/#!/masterpiece/responsive-design-streamlining-your-process.html
![Page 62: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/62.jpg)
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
![Page 63: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/63.jpg)
Progressive Enhancement X
Graceful Degradation
![Page 64: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/64.jpg)
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”
![Page 65: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/65.jpg)
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?
![Page 66: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/66.jpg)
Ferramentas
![Page 67: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/67.jpg)
• 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/
![Page 68: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/68.jpg)
• 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/
![Page 69: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/69.jpg)
• 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/
![Page 70: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/70.jpg)
Exemplos
![Page 71: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/71.jpg)
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/
![Page 72: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/72.jpg)
http://foodsense.is/
http://forefathersgroup.com/
http://2012.newadventuresconf.com/
Muitos outros exemplos aqui:
http://mediaqueri.es/
![Page 73: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/73.jpg)
Conclusões
![Page 74: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/74.jpg)
Vantagens do Design Responsivo
• Um único código
• Uma única URL
• Economia de tempo e dinheiro
• Melhoria para SEO
• Melhor desempenho
• Amplo suporte
![Page 75: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/75.jpg)
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
![Page 76: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/76.jpg)
Design Responsivo ou versão mobile?
Design Responsivo
Sites de conteúdo
Versão mobile
Aplicações
![Page 77: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/77.jpg)
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>.
![Page 78: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/78.jpg)
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>.
![Page 79: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/79.jpg)
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.
![Page 80: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/80.jpg)
Obrigada.
![Page 82: Responsive Web Design](https://reader034.vdocuments.pub/reader034/viewer/2022051411/546566f4af79590f738b7a41/html5/thumbnails/82.jpg)
Perguntas?