Web Design Responsivo

Responsivo?

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

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

Anos 1990 - 2000

Layout Líquido

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

Anos 2000

Layout Adaptativo

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

Anos 2000

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?

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

• 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

• Módulos Flexbox e Grid Layout
   
• Medidas relativas, como % e EM
   
• Base de qualquer framework

Fluxo de Trabalho

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

Referências: Dani Guerrato, no livro Web Design Responsivo (Maujor)

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

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