Responsividade no extremo

Estava lendo um post sobre como testar design responsivo (http://tableless.com.br/como-testar-design-responsivo/). Muito bom por sinal.

Nele é citado uma série de ferramentas online para testar um site em diversos tamanhos de dispositivos, tablets, smartphones, monitores, etc. De todos os sites o que eu mais gostei foi o Screenfly (http://quirktools.com/screenfly/).

Ferramenta bacanuda, basta informar o endereço do site e escolher qual o dispositivo se deseja e ele ajusta o tamanho da viewport para o tamanho correto.

(Y)

O Click mais rápido do Oeste

Estava desenvolvendo um sistema web que será utilizado tanto nos desktops quanto em tablets. Mesma página, mesmo javascript, mesmo CSS Responsivo.

Uma coisa que comecei a notar é que no tablet ao clicar em um botão o browser demorava para alguns milissegundos para responder. E isso começou a me incomodar.

Pesquisando um pouco encontrei o FastClick (https://github.com/ftlabs/fastclick). Ele promete tirar o atraso de 300ms entre o momento que o touch acontece e ação acontece.

E parabéns ele consegue isso um exemplo pode ser visto em http://ftlabs.github.io/fastclick/examples/layer.html.

Basicamente o que ele faz é quando o evento de touchend é disparado o evento de click é disparado em sequência.

Well done!!

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.

Quase um pão que salta da torradeira

Uma das coisas que sempre temos que fazer um sistema é mensagens para o usuário. Fui apresentado ao Toastr (http://www.johnpapa.net/toastr100beta/) que realiza o trabalho super bem.

Ele é de fácil de utilizar, possuindo apenas 4 funções: sucess, info, warning, error.

A mensagem é apresentado com uma animação bonita, pode ser customizado e um dos motivos que mais gostei. É responsivo.

 

 

Pegando e levando pela mão

Dispositivos touch (smartphones, tablets, e ultrabooks) são cada vez mais frequentes nas nossas vida. Uma coisa que já comentei foi sobre trabalhar com design responsivo, fazendo com que o conteúdo seja mostrado da melhor forma de acordo com o tamanho da tela.Também comentei sobre o recurso de drag’n’drop que facilita bastante algumas operações para o usuário.

Fui pesquisar como fazer tudo misturado, fazer drag’n’drop no celular. A grande diferença é que o touch não tem mouse (óbvio) o que causa algumas modificações no comportamento do browser.

Por exemplo: caso um elemento tenha um “hover” (comportamento quando o cursor do mouse fica sobre o elemento), este comportamento é feito quando o usuário toca 1 vez sobre o elemento. O click funciona no próximo toque.

Dessa forma o jquery UI não consegue realizar o drag’n’drop normalmente. Procurando um pouco encontrei o jQuery UI Touch Punch (http://touchpunch.furf.com/). Com esse script é possível, sem nenhum codificação extra, realizar drag’n’drop com o toque.

Fiz um exemplo em http://jsfiddle.net/caliel/ZDKAD/2/ e funcionou perfeitamente. Graças a isso as facilidades do mouse se juntam a facilidade do touch. O melhor de dois mundos.