Workshop sobre Design Responsivo ministrado na FEUCTEC 2013

1. Design Responsivo
Rafael França

2. 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)

3. … e para não esquecer
Moderador do Fórum do Tableless

4. O Que Você Sente ao Navegar pelo Celular?

5. … E em um aplicativo?

6. O Que é Design Responsivo?
É um conceito utilizado para adaptar seu leiaute
a cada dispositivo, sem perda de navegação ou
conteúdo.

7. Algumas Formas de Tratar um Dispositivo
• Types
–
–
–
–
–
–
–
–
–
–
All
Braille
Embossed
Handheld
Print
Projection
Screen
Speech
Tty
Tv

8. Types
•
•
all
– Para todos os dispositivos.
•
– Para sintetizadores de voz. O CSS 2 tem
uma especificação de CSS chamada
Aural, onde podemos “formatar” a voz
dos sintetizadores.
braille
– Para dispositivos táteis.
•
embossed
– Para dispositivos que “imprimem” em
braille.
•
•
print
– Para impressão em papel.
•
•
projection
tty
– Para dispositivos que utilizam uma grade
fixa para exibição de caracteres, como por
exemplo, teletypes, terminais, dispositivos
portáteis com display limitado.
handheld
– Para dispositivos de mão. Normalmente
com telas pequenas e banda limitada.
speech
•
tv
– Para dispositivos como televisores, ou
seja, com baixa resolução, quantidade de
cores e scroll limitado.
– Para apresentações, como PowerPoint.
•
screen
– Para monitores ou outros dispositivos
com telas coloridas e com resolução
adequada.
Todos os nomes das medias são case-sensitive.

9. 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 */
}

10. Mas como vou saber o tamanho certo?

11. Talk is cheap!

12. 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%; }

13. … e para não esquecer
Sorteio de mais uma caneca! ;-)

14. Bugs? Não, Não…

15. 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/)

16. Obrigado pela Paciência!
• Rafael França
– rafaelfms@gmail.com
– @euconectei
– fb/euconectei
– 21 8106 7464