Responsive Design - Introdução

  • 1,520 views
Uploaded on

O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap. …

O que é, como funciona, media types (media queries), design, recomendações e frameworks, bootstrap.

Material de estudos elaborado por Marcos César // www.marcoscesar.com

Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.

cc 2013 Construsite Brasil - Desenvolvimento web.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,520
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
2
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Construsite Brasil Criação de sites L A Y O U T RESPONSIVO
  • 2. Construsite Brasil Criação de sites RESPONSIVO PROJETAR INTERFACE FLEXÍVEL PARA DIFERENTES RESOLUÇÕES E DISPOSITIVOS, QUE TENHA FOCO NA EXPERIÊNCIA DO USUÁRIO ATRAVÉS DAS NOVAS TECNOLOGIAS DE DESENVOLVIMENTO WEB.
  • 3. Construsite Brasil Criação de sites DE ONDE VOCÊ ACESSA E ATRAVÉS DE QUAL DISPOSITIVO?
  • 4. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  • 5. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  • 6. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  • 7. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  • 8. Construsite Brasil Criação de sites 2010 APROXIMADAMENTE EM 2010 OS DESIGNERS E DESENVOLVEDORES DE INTERFACES COMEÇARAM A PENSAR NESTE MÉTODO DE MANTER A ESTRUTURA, PORÉM PROMOVER DIFERENCIAIS NA INTERFACE PARA MELHORAR A EXPERIÊNCIA DO USUÁRIO. ~
  • 9. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO Construsite Brasil Criação de sites
  • 10. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) Construsite Brasil Criação de sites
  • 11. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) MELHORES PRÁTICAS DE DESENVOLVIMENTO ACREDITE! NINGUÉM SABE 100% CSS OU HTML. ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR UM FRAMEWORK. Construsite Brasil Criação de sites
  • 12. Construsite Brasil Criação de sites PRINCÍPIOS PARA UM BOM LAYOUT RESPONSIVO PLANEJAMENTO WIREFRAMES/MOCKUPS/ROUGHS/DRAFTS (É A ALMA DE QUALQUER INTERFACE SURPREENDENTE. É NESTE PONTO QUE A MAIORIA DOS PROFISSIONAIS ERRAM.) MELHORES PRÁTICAS DE DESENVOLVIMENTO SAIBA COMO O USUÁRIO DOS PRINCIPAIS DISPOSITIVOS SE COMPORTA. ACREDITE! NINGUÉM SABE 100% CSS OU HTML. ENTÃO, ESTUDE. PRINCIPALMENTE PARA UTILIZAR UM FRAMEWORK. Construsite Brasil Criação de sites
  • 13. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO?
  • 14. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas.
  • 15. Construsite Brasil Criação de sites QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  • 16. Construsite Brasil Criação de sites PROGRAMAÇÃO ÚNICA- Mais produtividade no back-end. - Único banco e única linguagem. QUAIS AS VANTAGENS DE DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  • 17. Construsite Brasil Criação de sites GOOGLE- Recomenda a utilização desta técnica. - Punições: 1. Sites que exibe conteúdo em flash para dispositivos móveis. 2. Sites que exibe layout para desktop em dispositivos móveis. 3. Se o usuário acessar “meusite.com/casa” e for direcionado para “m.meusite.com”. PROGRAMAÇÃO ÚNICA- Mais produtividade no back-end. - Único banco e única linguagem. DESENVOLVER UM PROJETO RESPONSIVO? SEO- Não ao conteúdo duplicado. (http://m.meusite.com/). - Utilização dos microdados e marcações simples e semânticas. DESIGN- Identidade visual uniforme. - Experiência do usuário é o foco. - Não se projeta para plataforma e sim para usuários.
  • 18. Construsite Brasil Criação de sites Construsite Brasil Criação de sites
  • 19. Construsite Brasil Criação de sites Construsite Brasil Criação de sites #comofaz?
  • 20. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END
  • 21. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END
  • 22. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/
  • 23. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com
  • 24. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com HTML5 BOILERPLATE http://html5boilerplate.com
  • 25. Construsite Brasil Criação de sites ESCOLHA UM BOM FRAMEWORK PARA O SEU FRONT-END TWITTER BOOTSTRAP http://twitter.github.io/bootstrap/ FOUNDATION http://foundation.zurb.com HTML5 BOILERPLATE http://html5boilerplate.com PURE CSS http://purecss.io
  • 26. Construsite Brasil Criação de sites Adobe Edge Reflow CC (Preview) Design the responsive web. http://html.adobe.com/edge/reflow/ Construsite Brasil Criação de sites
  • 27. Construsite Brasil Criação de sites MEDIA QUERIES SEMÂNTICA HTML5 http://www.w3.org/TR/css3-mediaqueries/ CSS3 +
  • 28. Construsite Brasil Criação de sites MEDIA QUERIES //html link <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> //stylesheet document @media screen { * { font-family: sans-serif } }
  • 29. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) //html link - é no atributo media que definimos para quais dispositipos, resoluções, tamanhos ou aplicações servirá nossa folha de estilo. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel=”stylesheet” media=”screen and (color)” href=”example.css” /> <link rel=”stylesheet” media=”aural and (device-aspect-ratio: 16/9)” href=”example.css” /> <link rel=”stylesheet” media=”speech and (min-device-width: 800px)” href=”example.css” /> <link rel=”stylesheet” media=”screen and (device-height: 600px)” /> <link rel=”stylesheet” media=”print and (color)” href=”http://…” /> <link rel=”stylesheet” media=”print and (monochrome)” href=”http://…” />
  • 30. Construsite Brasil Criação de sites MEDIA QUERIES //stylesheet document @media screen { * { font-family: sans-serif } } @media all and (min-width:500px) { … } @media (min-width:500px) { … } @media all and (orientation:portrait) { … } @media all and (orientation:landscape) { … } @media (min-width: -100px) { … } @media screen and (device-width: 800px) { … } @media all and (monochrome) { … } @media all and (min-monochrome: 1) { … } @media print and (min-resolution: 300dpi) { … } @media tv and (scan: progressive) { … } (MEDIA TYPES)
  • 31. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) //initial scale <meta name=”viewport” content=”width=device-width, initial-scale=1” />
  • 32. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES) NORMAL SLTYLE (width: 1024px or +) TABLET (width: 1023-768px) SMART PHONE (width: 767-479px)
  • 33. Construsite Brasil Criação de sites MEDIA QUERIES (MEDIA TYPES)
  • 34. Construsite Brasil Criação de sites http://mediaqueri.es (MEDIA TYPES - EXEMPLOS)
  • 35. Construsite Brasil Criação de sites Créditos Construsite Brasil Criação de sites www.construsitebrasil.com Marcos César Desenvolvedor front-end e Designer Material elaborado por:
  • 36. Construsite Brasil Criação de sites Referências Introdução ao Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013]. Disponível em: http://tableless.com.br/introducao-ao-responsive-web-design/#.Ucwyhz7wLT0 Design Responsivo na prática: do rascunho ao digital. [acesso em 26 de junho de 2013]. Disponível em: http://tableless.com.br/design-responsivo-na-pratica-do-rascunho-ao-digita/#.UcwzRj7wLT0 Slides para Devs #3 – Responsive Web Design. Tabeless. [acesso em 26 de junho de 2013]. http://tableless.com.br/slides-para-devs-3-responsive-web-design/#.UcwzQz7wLT0 Adobe Edge Reflow CC (Preview) Design the responsive web. [acesso em 26 de junho de 2013]. http://html.adobe.com/edge/reflow/ Responsive Design - the only mobile strategy that scales. [acesso em 26 de junho de 2013]. Disponível em: http://visual.ly/responsive-design-only-mobile-strategy-scales Responsive design : 10 exemples de sites web de destinations touristiques. [acesso em 26 de junho de 2013]. Disponível em: http://www.leweboskop.fr/responsive-design-10-exemples-de-sites-web-de-destinations-touristiques/ What is Responsive Design!?. [acesso em 26 de junho de 2013]. Disponível em: http://vinaganda.com/what-is-responsive-design/ Layouts Responsivos. Bernard De Luna/Zeno Rocha . [acesso em 26 de junho de 2013]. Disponível em: http://www.slideshare.net/bernarddeluna/pdf-apresentacaolayoutsresponsivos Design Responsivo: Entenda o que é a técnica e como ela funciona. [acesso em 26 de junho de 2013]. Disponível em: http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona