I’m currently working on redesigning a website for a hair salon in Atlanta Georgia by using WordPress, Bootstrap, SASS, jQuery, etc. The site currently is not responsive and it is looking very dated and I am working to bring it into the 21st century.
One of the things that too many web developers forget about while developing is usability and UI/UX TESTING. Oh – they make sure their code works, but often times forget about whether it provides a good user experience. I on the other hand, am CONSTANTLY TESTING the UI/UX design. As I make changes I test it on various browsers and ON ACTUAL PHONES. One thing I have seen developers ignore is the testing on the actual phones.
In this article I will go over a prime example of why UI/UX Testing is so important and NOT to wait to the last minute.  Don’t assume that just because it works great in the desktop browser’s responsive debugging tools that you won’t encounter a road block or a major usability problem when it actually comes time to use it on a physical device. I had to overcome A LOT of mobile device usability issues when I worked on the Latutuda.com mobile site and I gained a ton of experience with that. I even know the difference in how Apple displays the mobile keyboard versus how Android displays it. Yes – there is a difference and hopefully I will get to that in a later article.
So this is the current design of the Zonolite Hair Studios website, along with the “Appointment Request Page”…
This is the new design…
Well everything worked great with the datepicker until I tested it on my phone. Then I saw how the keyboard actually affected it.
The Mobile Keyboard Pops up when Using the Datepicker
The view prior to entering the “Select Date” field
Once the Date Field gets focus, the keyboard is displayed along with the datepicker. The problem is that the keyboard pushes all the content up, including the datepicker.
The only thing that can be done is to close the keypad and scroll the datepicker into view. Even worse was when changing the month in the datepicker. This action caused the keyboard to popup AGAIN!
Preventing the Mobile Keyboard from Popping up
After a lot of research and many dead-ends I found this….
How to prevent mobile keyboard to show when opening the picker?
I’m not afraid to give credit where credit is due. That led me to the solution.
I simply did this…
<label for="firstDate">Appointment Date</label> <div class="input-group date-input"> <div class="input-group-prepend"> <span class="input-group-text"><i class="fa fa-calendar"></i></span> </div> <input id="firstDate" class="form-control date" type="text" placeholder="Select Date" readonly="true"> </div>
$( ".date" ).datepicker({
beforeShowDay: DisableDays,
minDate: 0,
ignoreReadonly: true,
allowInputToggle: true
});
This was the result…
Now the first Select Date is set to readonly.
(I kept the second one without the readonly for testing purposes)
The keyboard no longer pops-up AND the datepicker is properly displayed. I also tested this in IE, along with tabbing to the field while on desktop. I haven’t encountered any issues.