Web Design Responsivo
Senac Penha
Responsivo?
Responsive Web Design
(RWD)
Projetar para o fluxo e o refluxo das coisas
Ethan Marcotte
Layout Responsivo
2010
- 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?
-
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?
- Novos seletores, propriedades e valores
-
Box Sizing
-
Media Queries
- Módulos Flexbox e Grid Layout
Por que JavaScript?
-
Scripts para navegadores antigos
- Polyfills
Como "fazer" Web Design Responsivo?
Ingredientes
- Media Queries
- Imagens e mídias flexíveis
- Grid fluido
Media Queries
-
Consulta ao tipo de mídia
- Folhas de estilos de acordo com características dos dispositivos
Imagens e Mídias Flexíveis
-
Capazes de contrair e expandir suas dimensões
- Art Direction
- Elemento <picture> e atributo srcset
Grid Fluído
-
Medidas relativas
- Frameworks
- Módulos Flexbox e Grid Layout
Fluxo de Trabalho
Mobile First
vs
Desktop First
Site Exemplo
Referências
Teste de compatibilidade com dispositivos móveis: https://www.google.com/webmasters/tools/mobile-friendly/
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