Design Responsivo

--- com ---

Alta Definição

Onde? Por QueCOMO?

 Richard Duchatsch JohansenFront-end Engineer 
 http://goo.gl/bmQRge 

Richard Duchatsch Johansen


@ridjohansen | fb.com/ridjohansen


A Evolução da Web

Navegadores X Tecnologias
http://www.evolutionoftheweb.com/?hl=pt-br

Crescimento do uso Móvel


http://ido-green.appspot.com/mwa-start/index.html

Design Responsivo (RWD)



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?

http://www.templatemonster.com/infographics/responsive-web-design-interactive-guide.php

Um pouco mais afundo?


http://alistapart.com/article/responsive-web-design

Quer ler mais sobre? 


http://issuu.com/cmanzotti/docs/
design_de_interface_em_dispositivos

Quer ver exemplos funcionais?

http://bradfrost.github.io/this-is-responsive/

Frameworks

+


Para que serve?


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?


http://www.zingdesign.com/twitter-bootstrap-decision-time/

Mas existem outros?

....

Performance é importante? Claro!


http://sergiolopes.org/palestra-mobile-web/

Já ouviram fALAR DO fLEXbOX?

Simplesmente o futuro para o GRIDS

www.css-tricks.com/snippets/css/a-guide-to-flexbox/
www.sketchingwithcss.com/samplechapter/cheatsheet.html
www.coding.smashingmagazine.com/2013/11/05/killer-responsive-layouts-with-css-regions/

Alta Definição (Hi-DPI)


Imagens X Design Responsivo



Retina displays


CSS x Densidade de pixels



Otimização de imagens



Utilize mais SVG!


Iconografia


Images Sprites




Fonticons e SVG Icons


Dicas de ouro!



Perguntas???



Obrigado!

twitter/ridjohansen
fb.com/ridjohansen
linkedin.com/in/ridjohansen
Made with Slides.com