Post on 15-Jul-2015
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
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"
Princípios do RWD
• Design capaz de responder às
características do dispositivo
• Movimentar, expandir e contrair
• Adaptar ao contexto onde é renderizado
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
Porque CSS3
• Novos seletores, propriedades e valores
• Box Sizing
• Media Queries
• Módulos Flexbox e Grid Layout
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
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
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