Mobile Friendly Contact Forms

Mobile Friendly Contact Forms


The way to go for mobile friendly contact forms is the touch-friendly CSS styling in order to make the buttons, controls and inputs with touchscreen experience.

1. Large touch target areas will definitely improve the form input fields

2. Other forms of input can also greatly benefit from input controls with CSS styling

3. HTML5 input types should be use to trigger keyboard events to aid the user on having  a great experience. Depending on the input type selected mobile browsers have different on-screen keyboards for different froms of data that should be taken into account. Just by including in the label the type="" and inside the quotes tel for phone numbers, url for websites, time for time, date for the date, e-mail for email we can make the keyboard behave accordingly with is very useful.

I constantly came across mobile websites that make me look for the @ when I have to enter my e-mail, or any other type of data that is not the default keyboard and as a user it is really annoying.

4. Another really useful feature is the tap-to-call telephone links. 

How many of you have encounter when browsing mobile websites a telephone number that you would like to call but you had to copy the phone number and then call? This is definitely a very useful feature that should be consider when doing mobile web apps.
A must to know is that some web browsers have by default the auto-detect behavior that is really annoying when normal digits that are not phone numbers are converted to phone numbers.
The best situation is to disable the auto-detection and enable it manually by specifying a telephone link and style it with the CSS selector.
In responsive design that use one for all, this approach is not so good because the desktop user will see the link but will not be able to use it.
Two ways around it are:
  • Having a different CSS stylesheet for mobile with is in my opinion the best - separating the mobile web app to the responsive design for desktop and tablets, and
  • To applying a tel link with a view port that is targeted by media queries for smartphone screens.
5. I hate the auto-correct and capitalization control.

The form input data with auto-correcting and capitalization are really annoying. In this case the autocorrect="off" and autocapitalize="off" comes in handy.



Comments

Post a Comment

Popular posts from this blog

WHY AREN’T MOBILE WEB DEVELOPERS DOING THEIR JOB?

I came across a very interesting website quirksmode.org in the Mobile section that explain beatifully in many parts what I believe that is the problem with mobile web design nowadays. I will be copying what I think is the most important points here. Some I might discuss but you will understand the probem when you read it. MOBILE WEB DEVELOPERS DOING THEIR JOB? The unique selling point of the web is that it runs on all devices; and not just on one platform. But it seems mobile web developers aren’t much interested in reaching out beyond one or two specific platforms. Developers should reach out to as many paltforms as humanly possible instead of confining themselves to the best ones. WHY ARE WEB DEVELOPERS INTERESTED IN MOBILE SO RELUCTANT TO VENTURE OUT BEYOUND THEIR iPHONE CONFORT ZONE? Mobile web projects for large companies are based on requirements written last year, during the height of the iPhone obsession. In addition, the iPhone’s share of mobile web traffic remains...
Read more

Why UX is neglected and its consequences for your business!

This article was the result a response to an article I have published in a LinkedIn group I belong Linked In Front End Developers group User Experience is the heart for any product or service because without a customer to purchase the product or service nobody will manufacture or build a product or service in the first place. This is a fact but it does not mean that clean code and security is less important.  E-commerce example from a security perspective Let's imagine that a customer have an e-commerce site that is the most easy to use and to make customers purchase a breeze, and it has the best conversion rate possible, but it has a terrible security and the site constantly breaks?  How long do you think the e-commerce owner is going to keep in business that way if his customers do not trust to use his wonderful easy to use e-commerce? Not for long however in this case the reason is clear - everybody knows that the problem is in the security and that the code...
Read more

GREAT FREE WEBSITE EMULATORS FOR TESTING HOW YOUR SITE LOOKS IN THE MOBILE

Image
GREAT FREE WEBSITE EMULATORS FOR TESTING HOW YOUR SITE LOOKS IN THE MOBILE The single most important thing you can do to make a website mobile-friendly is to test it on multiple smartphone and tablet platforms. Mobile Emulators lets you check how responsive and if all the functionalities it should have works well across different mobile platforms such as iPhone, iPad, Android and Blacberry without have to make the investment in all those devices. Mobile emulators are not perfect but they can help you to check the issues your website might have allowing you to take the corrective measures. Here are some great websites with emulators: 1. iPad Peek   ( http://ipadpeek.com/ ) - let you check if your website is compatible with iPad. 2. iPhone Tester ( http://iphonetester.com/ ) - A popular choice of web emulator for iPhone. Just enter the URL of your website and in real-time you can see how your site looks like on iPhone. 3. Mobile Phone Emulator ( http://www.mobilephone...
Read more