MOBILE WEB

AQUI E AGORA

meet2Brains 4:

• Formando em Desenho Industrial na UFES

• Arquiteto de informação na Wine.com.br

• Responsável pela plataforma mobile

Telefone+ jogo da cobrinha

Telefone+ SMS

Telefone+ SMS+ 256 cores

Telefone+ SMS+ câmera VGA+ rádio e mp3

Telefone+ SMS, MMS+ twitter+ câmera 2MP+ rádio+ mp3

Apps+ web

2003 2004 2008 2008 2009 2012

http://googlediscovery.com/2009/07/27/google-latitude-para-iphone/

APLICATIVOS NATIVOSx

WEB MÓVEL

NATIVORecursos avançados

Plataformas separadas

Destaque nas app stores

WEBSempre atualizado

Multi-plataforma

Otimizado para sites de busca

Um não é melhor do que o outro. Ambos se complementam.

http://www.tricedesigns.com/wp-content/uploads/2011/08/multidevice_teaser.jpg

http://www.gazetadopantanal.com/editoria/agronegocios/page/79/

https://singularityhub.com/2013/03/14/beforeafter-comparison-of-pope-announcement-shows-incredible-proliferation-of-mobile-in-just-8-years/

http://pplu-sons.blogspot.com.br/2013_02_01_archive.html

(POR FAVOR, NÃO)

CONTEXTO

60% TRANSPORTEPÚBLICO

69% RESTAURANTE

53% CONSULTÓRIO MÉDICO

45% DOS CONSUMIDORESusam smartphones para pesquisa de produtos e navegação dentro das lojas.

CONTEXTO PODE SER TANTOQUANTITATIVO E QUALITATIVO

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012

• Tamanho da tela

• Conexão

• Recursos do aparelho

• Processamento

• Métodos de entrada

• Objetivos

• Ambiente

• Atenção

• Predisposição

OPORTUNIDADE

OPORTUNIDADERESPONSABILIDADE

FLEXIBILIDADE

UBIQUIDADE

PERFORMANCE

APRIMORAMENTO

CONTEÚDOÉ MATO.

ADAPTARCONTEÚDO À FORMA

(e não o contrário)

INÚTILINÚTIL

FLEXIBILIDADE

UBIQUIDADE

PERFORMANCE

APRIMORAMENTO

WEB

“Ninguém compra vinho pelo celular.”

Janeiro 2012 – Janeiro 2013 – Wine.com.br

Grupos de Foco do Google

Repetitive now

Bored now

Urgent now

PROJETE UMA INTERFACE SUFICIENTEMENTE

USÁVEL E AS PESSOAS IRÃO UTILIZA-LÁ.

Valor > Frustração

https://vimeo.com/46141222

http://produto.mercadolivre.com.br/MLB-465736423-cce-vcr-30x-video-cassete-recorder-_JM

DESIGN ÉPERFORMANCE.

(a experiência é consequência)

Navegadores como o Safari Mobile e

Chrome para Android adicionam 300 ms de

latência ao evento “clique”, esperando que

um segundo evento ocorra, no caso, um

duplo clique.

https://developers.google.com/mobile/articles/fast_buttons

PERFORMANCE É

PERCEBIDA

3 MB

3 MB

RESPONSIVO

USUÁRIOS ESPERAM QUE A PÁGINA MOBILE

CARREGUE MAIS RÁPIDO QUE A

CONVENCIONAL.

USUÁRIOS ESPERAM QUE A PÁGINA MOBILE

CARREGUE MAIS RÁPIDO QUE A

CONVENCIONAL.

QUEREM

PERFORMANCEOTIMIZAÇÃO

GOOGLE PAGE SPEED

DESIGNRESPONSIVO

APPCACHE

MINIFYWEB STORAGE

RETINA DISPLAY

CARREGAMENTO CONDICIONAL

SPRITESMOBILE FIRST

TOUCHHTML5

CSS3

USABILIDADE

ADAPTEResponsivo, fluido, elástico, condicional, não importa: entregue o que o usuário quer fazer. Não existe solução mágica para todos os casos.

PRECIOSOS4 SEGUNDOS.

FLEXIBILIDADE

UBIQUIDADE

PERFORMANCE

APRIMORAMENTO

<input type="number" pattern="[0-9]*">

CSS TransformstranslateX/Y/Z

CSS Transitions

Utilitários-webkit-overflow-scrolling;-webkit-tap-highlight-color;-webkit-user-select;-webkit-touch-callout;

Aceleração por hardware:

ENTENDA ASRESTRIÇÕES

O público do seu sitequer o suco

ou a casca dele?

Plante essaIDEIA

Mobile de hoje é oUniversal de amanhã.

@blude

Obrigado!