Web Design Responsivo
Quem sou eu
Tiago B. dos Santos
Tecnólogo em Processamento de Dados
Docente de Internet e Consultor GD2 Senac
Responsivo?
"Somos todos responsivos!"
Arquitetura Responsiva
Nicholas Negroponte
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"
Arquitetura Responsiva
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/2000
Layout Líquido
Anos 2000
Portal Terra
31/12/2005
Layout Adaptativo
Anos 2000
Portal Terra
30/12/2010
Layout Responsivo
2010
Portal Terra
09/04/2015
- Design capaz de responder às características do dispositivo
- Movimentar, expandir e contrair
- Adaptar ao contexto onde é renderizado
Princípios do RWD
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 Fluído
- 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
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
Para refletir
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.bsantos@sp.senac.br
- www.ecosdaweb.com
- _tiagobs
- tiago.bsantos
- slides.com/tiagobsantos
- pt.slideshare.net/tiagobsantos
Web Design Responsivo
By Tiago Bezerra dos Santos
Web Design Responsivo
Nesta palestra serão apresentados alguns dos principais recursos das linguagens HTML5, CSS3 e JavaScript para o desenvolvimento de websites responsivos, compatíveis com diferentes dispositivos móveis e plataformas web.
