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

Made with Slides.com