SlideShare uma empresa Scribd logo
1 de 40
Baixar para ler offline
Web Design Responsivo
Tiago B. dos Santos | Senac Penha
Quem sou eu
Nome e idade:
Tiago Bezerra dos Santos
Formação: Tecnólogo em Processamento de Dados
Atuação: Docente de Internet e Consultor GD2 Senac
@_tiagobstiago.bsantos@sp.senac.br
www.ecosdaweb.com tiago.bsantos
RESPONSIVO?
Definições
Somos todos responsivos!
Arquitetura Responsiva
Nicholas Negroponte
Arquitetura Responsiva
• Combinação de espaços físicos,
experimentos arquitetônicos, materiais,
sistemas de automação e robótica
Arquitetura Responsiva
• Sensores que ajustam a temperatura do
ambiente
• Sensores de iluminação
• Óculos que se ajustam às condições de
iluminação
• Tecnologia "Smart Glass"
Web Design Responsivo
Ethan Marcotte
Responsive Web Design (RWD)
“Projetar para o fluxo e o refluxo das coisas”
Ethan Marcotte
UM POUCO DE HISTÓRIA
Layout Fixo (anos 1990-2000)
Portal Terra (18/10/00)
Layout Líquido (anos 2000)
Portal Terra (31/12/05)
Layout Adaptativo (anos 2000)
Portal Terra (30/12/10)
Layout Responsivo (anos 2010)
Portal Terra (09/04/15)
Princípios do RWD
• Design capaz de responder às
características do dispositivo
• Movimentar, expandir e contrair
• Adaptar ao contexto onde é renderizado
Pilares
Por que HTML5?
Porque HTML5
• Semântico
• Novos elementos e atributos
• Bem estruturado
• Acessível e bom para SEO
• Não precisa de plugins para mídia
• Metatag viewport
Por que CSS3?
Porque CSS3
• Novos seletores, propriedades e valores
• Box Sizing
• Media Queries
• Módulos Flexbox e Grid Layout
Por que JavaScript?
Porque JavaScript
• Scripts para navegadores antigos
• Polyfills
COMO "FAZER" WEB DESIGN
RESPONSIVO?
Ingredientes
• Grid fluido
• Imagens e mídias flexíveis
• Media Queries
Grid Fluido
• Módulos Flexbox e Grid Layout
• Medidas relativas, como % e EM
• Base de qualquer framework
Imagens e Mídias Flexíveis
• Capazes de contrair e expandir suas
dimensões
• Art Direction
• Elemento <picture> e atributo srcset
Media Queries
• Consulta ao tipo de mídia
• Folhas de estilos de acordo com
características dos dispositivos
WORKFLOW
Mobile First vs Desktop First
Por que Mobile First?
• Explosão da tecnologia mobile
• Layout para mobile implica em otimização
• Dispositivos com cada vez mais
funcionalidades nativas
• Progressive Enhancement
Por que Desktop First?
• Converter projeto já existente
• Reaproveitar código legado
• Graceful Degradation
EXEMPLOS
Mitos do RWD
• Usuários utilizam dispositivos móveis
apenas na rua e a conexão é sempre
lenta
• Usuários de dispositivos móveis não
precisam do conteúdo total
• Usuários de dispositivos móveis preferem
uma experiência mais simples
• Existe uma "internet móvel"
• Breakpoints pré-definidos
Para refletir
“Design Responsivo deve priorizar
interfaces leves e flexíveis, sem detalhes e
efeitos desnecessários, focando em
usuários que você ainda não conhece ou
que ainda vão surgir.”
Bernard de Luna
Referências
• Exemplos usados na palestra: http://goo.gl/fu6Rvv
• Como começar um RWD: http://www.designculture.com.br/10-dicas-de-como-
comecar-um-design-responsivo/
• Converter PX para EM: http://pxtoem.com/
• Interface com tipos de layouts: http://www.liquidapsive.com/
• Guia sobre Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Guia sobre Grid Layout: https://css-tricks.com/snippets/css/complete-guide-grid/
• Compatibilidade & Funcionalidades: http://caniuse.com/ e http://html5please.com/
• Diversos Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
Browser-Polyfills
• Responsive Images: http://responsiveimages.org/ e
http://alistapart.com/article/responsive-images-in-practice
OBRIGADO!
Tiago B. dos Santos
@_tiagobs
tiago.bsantos@sp.senac.br
www.ecosdaweb.com
tiago.bsantos

Mais conteúdo relacionado

Mais procurados

Mais procurados (11)

Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
 
Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3Web design responsivo e adaptativo - HTML5/CSS3
Web design responsivo e adaptativo - HTML5/CSS3
 
Iwtraining frontend developer nova era
Iwtraining   frontend developer nova eraIwtraining   frontend developer nova era
Iwtraining frontend developer nova era
 
Responsive Layouts
Responsive LayoutsResponsive Layouts
Responsive Layouts
 
Aula 5. frameworks mobile
Aula 5. frameworks mobileAula 5. frameworks mobile
Aula 5. frameworks mobile
 
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp..."Estratégia para “Responsive UX”"-  #7 Industry Sessions by EDIT. / UX & Resp...
"Estratégia para “Responsive UX”"- #7 Industry Sessions by EDIT. / UX & Resp...
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
Palestra Webstandards
Palestra WebstandardsPalestra Webstandards
Palestra Webstandards
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 

Destaque

Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web DesignAna Mendes
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do wwwFelipe Fernandes
 
Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001ewerton333
 
So2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaSo2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaAnderson Favaro
 
So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011Anderson Favaro
 
SO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisSO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisEduardo Nicola F. Zagari
 
Sistema computacional 3
Sistema computacional 3Sistema computacional 3
Sistema computacional 3marleneca97
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web designCarla Suelen
 
Introducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisIntroducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisRicardo de Moraes
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-endAnderson Luís Furlan
 
Sistemas operacionais introdução
Sistemas operacionais introduçãoSistemas operacionais introdução
Sistemas operacionais introduçãoCarlos Melo
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao brandingJoão Alves
 
Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Anderson Favaro
 
Introducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIntroducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIsaac Vieira
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebAnderson Luís Furlan
 
Aula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosAula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosVitor Hugo Melo Araújo
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web DesignSandra Oliveira
 

Destaque (20)

Slides minicurso Web Design
Slides minicurso Web DesignSlides minicurso Web Design
Slides minicurso Web Design
 
Web Design > História e a evolução do www
Web Design > História e a evolução do wwwWeb Design > História e a evolução do www
Web Design > História e a evolução do www
 
Sistema computacional (arquitecturas y memorias)
Sistema computacional (arquitecturas y memorias)Sistema computacional (arquitecturas y memorias)
Sistema computacional (arquitecturas y memorias)
 
Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001Introdução a sistemas operacionais 001
Introdução a sistemas operacionais 001
 
Aula 1 Webdesign
Aula 1 WebdesignAula 1 Webdesign
Aula 1 Webdesign
 
So2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quartaSo2 aula00-cic4 ma446-quarta
So2 aula00-cic4 ma446-quarta
 
So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011So2 aula00-noite-1sem2011
So2 aula00-noite-1sem2011
 
SO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas OperacionaisSO-01 Introdução aos Sistemas Operacionais
SO-01 Introdução aos Sistemas Operacionais
 
Sistema computacional 3
Sistema computacional 3Sistema computacional 3
Sistema computacional 3
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Introducao aos Sistemas Operacionais
Introducao aos Sistemas OperacionaisIntroducao aos Sistemas Operacionais
Introducao aos Sistemas Operacionais
 
Web design e Programação front-end
Web design e Programação front-endWeb design e Programação front-end
Web design e Programação front-end
 
Sistemas operacionais introdução
Sistemas operacionais introduçãoSistemas operacionais introdução
Sistemas operacionais introdução
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00Sistemas Operacionais 2 -aula00
Sistemas Operacionais 2 -aula00
 
Introducao a Sistemas Operacionais
Introducao a Sistemas OperacionaisIntroducao a Sistemas Operacionais
Introducao a Sistemas Operacionais
 
Aula 4 - HTML
Aula 4 - HTMLAula 4 - HTML
Aula 4 - HTML
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 
Aula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicosAula 2 - Introdução aos conceitos básicos
Aula 2 - Introdução aos conceitos básicos
 
Introdução Ao Web Design
Introdução Ao Web DesignIntrodução Ao Web Design
Introdução Ao Web Design
 

Semelhante a Web Design Responsivo

Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEBFábio Flatschart
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Sandro Alencar Fernandes
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularRicardo Pereira Rodrigues
 
O uso de softwares na engenharia civil
O uso de softwares na engenharia civilO uso de softwares na engenharia civil
O uso de softwares na engenharia civildebvieir
 
PARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMPARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMJose Vargas
 
VI ENJIE - Apresentação
VI ENJIE - ApresentaçãoVI ENJIE - Apresentação
VI ENJIE - ApresentaçãoDemetrius Lacet
 
10 Razões para usar a Tecnologia OpenRoads
10 Razões para usar a Tecnologia OpenRoads10 Razões para usar a Tecnologia OpenRoads
10 Razões para usar a Tecnologia OpenRoadsCarlos Galeano
 
Aplicações resilientes e Chaos Engineering em .NET com Polly + Simmy
Aplicações resilientes e Chaos Engineering em .NET com Polly + SimmyAplicações resilientes e Chaos Engineering em .NET com Polly + Simmy
Aplicações resilientes e Chaos Engineering em .NET com Polly + SimmyWalter Coan
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Mauro Pinheiro
 
Introduction to the Cloud
Introduction to the Cloud Introduction to the Cloud
Introduction to the Cloud Marcelo Adade
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013André Borgonovo
 
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...Wagner Tironi Pinto
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignDiego Eis
 
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...Paulo Correia
 

Semelhante a Web Design Responsivo (20)

Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
CV Alexandre R. de Castro
CV Alexandre R. de CastroCV Alexandre R. de Castro
CV Alexandre R. de Castro
 
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
Palestra Social Media Week São Paulo - Desenvolvimento web desafios da intern...
 
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade CurricularLaboratório Web 2013-2014 - Apresentação Unidade Curricular
Laboratório Web 2013-2014 - Apresentação Unidade Curricular
 
O uso de softwares na engenharia civil
O uso de softwares na engenharia civilO uso de softwares na engenharia civil
O uso de softwares na engenharia civil
 
PARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIMPARAGRAM - Design Computacional aplicado ao BIM
PARAGRAM - Design Computacional aplicado ao BIM
 
VI ENJIE - Apresentação
VI ENJIE - ApresentaçãoVI ENJIE - Apresentação
VI ENJIE - Apresentação
 
Cv alexandre rezendedecastro
Cv alexandre rezendedecastroCv alexandre rezendedecastro
Cv alexandre rezendedecastro
 
10 Razões para usar a Tecnologia OpenRoads
10 Razões para usar a Tecnologia OpenRoads10 Razões para usar a Tecnologia OpenRoads
10 Razões para usar a Tecnologia OpenRoads
 
Aplicações resilientes e Chaos Engineering em .NET com Polly + Simmy
Aplicações resilientes e Chaos Engineering em .NET com Polly + SimmyAplicações resilientes e Chaos Engineering em .NET com Polly + Simmy
Aplicações resilientes e Chaos Engineering em .NET com Polly + Simmy
 
Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...Design da interação / Design da experiência: considerações sobre um campo de ...
Design da interação / Design da experiência: considerações sobre um campo de ...
 
Introduction to the Cloud
Introduction to the Cloud Introduction to the Cloud
Introduction to the Cloud
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013Arquitetura de Software e o DNAD2013
Arquitetura de Software e o DNAD2013
 
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...Graduação   puc - aplicações de padrões de projeto no desenvolvimento de inte...
Graduação puc - aplicações de padrões de projeto no desenvolvimento de inte...
 
Hello Bootstrap!
Hello Bootstrap!Hello Bootstrap!
Hello Bootstrap!
 
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web DesignOs cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...
Mapas conceituais podem preencher a lacuna semântica entre as necessidades do...
 

Mais de Tiago Bezerra Dos Santos

Tecnologias Web: passado, presente e futuro no desenvolvimento de interfaces
Tecnologias Web: passado, presente e futuro no desenvolvimento de interfacesTecnologias Web: passado, presente e futuro no desenvolvimento de interfaces
Tecnologias Web: passado, presente e futuro no desenvolvimento de interfacesTiago Bezerra Dos Santos
 
Aplicativos móveis com Dreamweaver e PhoneGap
Aplicativos móveis com Dreamweaver e PhoneGapAplicativos móveis com Dreamweaver e PhoneGap
Aplicativos móveis com Dreamweaver e PhoneGapTiago Bezerra Dos Santos
 
Ferram. Adobe para Publicações Digitais e Aplicativos Móveis
Ferram. Adobe para Publicações Digitais e Aplicativos MóveisFerram. Adobe para Publicações Digitais e Aplicativos Móveis
Ferram. Adobe para Publicações Digitais e Aplicativos MóveisTiago Bezerra Dos Santos
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerTiago Bezerra Dos Santos
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerTiago Bezerra Dos Santos
 

Mais de Tiago Bezerra Dos Santos (8)

Tecnologias Web: passado, presente e futuro no desenvolvimento de interfaces
Tecnologias Web: passado, presente e futuro no desenvolvimento de interfacesTecnologias Web: passado, presente e futuro no desenvolvimento de interfaces
Tecnologias Web: passado, presente e futuro no desenvolvimento de interfaces
 
Games - A diversão que virou profissão
Games - A diversão que virou profissãoGames - A diversão que virou profissão
Games - A diversão que virou profissão
 
Aplicativos móveis com Dreamweaver e PhoneGap
Aplicativos móveis com Dreamweaver e PhoneGapAplicativos móveis com Dreamweaver e PhoneGap
Aplicativos móveis com Dreamweaver e PhoneGap
 
Ferram. Adobe para Publicações Digitais e Aplicativos Móveis
Ferram. Adobe para Publicações Digitais e Aplicativos MóveisFerram. Adobe para Publicações Digitais e Aplicativos Móveis
Ferram. Adobe para Publicações Digitais e Aplicativos Móveis
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu Server
 
Implementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu ServerImplementação de Servidor Linux Ubuntu Server
Implementação de Servidor Linux Ubuntu Server
 
Flash ActionScript 3
Flash ActionScript 3Flash ActionScript 3
Flash ActionScript 3
 
Programador Web
Programador WebProgramador Web
Programador Web
 

Web Design Responsivo