53

Layouts Responsivos

Embed Size (px)

DESCRIPTION

Não basta acrescentar media-queries em seu projeto web para torná-lo responsivo. Neste painel o campuseiro poderá repensar o Design, tendo como foco a interação do usuário em diferentes cenários e devices, além do impacto no Front-end dessas adaptações.

Citation preview

Page 1: Layouts Responsivos
Page 2: Layouts Responsivos
Page 3: Layouts Responsivos

O que é responsive web design?

Page 4: Layouts Responsivos
Page 5: Layouts Responsivos
Page 6: Layouts Responsivos

responsive architecture Arquitetura Responsiva é um campo que une a parte prática e de

pesquisa da arquitetura. Arquiteturas responsivas são aquelas que

analisam as condições do meio ambiente através de sensores, permitindo

que suas construções adaptem formas, curvas, cores e até personalidade

do ambiente de forma responsiva.

Page 7: Layouts Responsivos
Page 8: Layouts Responsivos

http://www.alistapart.com/ar

ticles/responsive-web-

design/

Page 9: Layouts Responsivos

responsive webdesign Projetar para uma melhor visualização, incorporando tecnologias

padronizadas em nossos projetos para torná-los não só flexíveis, mas

mais adaptáveis ao dispositivo que o recebe.

Page 10: Layouts Responsivos

Cases

Page 11: Layouts Responsivos
Page 12: Layouts Responsivos
Page 13: Layouts Responsivos
Page 14: Layouts Responsivos

Live demo

Page 15: Layouts Responsivos
Page 16: Layouts Responsivos
Page 17: Layouts Responsivos

como começar

Page 18: Layouts Responsivos

Prototipagem

Page 19: Layouts Responsivos

Paper protyping

Page 20: Layouts Responsivos
Page 21: Layouts Responsivos

Front-end Framework

Page 22: Layouts Responsivos

como usá-los

juntos

Page 23: Layouts Responsivos

http://www.alistapart.com/ar

ticles/dive-into-responsive-

prototyping-with-foundation/

Page 24: Layouts Responsivos

http://www.alistapart.com/ar

ticles/dive-into-responsive-

prototyping-with-foundation/

Page 25: Layouts Responsivos

http://www.alistapart.com/d/

dive-into-responsive-

prototyping-with-

foundation/code/#

Page 26: Layouts Responsivos

http://lorempixel.com/

Page 27: Layouts Responsivos

http://placehold.it/

Page 28: Layouts Responsivos

Rápido, interativo e flexível.

Page 29: Layouts Responsivos
Page 30: Layouts Responsivos

Separe sua interface em módulos

Page 31: Layouts Responsivos

Grid Texto Menu Tabela ...

Page 32: Layouts Responsivos

Grid

Page 33: Layouts Responsivos

http://www.thismanslife.co.uk/p

rojects/lab/responsivewirefram

es/

Page 34: Layouts Responsivos

Texto

Page 35: Layouts Responsivos

http://www.netmagazine.com/tu

torials/handling-typography-

responsive-design

Page 36: Layouts Responsivos

Menu

Page 37: Layouts Responsivos

http://css-

tricks.com/responsive-menu-

concepts/

Page 38: Layouts Responsivos

Tabela

Page 39: Layouts Responsivos

http://css-

tricks.com/responsive-data-

tables/

Page 40: Layouts Responsivos
Page 41: Layouts Responsivos

Truques

Page 42: Layouts Responsivos

Imagem Responsiva

Page 43: Layouts Responsivos
Page 44: Layouts Responsivos
Page 45: Layouts Responsivos

Vídeo Responsivo

Page 46: Layouts Responsivos
Page 47: Layouts Responsivos

http://fitvidsjs.com/

Page 48: Layouts Responsivos

http://fittextjs.com/

Page 49: Layouts Responsivos

Como testar?

Page 50: Layouts Responsivos
Page 51: Layouts Responsivos

Showtime

Page 52: Layouts Responsivos

http://html5-pro.com/sanfona

Page 53: Layouts Responsivos

Obrigado :) @bernarddeluna e @zenorocha