SlideShare uma empresa Scribd logo
DESIGN RESPONSIVO



      por Rennan M. Rodrigues
        Programador de Interfaces
   Agência Digital ICOMP | grupo AVADORA
O QUE É?
“É o design de um site que se adapta ao
comportamento do usuário com base no
tamanho da tela, plataforma e
orientação.”

http://www.thismanslife.co.
uk/projects/lab/responsiveillustration/
O FUTURO DO MOBILE
O FUTURO DO MOBILE
      DA WEB
ATÉ O ANO DE 2015...
“O número total de pessoas que terão
acesso à internet em dispositivos
móveis irá ultrapassar os acessos via
desktop.”

                                 INTERNATIONAL DATA CORPORATION
          http://www.idc.com/getdoc.jsp?containerId=prUS23028711
MAIS ESTATÍSTICAS
http://www.thinkwithgoogle.com/mobileplanet/en/
COMO SURGIU?
A expressão Design Responsivo foi
sugerida por Ethan
Marcotte, em um blog
chamado A List Apart.

25/05/10 - Post original
http://www.alistapart.com/articles/responsive-web-design/
E COMO FUNCIONA?
E COMO FUNCIONA?
É composto por 3 componentes principais:

1 - Layouts Fluídos
2 - Imagens Flexíveis
3 - Media Queries
LAYOUTS FLUÍDOS
São telas baseadas em
porcentagens. As telas se
adaptam de acordo com a
largura suportada pelo
dispositivo.
LAYOUTS FLUÍDOS
●   Planejar o que pode e o que
    não pode ter seu tamanho
    alterado
●   Representar os tamanhos
    fixos em porcentagens
LAYOUTS FLUÍDOS
LAYOUTS FLUÍDOS
LAYOUTS FLUÍDOS
Utilize grades como base
para posicionamento e
alinhamento de blocos de
conteúdos. Utilize GRIDS!
Frameless
http://framelessgrid.com/
Twitter Bootstrap
http://twitter.github.com/bootstrap/
Responsive Grid System
http://www.responsivegridsystem.com/
960 Grid System
http://960.gs/
The Goldilocks Approach
http://goldilocksapproach.com/
IMAGENS FLEXÍVEIS
É possível fazer com que a imagem
tenha o redimensionamento automático
definindo no CSS largura e altura com %.

DEMONSTRAÇÃO:
http://webdesignerwall.com/demo/responsive-css-tricks/
MAS ISSO GERA O
   SEGUINTE PROBLEMA...
Não adianta reduzirmos a
largura da imagem em % se
ela possuir 2Mb de tamanho.
E se eu acessar do meu
smartphone via 3g?
Para resolver esse problema, está
sendo discutido uma nova forma de
marcação onde o browser
selecionaria o melhor arquivo de
imagem a ser utilizado de acordo com
acordo com os parâmetros
escolhidos.

CONHEÇA O RICG
Responsive Image Community Group
http://www.w3.org/community/respimg/
IMAGENS FLEXÍVEIS
Como ainda está em fase de discussão,
existem várias propostas, mas já foram
desenvolvidos alguns polyfills que fazem o
mesmo propósito.

ALGUNS POLYFILLS
http://adaptive-images.com/
http://wil.to/picturefill/
MEDIA QUERIES
Podemos especificar condições de CSSS de
acordo com a capacidade de exibição do
dispositivo.

Por exemplo, com algumas linhas de CSS é
possível mudar a maneira que o conteúdo será
exibido, como sua altura, aspect radio,
orientação (landscape ou portrait) e assim por
diante.
MEDIA QUERIES
O browser ou a aplicação lê as
expressões definidas na query, caso o
dispositivo se encaixe nestas
requisições, o CSS será aplicado.
O uso de Media Queries se
tornou recomendação desde
19 de Junho de 2012.
http://www.w3.org/TR/css3-
mediaqueries/
VAMOS FAZER UM
  EXEMPLO?
MEDIA QUERIES
FERRAMENTAS BACANAS:

http://responsive.is
http://www.responsinator.com/
http://screenqueri.es/
http://www.opera.
com/developer/tools/mobile/
MEDIA QUERIES
O QUE UM CSS COM MEDIA QUERES É CAPAZ
DE FAZER?

http://j.mp/respSimpsons
RESPONSIVO, MAS...
Só usar media-queries e trocar tudo pra
porcentagem no CSS não vai fazer do
seu site responsivo ou com a melhor
experiência para o usuário.
RESPONSIVO, MAS...
Desenvolver para mobile têm vários
outros desafios, ainda mais se
queremos que o mesmo site sirva todo
mundo.
RESPONSIVO, MAS...
      O CONTEÚDO É QUE IMPORTA
         OTIMIZAR É ESSENCIAL
    FOCO NA EXPERIÊNCIA DO USUÁRIO


                MOBILE FIRST!
http://www.abookapart.com/products/mobile-first/
REFERÊNCIAS
http://adaptive-images.com/

http://css-tricks.com/

http://mediaqueri.es/

http://bradfrostweb.com/blog/web/responsive-web-design-
missing-the-point/

http://www.designadaptavel.com.br/artigos/layout-fluido-ou-
liquido
REFERÊNCIAS
FRAIN, Ben. Responsive Web Design with HTML5
and CSS3. Ed. Packt Publishing, Abril 2012.

Livro no Google Books
Livro no Amazon
OBRIGADO!

Mais conteúdo relacionado

Mais procurados

Arquitetura MVC
Arquitetura MVCArquitetura MVC
Arquitetura MVC
Thiago Pereira
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Julien Condamines
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a Objeto
Fábio Elísio
 
Principais Conceitos Internet
Principais Conceitos InternetPrincipais Conceitos Internet
Principais Conceitos Internet
Claudio Toldo
 
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)
Janynne Gomes
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
Roney Sousa
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
Felipe Fernandes
 
Qualidade de Software
Qualidade de SoftwareQualidade de Software
Qualidade de Software
Tiago Antônio da Silva
 
Aula 04 - Diagrama de casos de uso
Aula 04 - Diagrama de casos de usoAula 04 - Diagrama de casos de uso
Aula 04 - Diagrama de casos de uso
Leinylson Fontinele
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
Andrea Dalforno
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
Cloves da Rocha
 
Java modulo 01 - Introdução
Java modulo 01 - IntroduçãoJava modulo 01 - Introdução
Java modulo 01 - Introdução
Professor Samuel Ribeiro
 
Aula de Introdução - JAVA
Aula de Introdução  - JAVAAula de Introdução  - JAVA
Aula de Introdução - JAVA
Moises Omena
 
Metodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de SoftwareMetodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de Software
Álvaro Farias Pinheiro
 
Construindo um Data Lake na AWS
Construindo um Data Lake na AWSConstruindo um Data Lake na AWS
Construindo um Data Lake na AWS
Amazon Web Services LATAM
 
Aula 07 - Visualg e Pseudocódigo
Aula 07 - Visualg e PseudocódigoAula 07 - Visualg e Pseudocódigo
Aula 07 - Visualg e Pseudocódigo
Gabriel Vinicios Silva Maganha
 
Aula 1 - Qualidade de Software - Introdução e História.pptx
Aula 1 - Qualidade de Software - Introdução e História.pptxAula 1 - Qualidade de Software - Introdução e História.pptx
Aula 1 - Qualidade de Software - Introdução e História.pptx
AlexandreLisboadaSil
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
andreluizlc
 
Sistema de gerenciamento de banco de dados
Sistema de gerenciamento de banco de dadosSistema de gerenciamento de banco de dados
Sistema de gerenciamento de banco de dados
Juh Souza
 
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04
Ramon Kayo
 

Mais procurados (20)

Arquitetura MVC
Arquitetura MVCArquitetura MVC
Arquitetura MVC
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
 
Javascript Orientado a Objeto
Javascript Orientado a ObjetoJavascript Orientado a Objeto
Javascript Orientado a Objeto
 
Principais Conceitos Internet
Principais Conceitos InternetPrincipais Conceitos Internet
Principais Conceitos Internet
 
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)
 
Aula 01- web designer
Aula 01- web designerAula 01- web designer
Aula 01- web designer
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Qualidade de Software
Qualidade de SoftwareQualidade de Software
Qualidade de Software
 
Aula 04 - Diagrama de casos de uso
Aula 04 - Diagrama de casos de usoAula 04 - Diagrama de casos de uso
Aula 04 - Diagrama de casos de uso
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Engenharia de Requisitos
Engenharia de RequisitosEngenharia de Requisitos
Engenharia de Requisitos
 
Java modulo 01 - Introdução
Java modulo 01 - IntroduçãoJava modulo 01 - Introdução
Java modulo 01 - Introdução
 
Aula de Introdução - JAVA
Aula de Introdução  - JAVAAula de Introdução  - JAVA
Aula de Introdução - JAVA
 
Metodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de SoftwareMetodologias de Desenvolvimento de Software
Metodologias de Desenvolvimento de Software
 
Construindo um Data Lake na AWS
Construindo um Data Lake na AWSConstruindo um Data Lake na AWS
Construindo um Data Lake na AWS
 
Aula 07 - Visualg e Pseudocódigo
Aula 07 - Visualg e PseudocódigoAula 07 - Visualg e Pseudocódigo
Aula 07 - Visualg e Pseudocódigo
 
Aula 1 - Qualidade de Software - Introdução e História.pptx
Aula 1 - Qualidade de Software - Introdução e História.pptxAula 1 - Qualidade de Software - Introdução e História.pptx
Aula 1 - Qualidade de Software - Introdução e História.pptx
 
Aula 1. apresentação + frameworks
Aula 1. apresentação + frameworksAula 1. apresentação + frameworks
Aula 1. apresentação + frameworks
 
Sistema de gerenciamento de banco de dados
Sistema de gerenciamento de banco de dadosSistema de gerenciamento de banco de dados
Sistema de gerenciamento de banco de dados
 
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #04
 

Destaque

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
Heraldo Gonçalves Lima Junior
 
Estrutura da Informação
Estrutura da InformaçãoEstrutura da Informação
Estrutura da Informação
Tallita Alves
 
Transparencias de Aula_Dado, Informação e Tipos de Sistemas
Transparencias de Aula_Dado, Informação e Tipos de SistemasTransparencias de Aula_Dado, Informação e Tipos de Sistemas
Transparencias de Aula_Dado, Informação e Tipos de Sistemas
Roblira
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
Anderson Aguiar
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
joselialcosta
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
rommelweb
 
Redes Sociais e Jornalismo Online
Redes Sociais e Jornalismo OnlineRedes Sociais e Jornalismo Online
Redes Sociais e Jornalismo Online
Virgínia Andrade
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Adriano Teixeira de Souza
 
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
Yameecluster-chennai
 
Flashcards teste2
Flashcards teste2Flashcards teste2
Flashcards teste2
André rug
 
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
Guto Xavier
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
Rodrigo Cascarrolho
 
boo-box kit template
boo-box kit templateboo-box kit template
boo-box kit template
La Gracia Design
 
DESIGN PARA FACEBOOK
DESIGN PARA FACEBOOKDESIGN PARA FACEBOOK
DESIGN PARA FACEBOOK
Renato Melo
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
Rafael Sakurai
 
Boulevard Residence Lotes de 400 a 700m
Boulevard Residence Lotes de 400 a 700mBoulevard Residence Lotes de 400 a 700m
Boulevard Residence Lotes de 400 a 700m
Geraldo Pereira dos Santos
 
Reserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
Reserva das Artes Aptos de 4 Quartos de 168 e 198m NoroesteReserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
Reserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
Geraldo Pereira dos Santos
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Renato Bongiorno Bonfanti
 
Fasciculo 28 trabalhos de ferro
Fasciculo 28 trabalhos de ferroFasciculo 28 trabalhos de ferro
Fasciculo 28 trabalhos de ferro
Pedro Miguel Múrias Bessone Mauritti
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
Renato Melo
 

Destaque (20)

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
 
Estrutura da Informação
Estrutura da InformaçãoEstrutura da Informação
Estrutura da Informação
 
Transparencias de Aula_Dado, Informação e Tipos de Sistemas
Transparencias de Aula_Dado, Informação e Tipos de SistemasTransparencias de Aula_Dado, Informação e Tipos de Sistemas
Transparencias de Aula_Dado, Informação e Tipos de Sistemas
 
Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3Agilidade e Semântica com HTML5 e CSS3
Agilidade e Semântica com HTML5 e CSS3
 
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
Desenvolvimento de sites responsivos utilizando o framework Bootstrap com apl...
 
HTML5 CSS3
HTML5 CSS3HTML5 CSS3
HTML5 CSS3
 
Redes Sociais e Jornalismo Online
Redes Sociais e Jornalismo OnlineRedes Sociais e Jornalismo Online
Redes Sociais e Jornalismo Online
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
Yamee cluster -website design, e-commerce website design,-www.yamee.co.in & w...
 
Flashcards teste2
Flashcards teste2Flashcards teste2
Flashcards teste2
 
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
 
PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5PhoneGap - Criando aplicações Android e iOS com HTML5
PhoneGap - Criando aplicações Android e iOS com HTML5
 
boo-box kit template
boo-box kit templateboo-box kit template
boo-box kit template
 
DESIGN PARA FACEBOOK
DESIGN PARA FACEBOOKDESIGN PARA FACEBOOK
DESIGN PARA FACEBOOK
 
PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5PhoneGap - criando aplicações Android e iOS com HTML5
PhoneGap - criando aplicações Android e iOS com HTML5
 
Boulevard Residence Lotes de 400 a 700m
Boulevard Residence Lotes de 400 a 700mBoulevard Residence Lotes de 400 a 700m
Boulevard Residence Lotes de 400 a 700m
 
Reserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
Reserva das Artes Aptos de 4 Quartos de 168 e 198m NoroesteReserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
Reserva das Artes Aptos de 4 Quartos de 168 e 198m Noroeste
 
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
 
Fasciculo 28 trabalhos de ferro
Fasciculo 28 trabalhos de ferroFasciculo 28 trabalhos de ferro
Fasciculo 28 trabalhos de ferro
 
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGNCSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
CSS NA PRÁTICA PARA ALUNOS DE WEBDESIGN
 

Semelhante a Design Responsivo

Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
Jackson F. de A. Mafra
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
Vítor Teixeira
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
Carlos Eduardo Kadu
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
Jackson F. de A. Mafra
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
Renato Bongiorno Bonfanti
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
Gabriel Zavitoski
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Guilherme Costa
 
Ap iii
Ap iiiAp iii
Ap iii
LP Maquinas
 
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
Jackson F. de A. Mafra
 
"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...
EDIT. - Disruptive Digital Education
 
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
Diego Eis
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
Marcos César
 
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!
Cristofer Sousa
 
Responsive Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
Renato Bongiorno Bonfanti
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Gilberto Crespo
 
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
Edu Agni
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Victor Melo
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
Bruno da Silva
 
Sites responsivos
Sites responsivosSites responsivos
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
Felipe Caroé
 

Semelhante a Design Responsivo (20)

Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Design responsivo
Design responsivoDesign responsivo
Design responsivo
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Padrões de Design Mobile
Padrões de Design MobilePadrões de Design Mobile
Padrões de Design Mobile
 
Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)Guia de Otimização de Performance de Sites (Page Speed)
Guia de Otimização de Performance de Sites (Page Speed)
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Ap iii
Ap iiiAp iii
Ap iii
 
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
 
"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...
 
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
 
Responsive Design - Introdução
Responsive Design - IntroduçãoResponsive Design - Introdução
Responsive Design - Introdução
 
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 Web Design - Wireframe
Responsive Web Design - WireframeResponsive Web Design - Wireframe
Responsive Web Design - Wireframe
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
 
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
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Palestra - Na quebrada da Web
Palestra - Na quebrada da WebPalestra - Na quebrada da Web
Palestra - Na quebrada da Web
 

Último

Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 

Último (8)

Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 

Design Responsivo