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

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 ;)