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.
Introdução as práticas de desenvolvimento web com design responsivo
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.
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.
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.
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;
}
}
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
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/>