If you believe in something, work nights and weekends, it won’t feel like work. — Kevin Rose

Fast JavaScript Click Event for Touch Devices

"Fast" click demo

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…


Deel 2 webshop mobiel: Van ontwerp naar implementatie

Het geschetste ontwerp lins en het resultaat in HTML/CSS rechts

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. Het eindresultaat is tot stand gekomen in een aantal iteraties. Hieronder een korte samenvatting van de iteraties door de…


Ontwerp userinterface webshop voor mobiel

iMockups Logo

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”. “So when a…


Pixelmator, Photoshop alternatief

kunstwerk

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…


Waarom werkt vertical-align:bottom niet!?

In CSS is het lastig om tekst uit te lijnen met de onderkant van een blok. De CSS property "vertical-align" doet niet altijd wat de meesten verwachten. Binnen een tabel doet "vertical-align:bottom" wat de meesten verwachten. Het zorgt er voor dat de tekst in een cel tegen de onderrand wordt geplaatst. Ook voor een…


Dynamic Dependent List Boxes

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. Both list…


Een layout grid met behulp van CSS tables

css-table-layout

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. 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…


HTML 5 Accelerometer

Verne Logo Google

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…


Mockup m.b.v. jQuery Mobile

screenshot-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…


Post-Redirect-Get Pattern

PostRedirectGet_DoubleSubmitSolution

Inleiding Post-Redirect-Get, kortweg PRG is een web design pattern dat een aantal veel voorkomende fouten op het web helpt voorkomen. Voorkomt dubbele form submits, veroorzaakt door herladen van de pagina. Zorgt er voor dat de zichtbare URL hoort bij de pagina die getoond wordt. Maakt webpagina's "bookmarkable". Hoe…