Layouts Responsivos

Post on 29-Nov-2014

17.031 views 1 download

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.

Transcript of Layouts Responsivos

O que é responsive web design?

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.

http://www.alistapart.com/ar

ticles/responsive-web-

design/

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.

Cases

Live demo

como começar

Prototipagem

Paper protyping

Front-end Framework

como usá-los

juntos

http://www.alistapart.com/ar

ticles/dive-into-responsive-

prototyping-with-foundation/

http://www.alistapart.com/ar

ticles/dive-into-responsive-

prototyping-with-foundation/

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

dive-into-responsive-

prototyping-with-

foundation/code/#

http://lorempixel.com/

http://placehold.it/

Rápido, interativo e flexível.

Separe sua interface em módulos

Grid Texto Menu Tabela ...

Grid

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

rojects/lab/responsivewirefram

es/

Texto

http://www.netmagazine.com/tu

torials/handling-typography-

responsive-design

Menu

http://css-

tricks.com/responsive-menu-

concepts/

Tabela

http://css-

tricks.com/responsive-data-

tables/

Truques

Imagem Responsiva

Vídeo Responsivo

http://fitvidsjs.com/

http://fittextjs.com/

Como testar?

Showtime

http://html5-pro.com/sanfona

Obrigado :) @bernarddeluna e @zenorocha