Fast JavaScript Click Event for Touch Devices

Click Events

When working on a web app for touch devices (iPhone / iPad), you will soon notice that click events are rather slow to fire. There is a delay due to the fact that the device waits for the user to complete a gesture before deciding that the intended gesture was in fact a click.

I wrote a simple script that detects whether the device is touched without moving. When tapped without move, it fires a custom event named “fast click”. This alternative event fires much faster then an ordinary click event.

Continue reading “Fast JavaScript Click Event for Touch Devices”

Deel 2 webshop mobiel: Van ontwerp naar implementatie

Het geschetste ontwerp links en het resultaat in HTML/CSS rechts
Schets van ontwerp links en resultaat in HTML/CSS rechts

Van schets naar HTML/CSS

De ruwe schets uit deel 1 is omgezet naar HTML/CSS. er is geen stap in PhotoShop aan vooraf gegaan. Wat de voordelen van deze aanpak zijn, kan je hier lezen: 37signals: Why we skip Photoshop.

Lees verder…

Ontwerp userinterface webshop voor mobiel

Webshop iPhone

Door de userinterface van een website eerst voor de smartphone (aka mobiel) te ontwerpen, wordt de ontwerper gedwongen om zich te focussen op alleen de meest belangrijke acties. Door het beperkte scherm is er immers geen ruimte voor overbodige content. De gangbare term hiervoor is “Mobile first”.

Lees verder…

Pixelmator, Photoshop alternatief

Een Retro stijl poster, gemaakt in Pixelmator

Abobe photoshop

Sinds de upgrade naar Mac OS X Lion 10.7, werkte mijn hele oude versie van Adobe Photoshop helaas niet meer. Het was tijd om een nieuwe versie van Adobe Photoshop aan te schaffen. Maar goed, om nu € 600,- uit te gaan geven aan Adobe Photoshop, dat is me iets te gortig voor een grafisch pakket dat ik niet eens zo heel vaak gebruik. Het was tijd voor een alternatief.

Lees verder…

Dynamic Dependent List Boxes

Introduction

Dynamic dependent list boxes allow a “child” list box to refresh when a selection is made in a “parent” list box. The dynamic dependent list box returns to the server to requery the dependent list box’s items through an Ajax call.

The advantage to this asynchrone approach is immediate page response.

Lees verder…

Een layout grid met behulp van CSS tables

CSS Table Layout marks the end of complex CSS layout techniques and will be the final nail in the coffin of using HTML tables for layout.

Waarom de techniek met CSS floats niet meer voldoet

De traditionele manier om een grid te maken in CSS is eigenlijk een complete hack. We gebruiken floats, absolute posities, negatieve margins, CSS clear en andere trucjes. Het is allemaal erg complex geworden en daardoor ook moeilijker onderhoudsaar.

Lees verder…

HTML 5 Accelerometer

Wat is een Accelerometer

Volgens wikipedia is een accelerometer (versnellingsmeter in het Nederlands):

Een versnellingsmeter is een meetapparaat dat een versnelling kan registreren en meten. Het maakt gebruikt van het traagheidsprincipe.

Tegenwoordig is bijna elke smartphone uitgerust met een accelerometer. Met de accelerometer is het mogelijk de rotatie digitaal uit te lezen.

Lees verder…

Mockup m.b.v. jQuery Mobile

screenshot-jquery-mobile

Wat is jQuery Mobile

De makers van jQuery werken sinds een paar maanden aan jQuery Mobile.

“It’s a framework built on top of jQuery that provides a range of user interface elements and features for you to use in your mobile apps. jQuery Mobile uses the very best HTML 5 and CSS 3 features to provide the best possible experience in the most-capable browsers.”

Afgelopen jaar, op 12 november 2010 hebben de mannen van jQuery Mobile een tweede alfa versie uitgebracht – jQuery Mobile Alpha 2.

Lees verder…