Responsive Web Design Manoel dos Santos manoeldossantos@gmail.com  @manoeldossantos
Quem?
Respons... O quê? <ul><li>1 HTML = Vários dispositivos </li></ul>
Vários Dispositivos
W3C diz: <ul><li>A web deve ser acessível por qualquer pessoa em qualquer lugar. </li></ul>
Vale o esforço? <ul><li>1 em 5 usuários acessam a internet de dispositivos móveis todo os dias </li></ul><ul><li>O tráfego...
Responsive Web Design é <ul><li>“ Uma  grid flexível , com  imagens flexíveis  e que incorpore  media   queries  para cria...
 
Responsive Web Design não é <ul><li>Mobile design </li></ul>
Legal! Como eu começo? <ul><li>Foco no conteúdo </li></ul><ul><li>Mobile First </li></ul>
Recapitulando <ul><li>Grid Flexível </li></ul><ul><li>Imagens Flexíveis </li></ul><ul><li>Media Queries </li></ul>
Grid Flexível <ul><li>Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a ne...
Imagens Flexíveis <ul><li>Use Javascript para carregar imagens no tamanho apropriado </li></ul><ul><ul><li>https://github....
Media Queries <ul><li><link rel=“stylesheet” media=“screen and (max-device-width:640px)” /> </li></ul><ul><li>@media scree...
Quem usa isso? <ul><li>http://www.hicksdesign.co.uk/ </li></ul><ul><li>http://www.stpaulsschool.org.uk/ </li></ul><ul><li>...
Links <ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul><ul><li>http://code.google.com/p/css3-me...
Próximos SlideShares
Carregando em…5
×

Responsive Web Design

2.190 visualizações

Publicada em

Publicada em: Negócios, Tecnologia
  • Seja o primeiro a comentar

Responsive Web Design

  1. 1. Responsive Web Design Manoel dos Santos manoeldossantos@gmail.com @manoeldossantos
  2. 2. Quem?
  3. 3. Respons... O quê? <ul><li>1 HTML = Vários dispositivos </li></ul>
  4. 4. Vários Dispositivos
  5. 5. W3C diz: <ul><li>A web deve ser acessível por qualquer pessoa em qualquer lugar. </li></ul>
  6. 6. Vale o esforço? <ul><li>1 em 5 usuários acessam a internet de dispositivos móveis todo os dias </li></ul><ul><li>O tráfego de dados móveis quase triplicou em 2010. Mantendo a tendências dos últimos 3 anos. </li></ul><ul><li>Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos. </li></ul><ul><li>Vídeo-games e televisões atuais estão vindo com acesso a internet. </li></ul>
  7. 7. Responsive Web Design é <ul><li>“ Uma grid flexível , com imagens flexíveis e que incorpore media queries para criar um layout adaptável e responsivo” </li></ul><ul><li>Ethan Marcotte (@beep) </li></ul><ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul>
  8. 9. Responsive Web Design não é <ul><li>Mobile design </li></ul>
  9. 10. Legal! Como eu começo? <ul><li>Foco no conteúdo </li></ul><ul><li>Mobile First </li></ul>
  10. 11. Recapitulando <ul><li>Grid Flexível </li></ul><ul><li>Imagens Flexíveis </li></ul><ul><li>Media Queries </li></ul>
  11. 12. Grid Flexível <ul><li>Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade </li></ul><ul><li>Utilize ems e % para dimensionar estas partes </li></ul><ul><li>Elemento / context = resultado </li></ul>
  12. 13. Imagens Flexíveis <ul><li>Use Javascript para carregar imagens no tamanho apropriado </li></ul><ul><ul><li>https://github.com/filamentgroup/responsive-images </li></ul></ul><ul><li>Problemas de redimensionamento </li></ul><ul><ul><li>http://unstoppablerobotninja.com/entry/fluid-images </li></ul></ul>
  13. 14. Media Queries <ul><li><link rel=“stylesheet” media=“screen and (max-device-width:640px)” /> </li></ul><ul><li>@media screen and (max-device-width:640px) { </li></ul><ul><li>.sidebar { </li></ul><ul><li>float:none; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  14. 15. Quem usa isso? <ul><li>http://www.hicksdesign.co.uk/ </li></ul><ul><li>http://www.stpaulsschool.org.uk/ </li></ul><ul><li>http://yiibu.com/ </li></ul><ul><li>http://huffduffer.com/ </li></ul><ul><li>http://thinkvitamin.com/ </li></ul>
  15. 16. Links <ul><li>http://www.alistapart.com/articles/responsive-web-design/ </li></ul><ul><li>http://code.google.com/p/css3-mediaqueries-js/ </li></ul><ul><li>https://github.com/filamentgroup/responsive-images </li></ul><ul><li>http://unstoppablerobotninja.com/entry/fluid-images </li></ul>

×