SlideShare uma empresa Scribd logo
1 de 36
Construsite Brasil
Criação de sites
L A Y O U T
RESPONSIVO
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.
Construsite Brasil
Criação de sites
DE ONDE VOCÊ ACESSA E ATRAVÉS DE
QUAL DISPOSITIVO?
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
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.
~
Construsite Brasil
Criação de sites
PRINCÍPIOS PARA
UM BOM LAYOUT
RESPONSIVO
Construsite Brasil
Criação de sites
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
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
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
Construsite Brasil
Criação de sites
QUAIS AS VANTAGENS DE
DESENVOLVER UM PROJETO
RESPONSIVO?
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.
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.
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.
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.
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
Construsite Brasil
Criação de sites
#comofaz?
Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
Construsite Brasil
Criação de sites
ESCOLHA UM BOM FRAMEWORK
PARA O SEU FRONT-END
TWITTER BOOTSTRAP
http://twitter.github.io/bootstrap/
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
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
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
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
Construsite Brasil
Criação de sites
MEDIA QUERIES
SEMÂNTICA HTML5
http://www.w3.org/TR/css3-mediaqueries/
CSS3
+
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 }
}
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://…” />
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)
Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
//initial scale
<meta name=”viewport” content=”width=device-width, initial-scale=1” />
Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
NORMAL SLTYLE
(width: 1024px or +)
TABLET
(width: 1023-768px)
SMART PHONE
(width: 767-479px)
Construsite Brasil
Criação de sites
MEDIA QUERIES
(MEDIA TYPES)
Construsite Brasil
Criação de sites
http://mediaqueri.es
(MEDIA TYPES - EXEMPLOS)
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:
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

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Responsive Layouts
Responsive LayoutsResponsive Layouts
Responsive Layouts
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
A 3ª Área do Design: Web Design
A 3ª Área do Design: Web DesignA 3ª Área do Design: Web Design
A 3ª Área do Design: Web Design
 
Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!Bootstrap, desenvolvendo uma interface responsiva na prática!
Bootstrap, desenvolvendo uma interface responsiva na prática!
 
Responsive design
Responsive designResponsive design
Responsive design
 
Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3Mini-Curso sobre Bootstrap 3
Mini-Curso sobre Bootstrap 3
 
Design responsivo
Design responsivo Design responsivo
Design responsivo
 
Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
 
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web DesignIntrodução ao Web Design: Aula 1 - Imersão ao Web Design
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
 
Guia do Front-end das Galáxias
Guia do Front-end das GaláxiasGuia do Front-end das Galáxias
Guia do Front-end das Galáxias
 
Capitulo 6 Livro Nielsen
Capitulo 6 Livro NielsenCapitulo 6 Livro Nielsen
Capitulo 6 Livro Nielsen
 
O Papel do desenvolvedor Front End
O Papel do desenvolvedor Front EndO Papel do desenvolvedor Front End
O Papel do desenvolvedor Front End
 
Usando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter BootstrapUsando a programação web para mobile com Twitter Bootstrap
Usando a programação web para mobile com Twitter Bootstrap
 
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
Desenvolvendo com Bootstrap: um framework front-end que vale a pena!
 

Destaque

Strategipublicrelationsdalampemasaran
StrategipublicrelationsdalampemasaranStrategipublicrelationsdalampemasaran
Strategipublicrelationsdalampemasaran
jamal_luthfi
 
HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)
Michael Weddington
 
Uvv 2015 modelo para trabalho final - pedrinha
Uvv 2015   modelo para trabalho final - pedrinhaUvv 2015   modelo para trabalho final - pedrinha
Uvv 2015 modelo para trabalho final - pedrinha
Oi S.A
 
Presentación1
Presentación1Presentación1
Presentación1
alejito001
 

Destaque (20)

Strategipublicrelationsdalampemasaran
StrategipublicrelationsdalampemasaranStrategipublicrelationsdalampemasaran
Strategipublicrelationsdalampemasaran
 
ready to sell
ready to sellready to sell
ready to sell
 
розвиток нервової системми
розвиток нервової системмирозвиток нервової системми
розвиток нервової системми
 
Nama surah ikut tahun
Nama surah ikut tahunNama surah ikut tahun
Nama surah ikut tahun
 
HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)HESA Written Comp Exam- Bib (Autosaved)
HESA Written Comp Exam- Bib (Autosaved)
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon RomaniaZilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
Zilele Biz 2015 - Media & Marketing - Denisa Mihai, Avon Romania
 
Efsi
EfsiEfsi
Efsi
 
Debashish Mukherjee Basel II
Debashish Mukherjee Basel IIDebashish Mukherjee Basel II
Debashish Mukherjee Basel II
 
Uvv 2015 modelo para trabalho final - pedrinha
Uvv 2015   modelo para trabalho final - pedrinhaUvv 2015   modelo para trabalho final - pedrinha
Uvv 2015 modelo para trabalho final - pedrinha
 
Top 10 Social Networks For Professionals
Top 10 Social Networks For ProfessionalsTop 10 Social Networks For Professionals
Top 10 Social Networks For Professionals
 
CCarros
CCarrosCCarros
CCarros
 
Presentación1
Presentación1Presentación1
Presentación1
 
Pulia area a ser preechida 'tig
Pulia area a ser preechida 'tigPulia area a ser preechida 'tig
Pulia area a ser preechida 'tig
 
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
«Розвиток у дошкільників уяви, пам’яті, мислення, рухової активності через гр...
 
Candy
CandyCandy
Candy
 
III Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto ArreguiIII Jornadas de Micogastronomía 2012, por Alberto Arregui
III Jornadas de Micogastronomía 2012, por Alberto Arregui
 
30 Anos Depois
30 Anos Depois30 Anos Depois
30 Anos Depois
 
Sayed hashim
Sayed hashimSayed hashim
Sayed hashim
 
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
Віталій Мороз “Предметна економіка: “Вірність” від прядок до оніксів”
 

Semelhante a Responsive Design - Introdução

Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
igorpimentel
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
Horácio Soares
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Workshop museus – trabalho colaborativo e_tecnologias_sociais
Workshop museus – trabalho colaborativo e_tecnologias_sociaisWorkshop museus – trabalho colaborativo e_tecnologias_sociais
Workshop museus – trabalho colaborativo e_tecnologias_sociais
Serpentina
 

Semelhante a Responsive Design - Introdução (20)

Desenvolvimento Web Parte I
Desenvolvimento Web Parte IDesenvolvimento Web Parte I
Desenvolvimento Web Parte I
 
CSS (Cascading Style Sheets) - 1ª parte
CSS (Cascading Style Sheets) -  1ª parteCSS (Cascading Style Sheets) -  1ª parte
CSS (Cascading Style Sheets) - 1ª parte
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
Como Tornar Seu Site Atraente
Como Tornar Seu Site AtraenteComo Tornar Seu Site Atraente
Como Tornar Seu Site Atraente
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2Desenvolvimento de Sites V.2
Desenvolvimento de Sites V.2
 
Unbounce : O editor de Landing Page
Unbounce : O editor de Landing PageUnbounce : O editor de Landing Page
Unbounce : O editor de Landing Page
 
Planejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web SitesPlanejamento e Desenvolvimento de Web Sites
Planejamento e Desenvolvimento de Web Sites
 
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
Minicurso - Desenvolvendo aplicações web com JavaScript e AngularJS - Estácio...
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
 
Produtividade
ProdutividadeProdutividade
Produtividade
 
Criatividade Publicitária - Comunicação Digital - New World
Criatividade Publicitária - Comunicação Digital - New WorldCriatividade Publicitária - Comunicação Digital - New World
Criatividade Publicitária - Comunicação Digital - New World
 
Workshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociaisWorkshop Museus– trabalho colaborativo e tecnologias sociais
Workshop Museus– trabalho colaborativo e tecnologias sociais
 
Workshop museus – trabalho colaborativo e_tecnologias_sociais
Workshop museus – trabalho colaborativo e_tecnologias_sociaisWorkshop museus – trabalho colaborativo e_tecnologias_sociais
Workshop museus – trabalho colaborativo e_tecnologias_sociais
 
Design Adaptável para sites Adaptáveis - Add Technologies
Design Adaptável para sites Adaptáveis - Add TechnologiesDesign Adaptável para sites Adaptáveis - Add Technologies
Design Adaptável para sites Adaptáveis - Add Technologies
 
Workshop Ferramentas Web para Serviços educativos
Workshop Ferramentas Web para Serviços educativosWorkshop Ferramentas Web para Serviços educativos
Workshop Ferramentas Web para Serviços educativos
 
Desenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter BootstrapDesenvolvimento Ágil com Twitter Bootstrap
Desenvolvimento Ágil com Twitter Bootstrap
 
O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013O que você faz para ser Mobile? TDC2013
O que você faz para ser Mobile? TDC2013
 

Último

Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Dirceu Resende
 

Último (7)

Apostila e caderno de exercicios de WORD
Apostila e caderno de exercicios de  WORDApostila e caderno de exercicios de  WORD
Apostila e caderno de exercicios de WORD
 
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdfFrom_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
From_SEH_Overwrite_with_Egg_Hunter_to_Get_a_Shell_PT-BR.pdf
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
[ServiceNow] Upgrade de versão - 2ª edição (Revisada, atualizada e ampliada)
 

Responsive Design - Introdução

  • 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