mobile first - palestra no mobileconf 2013
DESCRIPTION
Palestra ministrada no MobileConf 2013, em São Paulo - abril.TRANSCRIPT
![Page 1: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/1.jpg)
Horácio Soares @horaciosoares
21 9925-5404
Outubro de 2012 – São Paulo!
Mobile First
![Page 2: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/2.jpg)
Mobile First
![Page 3: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/3.jpg)
Mobile First Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first
![Page 4: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/4.jpg)
Mas antes…
![Page 5: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/5.jpg)
Qual é contexto do Mobile?
![Page 6: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/6.jpg)
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - Slide 4
![Page 7: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/7.jpg)
![Page 8: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/8.jpg)
![Page 9: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/9.jpg)
http://www.slideshare.net/HubSpot/50-mobilefactsdeck62812 - slide 6
![Page 10: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/10.jpg)
Os smartphones são indispensáveis no
cotidiano
![Page 11: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/11.jpg)
![Page 12: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/12.jpg)
![Page 13: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/13.jpg)
![Page 14: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/14.jpg)
![Page 15: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/15.jpg)
![Page 16: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/16.jpg)
![Page 17: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/17.jpg)
![Page 18: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/18.jpg)
“In 2013, Mobile Phone will overtake PC’s as the most
common Web access device world wide.”
— GARTNER
![Page 19: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/19.jpg)
![Page 20: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/20.jpg)
![Page 21: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/21.jpg)
Slide 107 http://www.slideshare.net/cxpartners/web-and-mobile-forms-design-userfriendly-2010-workshop
![Page 22: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/22.jpg)
Como o Luli disse no Digitalks no Rio:
“Nesse mundo Mobile, somos todos daltónicos e sofremos
do Mal de Parkinson”
![Page 23: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/23.jpg)
![Page 24: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/24.jpg)
![Page 25: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/25.jpg)
![Page 26: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/26.jpg)
capacidades/vantagens do mobile
![Page 27: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/27.jpg)
GPS
![Page 28: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/28.jpg)
Case Toyota
![Page 29: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/29.jpg)
![Page 30: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/30.jpg)
Acelerômetro
![Page 31: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/31.jpg)
Giroscópio
![Page 32: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/32.jpg)
![Page 33: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/33.jpg)
Bluetooth
![Page 34: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/34.jpg)
Áudio, vídeo e imagem
![Page 35: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/35.jpg)
NFC
![Page 36: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/36.jpg)
Sensores multitoque
![Page 37: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/37.jpg)
Em qualquer hora e local.
![Page 38: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/38.jpg)
Novas maneiras de interação e apresentação
![Page 39: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/39.jpg)
Boa compatibilidade entre
navegadores Mobile e HTML5
![Page 40: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/40.jpg)
Atualizações frequentes...
![Page 41: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/41.jpg)
![Page 42: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/42.jpg)
limitações/restrições do mobile
![Page 43: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/43.jpg)
“fritando o peixe e olhando o gato”.
![Page 44: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/44.jpg)
@lukew
![Page 45: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/45.jpg)
‘Desktop is like “diving”…
![Page 46: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/46.jpg)
…while mobile is like “snorkling.”’ by Hinman at Nokia
http://www.slideshare.net/Rachel_Hinman
![Page 47: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/47.jpg)
O que todos quando
mergulham desejam?
![Page 48: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/48.jpg)
![Page 49: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/49.jpg)
@lukew
desktop
![Page 50: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/50.jpg)
@lukew
tela grande
![Page 51: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/51.jpg)
@lukew
tela grande
energia
![Page 52: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/52.jpg)
@lukew
tela grande
energia
rede consistente
![Page 53: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/53.jpg)
@lukew
tela grande
energia
rede consistente
teclado
![Page 54: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/54.jpg)
@lukew
tela grande
energia
rede consistente
teclado
mouse
![Page 55: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/55.jpg)
@lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira
![Page 56: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/56.jpg)
@lukew
tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa
![Page 57: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/57.jpg)
tela grande
energia
rede consistente
teclado
mouse
cadeira
mesa caneca de café
@lukew
![Page 58: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/58.jpg)
![Page 59: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/59.jpg)
@lukew
mobile
![Page 60: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/60.jpg)
tela pequena
@lukew
![Page 61: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/61.jpg)
tela pequena
bateria
@lukew
![Page 62: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/62.jpg)
tela pequena
bateria
rede inconsistente
@lukew
![Page 63: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/63.jpg)
tela pequena
bateria
rede inconsistente
dedo gordo
@lukew
![Page 64: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/64.jpg)
tela pequena
bateria
rede inconsistente
dedo gordo
sensores
@lukew
![Page 65: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/65.jpg)
Outras limitações:
● Capacidade de armazenamento e
processamento reduzido.
● Uma aplicação em HTML5 para mobile
pode ser até 100 vezes mais lenta que em
desktop. http://spaceport.io/spaceport_perfmarks_2_report_2012_5.pdf
![Page 66: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/66.jpg)
perda de 80% do espaço
![Page 67: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/67.jpg)
@lukew
![Page 68: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/68.jpg)
e isso pode ser ótimo para o negócio...
![Page 69: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/69.jpg)
te força a priorizar...
te força a manter o foco…
![Page 70: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/70.jpg)
Alguém conhece algum site
que gostaria que 80% do seu
conteúdo/itens/elementos
fosse retirado da interface?
![Page 71: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/71.jpg)
Flickr desktop
60 opções de menu...
![Page 72: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/72.jpg)
@lukew
![Page 73: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/73.jpg)
Flickr mobile
7 opções de menu...
![Page 74: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/74.jpg)
Less is more...
![Page 75: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/75.jpg)
@lukew
![Page 76: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/76.jpg)
Restrições são boas para o
design, pois te forçam a
priorizar, a manter o foco
![Page 77: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/77.jpg)
mas cuidado…
![Page 78: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/78.jpg)
no ponto…
![Page 79: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/79.jpg)
![Page 80: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/80.jpg)
![Page 81: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/81.jpg)
![Page 82: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/82.jpg)
Os detalhes do comprador não
podem ser visualizados na versão mobile.
![Page 83: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/83.jpg)
![Page 84: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/84.jpg)
![Page 85: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/85.jpg)
![Page 86: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/86.jpg)
![Page 87: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/87.jpg)
Desktop Site
![Page 88: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/88.jpg)
![Page 89: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/89.jpg)
Mobile Site
![Page 90: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/90.jpg)
![Page 91: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/91.jpg)
![Page 92: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/92.jpg)
![Page 93: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/93.jpg)
Ainda antes de focar no Mobile First, como anda a qualidade dos
nossos sites nas versões desktop?
![Page 94: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/94.jpg)
![Page 95: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/95.jpg)
Será?
![Page 96: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/96.jpg)
Uma breve avaliação de conhecidos sites de
notícias sobre TI
![Page 97: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/97.jpg)
![Page 98: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/98.jpg)
![Page 99: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/99.jpg)
![Page 100: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/100.jpg)
![Page 101: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/101.jpg)
![Page 102: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/102.jpg)
![Page 103: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/103.jpg)
![Page 104: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/104.jpg)
![Page 105: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/105.jpg)
![Page 106: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/106.jpg)
![Page 107: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/107.jpg)
![Page 108: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/108.jpg)
![Page 109: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/109.jpg)
![Page 110: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/110.jpg)
O Mobile First vem tirar os sites
Desktop do
CTI
![Page 111: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/111.jpg)
![Page 112: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/112.jpg)
Mobile First Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first
![Page 113: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/113.jpg)
SIMPLICIDADE
![Page 114: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/114.jpg)
Paradoxo da escolha
![Page 115: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/115.jpg)
Elimine da interface itens que não
sejam extremamente
necessários...
![Page 116: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/116.jpg)
Qual desses Desktops oferecia a melhor experiência?
![Page 117: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/117.jpg)
Qual desses Desktops oferecia a melhor experiência?
![Page 118: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/118.jpg)
E qual desses controles?
![Page 119: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/119.jpg)
Case Extreme Booking with Hotels.com
![Page 120: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/120.jpg)
http://www.youtube.com/watch?v=gcuFkiEORsE
![Page 121: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/121.jpg)
Desktop first!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
![Page 122: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/122.jpg)
![Page 123: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/123.jpg)
![Page 124: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/124.jpg)
![Page 125: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/125.jpg)
Mobile First!
http://arquiteturadeinformacao.com/2010/06/04/mobile-first/
![Page 126: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/126.jpg)
Mobile First!
![Page 127: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/127.jpg)
Mobile First!
![Page 128: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/128.jpg)
Mobile First!
![Page 129: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/129.jpg)
![Page 130: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/130.jpg)
Mas antes do Mobile First
precisamos de
estratégia...
![Page 131: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/131.jpg)
Estratégia:
”conspiração para o
sucesso”
![Page 132: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/132.jpg)
![Page 133: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/133.jpg)
X
![Page 134: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/134.jpg)
Projetos UX Mobile
![Page 135: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/135.jpg)
O que os usuários esperam?
![Page 136: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/136.jpg)
felicidade
![Page 137: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/137.jpg)
felicidade
X
![Page 138: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/138.jpg)
felicidade
![Page 139: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/139.jpg)
felicidade
X
![Page 140: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/140.jpg)
experiência perfeita
![Page 141: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/141.jpg)
felicidade
![Page 142: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/142.jpg)
Experiência do Usuário (UX) é a
qualidade da experiência que uma
pessoa tem ao interagir com algo
projetado.
uxnet.org
“
”
![Page 143: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/143.jpg)
E o que as empresas esperam?
![Page 144: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/144.jpg)
o melhor osso…
![Page 145: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/145.jpg)
mas como
![Page 146: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/146.jpg)
com qualidade...
![Page 147: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/147.jpg)
acertando o tiro certo no alvo certo
![Page 148: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/148.jpg)
http://voluntariadomococa.files.wordpress.com/2009/09/tarifas-taxi.jpg
para onde vamos?
![Page 149: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/149.jpg)
onde devemos mirar?
![Page 150: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/150.jpg)
Livro: O Tiro e o Alvo
Causo 1
Precisamos Construir uma mesa.
![Page 151: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/151.jpg)
CAUSO 1
- A propósito, que mesa?
Livro: O Tiro e o Alvo
![Page 152: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/152.jpg)
De sinuca?
![Page 153: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/153.jpg)
Ping-pong?
![Page 154: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/154.jpg)
Futebol de botão?
![Page 155: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/155.jpg)
Carteado?
![Page 156: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/156.jpg)
Ou seria uma mesa para computador?
![Page 157: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/157.jpg)
Reunião?
![Page 158: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/158.jpg)
Escritório?
![Page 159: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/159.jpg)
Mesa de centro?
![Page 160: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/160.jpg)
Jantar?
![Page 161: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/161.jpg)
Ou seria uma mesa de cirurgia?
![Page 162: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/162.jpg)
De autópsia?
![Page 163: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/163.jpg)
CAUSO 1 (continuação)
- Isso não interessa, meu filho. Depois a gente vê. Vamos começar logo o trabalho. O prazo é curto, então, mãos à obra!
Livro: O Tiro e o Alvo
Livro: rework 37 Signals
![Page 164: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/164.jpg)
Conclusão? Retrabalho, desgaste com o cliente e diminuição do lucro.
![Page 165: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/165.jpg)
Como são nossas experiências?
![Page 166: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/166.jpg)
![Page 167: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/167.jpg)
![Page 168: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/168.jpg)
• A maioria das experiências ruins poderiam ser evitadas com a identificação do alvo certo e com avaliações com
usuários...
![Page 169: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/169.jpg)
By Bernard De Luna
![Page 170: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/170.jpg)
É a média do tempo gasto em refação nos projetos de TI. Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
50%
![Page 171: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/171.jpg)
Dos projetos são abandonados depois de uma primeira entrega inadequada.
Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
15%
![Page 172: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/172.jpg)
É a média da melhoria dos KPI’s em projetos com 10% do orçamento gasto em pesquisa de usabilidade.
Fonte: http://spectrum.ieee.org/computing/software/why-software-fails/0 Via Curso AI Faber Ludens: http://www.slideshare.net/faberludens/curso-ai-i-masters-jan-2013
83%
![Page 173: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/173.jpg)
Aumento de KPI’s
Conversões - Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
![Page 174: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/174.jpg)
Diminuição de KPI’s
Custos do projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações – Manutenção. key performance indicator (KPI) http://en.wikipedia.org/wiki/Key_performance_indicator
![Page 175: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/175.jpg)
desafio 1:
identificar objetivos e necessidades…
![Page 176: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/176.jpg)
Por Quê? Por Quê? Por Quê? Por Quê? Por Quê?
Precisamos automatizar a Contabilidade
Preciso do Balancete dia 5 e não dia 15 como atualmente!
Necessito da Conta X do Balancete até o dia 5.
Preciso do valor da Conta X para calcular até o dia 7 o valor das Reservas.
Precisamos informar o valor das Reservas ao
Banco Central até o dia 8!
Por que se não informarmos as Reservas
seremos multados!!
Investigação Baseada em Perguntas
![Page 177: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/177.jpg)
Uma proposta de briefing Baseado em perguntas:
http://clearleft.s3.amazonaws.com/client-
worksheet.doc
http://bit.ly/a5tRzF
![Page 178: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/178.jpg)
Marte Objetivos e metas da empresa
Vênus Necessidades dos usuários
Desafio 2:
Como atender ao mesmo tempo os objetivos e as necessidades?
![Page 179: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/179.jpg)
Objetivos e metas do projeto
![Page 180: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/180.jpg)
• Precisa de novos clientes/usuários.
• Quer que os clientes atuais visitem seu site com
maior frequencia.
• Quer aumentar a margem de lucro.
• Você precisa aumentar sua audiência, seu público.
• Quer diferenciar sua marca.
• Gostaria de melhorar o retorno sobre o investimento
(ROI).
• Quer que seus clientes gastem mais a cada compra.
• Está à procura de novos canais de distribuição.
• Quer aumentar sua fatia do mercado (market share).
• ...
![Page 181: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/181.jpg)
Reais necessidades
dos usuários
![Page 182: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/182.jpg)
• Qualidade.
• Simplicidade.
• velocidade.
• Utilidade.
• Usabilidade.
• Acessibilidade.
• Portabilidade.
• Bom custo x benefício.
• Resolver seu problema.
• ...
![Page 183: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/183.jpg)
Objetivos e metas do projeto
Reais necessidades
dos usuários
![Page 184: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/184.jpg)
![Page 185: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/185.jpg)
a busca do equilíbrio
![Page 186: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/186.jpg)
empresa
usuários
Objetivos e metas do
projeto Necessidades dos
usuários
![Page 187: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/187.jpg)
um case em equilíbrio…
![Page 188: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/188.jpg)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
![Page 189: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/189.jpg)
Erico Fileno
![Page 190: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/190.jpg)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
![Page 191: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/191.jpg)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
![Page 192: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/192.jpg)
Observação e identificação de um problema...
![Page 193: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/193.jpg)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
![Page 194: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/194.jpg)
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
![Page 195: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/195.jpg)
![Page 196: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/196.jpg)
Quais os caminhos do design mobile?
Não fazer nada…
CSS HandHeld
Design Líquido Design
Respon-sivo
Otimizado para
Mobile
App Nativa
App Híbrida
![Page 197: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/197.jpg)
![Page 198: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/198.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
![Page 199: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/199.jpg)
Não fazer nada!
![Page 200: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/200.jpg)
![Page 201: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/201.jpg)
![Page 202: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/202.jpg)
![Page 203: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/203.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
CSS HandHeld
Design Líquido
![Page 204: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/204.jpg)
CSS HandHeld
Design Líquido
![Page 205: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/205.jpg)
![Page 206: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/206.jpg)
Como era em 2004, 2005, 2006...?
CSS media
HANDHELD
![Page 207: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/207.jpg)
Site Acesso Digital
2007
![Page 208: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/208.jpg)
Portabilidade - design líquido (resolução 1024x768)
![Page 209: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/209.jpg)
Portabilidade - design líquido ( resolução 640x480)
![Page 210: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/210.jpg)
Portabilidade – CSS (Display PRINT)
![Page 211: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/211.jpg)
Acesso Digital: http://acessodigital.net
Portabilidade css para dispositivo móvel
MOTO Q
![Page 212: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/212.jpg)
![Page 213: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/213.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
CSS HandHeld
Design Líquido Design
Respon-sivo
![Page 214: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/214.jpg)
Design Responsivo
![Page 215: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/215.jpg)
![Page 216: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/216.jpg)
![Page 217: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/217.jpg)
![Page 218: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/218.jpg)
![Page 219: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/219.jpg)
![Page 220: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/220.jpg)
![Page 221: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/221.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
CSS HandHeld
Design Líquido Design
Respon-sivo
Otimizado para
Mobile
![Page 222: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/222.jpg)
Otimizado para
Mobile
![Page 223: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/223.jpg)
![Page 224: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/224.jpg)
![Page 225: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/225.jpg)
Otimizado para
Mobile
2 v. Desktop e Mobile
![Page 226: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/226.jpg)
2 v. Desktop e Mobile
![Page 227: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/227.jpg)
2 v. Desktop e Mobile
![Page 228: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/228.jpg)
2 v. Desktop e Mobile
![Page 229: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/229.jpg)
Site otimizado para Mobile
A maioria oferece apenas duas versões:
![Page 230: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/230.jpg)
Site otimizado para Mobile
Normalmente a versão Mobile é projetada
com foco nas atividades fins.
![Page 231: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/231.jpg)
Otimizado para
Mobile
3 v. Desktop, Tablet e Mobile
![Page 232: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/232.jpg)
Site otimizado para Mobile
Algumas empresas têm três versões diferentes:
![Page 233: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/233.jpg)
Otimizado para
Mobile
2 v. Desktop e Mobile
3 v. Desktop, Tablet e Mobile
![Page 234: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/234.jpg)
![Page 235: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/235.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
CSS HandHeld
Design Líquido Design
Respon-sivo
Otimizado para
Mobile
App Nativa
![Page 236: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/236.jpg)
App Nativa
![Page 237: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/237.jpg)
![Page 238: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/238.jpg)
![Page 239: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/239.jpg)
App Nativa
IOS
Android
Windows Phone
Blackbarry
![Page 240: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/240.jpg)
![Page 241: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/241.jpg)
os caminhos do design mobile
@horaciosoares – Campus Party 2013
Não fazer nada…
CSS HandHeld
Design Líquido Design
Respon-sivo
Otimizado para
Mobile
App Nativa
App Híbrida
![Page 242: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/242.jpg)
App Híbrida
![Page 243: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/243.jpg)
![Page 244: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/244.jpg)
Via Thais Souza @tsouzamobile!
![Page 245: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/245.jpg)
Qual melhor caminho?
![Page 246: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/246.jpg)
![Page 247: Mobile First - Palestra no MobileConf 2013](https://reader036.vdocuments.net/reader036/viewer/2022081403/556c08f9d8b42a852a8b4617/html5/thumbnails/247.jpg)
Mobile First Luke Wroblewski
Livro: http://www.abookapart.com/products/mobile-first