Design Responsivo
--- com ---
Alta Definição
Onde? Por Que? COMO?
Richard Duchatsch Johansen | Front-end Engineer
http://goo.gl/bmQRge
Richard Duchatsch Johansen
@ridjohansen | fb.com/ridjohansen
A Evolução da Web
Navegadores X Tecnologias
ONDE?
- Dispositivos em geral
- Displays com resoluções e/ou densidades diferentes
POR QUE?
-
Crescimento do uso de dispositiovos móveis
- Acesso à informação mais facilitado
- Crescimento da internet
- Site funcionando como aplicação
- Navegação mais amigável
Media Queries? O que é isto?
MEDIA QUERIES? O QUE É ISTO?
-
Maximum viewport width of 480px
@media screen and (max‐width:480px) { ... }
-
Landscape orientation
@media all and (orientation:landscape) { ... }
-
Widescreen displays (16:9)
@media screen and (device‐aspect‐ratio: 16/9) {...}
-
Display with minimum width of 400px and maximum of 700px
@media (min‐width: 400px) and (max‐width: 700px) {...}
Está perdido? por onde começar?
Quer ver exemplos funcionais?
Para que Serve?
- É muito estável falando em termos de cross-browser
- Design responsivo com mais facilidade*
- Fazer o código ficar mais documentável
- Mais fácil de trabalhar com equipes maiores, devido às
documentações de cada framework
- Curva de aprendizado rápido**
Qual é o melhor framework?
Performance é importante? Claro!
Já ouviram fALAR DO fLEXbOX?
Simplesmente o futuro para o GRIDS
Imagens X Design Responsivo
CSS x Densidade de pixels
Perguntas???
Obrigado!
twitter/ridjohansen
fb.com/ridjohansen
linkedin.com/in/ridjohansen