Richard Read
By: Richard Read – Bayshore Solutions Senior Developer
Usability is one of many factors that form the overall User Experience (UX) of your mobile app or website. We’ve seen enormous growth in the area of HTML5 development, and with the expected number of HTML5-compatible devices to top 1 billion in 2013, I thought it would be appropriate, due to the language’s popularity and relevance, to highlight a key feature, HTML5 Input Types.
Let me start by providing some context. The rich set of features brought about by HTML5 has given developers two very attractive alternatives to building native smartphone and tablet-based apps. These are known as Mobile Web apps and Hybrid apps. Mobile Web apps are your traditional server-side apps (ASP.NET, PHP), that render HTML with layouts and styles that have been specifically designed to fit the device form factor, and run in your mobile browser. Hybrid apps run just like a native mobile app, but are built using HTML5, CSS, and Javascript, and run inside of an application container like Apache Cordova (PhoneGap). This gives them the added advantage of having access to device capabilities, like the accelerometer, camera, and local file storage, that aren’t available to Mobile Web apps.
Why is this important? Gartner says, that by 2016, more than 50% of mobile apps deployed will be Hybrid apps. This is due to the fact that they cost less to develop, and time to market is less than that of a native app, especially if you are targeting multiple platforms like iOS and Android. This means that HTML5 usage is expected to grow significantly in the next few years.
Advantages of HTML5 Input Types
The HTML5 standard introduced several new input types for web forms (13 to be exact). Mobile browser vendors have embraced these new input types and have done something really incredible. They are using them to display customized virtual keyboard layouts that make it easier for users to fill out forms. They’ve also built in data validation and standardization, so email addresses, dates, and phone numbers are always formatted in a consistent way. The integration is so seamless, you may not have even noticed it. But here’s the proof.
Email Input
The “email” input type will validate data for the correct email address syntax. An iPhone will provide you with a custom keyboard showing the “@” and “.” to save you from toggling between multiple virtual keyboards. Android implementations will vary, but the Galaxy S3 below even adds a handy “.com” button.
Number Input
The “number” input type keyboard transformation is pretty obvious. The iPhone keyboard presents numbers and special characters for decimals and currency, while the Android keyboard simplifies things down to just the numbers and a “.” and “-‘.
Date Input
The “date” input type varies the most between platforms. The date selection in iOS is unique to its platform. Different Android implementations will show various types of calendar widgets depending on the make, model, and sometimes even the carrier. There is also a “time” input type which provides similar time selection controls.
Phone Number Input
The “tel” input type conveniently provides the built-in phone dialer keypad and bypasses the standard keyboard altogether.
URL Input
The “url” input type is a developer favorite because website links can be tricky for users to type in. iPhone provides a URL custom keyboard with buttons for “.”, “/”, and “.com”. User tip: Hold down the “.com” button to get additional choices like “.org” and “.net”. Notice the lack of a space bar (nice). Android does not currently support URL input types.
The goal of HTML5 Input Types is to simplify data entry and provide some basic data validation. Combine that with mobile devices that leverage their capability for creating virtual keyboards to complement this HTML5 specification, and we have a win-win. Filling out forms on a mobile device with its tiny keyboard can be a laborious. Developers can improve the user’s mobile experience by taking advantage of this simple feature to help minimize the number of keystrokes a user is required to type. While most modern browsers support HTML5 Input Types, the beauty of this specification is that older browsers that don’t know about them will display a simple text input to users. The experts at Bayshore Solutions can help you set up your HTML5 input types to create a better user experience for your customers. Get started using them today!
Richard Read is a Senior Developer at Bayshore Solutions—a Tampa Web Design, Web Development, and Internet Marketing Company.