Campus Party: Desing Responsivos

  • Published on
    12-Jun-2015

  • View
    1.546

  • Download
    5

Embed Size (px)

DESCRIPTION

O Thiago Chaves fez slides to lindos... e a eu e o Jucinei apresentamos na Campus Party! Foi muito legal.

Transcript

  • 1. Ou Quase Priscila Mayumi Sato 5 anos como desenvolvedora @mayogax http://dev.ayogax.me/Jucinei Pereira dos Santos 3 anos como desenvolvedor @jucinei http://jucineisantos.co m/

2. Como acessvamos a web a alguns anos? 3. Como acessamos a web hoje? 4. O que nos aguarda no futuro? 5. O que Responsive Design? 6. Responsive Web Design um nome bonito para um conceito antigo. Hoje seus usurios utilizam diversos dispositivos e meios de acesso para encontrar informao e por isso o contedo precisa se adaptar. 7. O nmero total de pessoas acessando a web atravs de dispositivos mveis ir superar o acesso via desktop em 2015. International Data Corporation (IDC) 8. X Layout Fixo Estrutura definida com medidas absolutas, no possui qualquer flexibilidade 9. X Layout Fluido Estrutura definida com medidas relativas, possui uma flexibilidade sem critrios 10. X Layout Adaptativo Capaz de se reconfigurar de acordo com a resoluo da tela ou tamanho da janela 11. V Layout Responsivo Grids Fluidos Design Adaptativo Contedo FlexvelOtimizao de desempenho 12. O Google recomenda, e tambm te recompensa. Sites que usam Web Design Responsivo, isto , sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a pgina processada no dispositivo. Essa a configurao recomendada pelo Google. https://developers.google.com/webmasters/smartphone-sites/details 13. Arquitetura de informao Estabelecer uma escala hierrquica de importncia das informaes textuais e grficas do site Repensar a pertinncia de apresentao dessas informaes em diferentes contextos e dispositivos 14. Arquitetura de informao 15. Criando uma Estrutura Fluda 16. Tamanho contexto = resultado 17. Estrutura Fluida: Fontes O tamanho padro da fonte na maioria em praticamente todos os sites de 16px As medidas devem ser convertidas de medidas absolutas (px) para medidas relativas (em) Utilizamos para essa converso a formula tamanho contexto = resultado 18. Estrutura Fluida: Fontes h1 { font-size: 24px; } h1 span { font-size: 18px; } ___________________________________________ h1 { font-size: 1.5em; } /* 2416 = 1.5 */h1 span { font-size: 0.75em; } /* 1824 = 0.75 */ 19. Estrutura Fluida: Grid 20. Estrutura Fluida: Grid 21. Estrutura Fluida: Margin & Padding 22. Estrutura Fluida: Imagens 23. Criando um Design Adaptvel 24. Design Adaptvel: Media Queries Expresses condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientao da tela e/ou aspect ratio: @media screen and (max-width:480px) (resoluo mxima no viewport de 480px) @media all and (orientation:landscape) Orientao paisagem @media screen and (device-aspect-ratio: 16/9) Monitores 16:9 (ex.: resoluo de 1280 x 720px) @media screen and (min-width: 400px) and (max-width: 700px) Tela com resoluo mnima de 400px e mxima de 700px 25. Design Adaptvel: Breakpoints 26. Design Adaptvel: Viewport Viewport a ara de visualizao do dispositivo aonde o site deve aparecer A customizao do viewport serve para definir a resoluo inicial de visualizao do site, e evitar a miniaturizao do mesmo Seus parmetros so: width/height, initialscale, userscalable e minimum/maximum-scale 27. Design Adaptvel: Viewport Uma coleo de diferentes recursos e ferramentas para se trabalhar com Web Design Responsivo: http://bradfrost.github.io/this-is-responsive/ resources.html 28. Obrigada Priscila Sato e Jucinei Santos (slides feitos por Thiago Chaves)