Click here to load reader

Responsive Layouts

  • View
    478

  • Download
    1

Embed Size (px)

DESCRIPTION

Apresento neste slide alguns conceitos do Design Responsivo, e como oferecer a melhor experiência de uso de para seu usuário.

Text of Responsive Layouts

  • 1. Como acessvamos a web a alguns anos?

2. Como acessamos a web hoje? 3. O que nos aguarda no futuro? 4. O que Responsive Design? 5. Responsive Web Design um nome bonito para um conceito antigo. Hoje seus usurios utilizam diversos dispositivos e meios de acesso para encontrar informao. 6. O nmero total de pessoas acessando a web atravs de dispositivos mveis ir superar o acesso via desktop em 2015. International Data Corporation (IDC) 7. X Layout Fixo Estrutura definida com medidas absolutas, no possui qualquer flexibilidade 8. X Layout Fluido Estrutura definida com medidas relativas, possui uma flexibilidade sem critrios 9. X Layout Adaptativo Capaz de se reconfigurar de acordo com a resoluo da tela ou tamanho da janela 10. V Layout Responsivo Grids Fluidos Design Adaptativo Contedo FlexvelOtimizao de desempenho 11. 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 12. Arquitetura de informao 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. Criando uma Estrutura Fluda 15. Tamanho contexto = resultado 16. 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 17. 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 */ 18. Estrutura Fluida: Grid 19. Estrutura Fluida: Grid 20. Estrutura Fluida: Margin & Padding 21. Estrutura Fluida: Imagens 22. Criando um Design Adaptvel 23. 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 24. Design Adaptvel: Breakpoints 25. 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, initial-scale, userscalable e minimum/maximum-scale 26. 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

Search related