A calendar script written for a mouse often never opens on a touch screen. Let phones use their own date control, keep typed dates possible, put a tappable phone number beside the form, and test on real phones.

The site

A car rental agency with an office downtown and a counter at the regional airport rents compact cars, minivans and pickup trucks, mostly to visitors and to people whose own car is in the shop.

Its home page opens with a booking box: pickup location, pickup date and time, return date and time, and a button that shows the cars available.

On a computer, clicking a date box opens a small calendar. Pick a day, pick a time from a list, and the search works in seconds.

On a phone, tapping the date box does nothing. No calendar opens, no keyboard appears, and pressing the button brings back a message asking for a pickup date.

The inference a visitor makes

People who book a rental car from a phone are often in a hurry: a traveller waiting at a baggage carousel, a driver whose car has broken down, a family planning tomorrow.

They tap the box twice, turn the phone sideways, and conclude that the site is broken or the agency too small to bother with. They book wherever the next search result lets them.

Nobody phones to report the fault. From the office, the only signs are a quiet booking page and the occasional caller who mentions that the website would not take a booking.

What goes wrong on a phone

Calendar widgets like this one are scripts added to a plain text box. Written for a mouse and a wide screen, they fail on phones in familiar ways:

This site has the third problem and the fourth. Either alone would be a nuisance; together they make booking from a phone impossible.

A box that refuses typing

The date boxes are set to read-only, a common way of forcing people to use the calendar and keeping out dates typed in odd formats.

On a computer that works, because the calendar always opens. On a phone, read-only removes the only fallback, so when the calendar fails the visitor is stuck.

Letting people type a date, with an example of the format beside the box, keeps a way in for anyone whose calendar fails, on any device.

Small targets on a shrunken page

The site is a fixed-width desktop design, so phones show it shrunk to fit. Even where a calendar does open on a phone, its days end up a few millimetres across.

The time lists hold every half hour of the day. On a phone they open as long scrolling lists, where it is easy to pick nine at night instead of nine in the morning.

An error nobody can find

When the button is pressed without dates, the message appears at the top of the booking box, which on a phone has already scrolled out of sight. The page seems to do nothing.

An error message should sit next to the field at fault, in words that say what to do next, such as choose a pickup date.

A worked example

The car rental agency's owner learned of the problem when a hotel front desk phoned to book for a guest who had given up on the site after several tries.

On the owner's own phone, the date boxes did nothing. The developer found a calendar script several years old, read-only boxes, and an outdated script library that failed on phone browsers.

The booking box now asks for dates in the standard way that phone browsers recognise, so iPhones and recent Android phones show their own date control, built for a fingertip.

Computers whose browsers lack such a control still get the script's calendar, now a current version. The boxes accept typed dates too, with the format shown beside them.

Times come from a short list covering opening hours. A tappable phone number sits above the box, and errors appear beside the field that needs attention.

The phone's own date control belongs to the browser rather than to a script on the page, so it opens wherever the browser does.

Testing on real phones

The browser on the office computer cannot show what phones do. Testing needs a real iPhone and a real Android phone, held both ways, with the keyboard open.

Test the whole booking: dates, times, the search, choosing a car, the form, payment and the confirmation. A form can pass every step on a computer and fail at the second on a phone.

Repeat the test after every change to the site, and once a season anyway, since phone browsers update themselves.

The phone number as the way out

Some visitors will always prefer to call, and some will meet a problem the site cannot solve. A tappable number above the booking box catches both before they leave.

It also tells the office something. Callers who say the site would not work are reporting a fault that no visit report will show.

The counter-case within the site

The calendar itself is not the mistake. On a computer it shows the days of the week, greys out past dates and stops a return date falling before the pickup.

Those are real advantages, and keeping them for computer users is sensible. Plenty of visitors still book from a desk.

The fault is a calendar with no way around it. Keep the script where it works, let phones use their own control, and leave typing open for everyone.

What to change

  1. Try a booking on your own phone today.
  2. Remove read-only from the date boxes.
  3. Let phones show their own date control.
  4. Keep an updated calendar for computers.
  5. Shorten the time lists to opening hours.
  6. Show errors beside the field concerned.
  7. Put a tappable phone number above the booking box.

Step one costs two minutes and answers the question. If the owner cannot book a car from a phone, no customer can either, and no report in the office will say so.

Rental sites can also lose the evening shopper by making guests ask which dates are free, the mistake behind a cabin rental that makes guests email about dates.

Frequently asked questions

Why does the date calendar not open on phones?

Many calendar scripts were written for a mouse and a wide screen. On a phone they open off the screen, wait for a hover, or fail on an outdated script.

Why not just make the date box read-only?

Read-only stops typed mistakes on a computer, but on a phone it removes the only fallback. If the calendar fails, the visitor has no way to enter a date.

What is the phone's own date control?

When a form asks for a date in the standard way, the browsers on iPhones and recent Android phones show their own date picker, built for touch screens.

Do computers still need the calendar script?

Some do. Browsers without their own date control should still get an updated calendar, and typed dates should be accepted, with an example of the format.

How should the booking form be tested?

On a real iPhone and a real Android phone, held both ways, through the whole booking from dates to confirmation, after every change and once a season.

Why put a phone number above the booking box?

Some visitors will always prefer to call, and some will hit a problem the site cannot solve. A tappable number gives them a way to book before they try another agency.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

Booking form never tried on a phone?

Send us your booking page, and we will try it on several phones and list exactly where it fails.

Start a Conversation