16
Design Responsivo Rafael França

Design responsivo

Embed Size (px)

DESCRIPTION

Workshop sobre Design Responsivo ministrado na FEUCTEC 2013

Citation preview

Page 1: Design responsivo

Design ResponsivoRafael França

Page 2: Design responsivo

Apresentação

• Há 10 anos no mercado• Vestibular da UFRRJ 2003 – 2007

(HTML)• Sistema Acadêmico (Front-

End / .Net)• RJHost (Front-End)• UFRRJ (Front-End / PHP)• Casa da Moeda (Front-End / PHP /

JAVA)• e freelas (Front-End / PHP)

Page 3: Design responsivo

… e para não esquecer

Moderador do Fórum do Tableless

Page 4: Design responsivo

O Que Você Sente ao Navegar pelo Celular?

Page 5: Design responsivo

… E em um aplicativo?

Page 6: Design responsivo

O Que é Design Responsivo?

É um conceito utilizado para adaptar seu leiaute a cada dispositivo, sem perda de navegação ou conteúdo.

Page 7: Design responsivo

Algumas Formas de Tratar um Dispositivo

• Types– All– Braille– Embossed– Handheld– Print– Projection– Screen– Speech– Tty– Tv

Page 8: Design responsivo

Types• all

– Para todos os dispositivos.• braille

– Para dispositivos táteis.• embossed

– Para dispositivos que “imprimem” em braille.

• handheld– Para dispositivos de mão. Normalmente

com telas pequenas e banda limitada.• print

– Para impressão em papel.• projection

– Para apresentações, como PowerPoint.• screen

– Para monitores ou outros dispositivos com

telas coloridas e com resolução adequada.• speech

– Para sintetizadores de voz. O CSS 2 tem uma especificação de CSS chamada Aural, onde podemos “formatar” a voz dos sintetizadores.

• tty– Para dispositivos que utilizam uma grade

fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.

• tv– Para dispositivos como televisores, ou

seja, com baixa resolução, quantidade de cores e scroll limitado.

Todos os nomes das medias são case-sensitive.

Page 9: Design responsivo

Por Que Media Queries?

Escrevemos queries no atributo media.

@media (min-width: 768px) {/* DECLARAÇÕES */

}@media (min-width: 600px) and (max-width: 1140px) {

/* DECLARAÇÕES */}@media (max-width: 600px) {

/* DECLARAÇÕES */}

Page 10: Design responsivo

Mas como vou saber o tamanho certo?

Page 11: Design responsivo

Talk is cheap!

Page 12: Design responsivo

Ok, Vamos Analisar!@media (min-width: 768px) {

html, body { height: 100%; } .wrapper { min-height: 100%; height: auto; height: 100%; margin: 0 auto -120px; } .footer, .push { height: 120px; }}@media (min-width: 600px) and (max-width: 1140px) { #cities { width: 560px; }}@media (max-width: 600px) { #cities { width: 300px; }}

body { background-image: url("../img/body-bg.png"); padding: 0; }

header { background: url("../img/header-bg.png") repeat-x; padding-top: 50px; width: 100%; }

Page 13: Design responsivo

… e para não esquecer

Sorteio de mais uma caneca! ;-)

Page 14: Design responsivo

Bugs? Não, Não…

Page 15: Design responsivo

Frameworks

• Foundation (http://foundation.zurb.com/)• Boostrap (http://twitter.github.com/bootstrap/)• Semantic Grid System (http://semantic.gs/)• Frameless (http://framelessgrid.com/)• Skeleton (http://www.getskeleton.com/)• Golden Grid (http://goldengridsystem.com/)• Fluid Baseline (http://fluidbaselinegrid.com/)• Initializr (http://www.initializr.com/)

Page 16: Design responsivo

Obrigado pela Paciência!

• Rafael França– [email protected]– @euconectei– fb/euconectei– 21 8106 7464