View
4.939
Download
4
Category
Preview:
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.
Citation preview
ALÉM DO RESPONSIVE DESIGNA MUDANÇA DE PARADIGMA DO DESIGN ADAPTATIVOE OS MÚLTIPLOS DISPOSITIVOS
@sergio_caelumsergiolopes.org
casadocodigo.com.br
RESPONSIVE DESIGN101
RESPONSIVE DESIGN101
LAYOUT FLUÍDO
RESPONSIVE DESIGN101
LAYOUT FLUÍDOMEDIA QUERIES
RESPONSIVE DESIGN101
LAYOUT FLUÍDOMEDIA QUERIES
IMAGENS FLEXÍVEIS
www.uol.com.br
SITE MOBILEm.uol.com.br
USAR DESIGN RESPONSIVO
NÃO É UMA ESCOLHA
DESIGN RESPONSIVOFLEXÍVELADAPTÁVEL
terra.com.br
m.terra.com.br
tablet.terra.com.br
MOBILE
MOBILETELA PEQUENA
MOBILE
PORTABILIDADE
TELA PEQUENA
MOBILE3GPORTABILIDADE
TELA PEQUENA
MOBILE3G TOUCHPORTABILIDADE
TELA PEQUENA
NÃO EXISTEMOBILE
ONE WEB
2005
2013
ILUSÃO DA WEB FIXA
ESQUEÇA
ESQUEÇAMOBILE
RESPONSIVOBUZZWORDS
DESIGN ADAPTATIVO
RESPONSIVO
A WEB É FLEXÍVEL EADAPTÁVEL
A WEB É FLEXÍVEL EADAPTÁVEL
SEMPRE FOI
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.
“
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.
“
VARIÁVEIS DE ADAPTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELA
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃOORIENTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃO
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃOVELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADE
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORES
VELOCIDADERECURSOS
VARIÁVEIS DE ADAPTAÇÃO
TAMANHO DE TELARESOLUÇÃO
REDE
INPUT
ORIENTAÇÃOPROFUNDIDADE DE CORESACESSIBILIDADE
VELOCIDADERECURSOS
FEATURE DETECTION
FEATURE DETECTIONModernizr
FEATURE DETECTIONModernizrJavaScript
FEATURE DETECTIONModernizrJavaScript@media
FEATURE DETECTIONModernizrJavaScript@media@supports
PROGRESSIVE ENHANCEMENT
PROGRESSIVE ENHANCEMENT
Base do conteúdo com texto
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTML
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTMLVisual com CSS e imagens
PROGRESSIVE ENHANCEMENT
Base do conteúdo com textoSemântico e estrutura com HTMLVisual com CSS e imagensInteratividade com JavaScript
http://www.slideshare.net/nzakas/enough-withthejavascriptalready
DESIGN ADAPTATIVO
RESPONSIVO
A WEB É FLEXÍVEL EADAPTÁVEL
QUAL É A NOSSA ALUCINAÇÃO ATUAL?
Recommended