O documento introduz os conceitos e técnicas de design responsivo para desenvolvimento web. Apresenta a história do design responsivo, as resoluções de tela, técnicas como layout fluido, recursos flexíveis e media queries, além de ferramentas para teste e validação de sites responsivos.

1. Introdução as práticas de
Desenvolvimento Web com
Design Responsivo
Meditec 2013
Anderson Davi
andersonrdavi@gmail.com
Régis Eduardo
regiseduardogregol@gmail.com

2. Roteiro
● Introdução
● Sites mobiles ou sites responsivos
● Resoluções de telas
● Técnicas do design responsivo
● Tipos de Medidas no CSS
● Media Queries
● Metatag ViewPort
● Ferramentas

3. Introdução
O que é web design responsivo?
É um web design que responde a quaisquer dispositivos com diferentes
resoluções de tela e, devido a uma série de técnicas é bem apresentado em
qualquer um deles.
Como surgiu?
Tudo começou em um blog chamado A List Part de Ethan Marcotte. Em
2010, ele publicou um artigo com o título Responsive Web Design dando
sugestões e explicações de seus conceitos para o que ele chamou de web
design responsivo.

4. Introdução
Porque design responsivo?
"Web não é mais sinônimo de desktops e notebooks. Novos meios de
acesso, novos usuários, novos hábitos." Lopes, 2012.

5. Site Mobile ou
Site Responsivo?

6. Sites Mobile
UOL
http://m.uol.com.br
GLOBO
http://m.globo.com/

7. Sites Responsivos
● MediaQueries
http://mediaqueri.es/
● Highway Hurricanes
http://www.highwayhurricanes.com/

14. Resoluções de tela
Fonte: ZEMEL (2012, p.21).

15. Técnicas do
design responsivo
As três técnicas do Web Design Responsivo:
● Layout Fluído: Também chamado de Flexible Grid Layout, adaptação
"natural", evita barra de rolagens;
● Recursos Flexíveis: Imagens flexíveis, vídeos, etc;
● Media Queries: Reposicionamento de elementos conforme a resolução
atual da tela.

16. Vamos praticar?

17. Layout Fluído

18. Tipos de Medida do CSS
Pixel (px): A mais usada em folhas de estilo (CSS). É uma unidade de
medida fixa. Um píxel, representa um ponto não divisível na tela.
Point (pt): Pontos são mais utilizados em folhas de estilo de
impressão. Um ponto é igual a 1/72 polegadas e também são medidas
fixas.

19. Tipos de Medida do CSS
Ems (em): Ems são utilizados frequentemente para tamanhos de fonte.
São unidades escaláveis. 1em representa o tamanho da fonte do
elemento pai.
Porcentagem (%): Unidade semelhante com "em". Unidade mais
adaptável, pois se adequa a diferentes resoluções de tela.
Boas práticas:
● Utilizar "em" para tamanhos de fonte;
● Utilizar "%" para elementos de bloco.

20. Elementos vs Textos
Elementos são flexíveis, podem se ajustar ao
espaço de tela disponível.
Textos não são flexíveis.

21. Vamos praticar?

22. Recursos
Flexíveis

23. Recursos Flexíveis
● imagens
● vídeos
● object
● embed
● iframe

24. Vamos praticar?

25. Media Queries

26. Media Queries
Media Types: Recomendação da W3C, desde o CSS2. Apresentar o
site conforme a media.
Tais como:
● all: Folha de estilo para todos os dispositivos;
● print: Utilizada para layout de impressão;
● screen: Utilizada para telas coloridas de computador.
Também existem outras medias como:
braille, embosed, handheld, projection, speech, tty, tv.

27. Media Queries
Exemplos de Media Queries.
<!-- no html -->
<link rel="stylesheet" href="style.css" media="all and (max-width: 320px)">
/** No arquivo */
@media all and (max-width: 320px) {
h1 {
font-size: 0.7em;
}
}

28. Vamos praticar?

29. Metatag viewport

30. Metatag viewport
● Descobrindo o tamanho da viewport
○ http://benfrain.com/downloads/respond.html

31. Metatag viewport
<meta name="viewport" content="">
width Define uma largura para o viewport. Os valores podem ser em PX ou
“device-width”, que determina automaticamente um valor igual a largura da
tela do dispositivo.
height Define uma altura para o viewport. Os valores podem ser em PX ou
“device-height”, que determina automaticamente um valor igual a altura da
tela do dispositivo.
initial-scale Define a escala inicial do viewport.
user-scalable Define a possibilidade de o usuário fazer “zoom” em um determinado lugar
da tela. É ativado quando o usuário bate duas vezes com o dedo em um
lugar da tela.

32. Responsivo ou não?
● O que vale a pena?
○ Montar layout responsivo ou site específico pra
mobile ?
● Vantagens
● Desvantagens
● Bootstrap

33. Ferramentas
● Responsive Play - Sergio Lopes
○ http://sergiolopes.github.io/responsive-play/
● Responsive web design testing tool
○ http://mattkersley.com/responsive/
● Screenfly
○ http://quirktools.com/screenfly/

34. Curiosidades
● CSS3 font-size techniques
○ http://css-tricks.com/viewport-sized-typography/
● Imagens Responsivas
○ http://tableless.com.br/3-parametros-de-html-que-voce-dev-usar-em-
um-futuro-proximo/

35. Referências
ZEMEL, Tárcio. Web design Responsivo, Páginas adaptáveis para todos os
dispositivos. 2012, Casa do código.
LOPES, Sérgio. Design Resposivo Por Uma Web Única. 2012. Disponível em:
<http://sergiolopes.org/responsive-web-design/>
EIS, Diego. Manipulando a metatag viewport. Disponível em: <http://tableless.
com.br/manipulando-metatag-viewport/>

36. Código Fonte
● Github
○ https://github.com/bicoco/agenda-meditec
● Exemplo layout fixo:
○ http://agendameditec.herokuapp.com/index.html
● Exemplo layout responsivo:
○ http://agendameditec.herokuapp.com/responsivo.html

37. Obrigado!