Desenvolvendo Sites para Múltiplos Dispositivos

Transcript

1. Desenvolvendo sites para múltiplos dispositivos Osvaldo Júnior | | osvaldo.me eu@osvaldo.me @mwanalezi
2. "Global mobile data traffic grew 81 percent in 2013" "Smartphones represented only 27 percent of total global handsets in use in 2013, but represented 95percent of total global handset traffic" "By the end of 2014, the number of mobile-connected devices will exceed the number of people on earth, and by 2018 there will be nearly 1.4 mobile devices per capita" Fonte: http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html
3. "The average user now picks up their device more than 1,500 times a week" Fonte: http://www.dailymail.co.uk/sciencetech/article-2783677/How-YOU-look-phone-The-average-user-picks-device-1-500-times-day.html
4. 40% das pessoas usam o smartphone no wc Fonte: http://www.lukew.com/ff/entry.asp?1500
5. Contexto Móvel Usuário móvel não é exatamente aquele que está em movimento Sim, também é
6. Grande parte do uso aconte quando pretendemos "queimar tempo". Enquanto esperamos Em casa/serviço Durante uma viagem
7. A mesmas tarefas são feitas num dispositivo móvel e num PC "90% dos usuários começa uma tarefa num dispositivo e a completa noutro" Fonte: Google Uso sequencial Uso simultâneo Multi-tarefa Complentando
8. "Os dispositivos populares de hoje não serão os mesmos de amanhã portanto é melhor desenvolver algo que funcione em qualquer dispositivo do que algo que funciona apenas nos dispositivos da actualidade." Fonte: @oneextrapixel & @trentwalton
9. Design Agnóstico ao Dispositivo
10. O site é independe do dispositivo em que está a ser acessado. Conteúdo principal deve manter-se igual em todos os dispositivos mas com experência de usuário optimizada.
11. Definindo a estratégia do conteúdo "O conteúdo deve ser coreografado para se certificar de que a mensagem que se quer transmitir seja preservado em qualquer dispositivo e a qualquer tamanho." Fonte: Trent Walton.
12. Responsive Web Design Web Design Responsivo
13. "Design e desenvolvimentoe devem responder ao comportamento do usuário e ao ambiente baseado no tamanho da tela, plataforma, e orientação. Consiste numa junção de técnicas como colunas e layouts flexíveis, imagens e um uso inteligente de CSS media queries" Smashing Magazine É acima de tudo um conceito. Nos focamos em apresentar a informação de forma acessível e confortável para diversos meios de acesso.
14. Design Responsivo e Layouts Adaptáveis "É difícil criar um design responsivo real. Layouts adaptáveis são um bom ponto de partida e é o que as pessoas pretendem transmitir com o termo "design responsivo". Porque layout é parte do design." Stephen Hay.
15. Media Query Permite determinar a aparência e a posição dos elementos HTML com base numa condição É uma combinação de Media Types e Media Features
16. Media Types Refere-se ao dispositivo all- Todos os tipos de meios braille-Dispositivos braile e tácteis embossed-impressoras brailes handheld-Pequenos dispositivos de bolso print-Impressoras projection-Projectores screen-Ecrãs convencionais speech-Sintetizadores de fala tty-Terminais tv-Televisores
17. Media Features Refere-se às características do dispositivo aspect-ratio height widht orientation resolution Outras features como color, color-index, device-aspect-ratio, device-width, device-height,scan.
18. Exemplo @media all and (min-width:640px) and (max-width:1200px) { /* Instruções CSS */ } @media only screen and (min-resolution:192dpi) { /* Instruções CSS */ }
19. Exemplo <link rel="stylesheet" media="(max-width:800px)" href="estilo.css">
20. DEMO!
21. Breakpoints
22. MEDIA QUERIES FOR COMMON DEVICE BREAKPOINTS Disponível em: http://responsivedesign.is/develop/browser-feature-support/media-queries-for- common-device-breakpoints
23. Como escolher breakpoints Use breakpoints baseads no conteúdo e não no dispositivo "Over the 4 years we have slowly moved away from device specific breakpoints in favour of content specific breakpoints, i.e. adding a breakpoint when the content is no longer easy to consume. With this fundamental shift in thinking we no longer have to fear a new device — a new iPhone width — because we've already fixed our sites to work everywhere." http://responsivedesign.is
24. "Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!" Fonte: Stephen Hay
25. Viewport Com o objectivo de oferecer uma melhor experiência de usuário browsers para dispositivos móveis renderizam as páginas em uma "janela" virtual ( normalmente de cerca de 980px) maior que o tamanho real da tela do dispositivo.
26. Viewport O Safari Mobile introduziu a "viewport meta tag" para permitir aos desenvolvedores web controlar o tamanho e a escala da viewport.
27. Viewport controla como uma página é apresentada no dispositivo. <meta name="viewport" content="width=device-width, initial-scale=1">
28. Outros valores do "content" do viewport user-scalable minimum-scale maximum-scale < meta name = " viewport " content = " width = device-width , initial-scale = 1 , minimum-scale = 0 .5 , maximum-scale = 4 " >
29. CSS Device Adaptation A meta-tag "viewport" não é uma especificação da W3C. A regra @viewport permite especificar os mesmos descriptores da meta-tag "viewport" directamente no CSS. @viewport { width : device-width ; zoom : 1 ; min-zoom : 0 .5 ; max-zoom : 4 ; orientation : portrait ; }
30. @viewport { width : device-width ; user-zoom : fixed ; } Para o IE e o Opera é necessário declarar com os respectivos prefixos -ms- e -o-
31. http://dowebsitesneedtolookexactlythesameineverybrowser.com/W Adicional-A pixel is not a pixel http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
32. Layouts 4 tipos mais comuns de layouts: Fixed-width Fluid ou Liquid Elastic Hybrid
33. Fixed-width Layouts O tamanho do site é limitado a um valor específico em pixeis, normalmente 960px. O valor 960 é o ideal para layouts baseados em colunas (por ser divisível por 3,4,5,6,8,12 e 15)
34. Fluid Layout O tamanho do site é determinado em percentagens e não píxeis.
35. Elastic Semelhante ao Fluid porém a unidade de medida usada é o ems. Esta unidade é múltiplo do tamanho da fonte, por exemplo, se a fonte for de 16px, 1em=16px e 2em=32px
36. Hybrid Combinação de 2 ou mais tipos de layouts.
37. Grids "Um grid é uma malha composta essencialmente por linhas, guias, colunas e margens. Esta rede serve para definir as relações de alinhamento, proporção e posicionamento dos elementos de um layout. A intenção do grid é facilitar a diagramação de grandes quantidades de informação e guiar o olhar do leitor." Fonte: Dani Guerrato
38. Ferramentas: Frameworks Facilitam a estruturação do layout da página. Incluem grids, tipografia, navegação, e outros elementos de estilo.
39. Boilerplate HTML Boilerplate Mobile Boilerplate Grid Systems Profound Semantic.gs Gridless Bootstrap Twitter Bootstrap Zurb Foundation
40. Fluid Media img { max-width: 100%; } img , video , embed , object { max-width: 100%; }
41. Responsive Web Design: Receita Media Queries Flexible Grids Flexible Media
42. CODE!
43. Brad Frost
44. Brad Frost
45. Referências http://alistapart.com/article/responsive-web-design http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ http://dowebsitesneedtolookexactlythesameineverybrowser.com http://www.slideshare.net/dmolsenwvu/measuring-web-performance-18921979 http://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the- server http://thepixellab.com.au/the-non-technical-explanation-of-responsive-design/ Vários outros
46. Obrigado. | | osvaldo.me eu@osvaldo.me @mwanalezi