Touchy-Feely with DOM Events: Rethinking Cross-Device User Interaction

There have been numerous ways for users to interact with web pages on mobile phones. Historically, users navigated the mobile web by pressing physical buttons (arrow keys, soft keys, etc.), while some devices required a stylus.

In the last several years, devices with touch-enabled screens have been adopted at such a rapid rate that touch interaction has become ubiquitous. Now we have tablets that take input not only from touch, but from keyboards and mousepads using optional peripherals.

So what does it mean to you as a web developer? It means you need to detect the correct user input method, and design the correct user experience into your web apps.

Continue reading

Dynamic backgrounds with background-size: cover

This is a two-part article. The second part will be covered in a future post.

There are some fantastic styles available now in CSS3. Apart from anything else, border-radius and box-shadow alone are the greatest tools to be added to the web developer’s toolbox since float:left. Alongside these highly important and commonly used attributes, there are also some new values for existing rules like background-size:cover.

Continue reading

Creating A Custom HTML5 Form Validation

In his blog post on HTML5 forms and IE10 Mobile, Andrea explained HTML5 forms and what is new in Internet Exporer 10 Mobile, so you should now have some understanding of HTML5 form validation. To summarize, HTML5 eases the pain of writing extra logic to validate users’ form inputs, letting you create usable forms with a little or no scripting.

In this tutorial, I will show you a practical example of creating a custom validated form  with CSS3, web fonts, and a bit of JavaScript (or not).
Continue reading