Responsive Web Design

Achando o caminho das pedras (apresentação feita pelo Edu Zaghi @eduzera)

Transcript

1. eduardo zaghi Responsive Web Design Achando o caminho das pedras
2. eduardo zaghi Oque é ? Pois vejo todos falando sobre isso!
3. eduardo zaghi Desenvolver web-sites para diversos tipos de dipositivos
4. eduardo zaghi Quem já está utiliza?
5. eduardo zaghi Resolve todos os nossos problemas?
6. eduardo zaghi Parece que nem tudo é um mar de rosas... Pela cara dele...
7. eduardo zaghi Dificuldades Desktops Tvs Celulares Tablets • • • • Como orçar um web-site que responda para:
8. eduardo zaghi Dificuldades Firefox Chrome Safari Opera IE • • • • • Além de testar em diversos navegadores:
9. eduardo zaghi Dificuldades Quem nunca passou por isso?
10. eduardo zaghi Solução 1 Uol: Desktop e Mobile Terra: Desktop, Tablet, Mobile Globo.com: Desktop, Mobile • • • Desenvolver o site específico para o dispositivo:
11. eduardo zaghi Uol Desktop e Mobile
12. eduardo zaghi Terra Desktop e Mobile
13. eduardo zaghi globo.com Desktop e Mobile
14. eduardo zaghi Como Fazem? Conseguem saber de onde o cliente acessa o site Redirecionam o Cliente para o site ‘certo’ Dependendo do navegador e dispositivo o user- agent pode ser tratado diferente e com isso seu cliente visitar o site ‘errado’. • • • Utilizam o 'User Agent’
15. eduardo zaghi Solução 2 Utilizar Layout Fluido e Medias Queries Em geral é preciso que esqueça os pixels e começar a trabalhar com porcentagem e ems. Media Queries são propriedades do CSS que identifica qual mídia está carregando o site e determina o estilo à ser utilizado.
16. eduardo zaghi Trabalhe com % Diferença entre layouts Fixo e Fluido:
17. eduardo zaghi Trabalhe com Media Queries Exemplo de uso no seu código CSS:
18. eduardo zaghi Frameworks podem ajudar Foundation (http://foundation.zurb.com/) Boostrap (http://twitter.github.com/bootstrap/) Semantic Grid System (http://semantic.gs/) Frameless (http://framelessgrid.com/) Skeleton (http://www.getskeleton.com/) Golden Grid (http://goldengridsystem.com/) Fluid Baseline (http://fluidbaselinegrid.com/) Initializr (http://www.initializr.com/) • • • • • • • •
19. eduardo zaghi Foundation
20. eduardo zaghi Twitter Bootstrap
21. eduardo zaghi Golden Grid System
22. eduardo zaghi Initializr
23. eduardo zaghi Ferramentas Variable Grid System (http://grids.heroku.com//) FitText (http://fittextjs.com//) Convert Menu to DropDown (http://css- tricks.com/convert-menu-to-dropdown//) Responsive Web Tester (http://mattkersley.com/responsive//) Media Queries (http://mediaqueri.es//) • • • • •
24. eduardo zaghi Variable Grid System
25. eduardo zaghi FitText
26. eduardo zaghi Convert a Menu to a Dropdown
27. eduardo zaghi Responsive Web Tester
28. eduardo zaghi Medias Queries
29. eduardo zaghi Referências http://sergiolopes.org/diretorio-design-responsivo/ http://www.midiatismo.com.br/o-mobile/design- responsivo-entenda-o-que-e-a-tecnica-e-como-ela- funciona http://css-tricks.com/snippets/css/media-queries-for- standard-devices/ http://www.tripwiremagazine.com/2012/04/responsive- web-design-tools.html • • • •
30. eduardo zaghi Muito Obrigado! twitter: @eduzera github: github.com/eduzera facebook: facebook.com/eduzera email: eduardo@loldesign.com.br • • • • Qualquer dúvida, sugestões ou críticas entre em contato:
31. eduardo zaghi Bora Testar!