além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos...
DESCRIPTION
Slides da palestra do Sérgio Lopes no Front In Sampa 2013. Uma revolução aconteceu na Web e no mundo front-end com a explosão dos dispositivos móveis. Mais que ajustar seu site pra uma tela pequena com meia dúzia de media queries, o responsive web design traz reflexões importantes sobre o papel da Web como mídia adaptável, flexível, portável e democrática. Essa lightning talk discute a nova Web moderna, responsiva e adaptativa, seu papel hoje e como se preparar pro futuro.TRANSCRIPT
![Page 1: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/1.jpg)
ALÉM DO RESPONSIVE DESIGNA MUDANÇA DE PARADIGMA DO DESIGN ADAPTATIVOE OS MÚLTIPLOS DISPOSITIVOS
![Page 2: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/2.jpg)
@sergio_caelumsergiolopes.org
![Page 3: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/3.jpg)
casadocodigo.com.br
![Page 4: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/4.jpg)
RESPONSIVE DESIGN101
![Page 5: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/5.jpg)
RESPONSIVE DESIGN101
LAYOUT FLUÍDO
![Page 6: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/6.jpg)
RESPONSIVE DESIGN101
LAYOUT FLUÍDOMEDIA QUERIES
![Page 7: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/7.jpg)
RESPONSIVE DESIGN101
LAYOUT FLUÍDOMEDIA QUERIES
IMAGENS FLEXÍVEIS
![Page 8: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/8.jpg)
![Page 9: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/9.jpg)
![Page 10: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/10.jpg)
![Page 11: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/11.jpg)
![Page 12: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/12.jpg)
![Page 13: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/13.jpg)
www.uol.com.br
![Page 14: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/14.jpg)
SITE MOBILEm.uol.com.br
![Page 15: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/15.jpg)
![Page 16: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/16.jpg)
![Page 17: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/17.jpg)
USAR DESIGN RESPONSIVO
NÃO É UMA ESCOLHA
![Page 18: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/18.jpg)
DESIGN RESPONSIVOFLEXÍVELADAPTÁVEL
![Page 19: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/19.jpg)
terra.com.br
![Page 20: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/20.jpg)
m.terra.com.br
![Page 21: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/21.jpg)
tablet.terra.com.br
![Page 22: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/22.jpg)
MOBILE
![Page 23: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/23.jpg)
MOBILETELA PEQUENA
![Page 24: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/24.jpg)
MOBILE
PORTABILIDADE
TELA PEQUENA
![Page 25: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/25.jpg)
MOBILE3GPORTABILIDADE
TELA PEQUENA
![Page 26: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/26.jpg)
MOBILE3G TOUCHPORTABILIDADE
TELA PEQUENA
![Page 27: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/27.jpg)
NÃO EXISTEMOBILE
![Page 28: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/28.jpg)
ONE WEB
![Page 29: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/29.jpg)
2005
![Page 30: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/30.jpg)
2013
![Page 31: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/31.jpg)
![Page 32: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/32.jpg)
ILUSÃO DA WEB FIXA
![Page 33: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/33.jpg)
ESQUEÇA
![Page 34: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/34.jpg)
ESQUEÇAMOBILE
RESPONSIVOBUZZWORDS
![Page 35: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/35.jpg)
DESIGN ADAPTATIVO
RESPONSIVO
![Page 36: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/36.jpg)
A WEB É FLEXÍVEL EADAPTÁVEL
![Page 37: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/37.jpg)
A WEB É FLEXÍVEL EADAPTÁVEL
SEMPRE FOI
![Page 38: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/38.jpg)
![Page 39: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/39.jpg)
O controle que os designers conhecem na mídia impressa, e constantemente desejam na web, é simplesmente em função da limitação da página impressa.
Devemos abraçar o fato de que a Web não tem as mesmas restrições, e projetar para essa flexibilidade.
“
![Page 40: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/40.jpg)
Faça páginas que são acessíveis, independentemente de navegador, plataforma ou tela que seu leitor escolha ou tenha que usar para acessar suas páginas.
Isso significa páginas que são legíveis independentemente da resolução ou tamanho da tela, ou do número de cores.
“
![Page 41: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/41.jpg)
VARIÁVEIS DE ADAPTAÇÃO
![Page 42: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/42.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
![Page 43: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/43.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
![Page 44: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/44.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃOORIENTAÇÃO
![Page 45: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/45.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃO
![Page 46: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/46.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃOVELOCIDADE
![Page 47: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/47.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADE
![Page 48: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/48.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADE
![Page 49: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/49.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADERECURSOS
![Page 50: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/50.jpg)
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORESACESSIBILIDADE
VELOCIDADERECURSOS
![Page 51: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/51.jpg)
FEATURE DETECTION
![Page 52: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/52.jpg)
FEATURE DETECTIONModernizr
![Page 53: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/53.jpg)
FEATURE DETECTIONModernizrJavaScript
![Page 54: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/54.jpg)
FEATURE DETECTIONModernizrJavaScript@media
![Page 55: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/55.jpg)
FEATURE DETECTIONModernizrJavaScript@media@supports
![Page 56: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/56.jpg)
PROGRESSIVE ENHANCEMENT
![Page 57: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/57.jpg)
PROGRESSIVE ENHANCEMENT
Base do conteúdo com texto
![Page 58: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/58.jpg)
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTML
![Page 59: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/59.jpg)
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTMLVisual com CSS e imagens
![Page 60: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/60.jpg)
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTMLVisual com CSS e imagensInteratividade com JavaScript
![Page 61: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/61.jpg)
http://www.slideshare.net/nzakas/enough-withthejavascriptalready
![Page 62: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/62.jpg)
![Page 63: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/63.jpg)
DESIGN ADAPTATIVO
RESPONSIVO
![Page 64: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/64.jpg)
A WEB É FLEXÍVEL EADAPTÁVEL
![Page 65: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/65.jpg)
QUAL É A NOSSA ALUCINAÇÃO ATUAL?
![Page 66: Além do responsive design: a mudança de paradigma do design adaptativo e os múltiplos dispositivos](https://reader034.vdocuments.mx/reader034/viewer/2022051818/54b6af1d4a7959ad7b8b45d6/html5/thumbnails/66.jpg)