Oficina - Web Design Responsivo

Multimídia Sem Limites | 2015

Senac Penha

Quem sou eu

Tiago Bezerra dos Santos

Tecnólogo em Processamento de Dados

Pós-graduando em MBA em Projeto de Aplicações para Dispositivos Móveis

Docente de Internet e Consultor GD2 Senac

about.me/tiagobsantos

Responsivo?

Responsive Web Design

(RWD)

Projetar para o fluxo e o refluxo das coisas

Ethan Marcotte

Layout Responsivo

Fonte: http://blog.froont.com/9-basic-principles-of-responsive-web-design/

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
   
• Módulos Flexbox e Grid Layout
   
• Frameworks

Fluxo de Trabalho

Mobile First

vs

Desktop First

Site Exemplo

www.ecosdaweb.com/senac/oficina-rwd

Obrigado!

tiago.bsantos@sp.senac.br

www.ecosdaweb.com

_tiagobs

slides.com/tiagobsantos

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