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