Protótipos de papel

Para mim, Paper prototype é a melhor maneira de fazer análise de funcionalidades de uma tela. Tanto no papel mesmo ou em ferramentas de simulaçao.

Me passaram dois sites interessantes:

Ambos tem templates prontos para serem impressos e começar a prototipar telas para os dispositivos móveis. Bem maneiro, e só imprimir e começar a trabalhar.

O Sticky Jots foi alem, ele comercializa um kit  (com um molde de ipad e iphone) por apenas US$ 50,00.

 

Obrigado pela dica Tiago Buffon

 

Rolando docemente

A rolagem de elementos nos dispositivos móveis é bem suave, bem fluída, bem bonita. E o mais legal é que ela mantem inércia, rolando os elementos sem parar.

Quando uma página web é aberta no browser mobile a página fica com o mesmo esquema de rolagem. O problema é quando um outro elemento é que está com rolagem, um “div” por exemplo. Alem de ficar com a barra de rolagem feia não existe inércia.

Mas espere, os seus problemas acabaram, basta colocar o estilo abaixo que o elemento terá o comportamento desejo. Simples assim.

-webkit-overflow-scrolling: touch;

Óbvio que não funciona no IE.

Ligando e desligando a luz

Nos dispositivos móveis (android, ipad, iphone, windows phone) apresentam switchs, interruptores, aquelas chaves de luz com dois estados. Cada plataforma tem o seu layout próprio: mais quadrado, mais arredondados. Mas todos são uns checkbox com estilo.

Um exemplo que achei foi o On/Off FlipSwith (http://proto.io/freebies/onoff/). O que eu mais gostei, é que ele é basicamente feito com CSS. Possui temas prontos para IOS, Android e Windows 8, e com um editar para gerar novos temas.

Uma coisa importante é que não é suportando no IE 8 (óbvio) ou inferior.

Design Reponsivo

Tenho trabalhado bastante com sistemas para a web ultimamente, e um dos meus maiores focos tem sido a responsibilidade do conteúdo.

Estava lendo um blog e vi a seguinte frase “Responsive design é entregar a mesma informação — útil e priorizada — para todo mundo!”, a referência está em http://sergiolopes.org/responsive-web-design/ do @sergio_caelum.

Outra referência bem bacana é o http://www.midiatismo.com.br/o-mobile/design-responsivo-entenda-o-que-e-a-tecnica-e-como-ela-funciona.

Uma dica interessante para quem quiser criar um site mobile, sem saber muita coisa, é utilizar o jQuery Mobile. Um framework bem simples e prático para criar toda a interface web/mobile.