web design responsivo
Post on 29-Jun-2015
280 Views
Preview:
DESCRIPTION
TRANSCRIPT
Web Design Responsivo
Victor Melo Programação para Internet I ADS - Senac
1. Introdução
O que é web design responsivo
Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares).
“Wikipédia”
O que é web design responsivo
Site
Design
Conteúdo
Diversos Dispositivos
Ou seja:
O que é web design responsivo
Case Revista W
Antes:
http://revistaw.com.br/
Case Revista W
http://revistaw.com.br/
Depois:
2. Na prática
• Fundação Flexível
• Media Queries
• Grids Fluídos
• Mobile First
• Otimização
Tópicos
Fundação Flexível
É o esqueleto básico do layout:
Fundação Flexível
• Na mão, com medidas relativas e um pouco de matemática
• Grids Fluídos
Pode ser feita de duas formas:
Fundação Flexível - Medidas
(Quase) tudo é relativo
• PX para definir altura ou largura máxima
• EM ou REM para definir tamanho de fonte
max-width: 1200px;
height: 700px;
• % para definir largura
width: 70%;
Font-size: 1.2em;
Font-size: 1.2rem;
Fundação Flexível - Fonte
PX:
Medida na fonte :
• Medida absoluta. Usuário não pode alterar o tamanho da fonte através de configurações do browser.
EM/REM: Adaptável,Flexível, melhor acessibilidade
• Medida relativa. Usuário pode alterar o tamanho da fonte através de configurações do browser.
Preciso, inflexível, acessibilidade ruim
Fundação Flexível - Fonte
html { font-size: 62.5%; }
EM passa a ser em base 10, ou seja: 1.5em = 15px; 1.2em = 12px; 2.5em = 25px;
target ÷ context = result
1em equivale ao tamanho do font-size do body, que em geral é 16px.
1.5em = 24px
Truque:
Exemplos:
24 ÷ 16 = 1.5
2em = 32px 32 ÷ 16 = 2
Fórmula EM:
OBS: • Com EM, pode-se aplicar o font-
size no body. • Com REM, apenas no html
Fundação Flexível - Fonte
EM é relativo ao font-size do contâiner REM é relativo ao font-size do elemento html
body { font-size: 20%; }
html { font-size: 62.5%; }
Body .p1 { font-size: 1rem; }
Não afetado pelo font-size do body
Body .p2 { font-size: 1.6rem; }
Afetado pelo font-size do body
Font-size REM: * { font-size: 1.6rem; line-height:1.6rem; }
Fundação Flexível - Fonte
Exemplo EM vs REM
Fundação Flexível – Containers e Imagens
• Largura em porcentagem;
• Usar max-width ou min-width quando necessário.
#container{ width: 90%; max-width: 850px; }
<section id=“container”>
</section>
2 Regras
Media Queries
“consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.”
Developer.mozilla.org
Media Queries
Ex: • All: Para todos os dispositivos.
• Braille: Para dispositivos táteis. • Handheld: Para dispositivos portáteis, geralmente com telas pequenas e
banda limitada.
• Print: Para impressão em papel.
• Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada.
<link rel="stylesheet" media="Handheld"
href="example.css" />
Media Types: definem para que tipo de media um certo código CSS é direcionado.
Media Queries
Handheld ou Screen? Screen
Problema: Falta de padronização de aparelhos.
Media Queries
<link rel="stylesheet" media="only screen and (max-
width: 800px)" href="example.css" />
No HTML:
@media screen and (max-width: 600px) { p { font-size: 20px; color: red; } }
No CSS:
Estas definições são conhecidas como breakpoints.
Dica:
Solução: Definir estilo por tamanho de tela, e não por dispositivo utilizado.
Media Queries
@media only screen and (max-width: 480px) {
body{ font-size:25em; }
}
Fundação Flexível - Viewport
Viewport é o quanto de conteúdo cabe na tela, em CSS pixels, não device pixels.
Existem 3 tipos de pixels:
• Pixel do dispositivo: corresponde ao tamanho da tela do seu aparelho.
• CSS pixel: medida definida no CSS.
• Dpi pixel: quantidade de pixels que cabe em uma polegada.
A equivalência entre estes varia, dependendo do aparelho.
Fundação Flexível - Viewport
Sem tela retina: 163dpi
Com tela retina:
326dpi
• Dois aparelhos • mesmo tamanho de tela • Dpis diferentes
Resoluções diferentes
Por isso, devemos nos preocupar com o pixel do dispositivo, e não a sua resolução.
Coloque no <head> o seguinte trecho:
<meta name="viewport" content="width=device-
width,initial-scale=1">
Fundação Flexível - Viewport
Como definir que o parâmetro é o pixel do dispositivo:
Exemplo Site Responsivo
Responsivo na mão
Frameworks como Bootstrap utilizam classes para definir grids:
Grids Fluídos
http://getbootstrap.com/
Exemplo Site Responsivo Bootstrap
Responsivo com Bootstrap
Mobile First
Mobile First - Características
Capacidades técnicas mais interessantes
• acelerometro
• GPS
• multitouch
• giroscópio
• etc.
Mobile First - Características
Foco
Focar nas ações essenciais do usuário.
Mobile First - Características
Atenção dobrada com:
Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito.
• Arquitetura de Informação • Usabilidade • Acessibilidade
Otimização
Pensar na experiência do usuário não é apenas fazer seu site responsivo. Mas também, torná-lo acessível.
http://browserdiet.com
http://browserdiet.com
Otimização
Algumas dicas do BrowserDiet:
• Evite código inline/incorporado
• Prefira <link> a @import
• Comprima sua folha de estilo (CSS)
• Combine vários arquivos CSS em um só
http://browserdiet.com
3. Internet além dos sites
Internet é um ambiente de desenvolvimento de aplicações, e não apenas de sites comerciais.
Você pode usar as tecnologias web pra desenvolver aplicativos e serviços.
Internet além dos sites
Internet além dos sites
http://www.html5gamedevelopment.com/
http://browserquest.mozilla.org/
Internet além dos sites
http://bjork.com/
Outros cenários
Sites mobile são só o começo!
Referências
http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/
http://browserdiet.com/pt/
http://tableless.com.br/
http://sergiolopes.org/responsive-web-design/
Obrigado!
Victor Melo
victordossantosmelo@gmail.com
fb.com/victormelooo
top related