RWTF?

616 views
501 views

Published on

Talk - Claúdio Medina & Jorge Varandas - Industry Sessions #1 - Responsive Design - Powered By EDIT.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
616
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

RWTF?

  1. 1. RWTF?
  2. 2. Who the F$#k are we? Cláudio Medina (Head Developer @ viewisobar) @euclaudio Jorge Varandas (Senior Developer @ viewisobar) @jvarandas Mas muito mais importante que isso, somos... “Code Ninjas” auto-proclamados!
  3. 3. “You must know where you came from yesterday, know where you are today, to know where you're going tomorrow.” - Ditado Cree
  4. 4. De onde vimos “Oh yes, the past can hurt. But you can either run from it, or learn from it. ” - Rafiki em “Rei Leão” xD
  5. 5. Layouts de dimensões fixas Os sites baseavam-se todos numa resolução mínima, estipulada por estatísticas de utilização. O layout não era suposto adaptar-se ao espaço que lhe era dado. Isto levou a uma exigência de controlo ao nível do pixel pelos designers.
  6. 6. Pixel Perfection O Photoshop tornou-se a ferramenta de eleição dos designers para criarem o layout de um site, porque lhes dava o controlo ao nível do pixel que necessitavam.
  7. 7. Sem conteúdo? Usa-se “Lorem ipsum”... Geralmente, a ordem de trabalhos passa(va) por criar todo um layout no Photoshop, com base numa ideia do que serão os conteúdos do site. Sem conteúdo, os web designers / agência vêm-se forçados a decidir o que mais convém para o layout de um site, com base apenas na harmonia visual.
  8. 8. Onde estamos “It was the best of times, it was the worst of times” - Charles Dickens “A Tale of Two Cities”
  9. 9. Mindset: Fixed Grids Embora hajam excepções, uma boa parte dos sites responsivos que produzimos agora, são pensados para usarem grelhas fixas. Ainda que não deixem de ser responsivos, a “desvantagem” desta abordagem é que os breakpoints, são normalmente baseados em larguras de ecrã de dispositivos especificos.
  10. 10. Responsive Web Design != iDevices + Desktop
  11. 11. WATERFALL WORKFLOW Planeamento Design Development
  12. 12. Weapon of Choice: Photoshop Porque o workflow é um processo compartimentado, o software dominante para a criação dos layouts continua a ser o Photoshop / software de edição de imagem de eleição.
  13. 13. Alguém tem de resolver a transformação entre os breakpoints... Sem ferramenta para definir comportamentos dinâmicos este ponto é descurado e assumido como secundário e só é apresentado ao cliente já durante o processo de produção/desenvolvimento/programação. Existem hoje ferramentas (online - no browser) que permitem prototipar sites e testar o comportamento sem obrigar o conhecimento de programação avançado.
  14. 14. Propostas + Photoshop + Breakpoints = Trabalheira
  15. 15. … e o conteúdo continua a chegar atrasado.
  16. 16. Onde queremos chegar? “The future depends on what you do today.” - Mahatma Gandhi
  17. 17. Mobile First “If you design mobile first, you create agreement on what matters most. You can then apply the same rationale to the desktop/laptop version of the Web site. We agreed that this was the most important set of features and content for our customers and business -why should that change with more screen space?” - Luke Wroblewski in “Mobile First helps with Big Issues” ( http://www.lukew.com/ff/entry.asp?1117 )
  18. 18. Content First O conteúdo não deverá ser encarado como algo para adornar o site, mas sim o ponto focal e a base por onde se deverá iniciar o processo criativo. “Design is the method of putting form and content together.” - Paul Rand
  19. 19. Worflow mais dinâmico e iterativo Planeamento Sketches Protótipos (Browser) Não Sim Design HTML Funciona? Testes
  20. 20. Weapon of Choice: Browser O Photoshop passa a ser usado para criar os sketches que são transformados nos protótipos funcionais, e posteriormente para finalizar o aspecto gráfico do site. Entretanto, a maioria das decisões de layout passam a ser tomadas no browser.
  21. 21. O RWD, com as suas exigências, faz-nos evoluir.
  22. 22. O RWD é uma das evoluções mais importantes para a Web.
  23. 23. Obrigado ;)

×