Uploaded on

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

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

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
328
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RWTF?
  • 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. “You must know where you came from yesterday, know where you are today, to know where you're going tomorrow.” - Ditado Cree
  • 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. 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. 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. 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. Onde estamos “It was the best of times, it was the worst of times” - Charles Dickens “A Tale of Two Cities”
  • 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. Responsive Web Design != iDevices + Desktop
  • 11. WATERFALL WORKFLOW Planeamento Design Development
  • 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. 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. Propostas + Photoshop + Breakpoints = Trabalheira
  • 15. … e o conteúdo continua a chegar atrasado.
  • 16. Onde queremos chegar? “The future depends on what you do today.” - Mahatma Gandhi
  • 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. 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. Worflow mais dinâmico e iterativo Planeamento Sketches Protótipos (Browser) Não Sim Design HTML Funciona? Testes
  • 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. O RWD, com as suas exigências, faz-nos evoluir.
  • 22. O RWD é uma das evoluções mais importantes para a Web.
  • 23. Obrigado ;)