responsive web design. um site, um conteúdo e muitos dispositivos
DESCRIPTION
Desenvolver um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado. Hoje seus usuários utilizam diversos dispositivos e meios de acesso para encontrar informação. Saiba como podemos entregar informação de forma eficaz e inteligente.TRANSCRIPT
![Page 1: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/1.jpg)
Responsive Web DesignUm site, um conteúdo e muitos dispositivos
![Page 2: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/2.jpg)
Tudo começou em 2007. Com a vinda
do iphone o mundo mudou, desde
então temos um browser completo e
usável sempre à mão.
![Page 3: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/3.jpg)
Mobile cresce como nuncavende-se mais smartphones e
tablets que computadores
![Page 4: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/4.jpg)
![Page 5: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/5.jpg)
![Page 6: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/6.jpg)
Smartphones, tablets, televisões, celulares, TVs, video games, netbooks, notebooks e desktops!
em outras palavras...
![Page 7: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/7.jpg)
Como, então, atacar o mundo móvel de hoje e de amanhã?
![Page 8: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/8.jpg)
Responsive Web Design
![Page 9: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/9.jpg)
Como faz então?
![Page 10: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/10.jpg)
São três ingredientes principais
![Page 11: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/11.jpg)
Media Queries
![Page 12: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/12.jpg)
Layout fluído
![Page 13: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/13.jpg)
Imagens Flexíveis
DesktopiPad
iPhone
![Page 14: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/14.jpg)
situações reais, soluções baseadas em necessidades
Responsivo, mas...
![Page 15: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/15.jpg)
Responsive no javascript? como?
![Page 16: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/16.jpg)
https://github.com/globocom/responsive-hub
![Page 17: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/17.jpg)
O conteúdo que importa
![Page 18: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/18.jpg)
Mobile First
![Page 19: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/19.jpg)
Por Fimdo conceito ao desenvolvimento, o foco é o usuário
![Page 20: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/20.jpg)
Dúvidas
![Page 21: Responsive Web Design. Um site, um conteúdo e muitos dispositivos](https://reader034.vdocuments.net/reader034/viewer/2022052301/54589b2fb1af9fc0638b55b8/html5/thumbnails/21.jpg)
http://blog.caelum.com.br/pixels-pixels-ou-pixels-dicas-de-web-mobile-com-viewport/
http://arquiteturadeinformacao.com/category/responsive-design/page/2/
http://mediaqueri.es/
http://sergiolopes.org/responsive-web-design/ Sergio Lopes - Design Responsivo por uma Web Única
Dicas de Web Mobile com viewport
Fabricio Teixeira - 5 coisas que aprendi em um projeto Mobile-First Responsive Design para o Google
Exemplos de Layout responsivo
Referências